Home Blog Acumatica Mobile Application – Adding Tabs & Grids

Acumatica Mobile Application – Adding Tabs & Grids

Chris Hardgrove | May 12, 2021

Acumatica Mobile Application - Adding Tabs & Grids


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:  

Acumatica Mobile Application - Adding Tabs & Grids

 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 screenwe first begin with an inspection of the appointment screen in the mobile application. 

  Acumatica Mobile Application - Adding Tabs & Grids

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 


Acumatica Mobile Application - Adding Tabs & Grids


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.


 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 SystemShutdownAlso, it is necessary to declare the layout attribute inside the Layout declaration.  

Acumatica Mobile Application - Adding Tabs & Grids 

Note:  if you wish to assign a specific ordinal for your new tab, you can add placeAfter attribute.   


placeAfter layout “StaffTab” 

Once these steps are complete, publish the customization project and view the results.

Acumatica Mobile Application - Adding Tabs & Grids



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!

Blog Author

Chris has been developing solutions on the Acumatica xRP Platform since 2012. In those early years for Acumatica, he received “countless” one-on-one instruction from “the” Mikhail Chtchelkonogov via Skype, learning all about the Acumatica and the xRP Development Framework. In 2018, Chris joined NexTech as a developer consultant.

Receive blog updates in your Inbox.