Getting ADF Data in a Jet Component (2)

In my previous blog I explained how to get ADF Data in a Jet Component, this was done by iterating through a ViewObject and rendering a component per element in the View Object. When you want to use the DVT’s from Oracle Jet, this won’t do the thing, because you will need the entire data set to be present at once in your component. This blog will show you how to do that without using Rest Services.

My colleague Lucas Jellema made a JSONProviderBean, which makes data from data bindings available as nested JSON object in client side JavaScript.¹

Using this bean we can use the iterator binding of our View Object in our component page fragment.

<div>
 <amis-chart chart-data="#{jsonProviderBean[bindings.EmployeesVO.DCIteratorBinding]}"/>
 </div>

This will pass the JSON as a string to our component.

    {
        "properties": {
            "chartData": {
                "type": "string"
            }
        }
         
    }

In our component viewmodel we can now parse this string into a json object. The “values” object of this json object contains the data we need for our barchart, but it is not in a form the barchart can understand. Therefore you need to write function to get the data you need and put it into a format that the barchart does understand.

    function AmisChartComponentModel(context) {
        var self = this;
    
        context.props.then(function (propertymap) {
            self.properties = propertymap;
            var dataAsJson = JSON.parse(propertymap.chartData);
            var barData = self.createBarSeries(dataAsJson.values);
            /* set chart data */
            self.barSeriesValue = ko.observableArray(barData);
        })
        
        //function to transform the data.
        self.createBarSeries = function (jsonDataArray) {
            var data = [];
            jsonDataArray.forEach(function (item, index, arr) {
                data.push( {
                    "name" : item.FirstName, "items" : [item.Salary]
                });
            })
            return data;
        }    
        
    }
    return AmisChartComponentModel;

});

We now have our entire employee data set available for the barchart. In this case I made a chart for Salary per employee, we can do all the fancy interactions with the component that we can normally do as well, for example stacking the data or changing from a horizontal to a vertical graph.

Sources

1. https://github.com/lucasjellema/adf-binding-to-json
2. https://technology.amis.nl/2017/03/07/getting-adf-data-jet-component/
3. http://andrejusb.blogspot.nl/2015/12/improved-jet-rendering-in-adf.html
4. https://blogs.oracle.com/groundside/entry/jet_composite_components_i_backgrounder (and the other blogs)
5. Source of this demo: Github

Versions used

JDeveloper 12.1.3,
OracleJet V2.2.0

Disclaimer

The information is based on my personal research. At the moment, Oracle does not support or encourage integrating ADF and Jet. Oracle is working on JET Composite Components in ADF.