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}]);