Title with Drop-Down Box
To add a title with a drop-down box to your page, create your drop-down box selectable values with a ko.observableArray in the initPage of E1AISCalls.js:
//Build Group By drop-down list
self.selectValues = ko.observableArray([{value: 'assignedTo', label: 'Assigned To'}
{value: 'equipment', label: 'Equipment'},
{value: 'prodFamily', label: 'Product Family'}]);
Define the rest of your title:
//Create the change handler used when user changes the drop-down value
self.groupByChangeHandler = function (context, valuParam)
{
if (valueParam.option == "value")
{
if (self.currentGroupByValue != valueParam.value [0])
{
var drawer = self.offcanvasMap () ["start"];
drawer.launcherId = "start";
drawer.displayMode = "overlay";
// if it's the active offcanvas, close it
if (drawer !== self._activeOffcanvas) {
self.savedGroupByValue(valueParam.value[0]);
self.getData();
}
}
}
};
self.savedGroupByValue = ko.observableArray(["assignedTo"]);
self.currentGroupByValue = 'assignedTo';
setTitleFieldText("title1", "Total Downtime Hours Variance by");
setTitleFieldInput(self, "dropDownValue", "ojSelect", self.savedGroupByValue, null, null, self.selectValues, "groupByChangeHandler", "150px";
Reset your drop-down values in the jetTranslations function:
function jetTranslations(self, translated Array)
{
var groupByTitle = "Group By";
if(translatedArray)
{
//Set chart translated title
setTitleFieldTranslation("title1", translatedArray.z_15.title);
// Set y axis translated title
self.yTitle(translatedArray.z_16.title);
//set translated group by labels
self.selectValues ([{value: 'assignedTo', label: translatedArray.z_17.title},
{value: 'equipment', label: translatedArray.z_18.title},
{value: 'prodFamily', label: translatedArray.z_19.title}]);