Using the AppLauncher Component
Description
The AppLauncher component is designed to address the following problem: You have designed an application that is accessed through some URL.
For example:
www.mycompany.com/salesApp
Some of the users of this application will be launching your app in a desktop browser, some will be launching it in a browser running on an iOS phone, others on an iOS tablet, other on an Android tablet and so on. You do not want to have a different URL for each class of user. However, you want each class of user to launch a different startup component or page.
By using the AppLauncher component, you can automatically determine what type of device the user is using and then launch the appropriate component, or .a5w page, using the appropriate stylesheet. You can even navigate to a different URL.
For example, if a user us using a desktop browser, you might want to launch a TabbedUI component. If the user is using a phone, you might want to launch a particular UX component, but with one stylesheet for the users on an iOS device, another stylesheet for users on an Android device, and so on. The AppLauncher component can also, optionally, prompt for username and password, and it can authenticate the user before it launches the startup component.
How the AppLauncher Component Works
The App Launcher component makes an Ajax callback to the server after it is launched. When the callback is made, information about the device that the user is on is passed back to the server. This information is available to determine what startup component to load.
How to Define the Startup Component
To define the Startup Component, click the smart field for the 'Startup component' property.
This will open a builder where you can define a series of logical expressions. When the Ajax callback to the server is made, these logical expressions are evaluated in the order in which they are defined. For example, in the screen shown below, if 'logicalExpression1' is true, then the UX component called 'ux1' is loaded using the GrBlue stylesheet. The logical expressions are Xbasic expressions that can reference 'system fields' (such as client.isIPad, client.isAndroid, etc.)
The system fields that the logical expression can reference are actually properties in the A5.flags global Javascript object. You can add you own system fields in the AppLauncher by adding your own code to the client-side 'beforeTargetIsLoaded' event. Your code would add new properties to the global A5.flags object. For example, you could add this code to the event:
A5.flags.__myvar = "alpha"
Then, in the logical expressions you define to select the startup component, you could reference this value as follows:
client.__myvar
Two Ways to Launch the Startup Component
There are two ways to load the application launcher:
full page reload, or a
inject html in the app launcher component
If the target component is a TabbedUI, PageLayout, or a5w page, then you have to use the full page reload option. If you do not use the full page reload option and the style you want to use for the target component is not the same as the style used in the AppLauncher you will have to add the target component style name to the 'Additional styles' property.