Editable Grid - Simulate Required Attribute found in other components

Hello all,

I am developing an application in Appian 17.2 and I have a case where i need to use an Editable Grid component in order for the user to create (and remove) a list of entries.

The requirement is that it is mandatory to enter at least ONE entry in the Editable Grid component. As we know, this "Required" attribute can only be achieved by setting Validations on the Editable Grid component. However, this means that IF the list that fills the Editable Grid is empty then the validation will show the respective Red message below the component as soon as the user enters the form. It has been asked that this message ONLY appears when a submit button is pressed. This has been asked because there is an inconsistency in the User Experience when a form combines an Editable Grid with other components (like Text Fields) that actually have a Required attribute whose message appears only upon the press of a button.

How can this be achieved on the Editable Grid? How can we make sure that the message that indicates to the user that at least ONE entry must be entered ONLY when a submit button is pressed?

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Lead Developer

    A quick workaround I can think of, would be to add an empty, read-only text field either right above or right below the grid, with a "required" message configured to explain that at least one entry must be added; as soon as one entry is added, just hide the text field.

    Edit to add: please see the following quick example--

    load(
      local!rows: {},
      a!formLayout(
        contents: {
          a!gridLayout(
            label: "My Entries",
            headerCells: {
              a!gridLayoutHeaderCell(
                label: "Name"
              )
            },
            rows: a!forEach(
              local!rows,
              a!gridRowLayout(
                contents: {
                  a!textField(
                    value: fv!index,
                    readOnly: true()
                  )
                }
              )
            ),
            addRowLink: a!dynamicLink(
              label: "Add Entry",
              saveInto: a!save(
                local!rows,
                append(
                  local!rows,
                  "new row"
                )
              )
            )
          ),
          a!textField(
            readOnly: true(),
            labelPosition: "COLLAPSED",
            showWhen: length(local!rows) = 0,
            required: true(),
            requiredMessage: "At least one entry must be added."
          )
        },
        buttons: a!buttonLayout(
          secondaryButtons: a!buttonWidget(
            label: "Submit",
            validate: true()
          )
        )
      )
    )

Reply
  • 0
    Certified Lead Developer

    A quick workaround I can think of, would be to add an empty, read-only text field either right above or right below the grid, with a "required" message configured to explain that at least one entry must be added; as soon as one entry is added, just hide the text field.

    Edit to add: please see the following quick example--

    load(
      local!rows: {},
      a!formLayout(
        contents: {
          a!gridLayout(
            label: "My Entries",
            headerCells: {
              a!gridLayoutHeaderCell(
                label: "Name"
              )
            },
            rows: a!forEach(
              local!rows,
              a!gridRowLayout(
                contents: {
                  a!textField(
                    value: fv!index,
                    readOnly: true()
                  )
                }
              )
            ),
            addRowLink: a!dynamicLink(
              label: "Add Entry",
              saveInto: a!save(
                local!rows,
                append(
                  local!rows,
                  "new row"
                )
              )
            )
          ),
          a!textField(
            readOnly: true(),
            labelPosition: "COLLAPSED",
            showWhen: length(local!rows) = 0,
            required: true(),
            requiredMessage: "At least one entry must be added."
          )
        },
        buttons: a!buttonLayout(
          secondaryButtons: a!buttonWidget(
            label: "Submit",
            validate: true()
          )
        )
      )
    )

Children
No Data