= load(
  local!employees:ri!employees,
  local!deletedEmployeeIds,
  a!formLayout(
    label: "Employee Details",
    contents: {
      a!gridLayout(
        totalCount: count(
          local!employees
        ),
        headerCells: {
          a!gridLayoutHeaderCell(
            label: "Emp ID"
          ),
          a!gridLayoutHeaderCell(
            label: "Name"
          ),
          /* For the "Remove" column */
          a!gridLayoutHeaderCell(
            label: ""
          )
        },
        /* Only needed when some columns need to be narrow */
        columnConfigs: {
          a!gridLayoutColumnConfig(
            width: "DISTRIBUTE",
            weight: 3
          ),
          a!gridLayoutColumnConfig(
            width: "DISTRIBUTE",
            weight: 3
          ),
          a!gridLayoutColumnConfig(
            width: "ICON"
          )
        },
        /*
        * a!forEach() will take local!employee data and used that data to loop through an
        * expression that creates each row.
        *
        * When modifying the recipe to work with your data, you only need to change:
        * 1.) the number of fields in each row
        * 2.) the types of fields for each column (i.e. a!textField() for text data elements)
        * 3.) the fv!item elements. For example fv!item.firstName would change to fv!item.yourdata
        */
        rows: a!forEach(
          items: local!employees,
          expression: a!gridRowLayout(
            contents: {
              a!textField(
                /* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
                label: "emp Id " & fv!index,
                value: fv!item.employeeId,
                saveInto: fv!item.employeeId,
                required: true
              ),
              a!textField(
                label: "name " & fv!index,
                value: fv!item.employeeName,
                saveInto: fv!item.employeeName,
                required: true
              ),
              a!imageField(
                label: "delete " & fv!index,
                images: a!documentImage(
                  document: a!iconIndicator(
                    "REMOVE"
                  ),
                  altText: "Remove Employee",
                  caption: "Remove " & fv!item.pId & " " & fv!item.pId,
                  link: a!dynamicLink(
                    value: fv!index,
                    saveInto: {
                      if(
                        isnull(
                          fv!item.pId
                        ),
                        {},
                        a!save(
                          local!deletedEmployeeIds,
                          append(
                            local!deletedEmployeeIds,
                            fv!item.pId
                          )
                        )
                      ),
                      a!save(
                        local!employees,
                        remove(
                          local!employees,
                          save!value
                        )
                      )
                    }
                  )
                ),
                size: "ICON"
              )
            },
            id: fv!index
          )
        ),
        addRowlink: a!dynamicLink(
          label: "Add Employee",
          /*
           * For your use case, set the value to a blank instance of your CDT using
           * the type constructor, e.g. type!Employee(). Only specify the field
           * if you want to give it a default value e.g. startDate: today()+1.
           */
          value: {
            pId: "",
            employeeId: "",
            employeeName: ""
          },
          saveInto: {
            a!save(
              local!employees,
              append(
                local!employees,
                save!value
              )
            )
          }
        ),
        rowHeader: 1
      ),
      a!textField(
        label: "New Employees",
        labelPosition: "ADJACENT",
        value: joinarray(
          index(
            local!employees,
            where(
              a!forEach(
                local!employees,
                isnull(
                  fv!item.pId
                )
              )
            ),
            {}
          ),
          char(
            10
          )
        ),
        readOnly: true
      ),
      a!textField(
        label: "Deleted Employees",
        labelPosition: "ADJACENT",
        value: local!deletedEmployeeIds,
        readOnly: true
      )
    },
    buttons: a!buttonLayout(
      primaryButtons: a!buttonWidget(
        label: "Submit",
        submit: true,
        saveInto: {
          a!save(ri!employees,local!employees),
          a!writeToDataStoreEntity(dataStoreEntity: cons!TEST_EMPLOYEE_ENTITY,
        valueToStore: ri!employees)}
      )
    )
  )
)