Main Interface Rule
------------------

=load(
  local!items: {
    {id: 1, summary: "Item 1", qty: 1, unitPrice: 10, dept: "Sales",   due: today() - 10},
    {id: 2, summary: "Item 2", qty: 2, unitPrice: 20, dept: "Finance", due: today() + 20},
    {id: 3, summary: "Item 3", qty: 3, unitPrice: 30, dept: "Sales",   due: today() + 30}
  },
  /* Needed when adding or removing items via a!applyComponents */
  local!itemsToken,
  local!itemsCount:count(local!items)+1,
  with(
  a!formLayout(
    label: "SAIL Example: Inline Editable Grid:" &count(local!items) ,
    firstColumnContents: {
      a!gridLayout(
        totalCount: count(local!items),
        headerCells: {
           a!gridLayoutHeaderCell(label: "ID"),
          a!gridLayoutHeaderCell(label: "Summary"),
          a!gridLayoutHeaderCell(label: "Qty", align: "RIGHT"),
          a!gridLayoutHeaderCell(label: "U/P", align: "RIGHT"),
          a!gridLayoutHeaderCell(label: "Amount", align: "RIGHT"),
          a!gridLayoutHeaderCell(label: "Department"),
          a!gridLayoutHeaderCell(label: "Due", align: "RIGHT"),
          /* For the "Remove" column */
          a!gridLayoutHeaderCell(label: "")
        },
        /* Only needed when some columns need to be narrow */
        columnConfigs: {
           a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 5),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 2),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 2),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 2),
          a!gridLayoutColumnConfig(width: "ICON")
        },
        rows: a!applyComponents(
          function: rule!TEST_ucItemRowEach1(
            items: local!items,
            index: _,
            itemsToken: local!itemsToken
          ),
          array: if(or(isnull(local!items), count(local!items) < 1), {}, 1+enumerate(count(local!items))),
          arrayVariable: local!itemsToken
        ),
        addRowlink: a!dynamicLink(
          label: "Add Item",
          value: {id:concat("INC-",local!itemsCount),due: today() + 1},
          saveInto: {
            a!save(local!items, append(local!items, save!value)),
            a!save(local!itemsToken, append(local!itemsToken, save!value)),
            a!save(local!itemsCount,local!itemsCount+1)
          }
        )
      )
    },
    buttons: a!buttonLayout(
      primaryButtons: a!buttonWidgetSubmit(
        label: "Submit"
      )
    )
  )
  )
)



===========================================================================================================================
Sub Rule:

rule!TEST_ucItemRowEach1
===========================================================================================================================

=a!gridRowLayout(
  id: ri!index,
  contents: {
    a!textField(
      /* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
      label: "ID " &ri!index,
      value: ri!items[ri!index].id,
      saveInto: ri!items[ri!index].id,
      required: true,
      readOnly:true
    ),
    a!textField(
      /* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
      label: "summary " &ri!items[ri!index].id,
      value: ri!items[ri!index].summary,
      saveInto: ri!items[ri!index].summary,
      required: true
    ),
    a!integerField(
      label: "qty " & ri!index,
      value: ri!items[ri!index].qty,
      saveInto: ri!items[ri!index].qty,
      validations: if(tointeger(ri!items[ri!index].qty) < 1, "Quantity must be greater than 0", null),
      align: "RIGHT"
    ),
    a!floatingPointField(
      label: "unitPrice " & ri!index,
      value: ri!items[ri!index].unitPrice,
      saveInto: ri!items[ri!index].unitPrice,
      validations: if(todecimal(ri!items[ri!index].unitPrice) < 1, "Unit price must be greater than 0", null),
      align: "RIGHT"
    ),
    a!textField(
      label: "amount " & ri!index,
      value: if(
        or(isnull(ri!items[ri!index].qty), isnull(ri!items[ri!index].unitPrice)),
        null,
        dollar(tointeger(ri!items[ri!index].qty) * todecimal(ri!items[ri!index].unitPrice))
      ),
      readOnly: true,
      align: "RIGHT"
    ),
    a!dropdownField(
      label: "dept " & ri!index,
      choiceLabels: {"Finance", "Sales"},
      placeholderLabel: "--Select-- ",
      choiceValues: {"Finance", "Sales"},
      value: ri!items[ri!index].dept,
      saveInto: ri!items[ri!index].dept
    ),
    a!dateField(
      label: "due " & ri!index,
      value: ri!items[ri!index].due,
      saveInto: ri!items[ri!index].due,
      validations: if(todate(ri!items[ri!index].due) < today(), "The due date cannot be in the past", null),
      align: "RIGHT"
    ),
    a!imageField(
      label: "delete " & ri!index,
      images: a!documentImage(
        document: a!iconIndicator("REMOVE"),
        altText: "Remove",
        caption: "Remove " & ri!items[ri!index].summary,
        link: a!dynamicLink(
          value: ri!index,
          saveInto: {
            a!save(ri!items, remove(ri!items, save!value)),
            /* When modifying the size of the array used in a!applyComponents,  */
            /* make the same change in the "token" array variable               */
            a!save(ri!itemsToken, remove(ri!itemsToken, save!value))
          }
        )
      ),
      size: "ICON"
    )
  }
)