A common request is to add more columns to be shown on the line items grid on the transaction screen.
This can be done through customization, but complication arises from the fact there are two grids on the screen to represent the line item grid!
Why are there two grids? They are for two different displays:
A standard grid to view the items when on a mobile device
An editable grid to view and edit the items when on the desktop
When making customizations, you will need to update both grids.
In the below example, we will add the Unit of Measure column to the items grid.
Step 1 - Customize the Screen
The first step is to go into the customization designer for the transaction screen. In this example, we will be using the invoice screen, but transaction screens are very similar in make up so it will work for estimates, sales orders, etc.
1. Create or edit an invoice to get to the screen.
2. Click the ∨ symbol beside the Invoice header and select Customize Screen.
3. You will be prompted to view the screen as read-only, or to Create a copy. You want to create a copy, so select that.
Step 2 - Customize the Editable Grid for Desktop
First, it's important to find the grid on the screen. Fortunately, the two grids are close to each other. The first grid to edit will be the editable grid which is only visible on desktop.
1. Find the section called secLinesDetailsEditable, and inside you will find an editable grid called InvoiceLineItemsEditable. Click the down arrow and select Grid Builder.
2. The Grid Builder will take you into the configuration for the editable grid. At the top, select Columns.
3. On the left, select Add another column, search for "unitofmeasure", and then select UnitofMeasure.
4. Once you add the new field column, it will show up on the left under Your Columns. Select the newly added field UnitOfMeasure, and you will be able to configure it further.
From here on out, you will probably want to style it and add further configuration. For more help on that, please see our article on Editable Grids.
When you are finished, hit Close to complete configuring the editable grid.
Step 3 - Customize the Grid for Mobile
Now that the desktop grid has been fixed, now you will need to edit the grid which shows up only on a mobile device.
1. Find the section called secLinesDetailsItems, and inside you will find a grid called InvoiceLineItems. Click the down arrow and select Columns.
2. The Column Property Window pops up. Select ⊕ Add another column, search for "unitofmeasure", and then select UnitofMeasure.
3. Once you add the new field column, it will show up on the left under Columns. From here, you will be able to configure it further.
From here on out, you will probably want to style it and add further configuration.
When you are finished, hit Close to complete configuring the grid.
And now your transaction will show with the column you just added!