X

Geertjan's Blog

  • November 4, 2015

Data Binding with Oracle JET Components in AngularJS

Geertjan Wielenga
Product Manager

Oracle JET provides a library of data visualizations.

Here you see two of the Oracle JET components, the first is a DVT (Data Visual Toolkit) component and the second a form component:

  • ojStatusMeterGauge. Powerful and cool looking. Here you see it in its circular orientation.

  • ojInputNumber. Handy to have a spinner built in, with a max, min, and step size.

What's especially interesting is that the two are in an AngularJS application, i.e., I had to avoid the convenience of Knockout two-way databindings, since I am not using Knockout in this scenario. Despite that, the two are synchronized. When the gauge value changes, the input updates and vice versa.

Also notice the various error validation and messages that the components provide.

How to achieve the above without using Knockout bindings, e.g., in an AngularJS application?

Here's my view:

<div id="gauge"></div>
<p></p>
Value: <input id="gaugeInput"/>

And here's my controller. Notice that I'm not using $scope at all. I could incorporate that too, so that an actual property changes, instead of simply, as right now, the two components being synchronized without any actual property changing.

.controller('View1Ctrl', function () {
$('#gaugeInput').ojInputNumber({
min: 0,
max: 100,
value: 50,
step: 10,
readonly: true,
optionChange: function (e, data) {
if (data.option == "value") {
$("#gauge").ojStatusMeterGauge({
value: 63, min: 0, max: 100,
thresholds: [{min: 33}, {max: 67}, {}],
});
$("#gauge").ojStatusMeterGauge('option', 'value', data['value']);
$("#gauge").ojStatusMeterGauge('refresh');
console.log('New value from input:' + data['value']);
}
}
});
$('#gauge').ojStatusMeterGauge({
title: "Value: 20<br>Reference Lines: Low 33, Medium 67, High 100",
min: 0,
max: 100,
value: 50,
orientation: 'circular',
metricLabel: {rendered: 'on'},
plotArea: {rendered: 'on'},
referenceLines: [{value: 33, color:'red'}, {value: 67, color:'green'}],
indicatorSize: 0.5,
readOnly: false,
optionChange: function (e, data) {
if (data.option == "value") {
$("#gaugeInput").attr('value', data['value']);
console.log('New value from gauge:' + data['value']);
}
}
});
})

Within the "optionChange" you'd be able to set some kind of model property and then refer to it in your view.

Join the discussion

Comments ( 1 )
  • Premkumar Monday, February 13, 2017

    Can we do same for OjList component?


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.Captcha
Oracle

Integrated Cloud Applications & Platform Services