Helper for Modern UI – views.ts

While working on the CMMS-Lite project this year, our primary focus has been on learning how to convert screens to use the Modern UI to get ahead of the learning curve and share what we learn with the community. While some people love the monotony of repetitive tasks, typing large blocks of code with a similar structure has always been a thorn in my side. One such (very time-consuming) activity of developing a screen for the modern UI falls to defining the classes to be used in the screens. These classes extend the DAC to the presentation layer, and they are perhaps some of the most boring time-wasters to code when working on many screens and many DAC’s. While the sample here may be short, one screen I converted for my normal job has a DAC with 74 fields… and that’ just one of the many DAC’s. Fortunately, tools like Excel can be used for pretty simple code generation and a lot of saved typing and typos!

Setting up the Excel Code Generation Spreadsheet

The first step in creating this helper for code generation is to open Excel and make a spreadsheet with a single tab called Template. Save this file, because one feature that will be leveraged only works once the file has been saved. Then enter the following into each cell specified.

Cell A1 (text) – Just a column heading

SQL

Cell B1 (text) – Just a column heading

Field List

Cell C1 (formula) – This will pull the name of the tab and make the first line of the class text that will be used in the class definition (export class…)

=CONCAT("export class ",TEXTAFTER(CELL("filename",A1),"]")," extends BaseViewModel {")

Cell D1 (text) – These are common decorations that are used most often, so this is just for convenience of the developer to copy/paste on any fields that need them.

@commitChanges @headerDescription

Cell C2 (formula) – This will build the field definition of the class if column B has a field listed, close the class off with a closing brace if the row above was the last field, or just leave the cell blank if nothing to do.

=IF(B1="","",IF(B2="","}",CONCATENATE(D2,IF(D2>""," ",""),B2,": PXFieldState;")))

Cell E2 (formula) – This is a bonus code generation for when we want to add this field to a form on the screen

=IF(B1="","",IF(B2="","","<field name="""&B2&"""></field>"))

Now drag the formulas of row 2 down to fill as many rows as needed. At this point, the spreadsheet looks pretty useless as shown below. But notice that the tab name Template was substituted into C1, so we now have the actual code that defines the class of the DAC called Template and just need to add fields. Of course, we don’t have a DAC called Template, so this is… a template!

Populating the Template

Now that the template is created, copy the tab to a new tab, and rename it to the name of the desired DAC. We will get the fields from SQL initially. For this example, we will use WOSetup from the CMMS-Lite project.

Now open SQL Server Management Studio (SSMS). Navigate to the table (WOSetup for the example) and select top 1000 rows as shown.

Of course, we aren’t looking for the data, but rather the simplicity of the field list created. Copy the field list, complete with commas. No need to take CompanyID as that is never in the DAC definition (at least for me) and not needed.

Now paste that list into Excel into cell A2. In this example, we know that WORequestApproval needs Commit Changes, so we set @commitChanges in column D beside that field.

The class is defined now in the whole of column C. The fields we might want to add to a form of the .html are in column E. Copy all the cells in column C and paste into either the views.ts file or directly in the screen’s .ts file according to which file structure is being used.

export class WOSetup extends BaseViewModel {
WONumberingID: PXFieldState;
EquipNumberingID: PXFieldState;
TemplateWorkOrderNumberingID: PXFieldState;
@commitChanges WORequestApproval: PXFieldState;
CreatedByID: PXFieldState;
CreatedByScreenID: PXFieldState;
CreatedDateTime: PXFieldState;
LastModifiedByID: PXFieldState;
LastModifiedByScreenID: PXFieldState;
LastModifiedDateTime: PXFieldState;
tstamp: PXFieldState;
NoteID: PXFieldState;
}

Simply remove any field that is not needed for displaying on the screen.

export class WOSetup extends BaseViewModel {
WONumberingID: PXFieldState;
EquipNumberingID: PXFieldState;
TemplateWorkOrderNumberingID: PXFieldState;
@commitChanges WORequestApproval: PXFieldState;
}

When creating the .html file, use the values in column E to add fields to the form as shown in lines 6-8 and 14.

<field name="WONumberingID"></field>
<field name="EquipNumberingID"></field>
<field name="TemplateWorkOrderNumberingID"></field>
<field name="WORequestApproval"></field>

Rinse and Repeat

With the first DAC converted into a tab, copy the tab Template to a new tab, rename to the next DAC name, and populate from SSMS “select top 1000” for that DAC.

My copy of the spreadsheet is a work-in-progress. Even writing this post, I found a new tweak to improve it before sharing the details. This won’t help with unbound fields, but it certainly cut down on my typing time, number of errors, etc. while creating the files for the screens I converted in the CMMS-Lite project. I hope you give it a try and share your experience with others. Developing for the Modern UI is new to most of the Acumatica developer community, so we need to build broad competency so that we all have someone to ask when we have questions.

To download the Excel file described in this blog, click Download below:

Happy coding!