MainInterface

Rule Inputs: input1 (Text), items (Any Type)
____

a!formLayout(
  firstColumnContents:{
    rule!section_1(ri!input1,ri!items),
    rule!section_2(ri!items)
  }
)
____

Section_1

Rule Inputs: input1 (Text), items (Any Type)
____

a!sectionLayout(
  label:"Section1",
  firstColumnContents:{
    a!textField(
      label: "Input 1",
      instructions: "Type Yes or No here and observe the difference in section 2 - dynamic grid",
      value: ri!input1,
      saveInto: ri!input1
    ),
    a!buttonLayout(
      primaryButtons:a!buttonWidgetSubmit(
        label:"Submit",
        value: "submit",
        saveInto:{
          a!save(ri!items,if(ri!input1 = "Yes",{{summary:"Yes",dept:"Finance"}},{{summary:"No",dept:"Sales"}}))
        }
      )
    )
  }
)

____

Section_2

Rule Inputs: items (Any Type)
____

load(
  local!itemsToken,
  a!sectionLayout(
    label: "Dynamic Inline Editable Grid",
    firstColumnContents: {
      a!gridLayout(
        headerCells: {
          a!gridLayoutHeaderCell(
            label: "Summary"
          ),
          a!gridLayoutHeaderCell(
            label: "Department"
          )
        },
        /* Only needed when some columns need to be narrow */
        columnConfigs: {
          a!gridLayoutColumnConfig(
            width: "DISTRIBUTE"
          ),
          a!gridLayoutColumnConfig(
            width: "DISTRIBUTE"
          )
        },
        rows: a!applyComponents(
          function: rule!gridRowLayoutForSection_2(
            items: ri!items,
            index: _
          ),
          array: if(
            or(
              isnull(
                ri!items
              ),
              count(
                ri!items
              ) < 1
            ),
            {},
            1 + enumerate(
              count(
                ri!items
              )
            )
          ),
          arrayVariable: local!itemsToken
        )
      )
    }
  )
)

____

gridRowLayoutForSection_2

Rule Inputs: items (Any type), index: integer
____

a!gridRowLayout(
  id: ri!index,
  contents: {
    a!textField(
      label: "summary " & ri!index,
      readOnly:true,
      value: ri!items[ri!index].summary,
      saveInto: ri!items[ri!index].summary
    ),
    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
    )
  }
)