Course : ISYS6203003 - Mobile Applications

Development
Year : 2022

Accessing the Cloud:

Working with a Remote API

Session 12
Make it Mobile
Learning goals
• Understand the value of mobile apps
• Create a mobile-specific page
• Learn to work with nanoflows
• Set up role-based home pages
Responsive, Native, PWA
Why PWA?

 Installable

 Reliable

 Capable
Mobile Apps

Do you need a mobile specific solution?

Mobile specific features:

• Navigation profile
• Mobile specific layouts
• (Native) Mobile widgets
User Story 12

As a trainee, I want to view upcoming training

events including their geolocation, so that I can
choose the closest one.
Approach

 Navigation:
• Create a new PWA navigation profile.
• Specify the default home page.
• Configure a role-based homepage for Trainee to show a list of training events, incl. location.
 Layout: Jimmy wants to optimize the app for mobile use.
 Native functions: Jimmy wants the app to make use of the maps app on each device.
 Configure Responsive Web navigation profile
• Open Navigation in the App Explorer
• Check the three boxes under Progressive
Web App.
• Change the Application title to
LearnNow.
 Add Phone Web Offline navigation profile

• Add navigation profile Phone web offline

• Check the box Allow ‘Add to Home screen’

prompt

• Set the default home page to new page

TrainingEvent_Overview_Mobile
1. Layout option: Phone (Web)
2. Template: List Double Line.
3. Navigation layout to Phone_Topbar.
 Complete Responsive Web navigation profile
• Set the role-based page for Trainee to
open TrainingEvent_Overview_Mobile
page.
 Configure the mobile page
• Page name: TrainingEvents_Overview_Mobile
• Using the Properties pane set the page title to Training
Events
• Connect List view to TrainingEvent entity
• Do you want to automatically fill the contents of the list
view? – Choose Yes
• Add a Layout grid widget with two columns to structure
the page
• Move text widgets to the left column
• Between the text widgets add Container widgets
• Remove the search constraint in the List view by double
clicking “Search on” field and removing attribute path
What is a Nanoflow?

• Allow to express the logic of your application

• Benefits for mobile:

- Runs directly on the browser/device (speed benefit)
- Can be used in an offline app
Nanoflow Commons module
 Add Location icon & Show location nanoflow
• Add a button:
Caption: empty
Icon: Map
• Connect to nanoflow
ACT_TrainingEvent_ShowLocation
 Configure ACT_TrainingEvent_ShowLocation nanoflow

• Configure the Location argument to

$TrainingEvent/MyFirstModule.TrainingEvent_Location/MyFirstModule.Location/Address
 Add Show Route button & connect to nanoflow

• Add a button:
Caption: View Route
Icon: Road
Style: Primary
• Connect to nanoflow
ACT_TrainingEvent_ViewRoute
 Configure ACT_TrainingEvent_ShowRoute nanoflow
• Configure Location parameter by specifying
$TrainingEvent/MyFirstModule.TrainingEvent_Location/MyFirstModule.Location/Address
User Story 13

As an administrator, I would like trainees to be

able to share information about training events, in
order to promote offerings of the LearnNow app.
 Add Share button and connect to nanoflow
• Add a button:
• Caption: Share
• Icon: Share
• Connect to nanoflow:
ACT_TrainingEvent_Share
 Configure nanoflow ACT_TrainingEvent_Share
• Set Url to ’https://academy.mendix.com/link/path/31/Become-a-Rapid-Developer/’
• Set the Text to ’Check out the offerings from the Mx Academy!’
• Set the Title to ’Mendix Academy’
 Show only upcoming Training Events
• Open TrainingEvent_Overview_Mobile page
• Change the data source of List view to Xpath
• Add Xpath constraint
[EndDate >= ‘[%BeginOfCurrentDay%]’]
Update module security: Page access
Update module security: Nanoflow access
 Publish to cloud
• Run & Publish Device & Browser Result
Desktop browser Responsive Web profile is loaded
• Preview in the Responsive browser
Android - Chrome Phone Web Offline profile is loaded
• Login with demo_administrator data, create browser
basic data iOS - Any browser If there is a Phone Web profile, this is
loaded; otherwise, the Responsive Web
• Copy the app link and open on the mobile, login profile is loaded. This is because offline
as demo_trainee PWAs are not (yet) supported on iOS.

https://docs.mendix.com/refguide/progressive-we
b-app/
Thank You
@schoolisbinus

http://sis.binus.ac.id

schoolisbinus

SIS Binus

http://www.facebook.com/schoolisbinus

schoolisbinus@binus.ac.id

http://www.drone-maniac.com/news-drone-maniac-more-and-more-popular/thank-