Condition based validation

RE: Condition based validation

rajeshp7374 — Tue, 18 Feb 2025 09:40:13 GMT

Is working, Thanks

RE: Condition based validation

Zakary Melvin — Mon, 17 Feb 2025 18:56:43 GMT

Appian.rocks!

RE: Condition based validation

Stefan Helzle — Mon, 17 Feb 2025 18:53:46 GMT

The form layout does a few things you cannot replicate using other layout components. I will post about this soon.

RE: Condition based validation

osanchea — Mon, 17 Feb 2025 18:46:28 GMT

I added a section to use the "validations" parameter and be able to place the message you require when clicking on "SUBMIT". Refer the code below. Also you can use Zakary Melvin suggestion as posible solution.

{
    a!boxLayout(
      label: "Business Risk Acceptance",
      contents: {
        a!boxLayout(
          label: "I am requesting a Business Risk Acceptance because I HAVE NOT completed the following (at least one box must be selected)",
          contents: {
            a!sectionLayout(
              contents: {
                a!sideBySideLayout(
                  items: {
                    a!sideBySideItem(
                      item: a!checkboxField(
                        choiceLabels: {
                          "Two Valid Government IDs (1 must contain photo) – Photo ID not retained for audit purposes"
                        },
                        choiceValues: {
                          "Two Valid Government IDs (1 must contain photo) – Photo ID not retained for audit purposes"
                        },
                        label: "",
                        value: local!docRequiredGovId,
                        saveInto: local!docRequiredGovId,
                        validations: if(
                          a!isNotNullOrEmpty(local!docRequiredGovId),
                          {},
                          "At least one option must be selected."
                        )
                      )
                    )
                  }
                ),
                a!sideBySideLayout(
                  items: {
                    a!sideBySideItem(
                      item: a!checkboxField(
                        choiceLabels: {
                          "Copy of 2 Valid Government IDs (optional)"
                        },
                        choiceValues: {
                          "Copy of 2 Valid Government IDs (optional)"
                        },
                        label: "",
                        value: local!docOptionalGovId,
                        saveInto: local!docOptionalGovId,
                        validations: if(
                          a!isNotNullOrEmpty(local!docOptionalGovId),
                          {},
                          "At least one option must be selected."
                        )
                      )
                    ),

                  }
                ),
                a!sideBySideLayout(
                  items: {
                    a!sideBySideItem(
                      item: a!checkboxField(
                        choiceLabels: {
                          "Consent Form and Security Regulations"
                        },
                        choiceValues: {
                          "Consent Form and Security Regulations",

                        },
                        label: "",
                        value: local!docConsentForm,
                        saveInto: local!docConsentForm,
                        validations: if(
                          a!isNotNullOrEmpty(local!docConsentForm),
                          {},
                          "At least one option must be selected."
                        )
                      )
                    ),

                  }
                ),
                a!sideBySideLayout(
                  items: {
                    a!sideBySideItem(
                      item: a!checkboxField(
                        choiceLabels: { "ID Verification" },
                        choiceValues: { "ID Verification", },
                        label: "",
                        value: local!docIdVerification,
                        saveInto: local!docIdVerification,
                        validations: if(
                          a!isNotNullOrEmpty(local!docIdVerification),
                          {},
                          "At least one option must be selected."
                        )
                      )
                    ),

                  }
                ),
                a!sideBySideLayout(
                  items: {
                    a!sideBySideItem(
                      item: a!checkboxField(
                        choiceLabels: { "Criminal Record Check Report(s)" },
                        choiceValues: { "Criminal Record Check Report(s)", },
                        label: "",
                        value: local!docRequiredCriminalCheck,
                        saveInto: local!docRequiredCriminalCheck,
                        validations: if(
                          a!isNotNullOrEmpty(local!docRequiredCriminalCheck),
                          {},
                          "At least one option must be selected."
                        )
                      )
                    ),

                  }
                ),
                a!sideBySideLayout(
                  items: {
                    a!sideBySideItem(
                      item: a!checkboxField(
                        choiceLabels: { "Other" },
                        choiceValues: { "Other", },
                        label: "",
                        value: local!docOther,
                        saveInto: local!docOther,
                        validations: if(
                          a!isNotNullOrEmpty(local!docOther),
                          {},
                          "At least one option must be selected."
                        )
                      )
                    ),

                  }
                )
              },
              validations: a!validationMessage(
                message: "Invalid",
                showWhen: and(
                  a!isNullOrEmpty(local!docRequiredGovId),
                  a!isNullOrEmpty(local!docConsentForm),
                  a!isNullOrEmpty(local!idVerification),
                  a!isNullOrEmpty(local!docRequiredCriminalCheck),
                  a!isNullOrEmpty(local!docOther)
                ),
                validateAfter: "SUBMIT"
              )
            )
          },
          isCollapsible: true
        )
      },
      showWhen: not(ri!readonly),
      isCollapsible: true
    ),
    a!richTextDisplayField(),
    a!buttonLayout(
      primaryButtons: a!buttonWidget(
        label: "Submit",
        saveinto:{},
        submit: true,
        style: "SOLID",
        loadingIndicator: true,
        validate: true,
        /*validate: a!validationMessage(*/
          /*message: "Invalid",*/
          /*showWhen: or(*/
            /*a!isNotNullOrEmpty(local!docRequiredGovId),*/
            /*a!isNotNullOrEmpty(local!docConsentForm),*/
            /*a!isNotNullOrEmpty(local!idVerification),*/
            /*a!isNotNullOrEmpty(local!docRequiredCriminalCheck),*/
            /*a!isNotNullOrEmpty(local!docOther)*/
          /*),*/
          /*validateAfter: "SUBMIT"*/
        /*)*/
      ),
      secondaryButtons: a!buttonWidget(
        label: "Cancel",
        value: true,
        saveInto: { ri!cancel },
        submit: true,
        style: "OUTLINE",
        validate: false
      ),
      showWhen: not(ri!readonly)
    )
  }

RE: Condition based validation

Zakary Melvin — Mon, 17 Feb 2025 18:30:30 GMT

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)
                  )
                } 
              )
            }
          )
        }
      ) 
    }
  )
)

RE: Condition based validation

rajeshp7374 — Mon, 17 Feb 2025 17:56:14 GMT

a!localVariables(
{
a!boxLayout(
label: "Business Risk Acceptance",
contents: {
a!boxLayout(
label: "I am requesting a Business Risk Acceptance because I HAVE NOT completed the following (at least one box must be selected)",
contents: {
a!sideBySideLayout(
items: {
a!sideBySideItem(
item: a!checkboxField(
choiceLabels: {
"Two Valid Government IDs (1 must contain photo) – Photo ID not retained for audit purposes"
},
choiceValues: {
"Two Valid Government IDs (1 must contain photo) – Photo ID not retained for audit purposes"
},
label: "",
value: local!docRequiredGovId,
saveInto: local!docRequiredGovId,
validations: if(
a!isNotNullOrEmpty(local!docRequiredGovId),
{},
"At least one option must be selected."
)
)
),
a
}
),
a!sideBySideLayout(
items: {
a!sideBySideItem(
item: a!checkboxField(
choiceLabels: {
"Copy of 2 Valid Government IDs (optional)"
},
choiceValues: {
"Copy of 2 Valid Government IDs (optional)"
},
label: "",
value: local!docOptionalGovId,
saveInto: local!docOptionalGovId,
validations: if(
a!isNotNullOrEmpty(local!docOptionalGovId),
{},
"At least one option must be selected."
)
)
),

}
),
a!sideBySideLayout(
items: {
a!sideBySideItem(
item: a!checkboxField(
choiceLabels: {
"Consent Form and Security Regulations"
},
choiceValues: {
"Consent Form and Security Regulations",

},
label: "",
value: local!docConsentForm,
saveInto: local!docConsentForm,
validations: if(
a!isNotNullOrEmpty(local!docConsentForm),
{},
"At least one option must be selected."
)
)
),

}
),
a!sideBySideLayout(
items: {
a!sideBySideItem(
item: a!checkboxField(
choiceLabels: { "ID Verification" },
choiceValues: { "ID Verification", },
label: "",
value: local!docIdVerification,
saveInto: local!docIdVerification,
validations: if(
a!isNotNullOrEmpty(local!docIdVerification),
{},
"At least one option must be selected."
)
)
),

}
),
a!sideBySideLayout(
items: {
a!sideBySideItem(
item: a!checkboxField(
choiceLabels: { "Criminal Record Check Report(s)" },
choiceValues: { "Criminal Record Check Report(s)", },
label: "",
value: local!docRequiredCriminalCheck,
saveInto: local!docRequiredCriminalCheck,
validations: if(
a!isNotNullOrEmpty(local!docRequiredCriminalCheck),
{},
"At least one option must be selected."
)
)
),

}
),
a!sideBySideLayout(
items: {
a!sideBySideItem(
item: a!checkboxField(
choiceLabels: { "Other" },
choiceValues: { "Other", },
label: "",
value: local!docOther,
saveInto: local!docOther,
validations: if(
a!isNotNullOrEmpty(local!docOther),
{},
"At least one option must be selected."
)
)
),

}
)
},
isCollapsible: true
)

},
showWhen: not(ri!readonly),
isCollapsible: true
),
a!richTextDisplayField(),

a!buttonLayout(
primaryButtons: a!buttonWidget(
label: "Submit",
saveinto:{}
submit: true,
style: "SOLID",
loadingIndicator: true,
validate: a!validationMessage(
message: "Invalid",
showWhen: or(
a!isNotNullOrEmpty(local!docRequiredGovId),
a!isNotNullOrEmpty(local!docConsentForm),
a!isNotNullOrEmpty(local!idVerification),
a!isNotNullOrEmpty(local!docRequiredCriminalCheck),
a!isNotNullOrEmpty(local!docOther)
),
validateAfter: "SUBMIT"
)
),
secondaryButtons: a!buttonWidget(
label: "Cancel",
value: true,
saveInto: { ri!cancel },
submit: true,
style: "OUTLINE",
validate: false
),
showWhen: not(ri!readonly)
)
}
)

RE: Condition based validation

osanchea — Mon, 17 Feb 2025 17:48:14 GMT

You could try this:

a!localVariables(
  local!selected,
  {
    a!checkboxField(
      choiceLabels: {"Option 1", "Option 2", "Option 3", "Option 4"},
      choiceValues: {1, 2, 3, 4},
      label: "Checkboxes",
      labelPosition: "ABOVE",
      value: local!selected,
      saveInto: {local!selected},
      required: true,
      requiredMessage: "You should select at least one option",
      validations: {}
    ),
    a!buttonArrayLayout(
      buttons: {
        a!buttonWidget(
          label: "Button",
          style: "OUTLINE",
          validate: true
        )
      },
      align: "START",
      marginBelow: "NONE"
    )
  }
)

RE: Condition based validation

Mathieu Drouin — Mon, 17 Feb 2025 17:43:34 GMT

Using a formLayout or cardLayout should have no bearing on the outcome. If you could share the code, it would help.