{{announcement.body}}
{{announcement.title}}

Working With ArrayDataProviders Using JavaScript Functions in Visual Builder

DZone 's Guide to

Working With ArrayDataProviders Using JavaScript Functions in Visual Builder

Learn how to add additional processing/updates on all the records you're storing in an ADP.

· Web Dev Zone ·
Free Resource

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:

Data array
Data Array

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:

Updated Data
Updated Data

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


Topics:
web dev ,javascript tutorial ,javascript functions ,front-end development ,client-side interface

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}