Updating grid data after selecting a list item

You can set up your grid to update together with the list item that you select.

This is useful when creating a grid with products, prices, and total price.

In this section

Example

Let's set up a grid with products, product prices, and total price. The price and total prices will update after we select a specific product in a grid.

To make such a grid, we need to do the following:

1. Create a Product column that will display our products. The column will have these option attributes:
   
   • label, default attribute, that will show the names of our products.
   • price, that will store info about the price of our products.
   • currency, which will store info about our product currency.

   

   Check the following articles for more information:

   Lists in a grid

   Adding option attributes to a list

2. Add options with products for the Product column. We will enter option attributes we set up earlier, such as price and currency.
   
3. Save the column.
4. Create an Amount column, that will display the amount of products we want to order. It will have a Number column type.

5. Now, let's create three formula columns:
   

   • Price — the price of our product.
   • Total price — the total price of our products.
   • Currency — the currency of our order.

   For more information, check out Formulas in a grid.
   

   Each column will have a different formula:
   

   • The Price column will reuse the data from the price option attribute from the Product column. To do so, we will input the following formula:

     return $(product).price

     Formula parameters:

     product — The Identifier of the Product column.

     price — Key of the Price option attribute.
     
     

   • The Total price column will multiply the data from the price option attribute by the data from the Amount column. To do this, we will use the formula:

     return $(price) * $(amount)

     price — Identifier of the Price column.

     amount — Identifier of the Amount column.
     
     

   • The Currency column will display the data from the currency option attribute from the Product column. We will use the following formula to do this:

     return $(product).currency

     Formula parameters:

     product — Identifier of the Product column.

     price — Key of the Price option attribute.

Result

The following result should look like this:

See also

Lists in a grid

Adding option attributes to a list

Formulas in a grid