a!buttonWidget( label: "SUBMIT", submit: true, style: "PRIMARY", loadingIndicator: true(), showWhen: local!activeStep = length(local!steps), confirmMessage: "Do you want to continue and submit data?", confirmButtonLabel: "SUBMIT", cancelButtonLabel: "CANCEL" ),
Hi All,
I have a form for the user to add some required/ optional fields, right now my confirmation message in the submit button shows before it validates the required fields. So it shows confirmation message, and then shows the red field validations- instead I would like to see those validations immediately once I click the first submit, instead of after the confirmation message.
Is there a way to show the confirmation message after the button itself has validated that all required fields are filled in the form? or show confirmation only when all required fields are filled in?
thanks in advance!
Discussion posts and replies are publicly visible
This would require either a behavioral change to be introduced to the component itself (which i'm not altogether opposed to), or perhaps better, an optional parameter to shift the order of evaluation between the two things. Any of these would require a Support Case with Appian, then a (lengthy, and probably longer-than-you-want-to-wait) waiting period for it to be introduced to the base product.
Such a thing is *plausibly* possible via HIGHLY-MANUAL workarounds - since you can determine the very presence of the confirmation messages for a button click via expressionable logic, you could plausibly run your own "all required fields filled" check, in the background, and only have the confirmation parameters pass anything when you detect that requirements have been satisfied. For one or two required fields this is pretty simple, but for a long form and any additional level of complexity, it's obviously quite a lift and in many cases barely feasible (if at all). But just suggesting it for completeness and in case you have a critical and/or simpler case.
Whipped up a simple example:
a!localVariables( local!text1, local!text2, local!allRequiredFieldsFilled: and( a!isNotNullOrEmpty(local!text1), a!isNotNullOrEmpty(local!text2) ), a!formLayout( label: "My Form", contents: { a!textField( label: "text 1", value: local!text1, saveInto: local!text1, required: true() ), a!textField( label: "text 2", value: local!text2, saveInto: local!text2, required: true() ) }, buttons: a!buttonLayout( primaryButtons: { a!buttonWidget( label: "Submit", validate: true(), confirmMessage: if(local!allRequiredFieldsFilled, "Ready to Finish?", "") ) } ) ) )
If any required field is un-filled, there's no confirmation message, otherwise it displays as normal. (Note, the same conditional logic would also need to wrap the "confirm header" if that is used too - there's no way to simply turn the message on/off without just running the same logic on both of those parameters).