Validating Input/Partially Restrict Editing of Fields
Hi all,
I have a checklist (for users to fill out) in the form of a table as illustrated here:
It is a HTML table housed in a Formatted Text field. I would like to prevent users from modifying the checklist items (first column of the table) or perform some sort of validation of the checklist items to ensure that they haven't be deformed.
Having the items and the entries in a different field (and then disabling editing of the items field) is not an option as the list requires scrolling, and that would cause the items and entries to become misaligned.
This looks really great and is a good idea. I tried something similar, however, I was unable to save user input in the input boxes. What do you use for the input fields? And how do you save the input?
Regarding Formatted Text you can use "contenteditable":
It´s not a super reliable solution, user can still change the native html code.
In my image the table itself is rendered on demand and represents a individual product. User scan numbers into the input fields. The values are automatically stored in an external table. It´s not fully comparable to your use case.
I assume your checklist items are static and user just shall tick yes/no. Instead of storing the complete table over and over again, maybe just store the user input.
Use a html table that contains the checklist and the some input or dropdowns for Y/N. Assign ids to these elements. You need these id to assign the user input to the checklist elements (either for storing the data or for displaying the data).
Where to store the data?
Option 1: You can store the user input as hidden (!) relationships in your ItemType. Use the element id to assign the data to the correct checklist item when opening the Form. Or maybe even store checklist text AND user selection in one relationship.
Option 2: In your ItemType, add a text property that is hidden in the form. Use the text property to store the user selection in a JSON, XML like format. Same principle as above. Use an id to connect the user selection to the checklist text.
Trigger to store the data
I right now assume we use option 2.
Option 1: Use event delegation to add an onChange (?) event to your inputs or dropdowns. This event shall update the JSON content in the text property.
Option 2: Overwrite the edit button in the Item Form to only update the text property when user saves the item.
Where to start
It´s 2025. Chat GPT probably can built you 90% of the needed code regarding table rendering and the event listeners to update the JSON text property.
But don´t take my idea as the ultimate answer. There are maybe easier ways to solve this use case. If anyone else has a better idea, let me know!
