Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
| 3400_how_to:1000_mobile_applications [2026/08/13 00:55] – ↷ Page moved from docs:3400_how_to:1000_mobile_applications to 3400_how_to:1000_mobile_applications localdev | 3400_how_to:1000_mobile_applications [2026/08/13 07:43] (current) – Imported by DokuWiki Advanced Plugin aware_support3 | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Mobile Applications ====== | ====== Mobile Applications ====== | ||
| - | ===== How To... ===== | + | ===== How to... ===== |
| - | < | + | < |
| - | <panel type="primary" title=" | + | <anchor id="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. | 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, | + | To create a mobile version of your application, |
| - | </panel> | + | </accordion-item> |
| - | <panel type="primary" title=" | + | <anchor id="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: | + | < |
| + | This feature is very often used in mobile applications. To create a thumbnail view use a custom presentation of query results. See the “[[2500_config_apps: | ||
| - | 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> | + | 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.</accordion-item> |
| - | <panel type="primary" title=" | + | <anchor id="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)</ | + | < |
| + | 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 type="primary" title=" | + | <anchor id="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. | 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. | 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/ | + | 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/ |
| - | </panel> | + | </accordion-item> |
| - | <panel type="primary" title=" | + | <anchor id="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: | 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: | ||
| Line 33: | Line 38: | ||
| - 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 | - 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> | + | </accordion-item> |
| - | <panel type="primary" title=" | + | <anchor id="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 [[2000_concepts: | + | < |
| + | ====== | ||
| + | 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 [[2000_concepts: | ||
| - | <panel type="primary" title=" | + | <anchor id="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. // | One approach is to define an attribute of the Picture type for one of your forms. // | ||
| Line 45: | Line 53: | ||
| <code aim> | <code aim> | ||
| - | <callout | + | <alert type=" |
| - | </ | + | **note** |
| - | <panel type=" | + | These actions will only work for native mobile applications – they will not work inside the mobile browser. Please see [[: |
| + | </ | ||
| - | 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: | + | <anchor id=" |
| + | < | ||
| - | <panel type=" | + | The quickest way is to define an attribute of the Picture |
| - | Just define an attribute of the Document | + | |
| - | <panel type="primary" title=" | + | <anchor id=" |
| + | < | ||
| + | Just define an attribute of the Document | ||
| + | |||
| + | <anchor id="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. | 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. | ||
| Line 75: | Line 89: | ||
| 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. | 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> | + | </accordion-item> |
| - | <panel type="primary" title=" | + | <anchor id="build_native_mobile_applications"> |
| + | < | ||
| - | This is explained in the “[[docs:3300_mobile_apps: | + | This is explained in the “[[3300_mobile_apps: |
| - | See [[docs:5000_videos: | + | See [[5000_videos: |
| - | </panel> | + | </accordion-item> |
| - | <panel type="primary" title=" | + | <anchor id="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, | 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, | ||
| Line 93: | Line 109: | ||
| To force the browser to display a login form after the user has already been remembered add the “auto_login=false” to the URL: | 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:// | + | [[http:// |
| - | <panel type="primary" title=" | + | <anchor id="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. | 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. | ||
| Line 137: | Line 154: | ||
| MOBILE PUSH MobilePushNotification TO MobilePhone </ | MOBILE PUSH MobilePushNotification TO MobilePhone </ | ||
| where MobilePhone is process input | where MobilePhone is process input | ||
| - | </panel> | + | </accordion-item> |
| - | <panel type="primary" title=" | + | <anchor id="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. | 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. | ||
| Line 145: | Line 163: | ||
| AwareIM integrates some Cordova plugins out-of- the-box and provides rule actions that activate them (for example, '' | AwareIM integrates some Cordova plugins out-of- the-box and provides rule actions that activate them (for example, '' | ||
| - | Still there is a way to do this by adding some custom Javascript to your application. This is described in detail in the [[docs: | + | Still there is a way to do this by adding some custom Javascript to your application. This is described in detail in the [[: |
| - | </panel> | + | </accordion-item> |
| </ | </ | ||