I have a table with inline add / edit /bulkedit options enabled.
when an adding/editing a record, I need to check if the record is valid based on some conditions. In OnCreate action - I access the table newRow.data to check if the data is valid. If it is valid, I proceed with inserting the record to the database. If not, I need to show a notification and keep the record open for addition. The same for OnEdit and OnBulkEdit. How to achieve this?
Hi @userportfolio,
Generally there are 2 things you can do:
- Set constraints for the columns
- Use triggers to react upon action after they happened
In the case of constraints, you can set those for each column in the table. If you select the column in the menu on the right and look for EDIT SETTINGS you will see some constraints that can be set, like a Regexp pattern or an Input mask the input must follow:
For example, for this last_name column, I could check the Required field checkbox and set /^[a-zA-Z]+$/ for Regex pattern.
If someone were try to enter an empty string or numbers, it would show an error like:
Of course you can set the error message yourself. And obviously column types like Button don’t have any Edit settings besides Disabled.
Then there are triggers. The tricky thing is that triggers only happen after the fact, so, for example, the *On Create* trigger only runs after the user submits the new row.
But this isn’t a problem, as we can work with the table source and straight up deny a row creation.
The cleanest way to prevent a row addition (from what I’ve found out by testing) is to throw new Error() if the validation failed. Because if we do that, firstly it doesn’t add the row, and secondly it leaves the inputs with the entered values open.
For example, recreating the constraints from above, we could write the On Create action like this
const newRow = {{data.data}};
if (newRow.last_name.length > 0 && /^[a-zA-Z]$/.test(newRow.last_name)) {
{{state.data.push(newRow)}}
} else {
{{actions.notif.trigger()}};
throw new Error('Not valid');
}
{{state.data}} is the State Variable I set as Data for the table:
and {{actions.notif}} is an action that just displays a notification:
Now, if the user adds a row and enters a last name with only letters, it will push it to the {{state.data}} array. Whenever the Data of the table is updated, it refreshes the table, therefor it also nicely adds the row to the end.
On the other hand, if the user doesn’t enter any last name or enters something besides letters, it will execute the action that shows a notification and throw an error. This will then, as said before, prevent the row from being added and leave the inputs open.
Lastly, about On Edit and On Bulk Edit. You can handle those similarly to On Create, but there are some differences.
If using State variables as the Data source of the table, the data would be updated automatically. Therefore, you only need to intervene if something is not right. Again, using the same example as above, the On Edit action could look like
const {prevData, newData} = {{data}};
const entry = {{state.data.find(d => d.id === newData.id)}};
if (newData.last_name.length === 0 || !/^[a-zA-Z]$/.test(newData.last_name)) {
entry.last_name = prevData.last_name;
}
If an empty string or one with something apart from letters was entered, it sets the previous value for that entry. That way nothing was changed.
For On Bulk Edit, it is the same as for On Edit except you have to do it for multiple changes.
In conclusion, I would set up constraints, as those already handle a lot of the heavy work, and most of the time you don’t even need the triggers. For the times you do, there is not a lot to do when the constraints handle most already.
Hope this helps; feel free to ask if something is unclear!
1 Like
This line of code helped to fix my issue. The validations are little more complex than constraints, they have business logic as well. So, I have actions to validate the data and commit the data to the source.
Thank you very much!!
1 Like