I need to create a user interface.
The interface consists of multiple sections, each section will have it's dedicated submit buttons. Each section will have it's own dedicated required fields (using required parameter of field) and fields validations.
Now, when I use buttons in each section with validate as true, it checks for the required validity of every section, though that button is not dedicated to those other sections.
How can I make it to check only the requiredness and validation of the section which it is dedicated to.
In the attached code, when I click "Submit as Future Hire" or "Onboard Employee Now", besides checking the validation or requiredness of the section fields in which it is placed, it is checking for other section as well.
Validation groups are also not working properly, when I click "Onboard Employee Now" in first section, it checks for validation of fields "Phone Number" and "Start Date" for first section, the section in which it is placed. That's fine. But, if I click the same button to check the same validation of same fields in other section below, then it checks the validation of fields in second section but at the same time removes the validation which were previously placed in first section. These sections and their requiredness and validations should be independent of each other but the sections should stay in one interface.
{ a!localVariables( /* * All of these local variables could be combined into the employee CDT and passed into * a process model via a rule input */ local!firstName, local!lastName, local!department, local!title, local!phoneNumber, local!startDate, /* * local!isFutureHire is a placeholder varaiable used to set the validation group trigger. * When isFutureHire is set to true, a user can skip phone number and start date. */ local!isFutureHire, local!isNumberValid: if(len(local!phoneNumber) <= 12, true, false), a!sectionLayout( label: "Example: Add Employee with Conditional Requiredness", contents: { a!textField( label: "First Name", value: local!firstName, saveInto: local!firstName, required: true ), a!textField( label: "Last Name", value: local!lastName, saveInto: local!lastName, required: true ), a!dropdownField( label: "Department", choiceLabels: { "Corporate", "Engineering", "Finance", "Human Resources", "Professional Services", "Sales" }, placeholder: "-- Please Select a Department -- ", choiceValues: { "Corporate", "Engineering", "Finance", "Human Resources", "Professional Services", "Sales" }, value: local!department, saveInto: local!department, required: true ), a!textField( label: "Title", value: local!title, saveInto: local!title, required: true ), /* * When a field has a validation group set, the required parameter and any validations * are deferred until the validation group is triggered by a button or link. * * Multiple validations are added to the phone number field by adding a local variable * that turns off required and validation group, but triggers a standard validation * upon unfocus from the field (rather than the onboard button click). */ a!textField( label: "Phone Number", placeholder: "555-456-7890", value: local!phoneNumber, saveInto: local!phoneNumber, required: local!isNumberValid, requiredMessage: "A phone number is needed if you're going to onboard this employee", validations: if( local!isNumberValid, "", "Please enter a valid telephone less than 12 digits long." ), validationGroup: if(local!isNumberValid, "F1", "") ), a!dateField( label: "Start Date", value: local!startDate, saveInto: local!startDate, required: true, requiredMessage: "A start date is needed if you're going to onboard this employee", validationGroup: "F1" ), a!buttonLayout( primaryButtons: { a!buttonWidget( label: "Submit as Future Hire", value: true, saveInto: local!isFutureHire, submit: true ), a!buttonWidget( label: "Onboard Employee Now", value: false, saveInto: local!isFutureHire, submit: true, validationGroup: "F1" ) } ) } ) ), a!localVariables( /* * All of these local variables could be combined into the employee CDT and passed into * a process model via a rule input */ local!firstName1, local!lastName1, local!department1, local!title1, local!phoneNumber1, local!startDate1, /* * local!isFutureHire is a placeholder varaiable used to set the validation group trigger. * When isFutureHire is set to true, a user can skip phone number and start date. */ local!isFutureHire1, local!isNumberValid1: if(len(local!phoneNumber1) <= 12, true, false), a!sectionLayout( label: "Example: Add Employee with Conditional Requiredness", contents: { a!textField( label: "First Name", value: local!firstName1, saveInto: local!firstName1, required: true ), a!textField( label: "Last Name", value: local!lastName1, saveInto: local!lastName1, required: true ), a!dropdownField( label: "Department", choiceLabels: { "Corporate", "Engineering", "Finance", "Human Resources", "Professional Services", "Sales" }, placeholder: "-- Please Select a Department -- ", choiceValues: { "Corporate", "Engineering", "Finance", "Human Resources", "Professional Services", "Sales" }, value: local!department1, saveInto: local!department1, required: true ), a!textField( label: "Title", value: local!title1, saveInto: local!title1, required: true ), /* * When a field has a validation group set, the required parameter and any validations * are deferred until the validation group is triggered by a button or link. * * Multiple validations are added to the phone number field by adding a local variable * that turns off required and validation group, but triggers a standard validation * upon unfocus from the field (rather than the onboard button click). */ a!textField( label: "Phone Number", placeholder: "555-456-7890", value: local!phoneNumber1, saveInto: local!phoneNumber1, required: local!isNumberValid1, requiredMessage: "A phone number is needed if you're going to onboard this employee", validations: if( local!isNumberValid1, "", "Please enter a valid telephone less than 12 digits long." ), validationGroup: if(local!isNumberValid1, "F", "") ), a!dateField( label: "Start Date", value: local!startDate1, saveInto: local!startDate1, required: true, requiredMessage: "A start date is needed if you're going to onboard this employee", validationGroup: "F" ), a!buttonLayout( primaryButtons: { a!buttonWidget( label: "Submit as Future Hire", value: true, saveInto: local!isFutureHire1, submit: true ), a!buttonWidget( label: "Onboard Employee Now", value: false, saveInto: local!isFutureHire1, submit: true, validationGroup: "F" ) } ) } ) ) }
Discussion posts and replies are publicly visible
You need to understand one thing that if a Button is set as a submit button (i.e., when submit parameter is true), then all the validations for required fields which are present in the interface will be evaluated until and unless any of them are mapped to a validationGroup which is not present in the validationGroup of Submit button and if there is no validation thrown then the flow will move to the next node in process i.e., it gets submitted (now you cannot access it back again under normal circumstances).
That's why when you click on any of the "Submit As Future Hire" button, you only see validations for all the required fields as you have not mapped any validationGroup to this button. But if you click on "Onboard Employee Now" you get to see all the validations without a group + validations which are present in the group which is set on the clicked button.
I don't exactly understand what you are up to but if it is about adding multiple employees at a time then there is no need to provide same buttons for multiple sections, instead only provide button at the bottom of the form and give a dynamic link to the user which when clicked adds a section to add another employee.
You may also want to check out a!validationMessage() which allows you to throw validations on section-level which are evaluated when a submit button or normal button with validate parameter set to true is clicked.
This is more of a page where user can add additional information but that information is divided under sections. Like Bank Information, Company CEO information and other additional info on one page. And every section has their own validation and requiredness of fields. And sometimes user doesn't want to update all the additional info, let's say he just want to update only bank info with account no., Swift code and bank name as mandatory. Then if I provide only one submit button for whole form then that button will again check the validation and requiredness of other sections in the form which is navigating away from what's needed.
And validation groups only work for validations, not working with required parameters as true of an input field. They are always checked for every field in every section ignoring validation group. Any way to do this.
Validation groups can sometimes be tricky. But why not built the interface in a wizard style where you can only proceed to the next step when all fields are correct. Then only show the next step, or disable / set read-only the previous steps.
Validation groups are working fine now with that pattern when I tried some simple coding. Must be some bad code in my above code.
The only compromise is that * asterisk goes away for required fields when you use validation groups but we are managing with rich text custom coding.
Thanks to both of you for the suggestions.