Low-Code in 30: Building Beautiful Multi-Channel Apps

Learn how Mendix’s low-code platform allows you to build beautiful multi-channel apps.

  • Transcript

    hi and welcome to this low code in xxx

    webinar I’m Craig white from the

    evangelist team at mendax and I’ll be

    taking you through today’s webinar

    looking at multi-channel apps so each

    month we’re looking at a different topic

    and last month my colleague Sam and

    black covered collaborative visual

    development and you can find this

    webinar if you go to Minh Dexcom and

    click on demos in the top right

    so as we’ve got here another just said

    we’re covering the multi-channel apps

    this month next month mobile experiences

    so online and offline mobile apps and

    then in August looking at integrated

    smart apps so looking at integration

    with other services to create proactive

    context-aware apps so the structure of

    today I’m just going to carry on with

    this presentation go into a demo of the

    product and the web modeler and then

    we’ve got some time at the end for some

    questions so if you have any questions

    then please ask them during the call and

    I’ll answer these at the end so mendax

    is a low code platform that helps

    enterprises collaborate between business

    and IT and we do this by having a low

    code platform that covers the whole

    application lifecycle you can create

    apps ten times faster and using 70%

    fewer resources compared to traditional

    methods of development so I found this

    quote from Gartner the States

    enterprises aren’t focusing on UX and

    aren’t really delivering value to

    customers so I thought well how how do

    we overcome this UX challenge so firstly

    I think we need to rapidly innovate and

    test new ideas and by doing this we can

    so by adopting an agile scrum framework

    you can deliver quickly and always

    ensure that you’ve got a working minimal

    Viable Product at the end of each sprint

    you can overcome app fatigue with a

    great user experience so you really need

    to give your customers a really good

    reason to use your app and if this is a

    mobile app a really good reason to

    download and keep that up on their

    device and then thirdly

    to give your customers a choice of

    channel so they can access and engage

    with you via their desktop tablet mobile

    and make the experience convenient for

    them which leads me into multi-channel

    so multi-channel as I say is about

    making it convenient for your customer

    think about what your customer needs

    from the interaction with your business

    and give them the best experience you

    can and I mentioned giving your

    customers choice so you may have

    responsive pages that will adapt to the

    screen size automatically you might have

    specifically designed pages for a

    certain device type and you might also

    have a native mobile app for Android and

    iOS and all of those things go it flow

    into a continuous user experience so

    ensuring your brand is positively

    portrayed across all these channels we

    want to ensure that that design and

    experience is consistent and has the

    same look and feel and then also having

    a single platform obviously helps so

    there are enterprises that may already

    be multi-channel and have a website and

    an iOS app and Android app but each

    one’s probably developed separately

    updated maintained separately and each

    with their own separate back-end

    infrastructure and so if you want to

    make a change then you probably have to

    update it in multiple different places

    and maybe different teams managing that

    as well so I found this image which

    gives a good example of a multi-channel

    experience you have your customer on the

    right-hand side with a phone and they

    can make a request via via the phone

    whether it’s a web app or it could be a

    native mobile app that requests then

    goes to your planners your planners are

    using a desktop site and then they pass

    those appointments onto your field

    engineer and then they can obviously go

    and service the customer request and the

    field engineers are viewing on a tablet

    so here you’ve got know you’ve got three

    different channels there’s three

    different ways of viewing your app but

    the app you build

    if you use the mendax loco platform or

    have the same back end and your

    front-end can reuse a lot of components

    but you will optimize it so it works

    perfectly across those three different

    channels so this image here helps to

    show how that would work and I’ll go

    into an example of this in my demo so

    again I’ve got those different channels

    there and you can see that the desktop

    for example shows an image and some

    writing in the columns the tablet is

    showing that as an image in an image and

    writing in rows and then the phone

    displays them one on top of the other

    and on the left hand side here I just

    have a few things that I will cover in

    today’s demo

    okay so firstly I’m just going to go to

    men Dexcom and you can find the app

    gallery by going to solutions and app

    gallery now the app gallery is built by

    the Evangelist team and we’ve made here

    nine apps that showcase different

    industries different use cases that

    hopefully will inspire you in building

    your next app but the reason I’ve

    brought this up is because I wanted to

    show you an example so here I’m going to

    look at the claims portal that we built

    and there

    some blogs and some videos on this app

    but the main point here is I want to

    preview this app and here’s myself

    helping someone with a claim so an

    insurance claim and here we actually use

    a conversational user interface so you

    take someone through a claims journey

    now again the reason I wanted to go to

    this first is because I’m showing here

    okay what would you like to claim for

    and I’ve got here two different items I

    can tick this go to the next the next


    I’ve also up here and can view the same

    app by on a phone so this is now

    simulating a phone and so now we have

    Chris our other evangelists and this

    will take you through that exact same

    journey so we haven’t had to build

    anything different and we’ve maybe

    mentioned that we’ve maybe said that the

    the toolbar at the top will look

    slightly different and when it goes down

    to a smaller device size and what we’ve

    also done is we’ve said that rather than

    displaying the image there on a phone we

    just want to show the categories but in

    this but it gives you you know gives you

    a consistent user experience it allows

    your customer to engage with this

    business so it allows you them to engage

    with the same the same process and and

    they can still you know they can still

    get their claim in and this was a big

    example of showing multi-channel here so

    this actually uses the Atlas framework

    so the Atlas UI which is the design

    language built by mendax and this is

    what you will get when you’ll see will

    go into the web model of shortly and you

    get a number of phone templates and

    responsive templates also includes

    native mobile features and we’ll talk

    about more of this one in the mobile

    webinar next month but we also have

    across the top here templates

    which you can use and this gives you a

    good example of and the different types

    of use cases and when to use these and

    what building blocks each one of these

    templates uses so you can see on this

    dashboard for example it uses a default

    page header and it uses the card metrics

    building block so there is multiple

    different phone templates there we also

    have responsive templates so you can see

    we’ve got some dashboards and dashboard

    charts so it makes it really easy for

    you to have a great starting point and

    then if you want to you can customize

    these further and this is all based on

    open standards such as CSS sass and

    bootstrap so you can you can change

    these however you want and tailor them

    to your business but the important thing

    is these building blocks here as you can

    see they are made so you can just drag

    them into your app and it and as I said

    it gives you a really great starting

    point for building that app and then you

    can iterate on that so once you’ve built

    the first version you can see what parts

    you might want to improve and change and

    then finally we have widgets so widgets

    again give you the option of introducing

    some buttons and calendar options and

    charts image carousels and maybe more

    custom check boxes and there’s some

    descriptions in here of kind of how to

    use them as well if you also go into the

    documentation you can click on

    documentation and it gives you some

    examples of how to use that feature so

    I’m going to go into use the MINIX

    platform now and I’m going to create a

    brand new app so there are some

    Artur wraps in here and I’d actually

    suggest that you do the introduction

    tour it gives you a good overview of the

    platform and how to build your app from

    the from the beginning um so I’m gonna

    go in here and I am actually going to

    choose a blank app even though there are

    some starter apps in here such as

    building an event app or an asset

    manager and and I’m just gonna choose

    blank app and call this locating 30 call

    it multi-channel so this is now creating

    your app in the background it’s also

    creating an environment and a

    collaboration space where your team can

    work on an app together it’s also

    setting up a sandbox environment where

    you can push your application into a

    sandbox environment so you can view your

    app and see what it looks like and

    anyone can then view that URL to see how

    your app is progressing and maybe

    testing as well so give that URL to

    someone else in your business and ask

    them to have a look test your app get

    some new ideas and also get feedback so

    I’m going to go into editing my app and

    we have a web muddler which we aim

    towards citizen developers or less

    technical developers or guess the other

    use case is a developer can sit with a

    business user and design the user

    interface so really help them understand

    what this app is going to look like and

    then they can sync these changes into

    the desktop modeler which is for our

    more technical developers and they can

    add in things like integration with

    other services using the desktop modeler

    so I’m going to start by dragging in a

    new header and I’m going to delete the

    existing one here so new header here

    just can see name this and as you can

    see I can inline edit now so

    multi-channel apps so I can actually

    just double click on the text box you do

    have the option over here to change the

    caption you can change the size of it

    over here so very easily change this

    change how it looks and you can also add

    any design properties here as well so

    you can change spacing and alignment

    without having to know any CSS so I’m

    just gonna leave I’m going to change the

    title and leave the rest of it as it is

    if I go into the toolbox now and I’ve

    already used one of these headers from

    this header list and I would like to

    actually use a layout grid so in the

    layout section I can just drag in this

    grid and you can see now I’m given some

    options here on the right-hand side as

    how I’d like this layout grid to look on

    a different device so if I say I’d like

    4 columns I can see that it’s now giving

    me an option to display these on a

    tablet and on a phone so at the moment

    I’m looking at the phone view I can

    easily switch across here to a tablet

    view or to a responsive view so when I

    add my cards which I’m going to do next

    so in here I’m going to add a card

    action so very simply can add these

    cards into each one of these columns and

    as I said before this will now adjust so

    I’ve now got 4 by 4 on the tablet and

    mobile view which was really useful just

    to give you a very quick indication of

    how this is going to look so I’d like to

    change some of these icons so I’m just

    going to make this as a plus because

    gonna add a customer say add customer

    and over here I’m going to show a

    customer list so once you’ve added those

    customers let’s show users there’s also

    a list which is a nice daikon as well so

    customer customers so this is going to

    show me a list of customers when I click

    on it and just for completeness

    completeness I will name these bottom

    two and let’s just change this icon as


    I’d like to do is add a new customer now

    before I do that so we’ve created a page

    already and what I would like to do now

    is create the the domain model so this

    is where the data is going to be stored

    in the background so in here I need to

    create a new entity and I’m going to

    call this customer and within customer I

    need to create attributes so attributes

    are your fields essentially so I need a

    new one called name and I need one

    called email and as well you can change

    the type in here as well so I’m gonna

    use a string here but you can select a

    boolean or currency date time and all

    the things you would expect if you were

    in the same way as when you’re using

    Excel you can format data in a certain

    way so I’m gonna ask for a phone number

    and I think I’m gonna ask for location

    as well because I’m going to add a map

    in okay so now I have a customer and now

    I have four attributes I’m going to

    store about that customer now if I go

    back to my page it’s in my home page I’m

    going to add micro flow logic to this

    button here now a micro flow is as I

    said the logic within mendax and so this

    will perform a certain action when I

    click this button so I’m gonna create a

    new micro flow I’m going to call this

    add customer because when we click on

    the button that’s exactly what it’s

    going to do it’s going to add a new

    customer so the first thing we need to

    do is create an object so create a

    customer object I’m going to click on

    the properties here and select the

    customer entity that we’ve just created

    so now that’s going to create as it says

    there a new customer now the next thing

    I needed to do is I needed to show a new

    page so down here Handley we have a show

    page button activity so I’m drag the

    show page activity in here and I’ll set

    the page so in fact before I do that I

    will select the object to pass so the

    object is this new customer so I’m going

    to select the new customer and so that

    when it goes to that new page it’s gonna

    have an empty customer object to work

    with so I’m gonna create a new page and

    this is where it’s giving me options and

    I mentioned earlier when I was showing

    you the Atlas UI design and the

    templates the building blocks so these

    are page templates in here that you can

    select from so you have a number of

    dashboards lists forms now here I’m

    going to select prefilled page contents

    based on the customer entity know this

    is actually going to limit me now – just

    the forms but that’s okay because I want

    to add a new customer and that’s what I

    want I’m gonna add here the title called

    add customer and create this and now we

    have a page I click this button here

    that’s going to actually just take me to

    that page that we’ve just created and as

    you can see it’s already put in the four

    text fields to give me the input fields

    required for those four attributes it’s

    also created a Save button and a cancel

    button automatically so a cancel button

    we’ll just go back to the first page and

    the Save button will commit the data

    that you enter into that data model the

    domain model and again this will work

    across different devices we can

    customize how that looks another time so

    now I would like to go back to the home

    bit and so I would like to show a list

    of customers so if I click on this

    button here I’m not going to

    micro so I’m just gonna click on this

    show a page button because I don’t need

    to create the object I just need to show

    the new page so this one is going to be

    called customer list and I’m gonna use

    lists I’m gonna use this list blocks

    here so what I can do here is looking

    and so first actually I need to select

    my data source for this list so that’s

    going to be customer so now when I click

    on the title here I can actually type an

    open curly braket and select a name for

    this text here I’m going to do the same

    thing and it’s going to prompt me for

    email and then the same thing for phone

    number so really easy it’s accessing

    those attributes in the domain model so

    it’s going to pull those through into a

    list now a list view will repeat these

    objects so we only have to amend this

    top one here and as you can see it’s

    showing the repetition further down and

    don’t think I’m going to use this button

    actually so I’m just going to display

    the name email phone number and let’s

    redo this header to match the last one


    I’m here as well to make it a bit

    different okay

    now the last thing I’d like to do is

    that’s just not publishing this now and

    just so we don’t have to wait shortly

    and so I’m going to get a Google Maps

    widget I’m just going to put this

    underneath here so first thing it’s

    telling me is that it needs a source so

    in the settings here I’m going to select


    and select the address attribute so I’ve

    got location here I’m gonna select that

    and it’s going to default to or after

    damn and actually as I said earlier you

    can add some spacing in here so just

    gonna put the medium spacing on here and

    again without knowing any CSS I can just

    select the medium and it’s going to put

    some spacing between these objects here

    are these elements okay so think so

    you’re out to the home page so we’ve got

    add customer we can add in those

    customer details including a location

    you have a customer page or we can view

    that and so it’s already published but

    I’m just going to update those last

    couple of changes so this is deploying

    to the sandbox environment and I’ve got

    a couple of options here so I can view

    the app as a desktop preview or as a

    fine preview so let’s first to the phone

    preview so this is a simulated phone

    view so I can add a customer in here so

    let’s add myself in here and

    hurt myself in London I’m gonna create a

    couple more just so it displays and

    nicely on hearsay I’ll add some more

    evangelists and Simon’s often in that

    Boston office so I’ll add in different

    location in there and I know Chris was

    in Rotterdam last week say I’ll put

    Chris there and okay great so now when I

    click on customers we’re going to see

    that information displayed in our app

    now the reason is on this Google map is

    because we haven’t at least set the zoom

    level so if i zoom out I’ll say I’m in

    London Boston and Rotterdam so what I’m

    going to actually do is going to go back

    and and make a quick change so if i go

    to i go here and i click on the widget

    I’m going to the zoom level change this

    to believe 15 and I’ll turn this auto

    zoom off so I can see it’s already

    changed there and I’ll just update again

    so again this is just gonna update my

    model online perfect let’s view that up

    again and I click customers perfect so

    I’ve got myself Simon and Chris three

    different locations displaying our

    information now as I said before you

    have an option here to look at this in

    the desktop and it will work in the same

    way you’ve got your ad customer

    and then you have your customers but

    it’s it’s gone now it’s now got more

    room to play with it’s put these across

    and that just shows that the Atlas UI

    and the building blocks and allow you to

    build something that’s going to work

    across different device types and the

    last thing I’m actually going to do is

    show you the last thing on the web

    modeler is show you the theme customizer

    so I can in here change the colors I can

    add a different logo so in the top left

    there was a mendax logo I’m just going

    to add the Atlas logo and you can

    actually go in to here and change your

    different brand colors now we’ve got

    some predefined brand colors button

    since I’ve uploaded this logo it’s

    actually changed my color palette down

    here so this is my logo colors though

    it’s pulled from this so if you update

    your brand your logo for your brand then

    you’ll see your logo colors in here so

    you can very easily say I’d like to pick

    my primary and secondary colors from

    your own logo

    so once I’ve applied that style

    we’ll see that update in the toolbar at

    the top so I’ve got that there now and

    I’ll just do one final update and we can

    have a look at that change

    so if I click on phone preview now we

    can see the logo has changed there now

    the other thing you all will see on here

    is a view on mobile device so I’m going

    to give this a try now so I’m just going

    to connect up my phone and so what

    you’ll see is a mirror of my phone and

    just connect into that now so I’ve

    already opened up the ios app store and

    i’m search for mendax

    so on here i’m going to click open and

    here is the mendax app and if i click on

    the top left i get an option to scan QR

    code so i’m going to scan that code on

    the screen now and this is going to load

    up the app that i’ve just built so

    what’s really nice about this is you can

    actually test it on a mobile device so

    we just saw the preview and the phone

    preview on the on the browser now I can

    actually show the app working on my

    phone so now I can walk to a colleague’s


    show them the app that I’ve just built

    and I can show them it working on a

    mobile and we have a navigation menu

    here as well which we didn’t look at

    this time but you could add in more

    navigation in there too to move yourself

    around the app so if you download the

    mendax mobile app you’ll be able to do

    that and show people you the app that

    you bill

    so ultimately you need to provide the

    right experience for your customer you

    should give your customer the choice to

    engage with you in different ways so

    whether this is through a responsive web

    app which can be viewed across any

    device or a native mobile app which can

    be downloaded from the App Store and

    which gives you access to native device

    functionality such as swiping or using

    the camera and and the other thing is if

    you aren’t sure the best what the best

    way is then rapidly innovate using a low

    code platform to test your ideas and

    iterate upon them so you saw very

    quickly I was able to build an idea and

    build a simple app to store customers

    and we could then iterate upon this to

    add in ratings week add in notes about

    each customer but making your app better

    after each development sprint and what I

    really like as well as the as I said the

    mobile the MINIX mobile app where you

    can scan that QR code and view the app

    and makes it really tangible to not only

    not only you and your development team

    but also to key business stakeholders so

    I hope that overview of how you can

    build multi-channel apps with the mendax

    low code platform has given you some

    ideas of apps you can build yourself

    please check out the app gallery and

    join us for the next webinar Thanks