load(
  local!readOnly: ri!step="APPROVAL",
  a!formLayout(
    label: if(local!readOnly, "Approve Expense Report", "Submit Expense Report"),
    firstColumnContents: {
      a!textField(
        label: "Expense Item",
        labelPosition: "ABOVE",
        value: ri!expenseItem,
        saveInto: ri!expenseItem,
        refreshAfter: "UNFOCUS",
        required: not(local!readOnly),
        readOnly: local!readOnly,
        validations: {},
        align: "LEFT"
      ),
      a!dateField(
        label: "Expense Date",
        labelPosition: "ABOVE",
        value: ri!expenseDate,
        saveInto: ri!expenseDate,
        required: not(local!readOnly),
        readOnly: local!readOnly,
        validations: {},
        align: "LEFT"
      ),
      a!floatingPointField(
        label: "Expense Amount",
        labelPosition: "ABOVE",
        value: ri!expenseAmount,
        saveInto: ri!expenseAmount,
        refreshAfter: "UNFOCUS",
        required: not(local!readOnly),
        readOnly: local!readOnly,
        validations: {},
        align: "LEFT"
      ),
      rule!enterComments(
        displayWhen: ri!expenseAmount >= 100,
        readOnly: local!readOnly,
        required: not(local!readOnly),
        commentValue: ri!comments,
        commentSaveInto: ri!comments
      ),
      if(
        local!readOnly,
        a!radioButtonField(
          labelPosition: "COLLAPSED",
          choiceLabels: {"Approve", "Reject"},
          choiceValues: {true, false},
          value: ri!approve,
          saveInto: ri!approve,
          required: true
        ),
        {}
      )
    },
    secondColumnContents: {},
    buttons: a!buttonLayout(
      primaryButtons: {
        a!buttonWidgetSubmit(
          label: "Submit",
          style: "PRIMARY"
        )
      },
      secondarybuttons: {
        a!buttonWidgetSubmit(
          label: "Cancel",
          style: "NORMAL",
          value: true,
          saveInto: ri!cancel,
          skipvalidation: true
        )
      }
    )
  )
)load(
  local!readOnly: ri!step="APPROVAL",
  a!formLayout(
    label: if(local!readOnly, "Approve Expense Report", "Submit Expense Report"),
    firstColumnContents: {
      a!textField(
        label: "Expense Item",
        labelPosition: "ABOVE",
        value: ri!expenseItem,
        saveInto: ri!expenseItem,
        refreshAfter: "UNFOCUS",
        required: not(local!readOnly),
        readOnly: local!readOnly,
        validations: {},
        align: "LEFT"
      ),
      a!dateField(
        label: "Expense Date",
        labelPosition: "ABOVE",
        value: ri!expenseDate,
        saveInto: ri!expenseDate,
        required: not(local!readOnly),
        readOnly: local!readOnly,
        validations: {},
        align: "LEFT"
      ),
      a!floatingPointField(
        label: "Expense Amount",
        labelPosition: "ABOVE",
        value: ri!expenseAmount,
        saveInto: ri!expenseAmount,
        refreshAfter: "UNFOCUS",
        required: not(local!readOnly),
        readOnly: local!readOnly,
        validations: {},
        align: "LEFT"
      ),
      rule!enterComments(
        displayWhen: ri!expenseAmount >= 100,
        readOnly: local!readOnly,
        required: not(local!readOnly),
        commentValue: ri!comments,
        commentSaveInto: ri!comments
      ),
      if(
        local!readOnly,
        a!radioButtonField(
          labelPosition: "COLLAPSED",
          choiceLabels: {"Approve", "Reject"},
          choiceValues: {true, false},
          value: ri!approve,
          saveInto: ri!approve,
          required: true
        ),
        {}
      )
    },
    secondColumnContents: {},
    buttons: a!buttonLayout(
      primaryButtons: {
        a!buttonWidgetSubmit(
          label: "Submit",
          style: "PRIMARY"
        )
      },
      secondarybuttons: {
        a!buttonWidgetSubmit(
          label: "Cancel",
          style: "NORMAL",
          value: true,
          saveInto: ri!cancel,
          skipvalidation: true
        )
      }
    )
  )
)