Adding Gadget Settings

For example, in a gadget for charting, you might want to specify the chart type and other parameters for charting. The communication between the gadget controller and the settings.xhtml settings file is done through a config object injected to the controller as shown below.

//INJECTING CONFIG TO CONTROLLER

ExampleGadgetController.$inject = ['$scope', 'RestServiceProvider',
'EventBus','config'];

The config object injected in the code above is the gadget configuration service, which contains the configuration information and is available at the init function in the controller, and is tied to the controller scope so that the values can be two-way bound in the settings.xhtml file.

settings.xhtml
<form class="form-horizontal">
<div class="control-group">
<label class="control-label hint--top">Gadget Configuration 1</label>
<div class="controls">
<input type="text" data-ng-model="config.params.config1">
</div>
</div>
<input type="button" data-ng-click="applySettings()"></input>
</form>

controller.js
....
init : function(scope, restClient,EventBus,config) {
...

//ADDING THE CONFIG OBJECT TO SCOPE TO BIND TO UI
scope.config = config;
....
}

...
defineScope : function() {
var _this=this;
this.$scope.applySettings:function(){
console.log(_this.config.params.config1)
// This would print the value from the settings.xhtml file
if(_this.config.params.config1==="SOME VALUE"){
//Handle Accordingly
}
}
}