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

    [00:00:07.580]
    hi and welcome to this low code in xxx

    [00:00:10.290]
    webinar I’m Craig white from the

    [00:00:12.450]
    evangelist team at mendax and I’ll be

    [00:00:14.370]
    taking you through today’s webinar

    [00:00:15.990]
    looking at multi-channel apps so each

    [00:00:22.529]
    month we’re looking at a different topic

    [00:00:25.019]
    and last month my colleague Sam and

    [00:00:26.939]
    black covered collaborative visual

    [00:00:28.590]
    development and you can find this

    [00:00:31.019]
    webinar if you go to Minh Dexcom and

    [00:00:33.120]
    click on demos in the top right

    [00:00:38.579]
    so as we’ve got here another just said

    [00:00:41.620]
    we’re covering the multi-channel apps

    [00:00:43.539]
    this month next month mobile experiences

    [00:00:46.809]
    so online and offline mobile apps and

    [00:00:50.800]
    then in August looking at integrated

    [00:00:52.839]
    smart apps so looking at integration

    [00:00:56.019]
    with other services to create proactive

    [00:00:58.449]
    context-aware apps so the structure of

    [00:01:01.390]
    today I’m just going to carry on with

    [00:01:02.829]
    this presentation go into a demo of the

    [00:01:05.770]
    product and the web modeler and then

    [00:01:07.960]
    we’ve got some time at the end for some

    [00:01:09.940]
    questions so if you have any questions

    [00:01:12.399]
    then please ask them during the call and

    [00:01:15.009]
    I’ll answer these at the end so mendax

    [00:01:18.280]
    is a low code platform that helps

    [00:01:21.119]
    enterprises collaborate between business

    [00:01:24.009]
    and IT and we do this by having a low

    [00:01:26.649]
    code platform that covers the whole

    [00:01:28.000]
    application lifecycle you can create

    [00:01:31.000]
    apps ten times faster and using 70%

    [00:01:33.880]
    fewer resources compared to traditional

    [00:01:35.770]
    methods of development so I found this

    [00:01:39.490]
    quote from Gartner the States

    [00:01:41.429]
    enterprises aren’t focusing on UX and

    [00:01:44.160]
    aren’t really delivering value to

    [00:01:46.149]
    customers so I thought well how how do

    [00:01:50.050]
    we overcome this UX challenge so firstly

    [00:01:54.520]
    I think we need to rapidly innovate and

    [00:01:56.770]
    test new ideas and by doing this we can

    [00:02:00.129]
    so by adopting an agile scrum framework

    [00:02:02.459]
    you can deliver quickly and always

    [00:02:05.770]
    ensure that you’ve got a working minimal

    [00:02:07.629]
    Viable Product at the end of each sprint

    [00:02:09.640]
    you can overcome app fatigue with a

    [00:02:14.530]
    great user experience so you really need

    [00:02:17.379]
    to give your customers a really good

    [00:02:19.209]
    reason to use your app and if this is a

    [00:02:22.030]
    mobile app a really good reason to

    [00:02:23.709]
    download and keep that up on their

    [00:02:25.269]
    device and then thirdly

    [00:02:29.790]
    to give your customers a choice of

    [00:02:31.799]
    channel so they can access and engage

    [00:02:35.760]
    with you via their desktop tablet mobile

    [00:02:37.950]
    and make the experience convenient for

    [00:02:40.500]
    them which leads me into multi-channel

    [00:02:43.790]
    so multi-channel as I say is about

    [00:02:46.739]
    making it convenient for your customer

    [00:02:48.560]
    think about what your customer needs

    [00:02:50.700]
    from the interaction with your business

    [00:02:52.980]
    and give them the best experience you

    [00:02:55.079]
    can and I mentioned giving your

    [00:02:58.109]
    customers choice so you may have

    [00:03:00.480]
    responsive pages that will adapt to the

    [00:03:02.400]
    screen size automatically you might have

    [00:03:05.370]
    specifically designed pages for a

    [00:03:07.919]
    certain device type and you might also

    [00:03:10.680]
    have a native mobile app for Android and

    [00:03:13.409]
    iOS and all of those things go it flow

    [00:03:18.239]
    into a continuous user experience so

    [00:03:21.569]
    ensuring your brand is positively

    [00:03:23.609]
    portrayed across all these channels we

    [00:03:25.859]
    want to ensure that that design and

    [00:03:27.510]
    experience is consistent and has the

    [00:03:29.730]
    same look and feel and then also having

    [00:03:32.370]
    a single platform obviously helps so

    [00:03:35.220]
    there are enterprises that may already

    [00:03:37.739]
    be multi-channel and have a website and

    [00:03:40.379]
    an iOS app and Android app but each

    [00:03:43.199]
    one’s probably developed separately

    [00:03:44.760]
    updated maintained separately and each

    [00:03:47.310]
    with their own separate back-end

    [00:03:48.690]
    infrastructure and so if you want to

    [00:03:51.599]
    make a change then you probably have to

    [00:03:53.879]
    update it in multiple different places

    [00:03:56.190]
    and maybe different teams managing that

    [00:03:59.069]
    as well so I found this image which

    [00:04:02.340]
    gives a good example of a multi-channel

    [00:04:04.650]
    experience you have your customer on the

    [00:04:08.609]
    right-hand side with a phone and they

    [00:04:12.060]
    can make a request via via the phone

    [00:04:14.970]
    whether it’s a web app or it could be a

    [00:04:17.220]
    native mobile app that requests then

    [00:04:20.669]
    goes to your planners your planners are

    [00:04:23.220]
    using a desktop site and then they pass

    [00:04:25.860]
    those appointments onto your field

    [00:04:27.630]
    engineer and then they can obviously go

    [00:04:30.060]
    and service the customer request and the

    [00:04:32.820]
    field engineers are viewing on a tablet

    [00:04:34.620]
    so here you’ve got know you’ve got three

    [00:04:37.409]
    different channels there’s three

    [00:04:39.479]
    different ways of viewing your app but

    [00:04:41.400]
    the app you build

    [00:04:43.439]
    if you use the mendax loco platform or

    [00:04:46.139]
    have the same back end and your

    [00:04:48.839]
    front-end can reuse a lot of components

    [00:04:51.209]
    but you will optimize it so it works

    [00:04:53.849]
    perfectly across those three different

    [00:04:56.159]
    channels so this image here helps to

    [00:04:59.519]
    show how that would work and I’ll go

    [00:05:03.479]
    into an example of this in my demo so

    [00:05:06.110]
    again I’ve got those different channels

    [00:05:08.189]
    there and you can see that the desktop

    [00:05:10.439]
    for example shows an image and some

    [00:05:12.449]
    writing in the columns the tablet is

    [00:05:16.349]
    showing that as an image in an image and

    [00:05:20.789]
    writing in rows and then the phone

    [00:05:23.369]
    displays them one on top of the other

    [00:05:24.989]
    and on the left hand side here I just

    [00:05:27.929]
    have a few things that I will cover in

    [00:05:29.699]
    today’s demo

    [00:05:40.990]
    okay so firstly I’m just going to go to

    [00:05:44.550]
    men Dexcom and you can find the app

    [00:05:47.500]
    gallery by going to solutions and app

    [00:05:49.960]
    gallery now the app gallery is built by

    [00:05:53.650]
    the Evangelist team and we’ve made here

    [00:05:56.110]
    nine apps that showcase different

    [00:05:58.900]
    industries different use cases that

    [00:06:00.910]
    hopefully will inspire you in building

    [00:06:03.490]
    your next app but the reason I’ve

    [00:06:06.550]
    brought this up is because I wanted to

    [00:06:08.260]
    show you an example so here I’m going to

    [00:06:10.900]
    look at the claims portal that we built

    [00:06:16.650]
    and there

    [00:06:20.100]
    some blogs and some videos on this app

    [00:06:23.010]
    but the main point here is I want to

    [00:06:25.290]
    preview this app and here’s myself

    [00:06:29.190]
    helping someone with a claim so an

    [00:06:31.950]
    insurance claim and here we actually use

    [00:06:34.650]
    a conversational user interface so you

    [00:06:36.960]
    take someone through a claims journey

    [00:06:38.540]
    now again the reason I wanted to go to

    [00:06:40.950]
    this first is because I’m showing here

    [00:06:42.390]
    okay what would you like to claim for

    [00:06:43.560]
    and I’ve got here two different items I

    [00:06:46.680]
    can tick this go to the next the next

    [00:06:49.500]
    part

    [00:06:50.220]
    I’ve also up here and can view the same

    [00:06:52.830]
    app by on a phone so this is now

    [00:06:57.030]
    simulating a phone and so now we have

    [00:06:59.270]
    Chris our other evangelists and this

    [00:07:05.310]
    will take you through that exact same

    [00:07:06.570]
    journey so we haven’t had to build

    [00:07:09.960]
    anything different and we’ve maybe

    [00:07:13.500]
    mentioned that we’ve maybe said that the

    [00:07:15.480]
    the toolbar at the top will look

    [00:07:18.210]
    slightly different and when it goes down

    [00:07:20.250]
    to a smaller device size and what we’ve

    [00:07:23.070]
    also done is we’ve said that rather than

    [00:07:24.750]
    displaying the image there on a phone we

    [00:07:27.840]
    just want to show the categories but in

    [00:07:31.080]
    this but it gives you you know gives you

    [00:07:33.180]
    a consistent user experience it allows

    [00:07:35.610]
    your customer to engage with this

    [00:07:37.740]
    business so it allows you them to engage

    [00:07:40.620]
    with the same the same process and and

    [00:07:44.360]
    they can still you know they can still

    [00:07:47.490]
    get their claim in and this was a big

    [00:07:51.690]
    example of showing multi-channel here so

    [00:07:57.810]
    this actually uses the Atlas framework

    [00:08:02.850]
    so the Atlas UI which is the design

    [00:08:06.000]
    language built by mendax and this is

    [00:08:09.150]
    what you will get when you’ll see will

    [00:08:10.920]
    go into the web model of shortly and you

    [00:08:13.770]
    get a number of phone templates and

    [00:08:16.040]
    responsive templates also includes

    [00:08:19.560]
    native mobile features and we’ll talk

    [00:08:22.380]
    about more of this one in the mobile

    [00:08:24.800]
    webinar next month but we also have

    [00:08:28.919]
    across the top here templates

    [00:08:31.930]
    which you can use and this gives you a

    [00:08:35.600]
    good example of and the different types

    [00:08:37.700]
    of use cases and when to use these and

    [00:08:40.669]
    what building blocks each one of these

    [00:08:43.100]
    templates uses so you can see on this

    [00:08:46.370]
    dashboard for example it uses a default

    [00:08:49.460]
    page header and it uses the card metrics

    [00:08:52.160]
    building block so there is multiple

    [00:08:56.000]
    different phone templates there we also

    [00:08:59.600]
    have responsive templates so you can see

    [00:09:02.810]
    we’ve got some dashboards and dashboard

    [00:09:04.400]
    charts so it makes it really easy for

    [00:09:06.560]
    you to have a great starting point and

    [00:09:09.290]
    then if you want to you can customize

    [00:09:11.060]
    these further and this is all based on

    [00:09:13.460]
    open standards such as CSS sass and

    [00:09:16.340]
    bootstrap so you can you can change

    [00:09:18.680]
    these however you want and tailor them

    [00:09:20.990]
    to your business but the important thing

    [00:09:24.230]
    is these building blocks here as you can

    [00:09:25.700]
    see they are made so you can just drag

    [00:09:29.060]
    them into your app and it and as I said

    [00:09:31.640]
    it gives you a really great starting

    [00:09:32.900]
    point for building that app and then you

    [00:09:34.760]
    can iterate on that so once you’ve built

    [00:09:36.320]
    the first version you can see what parts

    [00:09:38.840]
    you might want to improve and change and

    [00:09:41.870]
    then finally we have widgets so widgets

    [00:09:47.360]
    again give you the option of introducing

    [00:09:50.900]
    some buttons and calendar options and

    [00:09:54.500]
    charts image carousels and maybe more

    [00:09:59.840]
    custom check boxes and there’s some

    [00:10:03.740]
    descriptions in here of kind of how to

    [00:10:05.720]
    use them as well if you also go into the

    [00:10:08.120]
    documentation you can click on

    [00:10:09.980]
    documentation and it gives you some

    [00:10:11.990]
    examples of how to use that feature so

    [00:10:16.690]
    I’m going to go into use the MINIX

    [00:10:19.280]
    platform now and I’m going to create a

    [00:10:21.170]
    brand new app so there are some

    [00:10:25.440]
    Artur wraps in here and I’d actually

    [00:10:27.120]
    suggest that you do the introduction

    [00:10:29.610]
    tour it gives you a good overview of the

    [00:10:31.440]
    platform and how to build your app from

    [00:10:33.450]
    the from the beginning um so I’m gonna

    [00:10:36.960]
    go in here and I am actually going to

    [00:10:38.220]
    choose a blank app even though there are

    [00:10:39.750]
    some starter apps in here such as

    [00:10:41.610]
    building an event app or an asset

    [00:10:43.380]
    manager and and I’m just gonna choose

    [00:10:45.900]
    blank app and call this locating 30 call

    [00:10:53.190]
    it multi-channel so this is now creating

    [00:10:58.560]
    your app in the background it’s also

    [00:11:00.900]
    creating an environment and a

    [00:11:02.250]
    collaboration space where your team can

    [00:11:05.400]
    work on an app together it’s also

    [00:11:08.090]
    setting up a sandbox environment where

    [00:11:12.030]
    you can push your application into a

    [00:11:15.510]
    sandbox environment so you can view your

    [00:11:18.210]
    app and see what it looks like and

    [00:11:20.900]
    anyone can then view that URL to see how

    [00:11:25.170]
    your app is progressing and maybe

    [00:11:28.380]
    testing as well so give that URL to

    [00:11:30.750]
    someone else in your business and ask

    [00:11:32.490]
    them to have a look test your app get

    [00:11:34.050]
    some new ideas and also get feedback so

    [00:11:39.080]
    I’m going to go into editing my app and

    [00:11:42.650]
    we have a web muddler which we aim

    [00:11:47.790]
    towards citizen developers or less

    [00:11:51.330]
    technical developers or guess the other

    [00:11:53.760]
    use case is a developer can sit with a

    [00:11:57.720]
    business user and design the user

    [00:12:00.330]
    interface so really help them understand

    [00:12:03.300]
    what this app is going to look like and

    [00:12:06.450]
    then they can sync these changes into

    [00:12:08.490]
    the desktop modeler which is for our

    [00:12:11.070]
    more technical developers and they can

    [00:12:13.140]
    add in things like integration with

    [00:12:16.980]
    other services using the desktop modeler

    [00:12:20.510]
    so I’m going to start by dragging in a

    [00:12:23.339]
    new header and I’m going to delete the

    [00:12:26.310]
    existing one here so new header here

    [00:12:31.500]
    just can see name this and as you can

    [00:12:40.710]
    see I can inline edit now so

    [00:12:45.650]
    multi-channel apps so I can actually

    [00:12:49.710]
    just double click on the text box you do

    [00:12:51.720]
    have the option over here to change the

    [00:12:53.790]
    caption you can change the size of it

    [00:12:56.940]
    over here so very easily change this

    [00:13:02.190]
    change how it looks and you can also add

    [00:13:05.810]
    any design properties here as well so

    [00:13:09.030]
    you can change spacing and alignment

    [00:13:12.080]
    without having to know any CSS so I’m

    [00:13:15.810]
    just gonna leave I’m going to change the

    [00:13:17.340]
    title and leave the rest of it as it is

    [00:13:20.000]
    if I go into the toolbox now and I’ve

    [00:13:23.400]
    already used one of these headers from

    [00:13:24.750]
    this header list and I would like to

    [00:13:27.510]
    actually use a layout grid so in the

    [00:13:32.430]
    layout section I can just drag in this

    [00:13:34.920]
    grid and you can see now I’m given some

    [00:13:39.300]
    options here on the right-hand side as

    [00:13:41.070]
    how I’d like this layout grid to look on

    [00:13:44.339]
    a different device so if I say I’d like

    [00:13:48.570]
    4 columns I can see that it’s now giving

    [00:13:52.050]
    me an option to display these on a

    [00:13:54.150]
    tablet and on a phone so at the moment

    [00:13:58.080]
    I’m looking at the phone view I can

    [00:14:00.420]
    easily switch across here to a tablet

    [00:14:02.820]
    view or to a responsive view so when I

    [00:14:07.620]
    add my cards which I’m going to do next

    [00:14:10.470]
    so in here I’m going to add a card

    [00:14:12.270]
    action so very simply can add these

    [00:14:16.110]
    cards into each one of these columns and

    [00:14:19.580]
    as I said before this will now adjust so

    [00:14:23.339]
    I’ve now got 4 by 4 on the tablet and

    [00:14:28.710]
    mobile view which was really useful just

    [00:14:32.040]
    to give you a very quick indication of

    [00:14:34.140]
    how this is going to look so I’d like to

    [00:14:37.230]
    change some of these icons so I’m just

    [00:14:41.040]
    going to make this as a plus because

    [00:14:44.120]
    gonna add a customer say add customer

    [00:14:58.180]
    and over here I’m going to show a

    [00:15:01.790]
    customer list so once you’ve added those

    [00:15:03.920]
    customers let’s show users there’s also

    [00:15:10.310]
    a list which is a nice daikon as well so

    [00:15:15.550]
    customer customers so this is going to

    [00:15:19.850]
    show me a list of customers when I click

    [00:15:21.620]
    on it and just for completeness

    [00:15:23.660]
    completeness I will name these bottom

    [00:15:26.330]
    two and let’s just change this icon as

    [00:15:31.910]
    well

    [00:15:40.750]
    I’d like to do is add a new customer now

    [00:15:43.000]
    before I do that so we’ve created a page

    [00:15:46.960]
    already and what I would like to do now

    [00:15:49.300]
    is create the the domain model so this

    [00:15:52.270]
    is where the data is going to be stored

    [00:15:53.860]
    in the background so in here I need to

    [00:15:57.850]
    create a new entity and I’m going to

    [00:16:00.820]
    call this customer and within customer I

    [00:16:04.360]
    need to create attributes so attributes

    [00:16:07.090]
    are your fields essentially so I need a

    [00:16:11.230]
    new one called name and I need one

    [00:16:16.870]
    called email and as well you can change

    [00:16:21.970]
    the type in here as well so I’m gonna

    [00:16:24.250]
    use a string here but you can select a

    [00:16:27.330]
    boolean or currency date time and all

    [00:16:31.240]
    the things you would expect if you were

    [00:16:34.260]
    in the same way as when you’re using

    [00:16:36.310]
    Excel you can format data in a certain

    [00:16:38.650]
    way so I’m gonna ask for a phone number

    [00:16:46.089]
    and I think I’m gonna ask for location

    [00:16:49.120]
    as well because I’m going to add a map

    [00:16:50.440]
    in okay so now I have a customer and now

    [00:16:55.930]
    I have four attributes I’m going to

    [00:16:58.000]
    store about that customer now if I go

    [00:17:00.760]
    back to my page it’s in my home page I’m

    [00:17:04.689]
    going to add micro flow logic to this

    [00:17:07.600]
    button here now a micro flow is as I

    [00:17:11.560]
    said the logic within mendax and so this

    [00:17:14.890]
    will perform a certain action when I

    [00:17:16.930]
    click this button so I’m gonna create a

    [00:17:21.040]
    new micro flow I’m going to call this

    [00:17:24.280]
    add customer because when we click on

    [00:17:28.150]
    the button that’s exactly what it’s

    [00:17:30.250]
    going to do it’s going to add a new

    [00:17:31.570]
    customer so the first thing we need to

    [00:17:33.700]
    do is create an object so create a

    [00:17:35.710]
    customer object I’m going to click on

    [00:17:38.710]
    the properties here and select the

    [00:17:41.230]
    customer entity that we’ve just created

    [00:17:54.420]
    so now that’s going to create as it says

    [00:17:57.010]
    there a new customer now the next thing

    [00:17:59.830]
    I needed to do is I needed to show a new

    [00:18:01.300]
    page so down here Handley we have a show

    [00:18:06.040]
    page button activity so I’m drag the

    [00:18:09.940]
    show page activity in here and I’ll set

    [00:18:14.140]
    the page so in fact before I do that I

    [00:18:17.410]
    will select the object to pass so the

    [00:18:19.270]
    object is this new customer so I’m going

    [00:18:22.390]
    to select the new customer and so that

    [00:18:25.330]
    when it goes to that new page it’s gonna

    [00:18:27.250]
    have an empty customer object to work

    [00:18:30.070]
    with so I’m gonna create a new page and

    [00:18:34.690]
    this is where it’s giving me options and

    [00:18:36.400]
    I mentioned earlier when I was showing

    [00:18:37.330]
    you the Atlas UI design and the

    [00:18:40.300]
    templates the building blocks so these

    [00:18:42.850]
    are page templates in here that you can

    [00:18:45.310]
    select from so you have a number of

    [00:18:48.190]
    dashboards lists forms now here I’m

    [00:18:53.020]
    going to select prefilled page contents

    [00:18:55.060]
    based on the customer entity know this

    [00:18:57.700]
    is actually going to limit me now – just

    [00:18:59.500]
    the forms but that’s okay because I want

    [00:19:01.720]
    to add a new customer and that’s what I

    [00:19:04.480]
    want I’m gonna add here the title called

    [00:19:08.970]
    add customer and create this and now we

    [00:19:13.930]
    have a page I click this button here

    [00:19:16.270]
    that’s going to actually just take me to

    [00:19:17.620]
    that page that we’ve just created and as

    [00:19:19.720]
    you can see it’s already put in the four

    [00:19:22.090]
    text fields to give me the input fields

    [00:19:28.450]
    required for those four attributes it’s

    [00:19:31.270]
    also created a Save button and a cancel

    [00:19:33.250]
    button automatically so a cancel button

    [00:19:35.560]
    we’ll just go back to the first page and

    [00:19:38.020]
    the Save button will commit the data

    [00:19:41.110]
    that you enter into that data model the

    [00:19:43.360]
    domain model and again this will work

    [00:19:47.980]
    across different devices we can

    [00:19:51.070]
    customize how that looks another time so

    [00:19:56.080]
    now I would like to go back to the home

    [00:20:00.430]
    bit and so I would like to show a list

    [00:20:03.640]
    of customers so if I click on this

    [00:20:06.340]
    button here I’m not going to

    [00:20:10.119]
    micro so I’m just gonna click on this

    [00:20:11.829]
    show a page button because I don’t need

    [00:20:15.759]
    to create the object I just need to show

    [00:20:17.529]
    the new page so this one is going to be

    [00:20:20.319]
    called customer list and I’m gonna use

    [00:20:26.529]
    lists I’m gonna use this list blocks

    [00:20:28.209]
    here so what I can do here is looking

    [00:20:33.819]
    and so first actually I need to select

    [00:20:36.459]
    my data source for this list so that’s

    [00:20:40.449]
    going to be customer so now when I click

    [00:20:46.029]
    on the title here I can actually type an

    [00:20:50.099]
    open curly braket and select a name for

    [00:20:58.539]
    this text here I’m going to do the same

    [00:21:01.599]
    thing and it’s going to prompt me for

    [00:21:03.219]
    email and then the same thing for phone

    [00:21:08.289]
    number so really easy it’s accessing

    [00:21:11.799]
    those attributes in the domain model so

    [00:21:15.849]
    it’s going to pull those through into a

    [00:21:17.019]
    list now a list view will repeat these

    [00:21:19.419]
    objects so we only have to amend this

    [00:21:22.359]
    top one here and as you can see it’s

    [00:21:24.309]
    showing the repetition further down and

    [00:21:28.349]
    don’t think I’m going to use this button

    [00:21:30.189]
    actually so I’m just going to display

    [00:21:34.779]
    the name email phone number and let’s

    [00:21:38.169]
    redo this header to match the last one

    [00:21:51.910]
    it’s

    [00:21:53.410]
    I’m here as well to make it a bit

    [00:21:55.360]
    different okay

    [00:21:59.680]
    now the last thing I’d like to do is

    [00:22:01.860]
    that’s just not publishing this now and

    [00:22:08.740]
    just so we don’t have to wait shortly

    [00:22:10.900]
    and so I’m going to get a Google Maps

    [00:22:15.090]
    widget I’m just going to put this

    [00:22:18.040]
    underneath here so first thing it’s

    [00:22:22.030]
    telling me is that it needs a source so

    [00:22:26.470]
    in the settings here I’m going to select

    [00:22:32.040]
    context

    [00:22:39.520]
    and select the address attribute so I’ve

    [00:22:42.580]
    got location here I’m gonna select that

    [00:22:45.340]
    and it’s going to default to or after

    [00:22:48.670]
    damn and actually as I said earlier you

    [00:22:51.790]
    can add some spacing in here so just

    [00:22:54.940]
    gonna put the medium spacing on here and

    [00:22:57.340]
    again without knowing any CSS I can just

    [00:22:59.890]
    select the medium and it’s going to put

    [00:23:01.210]
    some spacing between these objects here

    [00:23:03.820]
    are these elements okay so think so

    [00:23:11.410]
    you’re out to the home page so we’ve got

    [00:23:13.059]
    add customer we can add in those

    [00:23:15.429]
    customer details including a location

    [00:23:17.650]
    you have a customer page or we can view

    [00:23:20.830]
    that and so it’s already published but

    [00:23:24.400]
    I’m just going to update those last

    [00:23:25.630]
    couple of changes so this is deploying

    [00:23:29.650]
    to the sandbox environment and I’ve got

    [00:23:33.520]
    a couple of options here so I can view

    [00:23:36.130]
    the app as a desktop preview or as a

    [00:23:38.890]
    fine preview so let’s first to the phone

    [00:23:41.230]
    preview so this is a simulated phone

    [00:23:45.580]
    view so I can add a customer in here so

    [00:23:49.620]
    let’s add myself in here and

    [00:23:59.500]
    hurt myself in London I’m gonna create a

    [00:24:03.309]
    couple more just so it displays and

    [00:24:06.070]
    nicely on hearsay I’ll add some more

    [00:24:08.380]
    evangelists and Simon’s often in that

    [00:24:18.340]
    Boston office so I’ll add in different

    [00:24:20.559]
    location in there and I know Chris was

    [00:24:23.590]
    in Rotterdam last week say I’ll put

    [00:24:27.520]
    Chris there and okay great so now when I

    [00:24:43.120]
    click on customers we’re going to see

    [00:24:45.039]
    that information displayed in our app

    [00:24:47.230]
    now the reason is on this Google map is

    [00:24:52.150]
    because we haven’t at least set the zoom

    [00:24:54.190]
    level so if i zoom out I’ll say I’m in

    [00:24:57.309]
    London Boston and Rotterdam so what I’m

    [00:25:04.630]
    going to actually do is going to go back

    [00:25:06.070]
    and and make a quick change so if i go

    [00:25:09.730]
    to i go here and i click on the widget

    [00:25:16.470]
    I’m going to the zoom level change this

    [00:25:26.799]
    to believe 15 and I’ll turn this auto

    [00:25:29.650]
    zoom off so I can see it’s already

    [00:25:32.440]
    changed there and I’ll just update again

    [00:25:37.049]
    so again this is just gonna update my

    [00:25:39.370]
    model online perfect let’s view that up

    [00:25:43.000]
    again and I click customers perfect so

    [00:25:47.950]
    I’ve got myself Simon and Chris three

    [00:25:51.280]
    different locations displaying our

    [00:25:53.140]
    information now as I said before you

    [00:25:56.409]
    have an option here to look at this in

    [00:25:58.720]
    the desktop and it will work in the same

    [00:26:01.990]
    way you’ve got your ad customer

    [00:26:06.310]
    and then you have your customers but

    [00:26:09.220]
    it’s it’s gone now it’s now got more

    [00:26:11.500]
    room to play with it’s put these across

    [00:26:13.620]
    and that just shows that the Atlas UI

    [00:26:17.350]
    and the building blocks and allow you to

    [00:26:20.080]
    build something that’s going to work

    [00:26:21.400]
    across different device types and the

    [00:26:27.700]
    last thing I’m actually going to do is

    [00:26:29.200]
    show you the last thing on the web

    [00:26:31.000]
    modeler is show you the theme customizer

    [00:26:33.480]
    so I can in here change the colors I can

    [00:26:37.840]
    add a different logo so in the top left

    [00:26:40.240]
    there was a mendax logo I’m just going

    [00:26:42.730]
    to add the Atlas logo and you can

    [00:26:45.790]
    actually go in to here and change your

    [00:26:49.510]
    different brand colors now we’ve got

    [00:26:52.150]
    some predefined brand colors button

    [00:26:54.250]
    since I’ve uploaded this logo it’s

    [00:26:56.500]
    actually changed my color palette down

    [00:26:58.270]
    here so this is my logo colors though

    [00:27:00.490]
    it’s pulled from this so if you update

    [00:27:02.590]
    your brand your logo for your brand then

    [00:27:06.100]
    you’ll see your logo colors in here so

    [00:27:08.050]
    you can very easily say I’d like to pick

    [00:27:10.120]
    my primary and secondary colors from

    [00:27:12.970]
    your own logo

    [00:27:15.090]
    so once I’ve applied that style

    [00:27:19.560]
    we’ll see that update in the toolbar at

    [00:27:23.140]
    the top so I’ve got that there now and

    [00:27:24.930]
    I’ll just do one final update and we can

    [00:27:28.000]
    have a look at that change

    [00:27:37.790]
    so if I click on phone preview now we

    [00:27:40.580]
    can see the logo has changed there now

    [00:27:46.160]
    the other thing you all will see on here

    [00:27:47.630]
    is a view on mobile device so I’m going

    [00:27:50.150]
    to give this a try now so I’m just going

    [00:27:53.510]
    to connect up my phone and so what

    [00:27:55.730]
    you’ll see is a mirror of my phone and

    [00:28:00.400]
    just connect into that now so I’ve

    [00:28:05.090]
    already opened up the ios app store and

    [00:28:10.540]
    i’m search for mendax

    [00:28:13.300]
    so on here i’m going to click open and

    [00:28:17.320]
    here is the mendax app and if i click on

    [00:28:20.990]
    the top left i get an option to scan QR

    [00:28:26.390]
    code so i’m going to scan that code on

    [00:28:29.600]
    the screen now and this is going to load

    [00:28:32.060]
    up the app that i’ve just built so

    [00:28:34.880]
    what’s really nice about this is you can

    [00:28:36.290]
    actually test it on a mobile device so

    [00:28:38.780]
    we just saw the preview and the phone

    [00:28:41.120]
    preview on the on the browser now I can

    [00:28:44.570]
    actually show the app working on my

    [00:28:47.600]
    phone so now I can walk to a colleague’s

    [00:28:50.900]
    desk

    [00:28:51.350]
    show them the app that I’ve just built

    [00:28:53.330]
    and I can show them it working on a

    [00:28:55.370]
    mobile and we have a navigation menu

    [00:28:57.880]
    here as well which we didn’t look at

    [00:29:00.500]
    this time but you could add in more

    [00:29:02.150]
    navigation in there too to move yourself

    [00:29:04.070]
    around the app so if you download the

    [00:29:07.610]
    mendax mobile app you’ll be able to do

    [00:29:09.710]
    that and show people you the app that

    [00:29:12.050]
    you bill

    [00:29:17.220]
    so ultimately you need to provide the

    [00:29:20.110]
    right experience for your customer you

    [00:29:22.510]
    should give your customer the choice to

    [00:29:23.590]
    engage with you in different ways so

    [00:29:25.150]
    whether this is through a responsive web

    [00:29:26.740]
    app which can be viewed across any

    [00:29:28.240]
    device or a native mobile app which can

    [00:29:30.520]
    be downloaded from the App Store and

    [00:29:32.550]
    which gives you access to native device

    [00:29:35.260]
    functionality such as swiping or using

    [00:29:37.780]
    the camera and and the other thing is if

    [00:29:41.050]
    you aren’t sure the best what the best

    [00:29:43.030]
    way is then rapidly innovate using a low

    [00:29:46.510]
    code platform to test your ideas and

    [00:29:48.520]
    iterate upon them so you saw very

    [00:29:51.340]
    quickly I was able to build an idea and

    [00:29:53.580]
    build a simple app to store customers

    [00:29:57.340]
    and we could then iterate upon this to

    [00:29:59.920]
    add in ratings week add in notes about

    [00:30:02.410]
    each customer but making your app better

    [00:30:05.590]
    after each development sprint and what I

    [00:30:09.400]
    really like as well as the as I said the

    [00:30:11.260]
    mobile the MINIX mobile app where you

    [00:30:12.940]
    can scan that QR code and view the app

    [00:30:15.850]
    and makes it really tangible to not only

    [00:30:19.630]
    not only you and your development team

    [00:30:21.730]
    but also to key business stakeholders so

    [00:30:26.830]
    I hope that overview of how you can

    [00:30:28.510]
    build multi-channel apps with the mendax

    [00:30:30.340]
    low code platform has given you some

    [00:30:31.900]
    ideas of apps you can build yourself

    [00:30:34.050]
    please check out the app gallery and

    [00:30:36.780]
    join us for the next webinar Thanks