Editable grid using looping in Appian

Inline Editable grid allows user to change data directly within the grid. We are using the grid layout component to build an inline editable grid with two rows looped using a!forEach loop.

a!localVariables(
  local!items: {
    { item: "Item_1", qty: 1, price: 10 },
    { item: "Item_2", qty: 1, price: 20 },
    
  },
  {
    a!gridLayout(
      label: "Products",
      labelPosition: "ABOVE",
      headerCells: {
        a!gridLayoutHeaderCell(label: "Item"),
        a!gridLayoutHeaderCell(label: "Quantity"),
        a!gridLayoutHeaderCell(label: "Unit Price"),
        a!gridLayoutHeaderCell(label: "Total")
      },
      columnConfigs: {},
      rows: {
        a!forEach(
          items: local!items,
          expression: a!gridRowLayout(
            contents: {
              a!textField(
                value: fv!item.item,
                saveInto: fv!item.item
              ),
              a!integerField(value: fv!item.qty, saveInto: fv!item.qty),
              a!integerField(
                value: fv!item.price,
                saveInto: fv!item.price
              ),
              a!richTextDisplayField(
                value: a!richTextItem(
                  text: dollar(
                    tointeger(fv!item.qty) * tointeger(fv!item.price)
                  )
                )
              )
            }
          )
        )
      },
      validations: {},
      shadeAlternateRows: true
    )
  }
)

Dear reader, I hope this was clear and useful. If you found it interesting don’t forget to like this article and follow me to be notified about similar ones in future. See ya!