AcumatiCares
INTRODUCTION
Today we look at a common development task for the Acumatica mobile application, to gain a better understanding of how the mobile app markup language operates with Acumatica’s CloudERP. Our goal in this post is to create two tasks in the field services appointment entry screen:
- Add a tab item in the mobile application
- Add a grid item with some fields inside the mobile application
However, before we begin, we need to perform several customization tasks in order to add our custom tab & grid to the appointment entry screen.
- Custom table & data access class, which is the basis of our grid, named FSAppointmentShutdown
- Dataview for our appointment entry. This links the appointment record to the custom table records
- Screen customizations in the appointment entry screen
- Tab Item
- Grid & fields
Below are the end results of our webpage customization:
Notice we have the following fields in our grid:
- Valve (dropdown)
- What does it Control (text box)
- Location (text box)
- Turned off for Repair (checkbox)
- Turned on after Repair (checkbox)
- Status after Repair (dropdown)
To start the customization of our mobile appointment entry screen, we first begin with an inspection of the appointment screen in the mobile application.
Notice that the tabs displayed on the screen: Summary, Details, Staff, etc. Ok, but how do these tabs and the grids get rendered in the mobile app? Let us take a deeper look.
Appointment Entry Screen WSDL
After we looking more closely, we see the complex types which describe each tab item. For example, review the Details complex type.
GIST: https://tinyurl.com/msjfb9ey
This complex type describes the Details grid inside the appointment entry screen.
Now add a mobile screen update item to the customization manager, specifically for screen FS300200
Inspect the Results Preview pane inside the Update FS300200 item. It may not be clear which MSDL element supports a grid. According to the Acumatica documentation, the type’s name will match the container’s name, as seen in the MSDL.
GIST: https://tinyurl.com/c632vx5w
In the WSDL, the name of the Appointment Details complex type is Details. Therefore, we can understand that the Add Container declaration describes the grid in the mobile application.
In the Project Editor, add a Container object in the Commands window.
GIST: https://tinyurl.com/wy8y6kzw
Place the Add Container declaration inside the Update Screen declaration, which is added by default. Be sure to add the attribute FieldsToShow and set to 6, since there are 6 fields to display.
Inside the Add Container declaration, add the declaration for each field in the grid.
GIST: https://tinyurl.com/2p82ddke
In order to add records to the grid via the mobile app, you must create a RecordAction type in the container.
GIST: https://tinyurl.com/ye22cue5
Now we have declared our grid in the mobile appointment entry screen. But, we still need to add a Tab item that will hold our grid. How are the tabs declared in the MSDL? While browsing, notice that Summary, Log, Totals, etc each have a corresponding Layout declaration inside the AppointmentRecords container declaration. AppointmentRecords represent the form container in which the linked containers are found. Therefore, we will add a container that represents our Tab item inside AppointmentRecords.
GIST: https://tinyurl.com/bdfvb3rf
Be sure to add the DisplayName attribute, as the value sets the Tab Item name in the mobile page.
Another important attribute to include in this new declaration is the ContainerLink. Be sure to assign the value of the name of grid control element that is specified in the WSDL. In this case, the complex type name is SystemShutdown. Also, it is necessary to declare the layout attribute inside the Layout declaration.
Note: if you wish to assign a specific ordinal for your new tab, you can add a placeAfter attribute.
Example:
placeAfter layout “StaffTab”
Once these steps are complete, publish the customization project and view the results.
SUMMARY
Today, we demonstrated how to modify the mobile appointment entry screen. We added a Container that represents a custom grid, along with necessary attributes to include in the declaration. Also, we demonstrated how to add a tab item in the mobile app. This demonstration adds a bit more depth than the grid example that is provided in the Acumatica University course T410. For this and other training offered for Acumatica’s Mobile platform, go here.
I hope this has been useful and provides a little boost to your mobile development efforts going forward.
Happy Coding!
