Home Blog Acumatica Mobile Application – Adding Tabs & Grids

Acumatica Mobile Application – Adding Tabs & Grids

Chris Hardgrove | May 12, 2021

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 screenwe 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://gist.github.com/tocohara/b65a81addd8a20513ebd3ec89e977dca  

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://gist.github.com/tocohara/08318712c3890b54875da320731fa510 

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://gist.github.com/tocohara/3eaf109071f1620685dad97bb192b95e 

 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://gist.github.com/tocohara/9cf5e82e4660f4536b3815b2799961eb 

 In order to add records to the grid via the mobile app, you must create a RecordAction type in the container.


GIST: https://gist.github.com/tocohara/483b77c61b40e7bfa037324df1a54af1 

 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://gist.github.com/tocohara/d66091052aa4d14c8f73127426f8e02f

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.  

 

Note:  if you wish to assign a specific ordinal for your new tab, you can add 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!

Chris Hardgrove

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.

Categories: Developers

Receive blog updates in your Inbox.