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

• App Development
• Low-Code Development
• Mendix Platform
• Mobile

• 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