Welcome to the OPA Hub!

Category Archives: Tutorial

Dynamic Charts in Container Controls Example Image

Dynamic Charts in Container Controls

Dynamic Charts in Container Controls

As many of you know, we try to provide JavaScript Extension examples for you to experiment with in your own Projects. A while ago, we looked at an interesting question about using Dynamic Charts in Container Controls – basically to display a chart (which is the sort of thing it was designed for),  but to also include the capability to update the chart live as the data is edited on the same Screen. A quick animation will give you the idea:

The example is an interesting one, on account of it allowing us to talk about the difference between viewing data that exists already, versus using data that has just been created.

To keep it simple, we can think of server-side data and client-side data. Server-side data, for example used in Container Controls, represents the data that has been collected in a previous Screen. It’s already been seen by the determination server.

Client-side data is information that has been entered on the current Screen before the Next button has been clicked. So as far as the determination process is concerned it is “not quite there yet”.

The same concepts exist in the world of JavaScript extensions. For example, consider the difference between these two keys : mount and update from the updated  Container Control example that is available here.

 return {
                mount: function(el) {
                    console.log("Starting customContainer Mount");
                    if (document.readyState == 'complete') {
                        var rows = [];
                        for (i = 0; i < entities.length; i++) {
                            entity = entities[i];
                            if (entity.entityId === "payment") {
                                break;
                            }
                        }
                        rows = entity.instances;
                        var myFlatList = [];
                        var myObject;
                        var width = 300,
                            height = 300,
                            radius = 150,
                            color = d3.scaleOrdinal(d3.schemeCategory10);
                        var size = rows.length;
                        for (i = 1; i < size + 1; i++) {
                            myObject = new Object();
                            myObject.label = control._source.screen.serverState.payment['the payment' + i].payment;
                            myObject.value = control._source.screen.serverState.payment['the payment' + i].amount;
                            myFlatList.push(myObject);
                        }
                        data = myFlatList;
                        var vis = d3.select(el);
                        vis.select('svg').remove();
                        var vis = d3.select(el)
                            .append('svg')
                            .data([data])
                            .attr('width', width)
                            .attr('height', height)
                            .append('g')
                            .attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')');
                        var arc = d3.arc().outerRadius(radius)
                            .innerRadius(0);
                        var pie = d3.pie()
                            .value(function(d) {
                                return d.value;
                            });
                        var arcs = vis.selectAll('g.slice')
                            .data(pie)
                            .enter()
                            .append('svg:g')
                            .attr('class', 'slice');
                        arcs.append('svg:path')
                            .attr('fill', function(d, i) {
                                return color(i);
                            })
                            .attr("d", arc);
                        arcs.append('svg:text')
                            .attr('transform', function(d) {
                                d.innerRadius = 0;
                                d.outerRadius = radius;
                                return "translate(" + arc.centroid(d) + ")";
                            })
                            .attr('text-anchor', 'middle')
                            .text(function(d, i) {
                                return data[i].label;
                            });
                        console.log("Ending customContainer Update");
                    }
                    console.log("Ending customContainer Mount");
                },
                update: function(el) {
                    console.log("Starting customContainer Update");
                    var myFlatList = [];
                    var myObject;
                    entity = control._source.publicInterface._source.screen.clientState.payment;
                    var rows = [];
                    rows = entity;
                    for (var key in entity) {
                        if (!rows.hasOwnProperty(key)) continue;
                        var obj = rows[key];
                        for (var prop in obj) {
                            if (!obj.hasOwnProperty(prop)) continue;
                            myObject = new Object();
                            myObject.label = obj.payment;
                            myObject.value = obj.amount;
                        }
                        if (myObject.label != "") {
                            myFlatList.push(myObject);
                        }
                    }
                    var width = 300,
                        height = 300,
                        radius = 150,
                        color = d3.scaleOrdinal(d3.schemeCategory10);
                    data = myFlatList;
                    var vis = d3.select(el);
                    vis.select('svg').remove();
                    var vis = d3.select(el)
                        .append('svg')
                        .data([data])
                        .attr('width', width)
                        .attr('height', height)
                        .append('g')
                        .attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')');
                    var arc = d3.arc().outerRadius(radius)
                        .innerRadius(0);
                    var pie = d3.pie()
                        .value(function(d) {
                            return d.value;
                        });
                    var arcs = vis.selectAll('g.slice')
                        .data(pie)
                        .enter()
                        .append('svg:g')
                        .attr('class', 'slice');
                    arcs.append('svg:path')
                        .attr('fill', function(d, i) {
                            return color(i);
                        })
                        .attr("d", arc);
                    arcs.append('svg:text')
                        .attr('transform', function(d) {
                            d.innerRadius = 0;
                            d.outerRadius = radius;
                            return "translate(" + arc.centroid(d) + ")";
                        })
                        .attr('text-anchor', 'middle')
                        .text(function(d, i) {
                            return data[i].label;
                        });
                    console.log("Ending customContainer Update");
                },

Notice that the mount key uses the server-side data : when we draw the Control, we can only draw what is already available to us. But in the update, we want to take into account the new data entered by the user, so we look for the client-side data. So now we can be more specific : you can access clientstate and serverstate information which can help you work with previously entered or just-entered dynamic information.

Hope you have fun building your Dynamic Charts in Container Controls! We’ve updated the Shop example to include the complete Zip File.

Dynamic Charts in Container Controls Example Image

Showing a Loading Image During Entity Creation

Hi There!


This content is accessible only to logged in users of the OPA Hub.

To Register takes only 10 seconds and uses LinkedIn for authentication. It does not take your contacts or use any other permission.

Once registered you can change your OPA Hub password and manage it independently of LinkedIn.

We recommend you keep different passwords for all your sites.

To register, click the Log in link in the menu at the top of your page.

Thanks, the OPA Hub Website.

Siebel CRM as a custom Search source

Hi There!


This content is accessible only to logged in users of the OPA Hub.

To Register takes only 10 seconds and uses LinkedIn for authentication. It does not take your contacts or use any other permission.

Once registered you can change your OPA Hub password and manage it independently of LinkedIn.

We recommend you keep different passwords for all your sites.

To register, click the Log in link in the menu at the top of your page.

Thanks, the OPA Hub Website.

What is Happening Here – Date Function with Wrong Date

Hi There!


This content is accessible only to logged in users of the OPA Hub.

To Register takes only 10 seconds and uses LinkedIn for authentication. It does not take your contacts or use any other permission.

Once registered you can change your OPA Hub password and manage it independently of LinkedIn.

We recommend you keep different passwords for all your sites.

To register, click the Log in link in the menu at the top of your page.

Thanks, the OPA Hub Website.

Guest Post : Time Based Reasoning Worked Example

Hi There!


This content is accessible only to logged in users of the OPA Hub.

To Register takes only 10 seconds and uses LinkedIn for authentication. It does not take your contacts or use any other permission.

Once registered you can change your OPA Hub password and manage it independently of LinkedIn.

We recommend you keep different passwords for all your sites.

To register, click the Log in link in the menu at the top of your page.

Thanks, the OPA Hub Website.

Extension Code Generators for JavaScript

Hi There!


This content is accessible only to logged in users of the OPA Hub.

To Register takes only 10 seconds and uses LinkedIn for authentication. It does not take your contacts or use any other permission.

Once registered you can change your OPA Hub password and manage it independently of LinkedIn.

We recommend you keep different passwords for all your sites.

To register, click the Log in link in the menu at the top of your page.

Thanks, the OPA Hub Website.

Temporal Reasoning #5 : Temporal Attributes in Interviews

Hi There!


This content is accessible only to logged in users of the OPA Hub.

To Register takes only 10 seconds and uses LinkedIn for authentication. It does not take your contacts or use any other permission.

Once registered you can change your OPA Hub password and manage it independently of LinkedIn.

We recommend you keep different passwords for all your sites.

To register, click the Log in link in the menu at the top of your page.

Thanks, the OPA Hub Website.

Temporal Reasoning in Oracle Policy Automation #4 : Time Travel

Hi There!


This content is accessible only to logged in users of the OPA Hub.

To Register takes only 10 seconds and uses LinkedIn for authentication. It does not take your contacts or use any other permission.

Once registered you can change your OPA Hub password and manage it independently of LinkedIn.

We recommend you keep different passwords for all your sites.

To register, click the Log in link in the menu at the top of your page.

Thanks, the OPA Hub Website.

Detail Pop-up in Oracle Policy Automation

Hi There!


This content is accessible only to logged in users of the OPA Hub.

To Register takes only 10 seconds and uses LinkedIn for authentication. It does not take your contacts or use any other permission.

Once registered you can change your OPA Hub password and manage it independently of LinkedIn.

We recommend you keep different passwords for all your sites.

To register, click the Log in link in the menu at the top of your page.

Thanks, the OPA Hub Website.

Temporal Reasoning in Oracle Policy Automation #3 : Time Travel

Hi There!


This content is accessible only to logged in users of the OPA Hub.

To Register takes only 10 seconds and uses LinkedIn for authentication. It does not take your contacts or use any other permission.

Once registered you can change your OPA Hub password and manage it independently of LinkedIn.

We recommend you keep different passwords for all your sites.

To register, click the Log in link in the menu at the top of your page.

Thanks, the OPA Hub Website.