Tip:
Highlight text to annotate it
X
As you should know by now the world has gone mobile and
your users will expect to be able to access your applications from
anywhere. Fortunately with the OutSystems Platform you can now
easily create responsive applications that work on any device.
Let's create an application called contacts and when I create a new application
it will use a responsive theme called London by default.
Let's see here, London theme
responsive
Let's create a page to see how it works first we'll import an Excel
file to add some data to our application
and we'll create a page with drag-and-drop
Let's open it...
You can see how the page looks in desktop
tablets and smartphones.
Now this also works for more custom
pages. let's add another page,
let's call it metrics. Now I'm going to drag a container
here I'm going to resize it
four columns
let me put a style here for you to see it better
four columns. I'm going to drag another container here
it will have eight columns by default
and I'm going to put a CardGreen
here, OK. Eight columns.
This is how it will look in the
in desktop with these wide columns
on tablet you can see
here that the columns are
narrower. What happens on smartphones is that
everything that's sized to grid will stack on top of each other
so another thing that's responsive is the menu.
I'm going to add this page to the menu and I'm going to publish my application.
Now I'll be able to see it also
how this application will behave in different devices at runtime
So, let' me open the application, I'll need to login.
I'm going to use the admin user
You can see here do sliding menu on smartphone
You can see the list expanding and collapsing
and this page will look different on a tablets, and on the desktop.
So creating responsive applications is always a challenge
but as you can see, with OutSystems Platform, the heavy lifting is done for you.
So now it's your turn: use responsive on your next new application
and reach your users wherever they are!