Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
docs:3400_how_to:1000_mobile_applications [2022/08/21 12:10] – removed - external edit (Unknown date) 127.0.0.1docs:3400_how_to:1000_mobile_applications [2026/02/16 23:50] (current) – aware_support3
Line 1: Line 1:
 +====== Mobile Applications ======
 +===== How To... =====
 +<accordion id="mobileapps" collapsed="true">
  
 +<panel type="primary" title="create a mobile version of a desktop application">
 +Starting from version 7.0 all features available for desktop applications are available for mobile applications as well and the other way around. However, because real estate on mobile platforms is severely limited you may want to create a special version for mobile phones and/or tablets that will use slightly different features compared to the desktop application.
 +
 +To create a mobile version of your application, first create a special visual perspective for a particular access level. Select the “platform support” for this perspective to be “mobile phones” or “phones and tablets”. This perspective should then start all other queries, forms and processes of the mobile application. Most of the time you will just need to create a variation of your regular form, query, process or a visual perspective to be used in a mobile application. For more details see the [[docs:3300_mobile_apps:monaca|AwareIM For Mobile Devices]] document.
 +</panel>
 +
 +<panel type="primary" title="display thumbnails – images with descriptions that the user can tap on">
 +This feature is very often used in mobile applications. To create a thumbnail view use a custom presentation of query results. See the “[[docs:2500_config_apps:1100_add_edit_queries:0200_display_results|Displaying Query Results]]” section (“[[docs:2500_config_apps:1100_add_edit_queries:0200_display_results:0200_custom_view|Custom Presentation]]” – thumbnail view presentation template). You can use either the “custom template” option or a “custom mobile template” option. The latter uses a special widget that supports grouping, infinite scrolling checkbox selection and operations. 
 +
 +If you use the “custom template” you will be able to use a “scroll view”, which is very popular for mobile applications – it displays one image at a time and users can swipe to the next or previous image.</panel>
 +<panel type="primary" title="display grids – lists with column names"> 
 +Use regular grids (Queries with standard presentation). If your query uses inline editing or filtering make sure you tick the “Mobile rendering” option for the query (available through the More button)</panel>
 +
 +<panel type="primary" title="define mobile application menus">
 +Usually for a mobile application running on a phone you would define two menus – the top toolbar and the slide-out menu (of course, both are optional). Defining the toolbar is simple – you just define a menu of the Toolbar type in the Top Bar frame of your visual perspective. Most likely you will place at least two buttons on this toolbar – the button that slides out the main menu and the button that implements the “Go back” functionality. 
 +
 +To define the “Back button” just define an operation of the “Go Back” type and add it to the toolbar. To define a button that slides out the main menu define this menu for the left or right frames first (the menu must be of the Plain List type). Then define the operation of the “Slide-In Left Frame or “Slide-In Right Frame” types and add this operation to your toolbar.
 +
 +You will probably have some real estate left on the toolbar. You can use this real estate for context operations – for example, to display Previous/Next buttons to traverse a form or some other operations invoked from a form or a query. In order to do this you need to designate the “Top Application Menu” as location for your form or query operations (see the [[docs:2500_config_apps:0500_add_edit_objects:0200_defining_forms:0500_operations|Adding/Editing Panel Operations]] section for more details). You can also use a dynamic toolbar at the bottom for such operations. The toolbar will only appear when the corresponding form or query is displayed.
 +</panel>
 +
 +<panel type="primary" title="display forms"> 
 +Use regular forms for business objects. Some of the features of business object forms that you may find useful on mobile devices are listed below:
 +
 +  - Specify label with as percentage rather than absolute value
 +  - Display Yes/No attributes as “on/off switches”
 +  - Use native browser controls for dates and times – some mobile browsers have very rich and good looking mobile-specific in-built controls for entering dates and timestamps. You can use them in your forms instead of the more desktop oriented //**AwareIM**// in-built controls.
 +  - Mobile style tabs – if the form has several form sections the tabs are displayed. You can select the “mobile style tabs” option to display tabs using mobile-friendly style – with larger font and top icon alignment. The option is available in the Navigation dialog of the Form Editor
 +  - Mobile style of the form caption – most of the time you won’t display the default panel header for your mobile forms, because it uses too much real estate. You will either display no header at all or you will display a caption of the form in the middle of the screen. Selecting the “mobile style header” option in the Panel Header dialog will achieve that
 +
 +</panel>
 +
 +<panel type="primary" title="display “gallery view”"> ======
 +A popular feature on mobile devices is to show one image at a time with the user being able to swipe back and forth to display the next or previous image. To implement this feature use [[docs:2000_concepts:0700_data_presentation:0200_query_results_custom|Queries in Custom Form]], select the “Use Custom Data Template” option and then tick the “Use mobile scroll view” checkbox </panel>
 +
 +<panel type="primary" title="upload an image from camera or photo library of the phone">
 +One approach is to define an attribute of the Picture type for one of your forms. //**AwareIM**// will automatically generate controls to upload the image from a camera or photo library. This approach will work in both browser-based mobile applications and native mobile applications. 
 +
 +Another approach is to use the ''[[a_f:a:mobile_camera_snap_into|MOBILE CAMERA SNAP INTO]]'' action in some process (or ''[[a_f:a:mobile_camera_get_into|MOBILE CAMERA GET INTO]]'' action to get access to photo library). When AwareIM executes this action the user will be able to upload a photo from camera or a photo library. The image will be written into the picture attribute specified in the action. For example:
 +
 +<code aim>MOBILE CAMERA SNAP INTO MyObject.MyPictureAttribute </code>
 +
 +<callout type="primary" icon="true" title="note"> These actions will only work for native mobile applications – they will not work inside the mobile browser. Please see [[docs:3300_mobile_apps]] and [[docs:3000_rule_language|Rule Language Guide]] for more details about these actions.</callout>
 +</panel>
 +
 +<panel type="primary" title="display a picture full screen">
 +
 +The quickest way is to define an attribute of the Picture type in some object and then define a special form with one form section and one cell showing the Picture attribute. For more details see the [[docs:3300_mobile_apps:monaca|AwareIM For Mobile Devices]] document.</panel>
 +
 +<panel type="primary" title="display a PDF document"> 
 +Just define an attribute of the Document type to store your PDF document. //**AwareIM**// will automatically generate controls to view the document on mobile devices at runtime.</panel>
 +
 +<panel type="primary" title="determine and watch location of the current user"> 
 +It may be necessary for your application to determine the location of the current user – for example, if it needs to calculate users or places of interest closest to the current user. 
 +
 +The location of the current user can be determined by using the ''[[a_f:a:mobile_get_location_into|MOBILE GET LOCATION INTO]]'' action of the Rule Language. Before you can use this action, though, you need to add a special MGeoLocation object into your business space version. To do this right click on the Business Objects in the Configuration Elements Tree and select the ''Add GeoLocation'' object from the popup menu. Then you can use the ''[[a_f:a:mobile_get_location_into|MOBILE GET LOCATION INTO]]'' action that will write the current longitude and latitude (and some other values) of the current user into the attributes of the ''MGeoLocation'' object. For example:
 +
 +<code aim>CREATE MGeoLocation
 +MOBILE GET LOCATION INTO MGeoLocation
 +DISPLAY MESSAGE 'Longitude is ' + MobileGeoLocation.Longitude</code>
 +
 +You can use this instance of the ''MobileGeoLocation'' object to display the location on a GoogleMap, for example. Or you can provide rules that calculate the distance between geo locations using the ''DISTANCE'' function.
 +
 +You can also record changes to the user location. This can be done by using the ''[[a_f:a:mobile_start_location_watch_into|MOBILE START LOCATION WATCH INTO]]'' action. This action will automatically track changes to the user location and write them into the provided instance of the MobileGeoLocation object. For example:
 +
 +<code aim>MOBILE START LOCATION WATCH INTO MGeoLocation</code>
 +
 +Tracking changes can be stopped using the ''[[a_f:a:mobile_stop_location_watch_from|MOBILE STOP LOCATION WATCH FROM]]'' action. For example:
 +
 +<code aim>MOBILE STOP LOCATION WATCH FROM MGeoLocation</code>
 +
 +Note that all geo location actions can be used in both browser-based mobile and non-mobile applications as well as in native mobile applications.
 +</panel>
 +
 +<panel type="primary" title="build native mobile applications">
 +
 +This is explained in the “[[docs:3300_mobile_apps:monaca]]” section in the [[docs:3300_mobile_apps:monaca]] document. 
 +
 +See [[docs:5000_videos:350_native_mobile_apps]]
 +
 +</panel>
 +
 +<panel type="primary" title="remember user credentials to prevent multiple logins">
 +
 +On mobile phones a user may want to login only the first time he/she accesses an application and then the application should remember the user credentials, so that the next time the user accesses the application he/she does not have to login again. //**AwareIM**// provide a form called ''logonM.html'' that includes a checkbox called “Remember me”. If the user ticks this checkbox he/she will not have to login again. The default URL for this form is:
 +
 +[[http://localhost:8080/AwareIM/logonOp.aw?domain=BusinessSpaceName&mobile_login=true|]]
 +
 +To force the browser to display a login form after  the user has already been remembered add the “auto_login=false” to the URL:
 +
 +[[http://localhost:8080/AwareIM/logonOp.aw?domain=BusinessSpaceName&mobile_login=true&auto_login=false|]]</panel>
 +
 +<panel type="primary" title="send push notifications to a mobile phone">
 +
 +Sending push notifications to mobile phones is only supported for native mobile applications. If you want to send push notifications to mobile phones in your native mobile applications there are several major steps involved. Most of them need only to be done once.
 +
 +  - Setup Apple and Google pre-requisites (for iOS and Android phones) – this should only be done once.
 +  - Enter these pre-requisites into AwareIM (also done once only)
 +  - Configure push notification rules in AwareIM to receive or send push notifications
 +
 +===== Step 1 =====  
 +To enable mobile push notifications, you need to set up Google's Firebase Cloud Messaging (FCM) service.
 + 
 +  - Go to Firebase Developers Console (https://console.firebase.google.com/) and create a project.
 +  - Add an Android application for this project (when creating a zip file for the native application make sure that the package name corresponds to the package name of the Android application).
 +  - Go to the "Settings" area of the application and in the General tab download the ''google-services.json'' file.
 +  - Record the project id on the same screen
 +  - Go to the Cloud Messaging tab and generate a private key for the application. Save this key in a secure location on your machine.
 +  - Enter the location of the ''google-services.json'' file, the downloaded file with the private key and the project id in the fields below.
 +  - Add an iOS application to the project. Make sure that the bundle ID of the application matches the package name of the Android application
 +  - Enroll into the Apple Development program (if not enrolled already) and log into the Apple Developer Portal. Go to the Certificates and Identifiers page. Create a key for push notifications (make sure Push Notifications is selected when creating the key).
 +  - Download the key and keep it in a safe location
 +  - Import this key into the iOS application in Firebase (in the Cloud Messaging tab). When importing the key specify the ID of the key that you can find on the Certificates page in Apple Developer and the Apple team ID that you can see in the top right corner of the Certificates page.
 +  - In the Firebase console under the ''General'' tab export ''GoogleService-info.plist''. 
 +
 +===== Step 2. Enter iOS and Android pre-requisites in AwareIM ===== 
 +In the Configuration Tool, double click on the Business Space Version you want to change and click on ''Push Notifications'' property in the list of version properties. A dialog will popup. In the FCM Settings section of the dialog enter the location of the ''google-services.json'' file, the location of the ''GoogleService-info.plist'' file, path to the private key file and Project ID. Once you click OK AwareIM will automatically add two predefined business objects (''MobilePhone'' and ''CMTopic'') and one predefined notification ''MobilePushNotification'' to your business space version.
 +
 +===== Step 3. Configure push notification rules in your application ===== 
 +1. Subscribe to a topic to receive a push notification 
 +If you want to subscribe to a topic you need to setup management of the predefined ''CMTopic'' object that represents subscription topics. An administrator may need to create a few instances of this object before the user can subscribe to them. Then you need to create a process that would subscribe to a particular topic. The instance of the appropriate ''CMTopic'' object must be in the Context of the process. The process can subscribe to the topic by using the ''MOBILE SUBSCRIBE TO'' action. For example,
 +<code>
 +FIND CMTopic WHERE CMTopic.Name='Fashion'
 +MOBILE SUBSCRIBE TO CMTopic
 +</code>
 +
 +This process should be activated on a mobile phone of the user. When the user logs into the mobile native application that has push notifications enabled for the first time, an instance of the ''MobilePhone'' object is created. It is that instance that is subscribed to the topic. Once the phone is subscribed it will receive a notification about the topic. This notification will also be sent to the AwareIM application running on the server as a predefined notification called ''MobilePushNotification''. The instance of this notification will have the ID of the phone. A developer may set up rules attached to this notification.
 +
 +2. Send a notification to a phone
 +In order to send a notification to a phone you need to define a process that will use the ''MOBILE PUSH action''. For example,
 +<code aim>
 +CREATE MobilePushNotification WITH MobilePushNotification.Body='Some message',MobilePushNotification.Title='Attention'
 +MOBILE PUSH MobilePushNotification TO MobilePhone </code>
 +where MobilePhone is process input
 +</panel>
 +
 +<panel type="primary" title="integrate custom Cordova components in native mobile applications">
 +
 +Cordova plugins are components that provide access to some built-in features of mobile phones, (such as camera or contacts), for which there is no Javascript access. When components are integrated into the system these features become available through some special Javascript functions that the plugin makes available to the developer. Cordova plugins can only be used in native mobile applications.
 +
 +AwareIM integrates some Cordova plugins out-of- the-box and provides rule actions that activate them (for example, ''[[a_f:a:mobile_push|MOBILE PUSH]]'' or ''[[a_f:a:mobile_camera_snap_into|MOBILE CAMERA SNAP INTO]]''. However, there are many plugins around and it is impossible to integrate all of them into //**AwareIM**//.
 +
 +Still there is a way to do this by adding some custom Javascript to your application. This is described in detail in the [[docs:3500|Programmers Reference Guide]].
 +</panel>
 +
 +</accordion>