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