Working With ArrayDataProviders Using JavaScript Functions in Visual Builder

Storing data in ArrayDataProviders (rather than SDP) is useful whenever you want to further modify the data on the client side — for example, if you are looking to create updatable tables in your UI. A common follow up question is, "how can I do additional processing/updates on all the records I'm storing in the ADP?" This is what this post is about.

Since the records are now stored on the client-side, you can access them through JavaScript. You can, for example, write a page level module function to loop over the set of records and modify them. For example, in the video below I'm using this little function to raise the salary of all the employees:

PageModule.prototype.arrayModifier = function(array){
  console.log(array.length + " is what we got")
    for (var i = 0; i < array.length  ; i++ ) {
      array[i].salary = array[i].salary+2;
      console.log("salary after " + array[i].salary);
  }
  return array;
}

Into this function you'll pass the array of data from the ArrayDataProvider — you can do this in the parameter mapping of the function pointing to the data object like this:

Once your function finished its processing of the data, you'll want to update the ArrayDataProvider back to reflect the changes you made. To do this you can use the action called "Fire Data Provider Event." This function has the option to mutate events (update, insert, delete). You can read the doc about this and other actions parameters here. For the update, you simply need to provide the array of updated data like this:

That's it. You can see all the pieces of this process working together in the video below: