Need help on checkbox form save logic #19313
Replies: 1 comment 1 reply
|
I've replied to Imran via email, but for the benefit of the community I thought it would make sense to provide an answer here as well. Here's what I've got: In the Data section, I've built a table of "applications" And a table of "policies"
These tables have a many-to-many relationship. This is important for later. In an app, I've added a form (not a form block) and laid out my fields accordingly. Inside the form, I've added a Repeater Block set to display data from the Policies table. Every child-component of the Repeater Block will be displayed for every row there is returned from the table. In my case, I have 4 rows. I've made use of the bindings to display the text like this:
And even added an "On-click action" to the container that holds the text for downloading the policy
Here's the real issue I think you're trying to solve: How do you get the values from the checkboxes to write a relationship in the table to say that this applicant has accepted these Ts & Cs. In the Checkbox, I've added an on-change action, to update some state. State is like a variable in programming, it's just a place to save something, and give it a name. Every time any of the checkboxes are checked-or-unchecked, this action runs. My JavaScript here looks a little bit complicated if you're not used to programming concepts, but I'll walk you through it.
We initially declare a JS variable, checkedPolicies, and say that it is equal to either the existing state-variable of a similar name, OR an empty array if there's nothing by that name (this will be the case initially). We then check if the Field Value is truthy (checked). If it is, then we add that checkbox's ID to the array we declared above. And if it's not (else), we take it out of the array Lastly, we must return the array we have worked with to set the state value. With all this being said, checking a box adds it to a list (array), and unchecking it removes it from the list again. Now at the end of my form, I have a save button, which triggers an on-click action to save my form. In the settings of my form, I've got the type set to create, and the schema set to "applications". This means that the form will understand that my field set to "first_name" should be saved into the first_name column in the table, so with that, there's very little else to do. However, the relationship between this application and the policies isn't as straightforward as a single field, so it doesn't have that understanding, so you'll need to specify the values here. Providing the array of row IDs is what's required, and in this case the JS function is simply return $("State.checked_policies")
With all that said and done, you should also look into some form validation using the Validate Form action (required fields, checkboxes must be checked etc), and then also look at using an "Update State" action to clear the state after the form has been submitted, and also a "Clear Form" action to empty it out for next time.
Some further reading for you: You can also take a closer look at this by downloading and importing the workspace I used to demonstrate all of the above. |













I've replied to Imran via email, but for the benefit of the community I thought it would make sense to provide an answer here as well.
Here's what I've got:
In the Data section, I've built a table of "applications"
And a table of "policies"
These tables have a many-to-many relationship. This is important for later.
In an app, I've added a form (not a form block) and laid out my fields accordingly.
Inside the form, I've added a Repeater Block set to display data from the Policies table. Every child-component of the Repeater Block will be displayed for every row there is returned from the table. In my case, I have 4 rows.
I've made use of the bindings to display the text like this:
And…