View source for Mobile Forms (proof of concept)

[[Category:FastNET]]
[[Category:Form Design]]
[[Category:Mobile]]

Described below functionality is not production ready. It is proof of concept which use current FastNET rendering engine to enable Mobile Friendly User Interface. JQuery Mobile framework is used to ensure native mobile look on any modern mobile device (Android, iPhone, iPad, Windows Phone). 

==Potential Use Cases==

Although Mobile Forms functionality is not production ready it is available in 7.2+ systems. It is disabled by default and do not affect standard UI. There are two potential use cases for Mobile Forms:

#Online Forms for '''Agility For Android'''. Sometimes it is required to enable additional forms on '''Agility For Android''' which are handled directly by agility service (instead offline form embedded on android). There are many reasons why such online forms are good solution, one of them is ability to use lookups on data which is not cached by android (for example asset registry). It seems that Mobile Forms fits perfectly into such pattern.
#Online Work Management tool (similar to the original "Alite" application). Attempt to describe functionality of such application as wall as quotation is provided in Issue 6446. Please refer [https://support.softsolsgroup.com/agility/DetailForm.aspx?FormDefID=%2f!1b2e5692!61323!!&DataKey=%2f!71d68945!6446!! Issue 6446] for details.

None of above cases is available without additional development.

==Configuration==

Mobile GUI can be enabled automatically (browser detection), but it can be also forced manually. 
To enable automatic browser detection set parameter MobileFormsAutodetection="true" (parameter defined in agility config.xml in application section). When parameter MobileFormsAutodetection is enabled then request from mobile device to agility will be automatically redirected to mobile version. It is also possible to run mobile version of agility regardless of device, configuration or browser. Instead standard url use:
<pre>http://agilityurl/mLogin.aspx</pre>
When '''m'''Login.aspx is used then all subsequent requests from that session will be treated as requests from mobile device.


[[File:Mobile forms detection.png]]


It is also possible to temporary switch particular form into mobile version. It is very handy during form design. 

[[File:scan_std.png]]


To render mobile version of particular form add '''m''' prefix to ScanForm.aspx or DetailForm.aspx.

[[File:scan_mobile.png]]

==Available Pages==

===Login===


Please note that not all standard functionality which is provided with standard login page is currently available in mobile login. Please refer [https://support.softsolsgroup.com/agility/DetailForm.aspx?FormDefID=%2f!1b2e5692!61323!!&DataKey=%2f!71d68945!6446!! Issue 6446] for details.


[[File:01 MF login.jpg|400px]]

===Main Menu and Forms Menu===

Mobile version do not contain designated mainmenu page. Instead designated page with menu each page contain menu. Main menu is available on each form on left top side. On right side available is context menu it contain known in standard agility FormMenu but it also contain one hard coded option to logout from system.

[[File:02 MF dashboard_menus.jpg|400px]]


Main menu is available on any page but it is not rendered each time. It is using HTTP protocol caching mechanism. Main menu is described by export and it is placed in import/export repository: '''Mobile Main Menu'''

[[File:03 MF main menu slide.jpg|400px]]


Below form do not contain any items declared in form menu so only option in action menu is '''Sign Out'''

[[File:04 MF context menu.jpg|400px]]


===Dashboard===

In standard Agility dashboard is placed on main menu form. In mobile version there is no MainMenu page, initial form is opened directly without any additional container (iframe). Initial page is defined exactly the same like in standard Agility by selection '''Initial Form To Open''' on user menu definition.


[[File:02 MF dashboard.jpg|400px]]


===Scan Form===

Similar like regular scan form mobile version is displayed as grid. Grid can be problematic in small vertical screen orientation, considered columns availability and order should solve most problems.


[[File:05 MF scan.jpg|400px]]


In scan action menu, apart from form menu items available is special '''Columns...''' option. This option allows to switch visibility of particular columns. This functionality is not based on similar functionality which can be found in standard agility GUI. Columns selection is processed fully on client side and state is remembered until page is opened. Reopening scan will reset any previous column selection. 

[[File:06 MF scan form menu.jpg|400px]] [[File:07 MF scan column selection.jpg|400px]]


Special popup menu allows to apply or cancel row filter

[[File:08 MF scan filter popup menu.jpg|400px]]


===Detail Form===

Design of detail form looks exactly like standard form. Unfortunately number of supported controls is very limited. Some controls are usable only in read only mode (like date time control). Grouping controls like GroupBox or Tabs are not available. Grids on details are not available also. It seems that some controls are easy to patch to make them mobile friendly, but most of controls require full rebuild.
Even with such limited number of controls it is possible do define out of the box application which is able to go through basic WO flow:

[[File:09 MF WO details.jpg|400px]] [[File:10 MF WO Details form menu.jpg|400px]]


Selecting priority from mobile combo box:

[[File:11 MF WO Details Combo Select.jpg|400px]]


===Known Issues===

<ol><li>Back Button History
Back button should always back from details to scan. Currently when details are opened in enquire mode, and then user click change mode - back button will back to enquire mode but it should back to scan.
</li>
<li>Result info
Develop basic result info renderer for scan and details (no advanced functionality just collapsible jQuery mobile container).
</li>
<li>Main Menu
Both main menus (mobile and standard) will use flag uiFormDef.IsMobileForm to determine if particular menu item should be rendered or not. Main menu export uses recurrences to render items. I’m not sure if it is straight forward to redesign it in this way to not render menu items (folders) without subitems. If redefining export will become too difficult then additional flag upMenuItem.IsMobile should be added and used.
</li>
<li>Mobile KPI
Current KPI rendering engine (MSCharts) do not meet current mobile standards. Modern KPIs are rendered on client side with use of HTML5 / SVG. Export can be used as container for javascript required to render HTML5 kpis. It is difficult to estimate time required for this task. It will require investigation of currently available libraries. To test particular library some samples needs to be developed with export and tested with different mobile devices. Brian Millet is best person to ask which KPIs should be displayed on mobile forms dashboard.
</li>
</ol>

===Definitions===

Main menu and whole page structure (for details and for scan) are defined by exports and are attached to standard import/export repository:
*Mobile Main Menu
*Mobile Base Form

All simple forms visible on screens are available in forms repository. Forms are prefixed with '''MF_''':
*MF_DEMO_AG_Dashboard
*MF_DEMO_AGWODetwoJob
*MF_DEMO_AGWOScan