A common request is to add more columns 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:
An editable grid to view and edit the items when on the desktop.
A standard grid to view the items when on a mobile device
When making customizations, you will need to update both grids.
NOTE: When syncing with QuickBooks Desktop, complications arise when adding a QuickBooks custom field to the line item grid. If data is synced to QuickBooks, they can no longer be modified. For more information, please see our article "Do Custom Fields in QuickBooks Desktop sync with Method?".
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.
Create or edit an invoice to get to the screen.
Click the down arrow icon
beside the Invoices header and select Customize Screen.
The screen is currently live read-only. Click Edit.
You will be prompted to Create a copy. You want to create a copy, so click 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.
Find the section called secLinesDetailsEditable, and inside you will find an editable grid called InvoiceLineItemsEditable. Click the down arrow and select Grid Builder.
The Grid Builder will take you into the configuration for the editable grid. At the top, select Columns.
On the left, select Add another column, search for "unitofmeasure", and then select UnitofMeasure.
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.
Find the section called secLinesDetailsItems, and inside you will find a grid called InvoiceLineItems. Click the down arrow and select Columns.
The Column Property Window pops up. Select ⊕ Add another column, search for "unitofmeasure", and then select UnitofMeasure.
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.
You will need to change the width on mobile to 5% or lower, so it doesn't take up too much space on the narrow screen size.
From here on, feel free 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!