Sunday, 16 September 2018

Clearing error state of an Interactive Grid column

On a recent project, there was a requirement that when they save data they don't want any validations to come into play, and it's only when they go to submit the transaction that validation errors should appear.

So I had a set up where the Save button (AJAX) was removed from interactive grid toolbar, and the form page form has two buttons: "SAVE" and "SUBMIT".

Following this design pattern, if I click SUBMIT with a validation failure in the data, the relevant row would be highlighted in the interactive grid:

Now as a user I decide I don't want to submit the page anymore, but rather just do a save.

However, clicking save I won't be able to get the page submitted without changing the value of that field (or as an alternate situation, the validation may be dependent on some other page item, which I could have corrected but still the error state of the grid/line will be present). APEX will not submit the page and I would get an error that I need to correct any errors first.

So, what we need to do is change the button behaviour to first clear the error state to ensure I can submit the page.

If you are using interactive grid, you hopefully know it is built up of multiple components, and one such component is the model (apex.model). When our validation caused a failure, the model has flagged it as not valid. So, before we submit/save the page, we need to clear that validity state which will enable the page submission to occur.

So, rather than a straight submit button, we can alter our button to run the following JavaScript code (submitting the page only after our data is set to a valid state):

var gridView = apex.region("emp").widget().interactiveGrid("getViews", "grid"),
    model = gridView.model;

model.forEach(function clearIgErrorState(record, recordIndex, recordId){
    model.setValidity("valid", recordId, "COMM")

In this example, I am specifically making it so that the "COMM" column is no logger flagged as having an error.

To see this function specs, refer to the documentation to see what other inputs it accepts.