DISCLAIMER: The views expressed in this story are my own and do not necessarily reflect the views of Oracle.
This article describes how to create and use Array Data Provider (ADP) type in Oracle Visual Builder. ADP provides more flexibility to populate and manipulate data than Service Data Provider (SDP). ADP data can be set from business objects, service connections, or static data.
In this article, we will demonstrate how to initialize and use ADPs in a VB web application. We will show the following three separate examples:
Create an ADP variable and load data from a business object.
<div class=”oj-flex”>
<oj-table scroll-policy=”loadMoreOnScroll” class=”oj-flex-item oj-sm-12 oj-md-12″ data=”[[ $variables.contactsListADP ]]” columns='[{“headerText”:”firstName”,”field”:”firstName”},{“headerText”:”lastName”,”field”:”lastName”},{“headerText”:”email”,”field”:”email”},{“headerText”:”phoneNumber”,”field”:”phoneNumber”},{“headerText”:”title”,”field”:”title”},{“headerText”:”company”,”field”:”company”}]’>
</oj-table>
</div>
Create an ADP variable and bind to another variable with static data.
[
{
“region”: “us-east”,
“name”: “US-East”
},
{
“region”: “us-central”,
“name”: “US-Central”
},
{
“region”: “us-west”,
“name”: “US-West”
}
]
<div class=”oj-flex”>
<oj-select-single label-hint=”Region” class=”oj-flex-item oj-sm-12 oj-md-4 oj-form-control-max-width-md”
data=”[[ $variables.regionListADP ]]” item-text=”name”>
</oj-select-single>
</div>
Create an ADP using JS function and load static data.
define(["ojs/ojarraydataprovider"], function(ArrayDataProvider) {
'use strict'; var dataArray = [
{"region": "us-east", "name": "US-East"},
{"region": "us-central", "name": "US-Central"},
{"region": "us-west", "name": "US-West"}
]; var PageModule = function PageModule() {}; PageModule.prototype.createADP = function() {
return new ArrayDataProvider(
dataArray, { keyAttributes: "region" });
}; return PageModule;});
<div class="oj-flex">
<oj-select-single label-hint="Region" class="oj-flex-item oj-sm-12 oj-md-4 oj-form-control-max-width-md"
data="[[ $variables.regionListADP ]]" item-text="name">
</oj-select-single>
</div>