Developer Community

Oracle JET Version: 15.1

Hi JET Community

On upgrading a large number of JET 10.x applications to JET 15.1, we have noticed an issue with oj-table and the use of the fetchFirst() function on the data provider as part of a validator.

The use case is to validate that the table does not already have a row with a given table value in order to validate uniqueness, for example, in the JET Cookbook CRUD example, this would be to validate that the Department Id is unique.

The implementation approach we have used is to declare a validator on the form input component. The validator uses DataProvider.fetchFirst() to loop through all the rows to see if a row exists for the value entered by the user. If a row is found, the validator resolves with an error message. This approach worked fine in JET 10.x. In JET 15.1, this approach causes all future row additions/edits to not show up in the table even though the underlying data provider is in fact updated. The only way around this is to issue a refresh() on the oj-table component after inserting the row which does not seem right.

We have created a JS Fiddle at the location below to highlight the issue. We have used the same example used in the JET Cookbook CRUD and simply added a custom validator at the bottom of the view model. Instructions are shown at the top of the page.

https://jsfiddle.net/david_archbold/deapb4fm/6

Steps:

• Insert new row to table with unique Department Id (row is inserted to data provider and shown in table).
• Use switch in form region to turn on custom validator.
• Enter a non-unique Department Id (validator fires using fetchFirst() and error shown on input field).
• Enter a unique Department Id (validation is passed and rows inserted to data provider but row not shown in table)
• All further edits are not shown in table.

Any assistance greatly appreciated.

View Model Code:

// Custom Functions

this.departmentIdValidator = function (value) {
    return new Promise((resolve, reject) => {

        if(self.enableValidator() === false){
            resolve();
            return;
        }
        
        
// Loop through all rows in the data provider using fetchFirst() with a filter
        
// and resolve with an error message if a row is found where the DepartmentId
        
// matches the value.

        if (value) {
            let filterCriteria = {
                op: '$or',
                criteria: [
                    {
                        op: '$eq', value:
                            { DepartmentId: value }
                    }
                ]
            };

            let fetchResult = self.dataprovider.fetchFirst({
                filterCriterion: filterCriteria,
                size: 200
            })[Symbol.asyncIterator]();

            fetchResult.next().then(
                function (result) {

                    let filterData = result.value.data;
                    if (filterData.length > 0) {

                        reject({
                            detail: "Row already exists for Department Id"
                        });

                    } else {
                        resolve();
                    }
                }
            );

        } else {
            resolve();
        }

    });
}

this.validateDepartmentId = {
    validate: this.departmentIdValidator
}


// End Custom Functions

HTML Code (Validator added as input validator):

<oj-input-number id="departmentIdInput" max="2000" min="0" label-hint="Department Id"
  value="{{inputDepartmentId}}" converter="[[converter]]"
  validators="[[[validateDepartmentId]]]">
</oj-input-number>