Adding a Column to a Grid

Using customization to add a column to a grid

Updated over a week ago

The main purpose of a grid is to display information from a table. Grids show a number of columns which represent fields, but sometimes you need to add or remove columns from your grid.

In some cases, you can do this on a temporary basis without customization. Columns may already be on the grid but hidden by default. For more information on that, please see our article "How Grids / Lists Work."

Customizing a Grid

In this example, we will customize the Contact List screen to permanently show a column in the grid. By default, the Billing Address State is hidden so we will have it displayed. Of course, these same steps will work for any column you wish to show permanently in a grid.

  1. While on the Contact List screen, click the down arrow iconby the Contacts header and then select Customize Screen.

  2. You will be notified that the screen is in read-only mode. Click the Edit button.

  3. Since the screen is one of our stock screens, you will be asked to create a copy of it. Click Create copy.

  4. Within the ListSection, locate the ContactsGrid control and click itsdown arrow.

  5. On the contextual menu that pops up on the ContactsGrid control, click Columns.

  6. You will be presented with a list of columns, and by selecting a column, you will be able to edit its properties. Scroll through the list and select the BillAddressState column.

    NOTE: If you wish to show a column not in the list, just click ⊕ Add another column and select one of the existing fields.

  7. When selected, its properties show up on the right.

    Let's take a look at a few properties to change:

    • Caption: The header for the column. Change it to State.

    • Hide Caption: Below the Caption is a checkbox to hide the caption. Keep it at the default of unchecked.

    • Width: Each column can have a specified width. The default option for width is blank, but we can adjust this by choosing percentage or pixels. Percentage allows you to set the width in relation to other columns, while pixels allows you to be more exact. For now, set it to 10%.

    • Show: There are two checkboxes available: On Desktop and On Mobile. You want to have it show on Desktop so check that. If you also wish for it to show on mobile, you can check that box as well.

  8. You are done! Click Close in the upper right to exit the column properties.

  9. Click Close at the top to exit the designer.

And now the contacts grid will show the column you just added.

NOTE: The blue banner at the top mentions you are using a draft version of this screen. The changes are currently only visible to you, and not to any other user in your account. If you want every user to see it, you will need to make the version live. For more information, see our article "How do I publish a version?"

Make a Column Visible Permanently

As mentioned above, you can temporarily make columns visible. To do this permanently, you need to customize the grid.

First, follow steps 1 to 4 above in Customizing a Grid

This will take you to a list of columns added to your grid. In the below example, we are looking at the Contacts List Screen. Select a column in the list, and check On Desktop and/or On Mobile if you wish to see the column on Mobile.

Removing a Column

Note that removing a column on a grid is permanent for all your Method users.

Again, this is done via customization. Follow steps 1 to 4 above in Customizing a Grid

This will take you to a list of columns added to your grid. In the below example, we are looking at the Contacts List Screen

To remove a column, select the trashcan by the column you wish to delete. 

Alternatively, instead of removing it permanently from the column, you can make it hidden instead.

In the column's properties, uncheck On Desktop and On Mobile in the Show section.

Did this answer your question?