• State Not Answered
  • Replies 8 replies
  • Subscribers 12 subscribers
  • Views 153 views
  • Users 0 members are here
Related Discussions
Home » Discussions » User Interface

Condition based validation

rajeshp7374

I need to validate the checkboxes when the submit button is clicked, based on a specific condition. There are four checkboxes, and before submitting the form, the user must check at least one. However, instead of using FormLayout, I’ve created the form using CardLayout and local variables. I’m looking for suggestions on how to improve or streamline this approach.

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Senior Developer

    Using formLayout is nice with the built in validations and buttons, but you can definitely use a cardLayout if you prefer.  Check out the code below for an example.  I set the validation results to local!validations using Appian's built in a!match(). I then use the Alert Banners pattern to display a validation message in a cardLayout toward the bottom.  You can update local!validation with whatever additional validation logic and messages you'd like.

    a!localVariables(
  
  local!options: {
    "Two valid government IDs (1 must contain photo)",
    "Copy of 2 valid government IDs (optional)",
    "Consent form and security regulations",
    "ID Verification",
    "Criminal record check report(s)",
    "other"
  },
  
  local!selections,
  local!otherReason,
  
  local!validations: a!match(
    value: local!selections,
    whenTrue: a!isNullOrEmpty(fv!value),
    then: "Please make a selection",
    whenTrue: and(
      contains(fv!value, "other"),
      a!isNullOrEmpty(local!otherReason)
    ),
    then: "please specify other reason",
    default: ""
  ),
  
  a!cardLayout(
    contents: {
      a!checkboxField(
        choiceLabels: local!options,
        choiceValues: local!options,
        value: local!selections,
        saveInto: local!selections
      ),
      a!textField(
        showWhen: and(
          a!isNotNullOrEmpty(local!selections),
          contains(local!selections, "other")
        ),
        label: "other",
        value: local!otherReason,
        saveInto: local!otherReason
      ),
      
      a!cardLayout(
        showWhen: a!isNotNullOrEmpty(local!validations),
        contents: {
          a!sideBySideLayout(
            items: {
              a!sideBySideItem(
                item: a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: {
                    a!richTextIcon(
                      icon: "exclamation-circle",
                      color: "NEGATIVE",
                      size: "MEDIUM"
                    )
                  }
                ),
                width: "MINIMIZE"
              ),
              a!sideBySideItem(
                item: a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: {
                    a!richTextItem(
                      text: "Validation Error",
                      style: "STRONG"
                    ),
                    " ",
                    local!validations
                  }
                )
              )
            },
            alignVertical: "MIDDLE",
            spacing: "STANDARD"
          )
        },
        style: "ERROR",
        marginBelow: "STANDARD",
        accessibilityText: "Error message"
      ),
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!buttonArrayLayout(
                align: "START",
                buttons: {
                  a!buttonWidget(
                    color: "NEGATIVE",
                    label: "Cancel",
                    validate: false,
                    submit: true
                  )
                } 
              )
            }
          ),
          a!columnLayout(
            contents: {
              a!buttonArrayLayout(
                align: "END",
                buttons: {
                  a!buttonWidget(
                    label: "submit",
                    validate: true,
                    submit: true,
                    disabled: a!isNotNullOrEmpty(local!validations)
                  )
                } 
              )
            }
          )
        }
      ) 
    }
  )
)

Reply
  • 0
    Certified Senior Developer

    Using formLayout is nice with the built in validations and buttons, but you can definitely use a cardLayout if you prefer.  Check out the code below for an example.  I set the validation results to local!validations using Appian's built in a!match(). I then use the Alert Banners pattern to display a validation message in a cardLayout toward the bottom.  You can update local!validation with whatever additional validation logic and messages you'd like.

    a!localVariables(
  
  local!options: {
    "Two valid government IDs (1 must contain photo)",
    "Copy of 2 valid government IDs (optional)",
    "Consent form and security regulations",
    "ID Verification",
    "Criminal record check report(s)",
    "other"
  },
  
  local!selections,
  local!otherReason,
  
  local!validations: a!match(
    value: local!selections,
    whenTrue: a!isNullOrEmpty(fv!value),
    then: "Please make a selection",
    whenTrue: and(
      contains(fv!value, "other"),
      a!isNullOrEmpty(local!otherReason)
    ),
    then: "please specify other reason",
    default: ""
  ),
  
  a!cardLayout(
    contents: {
      a!checkboxField(
        choiceLabels: local!options,
        choiceValues: local!options,
        value: local!selections,
        saveInto: local!selections
      ),
      a!textField(
        showWhen: and(
          a!isNotNullOrEmpty(local!selections),
          contains(local!selections, "other")
        ),
        label: "other",
        value: local!otherReason,
        saveInto: local!otherReason
      ),
      
      a!cardLayout(
        showWhen: a!isNotNullOrEmpty(local!validations),
        contents: {
          a!sideBySideLayout(
            items: {
              a!sideBySideItem(
                item: a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: {
                    a!richTextIcon(
                      icon: "exclamation-circle",
                      color: "NEGATIVE",
                      size: "MEDIUM"
                    )
                  }
                ),
                width: "MINIMIZE"
              ),
              a!sideBySideItem(
                item: a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: {
                    a!richTextItem(
                      text: "Validation Error",
                      style: "STRONG"
                    ),
                    " ",
                    local!validations
                  }
                )
              )
            },
            alignVertical: "MIDDLE",
            spacing: "STANDARD"
          )
        },
        style: "ERROR",
        marginBelow: "STANDARD",
        accessibilityText: "Error message"
      ),
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!buttonArrayLayout(
                align: "START",
                buttons: {
                  a!buttonWidget(
                    color: "NEGATIVE",
                    label: "Cancel",
                    validate: false,
                    submit: true
                  )
                } 
              )
            }
          ),
          a!columnLayout(
            contents: {
              a!buttonArrayLayout(
                align: "END",
                buttons: {
                  a!buttonWidget(
                    label: "submit",
                    validate: true,
                    submit: true,
                    disabled: a!isNotNullOrEmpty(local!validations)
                  )
                } 
              )
            }
          )
        }
      ) 
    }
  )
)

Children
© 2025 Appian. All rights reserved.
We want to hear from you! Submit a review on Gartner or G2.