Overview
Aperio Mobile App is a responsive, single-page application. It is a web application for your backend system based on Aperio API.
Mobile apps are run by the common runtime framework called Aperio Client. Each app has its own menu, set of HTML5 forms, actions etc. These components are rendered by Aperio Client. Aperio Client is an integral part of XT/Aperio framework while Mobile Apps are developed and published for the client separately.
Launching
Start mobile app by launching its URL. The link points to XT dispatcher where the app is published and ends with a path defined in the app configuration file. See the chapters Configuring mobile apps and Publishing mobile apps.
For example, if an XT Dispatcher runs on myserver at port 8200 and has published myapp, the app will be accessible with the link :
http(s)://myserver.company.com:8200/myapp
The client may be started with optional parameters that are provided as URL query parameters. See the list of all parameters below. There are 2 lists: one with general parameters and one for debuggin purposes.
General
| Parameter | What does it do | Example | Default |
|---|---|---|---|
| lng | Starts the app with the specified language. Use locale notation e.g. ’en’ for english, ’en_US’ for american english. Note: the language files must be installed togther with the app. | lng=sv | browser settings |
Example to start myapp with swedish language:
http(s)://myserver.company.com:8200/myapp?lng=sv
Debug
| Parameter | What does it do | Example | Default |
|---|---|---|---|
| develop | Turns on the development mode. This is a collective parameter equivalent to: tracing=true and form-cache=false. Recommended for debugging. | develop=true | false |
| tracing | Turns on client logging to browser console. The client will log API traffic, form transitions etc. | tracing=true | false |
| form-cache | Turns off browser form cache. | form-cache=false | true |
| md-cache | Turns off metadata cache. Note: degrades performance - use it only when needed (advanced). | md-cache=true | true |
| i18n-tracing | Turns on logging of translation messages to browser console (advanced). | i18n-tracing=true | false |
Client parts and functions
When you start an app, the first form is a login form where you need to provide credentials to sign in to your backend system.
Login
The starting form contains the following information: branding logo, app title, app secondary title, client version, app version, sign in fields.
Login form
After a succesfull login, an environment selection form may appear depending on your backend system option. Then, the main client page is open.
Main page
The main app page consists of the following parts: menu, title bar, form panel.
Main page
Menu
The menu consists of the menu title displayed on top and the menu content presented as list of menu items. Menu items have an icon and a label. Submenu items have the right-arrow icon.
Navigation
Items may be run by a single press/tap.
To go back from a submenu use the top-left left-arrow of the client toolbar. Alternatively, you can use browser’s Back function.
Note: on narrow screens the menu is hidden when a form is shown. To open the menu, press the left-arrow button (to the right on the client’s toobar). Then, to get back to your form, press the form icon that is placed to the right of the menu title bar.
Menu
Search
On the client’s toolbar, there is a Search button. Use it to find a menu item that contains the given phrase.
Menu search
Title bar
The main title bar contains the brand logo and the following actions:
- Menu search
- Client main functions (a hamburger menu)
Client functions
The list of client functions indlude the following:
- Curent user profile name
- Current environment e.g. Company (when available). Press the item to go to the environment selection screen.
- About Iptor Mobile - a general information about the product.
- Sign out - use it to log off the system and exit the app.
Client functions
To close the client functions panel, tap/click on any place outside the panel.
Form panel
This is the area where your app forms will be displayed. A form consists of 3 main visual parts:
Form’s title bar
The bar displays the following elements:
- the image of the menu item that the form was started from
- the form title
- default form action (if form has such)
- drop down menu with all form actions
Form title bar
Fields area
Here are placed all form fields, tables, web componetns etc.
Form fields
Action bar
The bar display all form actions as push buttons. This is the same list as displayed by the form’s drop down menu
Form action bar
Theming
The app theme is based on Style Sheet (CSS).
In future it will be possible to compile own style sheet.
The style may be defined on app level (configuration) or provided as a launch parameter.