Wednesday, 16 September 2015

Adding New Screen to Mobile Application

Hi Everyone,

Have you ever heard about Acumatica Mobile Framework?
It a pretty nice thing, how you can extend some ERP functionality from Web UI to Acumatica's native mobile application.

Today I want to guide you - how to create new screen. As example I will take a Journal Transaction screen.
Why this screen?

  • This screen is simple enough to understand the logic.
  • This screen is complex enough to move it mobile application. If you try to use this screen from mobile phone you will understand that it is not so easy, because of plenty controls and buttons. Of course, we can simplify it with customization or access rights, but we want to have this functionality from desktop browser.
  • This example with data entry screen can be used with plenty similar screens.

Ok, now we want to start developing.


Defining new screen
First of all we need to find a place where we have to store our new screen.
Acumatica has a special folder for storing mobile screens: <Site Path>\App_Data\Mobile. You can find there plenty of different *.xml files, they represents different screens.
To add new screen, you should define new .xml file or amend existing one.
After creating or modifying this file, Acumatica system will automatically refresh screen definition and provide it to all mobile devices. You don't need to restart site or do some manual manipulations.


Choosing functionality we need
When you are working under mobile screen you always should look on original screen in the browser, because you can extend only functionality that exists there.
On the next image i have highlighted field and controls that i want to expose to mobile:

Developing Mobile Screen
Now we want to edit created .xml file with definition of new mobile screen. Unfortunately there is no designer yet, so we should use some xml editor program (like Notepad++, Visual Studio and etc.) 

When you are developing new screen you have to provide name of the fields/actions/containers form original screen. You can find it in the WSDL schema. You can open it with from the "help" menu of any screen, or with specific url in the browser.


Just below I have provided a xml code snippet for Journal Transactions screen.
Code snippet:

Explaining Code
Lets discuss some parts of provided code:


<sm:Screen Id="GL301000" Type="SimpleScreen" >
This block will describe what screen you want to extend to mobile. 

<sm:Container Name="BatchSummary" FieldsToShow="3">
This block represents the container controls form Acumatica Screen (Forms, Grids, Tabs, Group boxes and etc). You need to chose the correct container name based on WSDL Schema


<sm:Attachments Disabled="true" />
This block with disable showing the attachments on the mobile screen. They are enabled by default.

<sm:Field Name="Subaccount" ForceType="String"/> 
This block will define fields on mobile screens. You can chose what you what you want to show there and how to arrange it. Note "ForceType" attribute, this attribute may be required for some complex segmented key selector controls. Right now Acumatica does not supports it.
  

<sm:Action Name="Save" Context="Record" Behavior="Save" />
This block with expose actions from original screen to mobile. Without these actions, your mobile screen will be read-only.

Testing Results
Just take you mobile phone, open Acumatica, login to specific instance and you will see the magic:


No comments: