Sisense Community

Customizing an Indicator Widget

Introduction The following document provides code snippets for customizing an indicator widget. Table of Contents Table of Contents Introduction Table of Contents How to Use This Page? Widget Customizations The “Simple” Numerical Widget The “Ticker” Numerical Widget The Gauge Widget The “Ticker” Gauge Widget Manipulating the Widget The “Simple” Numerical Widget Reading the Widget Type & Subtypes Reading and Modifying the “Primary Title” Object Reading and Modifying the “Primary Value” Object Reading and Modifying the “Secondary Title” Object Reading and Modifying the “Secondary Value” Object Modifying the Separator Object The “Bar” Numerical Widget Reading the Widget Type & Subtypes Reading and Modifying the “Primary Title” Object Reading and Modifying the “Primary Value” Object Reading and Modifying the “Secondary Title” Object Reading and Modifying the “Secondary Value” Object Modifying the Widget Brackets The “Ticker” Numerical Widget Reading the Widget Type & Subtypes Reading and Modifying the Text-Generic Properties Reading and Modifying the “Primary Title” Object Reading and Modifying the “Primary Value” Object Reading and Modifying the “Secondary Title” Object Reading and Modifying the “Secondary Value” Object Modifying the Divider The Gauge Widget Reading the Widget Type, Subtype, and Skin Reading and Modifying the Text-Generic Properties Reading and Modifying the “Primary Title” Object Reading and Modifying the “Primary Value” Object Reading and Modifying the “Secondary Title” Object Reading and Modifying the “Secondary Value” Object Reading and Modifying the “Min Value” and “Max Value” Objects Modifying the Widget Brackets Modifying the Gauge, Needle, and Ticks The “Ticker” Gague Widget Reading the Widget Type & Subtypes Reading and Modifying the Text-Generic Properties Reading and Modifying the “Primary Title” Object Reading and Modifying the “Primary Value” Object Reading and Modifying the “Secondary Title” Object Reading and Modifying the “Secondary Value” Object Modifying the Dividers Modifying the Gauge Bar How to Use This Page? To implement the customizations you’ll have to get familiar with the following: Basic JavaScript and JQuery Widget Lifecycle How to add a widget script Widget Customizations The indicator widget breaks down into a few widget types: Numerical Indicator - Simple / Bar / Ticker Gauge Indicator - Simple / Ticker The following document breaks down the different attributes for every widget type. Note that the indicator widget is different than other widgets - The widget is rendered to a picture (canvas) and presented in the widget. Once drawn, you can’t modify it. Instead, all modifications must be made while processing the widget’s query. The “Simple” Numerical Widget Element Value Widget Type “indicator” Widget Sub-Type “indicator/numeric” Indicator Sub-Type “numericSimple” Background Color “transparent“ Primary Title Text = “Current Value” Color = #5B6372 Size = [12,15,18,22] Primary Value Value = 5,161,800 Text = “5.16M” Size = [23,32,46,66] Color = Conditional Formatting Secondary Title Text = “Estimated Forecast” Color = #9EA2AB Size = [10,10,14,20] Secondary Value Value = 5,407,600 Text = “5.4M” Color = #9EA2AB Size = [10,10,14,20] Font Weight = 800 Value Seperator Color = Gray Width = 1 The “Bar” Numerical Widget Element Value Widget Type "indicator" Widget Sub-Type “indicator/numeric” Indicator Sub-Type “numericBar” Background Color “transparent“ Widget-Sourounding Bracket Color = #C6C6C6 Primary Title Text = “Current Value” Color = #5B6372 Size = [12,15,18,22] Primary Value Value = 5,161,800 Text = “5.16M” Size = [15,22,31,45] Color = #FFFFFF (White) Secondary Title Text = “Estimated Forecast” Color = #9EA2AB Size = [10,10,14,20] Secondary Value Value = 5,407,600 Text = “5.4M” Color = #9EA2AB Size = [10,10,14,20] Font Weight = 800 The “Ticker” Numerical Widget Element Value Widget Type “indicator” Widget Sub-Type “indicator/numeric” Indicator Sub-Type “ticker” Background Color “transparent“ Primary Title Text = “Current Value” Color = #5B6372 Size = 15 Primary Value Value = 5,161,800 Text = “5.16M” Size = 15 Color = Conditional Formatting Font Weight = 800 Divider Color = #272A34 Height = 13 Width = 1 Secondary Title Text = “Estimated Forecast” Color = #9EA2AB Size = 15 Secondary Value Value = 5,407,600 Text = “5.4M” Color = #9EA2AB Size = 15 The Gauge Widget Skin #1 Skin #2 Element Value Widget Type “indicator” Widget Sub-Type “indicator/gauge” Indicator Sub-Type “gauge” Skin “1” / “2” Background Color “transparent“ Surrounding Bracket Color = #C6C6C6 Primary Title Text = “Current Value” Color = #5B6372 Size = [12,15,18,22] Primary Value Value = 5,161,800 Text = “5.16M” Size = [15,22,31,45] Color = Conditional Formatting Gague Gauge Opacity = 50% (Skin #1) Tick Range Start = 20° Tick Range End = 160° Tick Frequency = 10° Over Degrees = 5° Needle Color = #2B3342 Tick Color = #FFFFFF Min Value Value = 0 Text = “0” Color = #5B6372 Max Value Value = 6145000 Text = “6.15M” Color = #5B6372 Secondary Title Text = “Estimated Forecast” Color = #9EA2AB Size = [10,10,14,20] Secondary Value Value = 5,407,600 Text = “5.4M” Color = #9EA2AB Size = [10,10,14,20] Font Weight = 800 The “Ticker” Gauge Widget Element Value Widget Type “indicator” Widget Sub-Type “indicator/gauge” Indicator Sub-Type “ticker” Background Color “transparent“ Generic Text Data Font Family = “Open Sans“ Font Size = 15 Text Padding = 6 Primary Title Text = “Current Value” Color = #5B6372 Primary Value Value = 5,161,800 Text = “5.16M” Color = Conditional Formatting Font Weight = 800 Divider Color = #272A34 Height = 13 Width = 1 Secondary Title Text = “Estimated Forecast” Color = #9EA2AB Secondary Value Value = 5,407,600 Text = “5.4M” Color = #9EA2AB Gauge Bar Height = 11 Opacity = 50% Width = 100 Handle Color = #2B3342 Manipulating the Widget The “Simple” Numerical Widget Reading the Widget Type & Subtypes To read the widget type and sub-types, use the following code: widget.on('processresult', function(widget, query) { // Read Widget Type console.log('Widget Type: ' + widget.type); // Returns "indicator" // Read Widget Sub-Type console.log('Widget Sub-type: ' + widget.subtype); // Returns "indicator/numeric" }); widget.on('ready', function(widget) { // Read Indicator Widget Sub-Type console.log('Widget SubType: ' + widget.indicatorInstance.type); // Returns "numericSimple" }); Reading and Modifying the “Primary Title” Object To read and modify the “Primary Title” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["numericSimple"]; // Read Primary Title Text console.log('Primary Title Caption: ' + query.result.title.text); // Override Primary Title Text query.result.title.text = "Current Value" // Override Primary Title Color opMap.title.color='green' // Override Primary Title Font Size (see font section) opMap.title.fontSizes["big"] = 20 // Override Primary Title Font Style opMap.title.fontStyle = 'italic' opMap.title.fontWeight = 'bold' }); Reading and Modifying the “Primary Value” Object The “Primary Value” is represented in two formats: The numerical format - Represents the query’s result The textual form - Represents the string displayed in the widget To read and modify the “Primary Value” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["numericSimple"]; // Read "Primary Value" Numerical & Text Values console.log('Primary Value Data: ' + query.result.value.data); console.log('Primary Value Text: ' + query.result.value.text); // Override "Primary Value" Text Value query.result.value.text = "5.16M" // Read the "Primary Value" Color colorSetting = widget.metadata.panels[0].items[0].format.color if (colorSetting.hasOwnProperty('color')) { // Value has a Fixed Color console.log('The "Primary Value" color: ' + colorSetting.color); } else { // Value has Conditional Formatting console.log('The "Primary Value" has conditional formatting (' + colorSetting.conditions.length + ' rules):'); colorSetting.conditions.forEach(function(condition) { console.log(' - Color: ' + condition.color + ' if value ' + condition.operator + ' ' + condition.expressionValue); }) } // Override the Primary Value's Color opMap.value.color='green' // Override the "Primary Value" Font Size (see font section) opMap.value.fontSizes["big"] = 20 // Override the "Primary Value" Font Style opMap.value.fontStyle = 'italic' opMap.value.fontWeight = 'bold' }); Reading and Modifying the “Secondary Title” Object To read and modify the “Secondary Title” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["numericSimple"]; // Read “Secondary Title” Text console.log('Primary Title Caption: ' + query.result.secondaryTitle.text); // Override “Secondary Title” Text query.result.secondaryTitle.text = "Forecast Value" // Override “Secondary Title” Color opMap.secondaryTitle.color='green' // Override “Secondary Title” Font Size (see font section) opMap.secondaryTitle.fontSizes["big"] = 20 // Override “Secondary Title” Font Style opMap.secondaryTitle.fontStyle = 'italic' opMap.secondaryTitle.fontWeight = 'bold' }); Reading and Modifying the “Secondary Value” Object The “Secondary Value” is represented in two formats: The numerical format - Represents the query’s result The textual form - Represents the string displayed in the widget To read and modify the “Secondary Value” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["numericSimple"]; // Read "Secondary Value" Numerical & Text Values console.log('Secondary Value Data: ' + query.result.secondary.data); console.log('Secondary Value Text: ' + query.result.secondary.text); // Override "Secondary Value" Display Text Value query.result.secondary.text = "5.16M" // Override "Secondary Value" Color opMap.secondaryValue.color='green' // Override "Secondary Value" Font Size (see font section) opMap.secondaryValue.fontSizes["big"] = 20 // Override "Secondary Value" Font Style opMap.secondaryValue.fontStyle = 'italic' opMap.secondaryValue.fontWeight = 'bold' }); Modifying the Separator Object To read and modify the “Separator” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["numericSimple"]; // Read "Separator" color console.log('Value Separator Color = ' + opMap.borderColor); // Override "Separator" color opMap.borderColor = 'red' }); The “Bar” Numerical Widget Reading the Widget Type & Subtypes To read the widget type and sub-types, use the following code: widget.on('processresult', function(widget, query) { // Read Widget Type console.log('Widget Type: ' + widget.type); // Returns "indicator" // Read Widget Sub-Type console.log('Widget Sub-type: ' + widget.subtype); // Returns "indicator/numeric" }); widget.on('ready', function(widget) { // Read Indicator Widget Sub-Type console.log('Widget SubType: ' + widget.indicatorInstance.type); // Returns "numericBar" }); Reading and Modifying the “Primary Title” Object To read and modify the “Primary Title” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["numericBar"]; // Read Primary Title Text console.log('Primary Title Caption: ' + query.result.title.text); // Override Primary Title Text query.result.title.text = "Current Value" // Override Primary Title Color opMap.title.color='green' // Override Primary Title Font Size (see font section) opMap.title.fontSizes["big"] = 20 // Override Primary Title Font Style opMap.title.fontStyle = 'italic' opMap.title.fontWeight = 'bold' }); Reading and Modifying the “Primary Value” Object The “Primary Value” is represented in two formats: The numerical format - Represents the query’s result The textual form - Represents the string displayed in the widget To read and modify the “Primary Value” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["numericBar"]; // Read "Primary Value" Numerical & Text Values console.log('Primary Value Data: ' + query.result.value.data); console.log('Primary Value Text: ' + query.result.value.text); // Override "Primary Value" Text Value query.result.value.text = "5.16M" // Read the "Primary Value" Background Color colorSetting = widget.metadata.panels[0].items[0].format.color if (colorSetting.hasOwnProperty('color')) { // Value has a Fixed Color console.log('The "Primary Value" background color: ' + colorSetting.color); } else { // Value has Conditional Formatting console.log('The "Primary Value" has conditional formatting (' + colorSetting.conditions.length + ' rules):'); colorSetting.conditions.forEach(function(condition) { console.log(' - Background Color: ' + condition.color + ' if value ' + condition.operator + ' ' + condition.expressionValue); }) } // Read the "Primary Value" Foreground Color console.log('The "Primary Value" foreground color: ' + opMap.value.color); // Override the Primary Value's foreground Color opMap.value.color='green' // Override the "Primary Value" Font Size (see font section) opMap.value.fontSizes["big"] = 20 // Override the "Primary Value" Font Style opMap.value.fontStyle = 'italic' opMap.value.fontWeight = 'bold' }); Reading and Modifying the “Secondary Title” Object To read and modify the “Secondary Title” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["numericBar"]; // Read “Secondary Title” Text console.log('Primary Title Caption: ' + query.result.secondaryTitle.text); // Override “Secondary Title” Text query.result.secondaryTitle.text = "Forecast Value" // Override “Secondary Title” Color opMap.secondaryTitle.color='green' // Override “Secondary Title” Font Size (see font section) opMap.secondaryTitle.fontSizes["big"] = 20 // Override “Secondary Title” Font Style opMap.secondaryTitle.fontStyle = 'italic' opMap.secondaryTitle.fontWeight = 'bold' }); Reading and Modifying the “Secondary Value” Object The “Secondary Value” is represented in two formats: The numerical format - Represents the query’s result The textual form - Represents the string displayed in the widget To read and modify the “Secondary Value” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["numericBar"]; // Read "Secondary Value" Numerical & Text Values console.log('Secondary Value Data: ' + query.result.secondary.data); console.log('Secondary Value Text: ' + query.result.secondary.text); // Override "Secondary Value" Display Text Value query.result.secondary.text = "5.16M" // Override "Secondary Value" Color opMap.secondaryValue.color='green' // Override "Secondary Value" Font Size (see font section) opMap.secondaryValue.fontSizes["big"] = 20 // Override "Secondary Value" Font Style opMap.secondaryValue.fontStyle = 'italic' opMap.secondaryValue.fontWeight = 'bold' }); Modifying the Widget Brackets To read and modify the “Brackets” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["numericBar"]; // Read "Brackets" color console.log('Value Separator Color = ' + opMap.bracketColor); // Override "Brackets" color opMap.bracketColor = 'red' }); The “Ticker” Numerical Widget Reading the Widget Type & Subtypes To read the widget type and sub-types, use the following code: widget.on('processresult', function(widget, query) { // Read Widget Type console.log('Widget Type: ' + widget.type); // Returns "indicator" // Read Widget Sub-Type console.log('Widget Sub-type: ' + widget.subtype); // Returns "indicator/numeric" }); widget.on('ready', function(widget) { // Read Indicator Widget Sub-Type console.log('Widget SubType: ' + widget.indicatorInstance.type); // Returns "ticker" }); Reading and Modifying the Text-Generic Properties To read and modify the general text styling use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["ticker"]; // Read Generic Text Properties console.log('Generic Text Font Family: ' + opMap.fontFamily); console.log('Generic Text Font Size: ' + opMap.fontSize); console.log('Generic Text Padding: ' + opMap.textPadding); // Override Generic Text Font Family opMap.fontFamily = "David" // Override Text Font Size opMap.fontSize = 30 // Override Text Padding (space between title and value) opMap.textPadding = 100 }); Reading and Modifying the “Primary Title” Object To read and modify the “Primary Title” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["ticker"]; // Read Primary Title Text console.log('Primary Title Caption: ' + query.result.title.text); // Override Primary Title Text query.result.title.text = "Current Value" // Override Primary Title Color opMap.title.color='green' // Override Primary Title Font Size (overrides the "Generic" setting) opMap.title.fontSize = 40 // Override Primary Title Font Style opMap.title.fontStyle = 'italic' opMap.title.fontWeight = 'bold' }); Reading and Modifying the “Primary Value” Object The “Primary Value” is represented in two formats: The numerical format - Represents the query’s result The textual form - Represents the string displayed in the widget To read and modify the “Primary Value” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["ticker"]; // Read "Primary Value" Numerical & Text Values console.log('Primary Value Data: ' + query.result.value.data); console.log('Primary Value Text: ' + query.result.value.text); // Override "Primary Value" Text Value query.result.value.text = "5.16M" // Read the "Primary Value" Color colorSetting = widget.metadata.panels[0].items[0].format.color if (colorSetting.hasOwnProperty('color')) { // Value has a Fixed Color console.log('The "Primary Value" background color: ' + colorSetting.color); } else { // Value has Conditional Formatting console.log('The "Primary Value" has conditional formatting (' + colorSetting.conditions.length + ' rules):'); colorSetting.conditions.forEach(function(condition) { console.log(' - Background Color: ' + condition.color + ' if value ' + condition.operator + ' ' + condition.expressionValue); }) } // Override the Primary Value's Color opMap.value.color='green' // Override the "Primary Value" Font Size (overrides the "Generic" setting) opMap.value.fontSize = 20 // Override the "Primary Value" Font Style opMap.value.fontStyle = 'italic' opMap.value.fontWeight = 'bold' }); Reading and Modifying the “Secondary Title” Object To read and modify the “Secondary Title” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["ticker"]; // Read “Secondary Title” Text console.log('Primary Title Caption: ' + query.result.secondaryTitle.text); // Override “Secondary Title” Text query.result.secondaryTitle.text = "Forecast Value" // Override “Secondary Title” Color opMap.secondaryTitle.color='green' // Override “Secondary Title” Font Size (overrides the "Generic" setting) opMap.secondaryTitle.fontSize = 20 // Override “Secondary Title” Font Style opMap.secondaryTitle.fontStyle = 'italic' opMap.secondaryTitle.fontWeight = 'bold' }); Reading and Modifying the “Secondary Value” Object The “Secondary Value” is represented in two formats: The numerical format - Represents the query’s result The textual form - Represents the string displayed in the widget To read and modify the “Secondary Value” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["ticker"]; // Read "Secondary Value" Numerical & Text Values console.log('Secondary Value Data: ' + query.result.secondary.data); console.log('Secondary Value Text: ' + query.result.secondary.text); // Override "Secondary Value" Display Text Value query.result.secondary.text = "5.16M" // Override "Secondary Value" Color opMap.secondaryValue.color='green' // Override "Secondary Value" Font Size (overrides the "Generic" setting) opMap.secondaryValue.fontSize = 20 // Override "Secondary Value" Font Style opMap.secondaryValue.fontStyle = 'italic' opMap.secondaryValue.fontWeight = 'bold' }); Modifying the Divider To read and modify the “Dividers” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["ticker"]; // Read "Divider" Color console.log('Divider Color is = ' + opMap.dividerColor); // Read "Divider" Width console.log('Divider Color is = ' + opMap.dividerWidth); // Read "Divider" Height console.log('Divider Color is = ' + opMap.dividerHeight); // Override "Divider" Properties opMap.dividerColor = 'red' opMap.dividerWidth = 30 opMap.dividerHeight = 10 // Match the divider height to the widget's height opMap.dividerHeight = opMap.height }); The Gauge Widget Reading the Widget Type, Subtype, and Skin To read the widget type, sub-types, and skin use the following code: widget.on('processresult', function(widget, query) { // Read Widget Type console.log('Widget Type: ' + widget.type); // Returns "indicator" // Read Widget Sub-Type console.log('Widget Sub-type: ' + widget.subtype); // Returns "indicator/gauge" }); widget.on('ready', function(widget) { // Read Indicator Widget Sub-Type and Skin console.log('Widget SubType: ' + widget.indicatorInstance.type); // Returns "gauge" console.log('Widget Skin: ' + widget.indicatorInstance._dataMap.gauge.skin); // Returns "gauge" }); Reading and Modifying the Text-Generic Properties To read and modify the general text styling use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["gauge"]; // Read Generic Text Properties console.log('Generic Text Font Family: ' + opMap.fontFamily); // Override Generic Text Font Family opMap.fontFamily = "David" }); Reading and Modifying the “Primary Title” Object To read and modify the “Primary Title” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["gauge"]; // Read Primary Title Text console.log('Primary Title Caption: ' + query.result.title.text); // Override Primary Title Text query.result.title.text = "Current Value" // Override Primary Title Color opMap.title.color='green' // Override Primary Title Font Size opMap.title.fontSizes["medium"] = 40 // Override Primary Title Font Style opMap.title.fontStyle = 'italic' opMap.title.fontWeight = 'bold' }); Reading and Modifying the “Primary Value” Object The “Primary Value” is represented in two formats: The numerical format - Represents the query’s result The textual form - Represents the string displayed in the widget To read and modify the “Primary Value” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["gauge"]; // Read "Primary Value" Numerical & Text Values console.log('Primary Value Data: ' + query.result.value.data); console.log('Primary Value Text: ' + query.result.value.text); // Override "Primary Value" Text Value query.result.value.text = "5.16M" // Read the "Primary Value" Color colorSetting = widget.metadata.panels[0].items[0].format.color if (colorSetting.hasOwnProperty('color')) { // Value has a Fixed Color console.log('The "Primary Value" background color: ' + colorSetting.color); } else { // Value has Conditional Formatting console.log('The "Primary Value" has conditional formatting (' + colorSetting.conditions.length + ' rules):'); colorSetting.conditions.forEach(function(condition) { console.log(' - Background Color: ' + condition.color + ' if value ' + condition.operator + ' ' + condition.expressionValue); }) } // Override the Primary Value's Color opMap.value.color='green' // Override the "Primary Value" Font Size opMap.value.fontSizes["medium"] = 40 // Override the "Primary Value" Font Style opMap.value.fontStyle = 'italic' opMap.value.fontWeight = 'bold' }); Reading and Modifying the “Secondary Title” Object To read and modify the “Secondary Title” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["gauge"]; // Read “Secondary Title” Text console.log('Primary Title Caption: ' + query.result.secondaryTitle.text); // Override “Secondary Title” Text query.result.secondaryTitle.text = "Forecast Value" // Override “Secondary Title” Color opMap.secondaryTitle.color='green' // Override “Secondary Title” Font Size (overrides the "Generic" setting) opMap.secondaryTitle.fontSizes["medium"] = 40 // Override “Secondary Title” Font Style opMap.secondaryTitle.fontStyle = 'italic' opMap.secondaryTitle.fontWeight = 'bold' }); Reading and Modifying the “Secondary Value” Object The “Secondary Value” is represented in two formats: The numerical format - Represents the query’s result The textual form - Represents the string displayed in the widget To read and modify the “Secondary Value” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["gauge"]; // Read "Secondary Value" Numerical & Text Values console.log('Secondary Value Data: ' + query.result.secondary.data); console.log('Secondary Value Text: ' + query.result.secondary.text); // Override "Secondary Value" Display Text Value query.result.secondary.text = "5.16M" // Override "Secondary Value" Color opMap.secondaryValue.color='blue' // Override "Secondary Value" Font Size (overrides the "Generic" setting) opMap.secondaryValue.fontSizes["medium"] = 40 // Override "Secondary Value" Font Style opMap.secondaryValue.fontStyle = 'italic' opMap.secondaryValue.fontWeight = 'bold' }); Reading and Modifying the “Min Value” and “Max Value” Objects The “Min Value” and “Max Value” are represented in two formats: The numerical format - Represents the query’s result The textual form - Represents the string displayed in the widget To read and modify the values use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["gauge"]; // Read "Min Value" Numerical & Text Values console.log('Min Value Data: ' + query.result.min.data); console.log('Min Value Text: ' + query.result.min.text); // Override "Min Value" Display Text Value query.result.min.text = "MIN" console.log('Max Value Data: ' + query.result.max.data); console.log('Max Value Text: ' + query.result.max.text); // Override "Max Value" Display Text Value query.result.max.text = "MAX" // Read Min/Max label properties console.log('Min/Max Label Color: ' + opMap.label.color); // Override Min and Max Font Color opMap.label.color = 'green' // Override Min and Max Font Size opMap.label.fontSizes["medium"] = 40 // Override Min and Max Font Style opMap.label.fontStyle = 'italic' opMap.label.fontWeight = 'bold' }); Modifying the Widget Brackets To read and modify the “Brackets” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["gauge"]; // Read "Brackets" color console.log('Value Separator Color = ' + opMap.bracketColor); // Override "Brackets" color opMap.bracketColor = 'red' }); Modifying the Gauge, Needle, and Ticks To read and modify the “Gauge”, “Needle”, and “Ticks” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["gauge"]; // Read "Gauge" information - Relevant for "Skin 1" console.log('Gauge opacity is = ' + opMap.gaugeOpacity * 100 + '%'); // Bright area of the gauge // Read "Needle" information console.log('Needle range (degrees) = ' + opMap.startAngle + '-' + opMap.endAngle); console.log('Needle "out of" min/max range (degrees) = ' + opMap.overDegrees); console.log('Needle color = ' + opMap.needleColor); // Read "Ticks" information console.log('Ticks show every (degrees) = ' + opMap.tickDegreesIncrement); console.log('Ticks color = ' + opMap.tickColor); // Override "Gauge" properties opMap.gaugeOpacity = 0.2 // Override "Needle" properties opMap.startAngle = 5 opMap.endAngle = 175 opMap.needleColor = 'red' // Override "Ticks" properties opMap.tickDegreesIncrement = 5 opMap.tickColor = 'blue' }); The “Ticker” Gague Widget Reading the Widget Type & Subtypes To read the widget type and sub-types, use the following code: widget.on('processresult', function(widget, query) { // Read Widget Type console.log('Widget Type: ' + widget.type); // Returns "indicator" // Read Widget Sub-Type console.log('Widget Sub-type: ' + widget.subtype); // Returns "indicator/gauge" }); widget.on('ready', function(widget) { // Read Indicator Widget Sub-Type console.log('Widget SubType: ' + widget.indicatorInstance.type); // Returns "ticker" }); Reading and Modifying the Text-Generic Properties To read and modify the general text styling use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["ticker"]; // Read Generic Text Properties console.log('Generic Text Font Family: ' + opMap.fontFamily); console.log('Generic Text Font Size: ' + opMap.fontSize); console.log('Generic Text Padding: ' + opMap.textPadding); // Override Generic Text Font Family opMap.fontFamily = "David" // Override Text Font Size opMap.fontSize = 30 // Override Text Padding (space between title and value) opMap.textPadding = 100 }); Reading and Modifying the “Primary Title” Object To read and modify the “Primary Title” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["ticker"]; // Read Primary Title Text console.log('Primary Title Caption: ' + query.result.title.text); // Override Primary Title Text query.result.title.text = "Current Value" // Override Primary Title Color opMap.title.color='green' // Override Primary Title Font Size (overrides the "Generic" setting) opMap.title.fontSize = 40 // Override Primary Title Font Style opMap.title.fontStyle = 'italic' opMap.title.fontWeight = 'bold' }); Reading and Modifying the “Primary Value” Object The “Primary Value” is represented in two formats: The numerical format - Represents the query’s result The textual form - Represents the string displayed in the widget To read and modify the “Primary Value” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["ticker"]; // Read "Primary Value" Numerical & Text Values console.log('Primary Value Data: ' + query.result.value.data); console.log('Primary Value Text: ' + query.result.value.text); // Override "Primary Value" Text Value query.result.value.text = "5.16M" // Read the "Primary Value" Color colorSetting = widget.metadata.panels[0].items[0].format.color if (colorSetting.hasOwnProperty('color')) { // Value has a Fixed Color console.log('The "Primary Value" background color: ' + colorSetting.color); } else { // Value has Conditional Formatting console.log('The "Primary Value" has conditional formatting (' + colorSetting.conditions.length + ' rules):'); colorSetting.conditions.forEach(function(condition) { console.log(' - Background Color: ' + condition.color + ' if value ' + condition.operator + ' ' + condition.expressionValue); }) } // Override the Primary Value's Color opMap.value.color='green' // Override the "Primary Value" Font Size (overrides the "Generic" setting) opMap.value.fontSize = 20 // Override the "Primary Value" Font Style opMap.value.fontStyle = 'italic' opMap.value.fontWeight = 'bold' }); Reading and Modifying the “Secondary Title” Object To read and modify the “Secondary Title” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["ticker"]; // Read “Secondary Title” Text console.log('Primary Title Caption: ' + query.result.secondaryTitle.text); // Override “Secondary Title” Text query.result.secondaryTitle.text = "Forecast Value" // Override “Secondary Title” Color opMap.secondaryTitle.color='green' // Override “Secondary Title” Font Size (overrides the "Generic" setting) opMap.secondaryTitle.fontSize = 20 // Override “Secondary Title” Font Style opMap.secondaryTitle.fontStyle = 'italic' opMap.secondaryTitle.fontWeight = 'bold' }); Reading and Modifying the “Secondary Value” Object The “Secondary Value” is represented in two formats: The numerical format - Represents the query’s result The textual form - Represents the string displayed in the widget To read and modify the “Secondary Value” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["ticker"]; // Read "Secondary Value" Numerical & Text Values console.log('Secondary Value Data: ' + query.result.secondary.data); console.log('Secondary Value Text: ' + query.result.secondary.text); // Override "Secondary Value" Display Text Value query.result.secondary.text = "5.16M" // Override "Secondary Value" Color opMap.secondaryValue.color='green' // Override "Secondary Value" Font Size (overrides the "Generic" setting) opMap.secondaryValue.fontSize = 20 // Override "Secondary Value" Font Style opMap.secondaryValue.fontStyle = 'italic' opMap.secondaryValue.fontWeight = 'bold' }); Modifying the Dividers To read and modify the “Dividers” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["ticker"]; // Read "Divider" Color console.log('Divider Color is = ' + opMap.dividerColor); // Read "Divider" Width console.log('Divider Color is = ' + opMap.dividerWidth); // Read "Divider" Height console.log('Divider Color is = ' + opMap.dividerHeight); // Override "Divider" Properties opMap.dividerColor = 'red' opMap.dividerWidth = 30 opMap.dividerHeight = 10 // Match the divider height to the widget's height opMap.dividerHeight = opMap.height }); Modifying the Gauge Bar To read and modify the “Gauge Bar” use the following code: widget.on('processresult', function(widget, query) { opMap = widget.indicatorInstance._optionsMap["ticker"]; // Read "Gague Bar" Properties console.log('Bar Height is = ' + opMap.barHeight); console.log('Bar Width is = ' + opMap.barWidth); console.log('Bar opacity is = ' + opMap.barOpacity * 100 + '%'); // Bright area of the bar // Read "Gague Bar Handle" Properties (indicator in the bar) console.log('Bar Handle color is = ' + opMap.barHandleColor); console.log('Bar Handle height is = ' + opMap.tickerBarHeight); console.log('Bar Handle widthis = ' + opMap.tickerBarWidth); // Override "Gague Bar" Properties opMap.barHeight = 20 opMap.barWidth = 150 opMap.barOpacity = 0.2 // Override "Gague Bar" Handle Properties opMap.barHandleColor = 'red' opMap.tickerBarHeight = opMap.barHeight opMap.tickerBarWidth = 5 });

Add-ons & Plug-Ins

The Smart Label

Download: Smart Label Introduction The following article describes steps needed to add to create smart text widget to present ElastiCube fields as text. Implementaion Steps Extract the folder in the attached zip file into \...\Sisense\PrismWeb\plugins. If you are using version 7.2 and higher unzip the contents into your C:\Program Files\Sisense\app\plugins\ folder. Create new widget and chose the smart label icon from the list Choose a field to present, set a design and hit "Apply" [Please note, that in case you have multiple values, it will present the first one. Therefore, it is always better to change the type of the filter to single value only, like in the given example] This plug in works on Version: L8.0.5.156. Only drop the plug in folder contained in the download folder into the plug ins folder in Sisense.

APIs

REST API - Adding Data Level Security

When building code to automate the process of adding users (or groups), it may be beneficial to add security around those users. Follow the steps below to learn how to add data level security through the REST API: Step 1 From your SiSense home page, navigate to the Manage tab and choose the option for REST API. From here, click on the link to the REST API Reference interface. Step 2 From here, choose the 0.9 version and expand the Elasticube section and scroll down to the POST /elasticubes/datasecurity section. Step 3 The sample code below shows a valid JSON object to use as part of the REST API request. Starting from the sample code, replace the value for party with a user identifier that already exists in your system. Then paste the code into the REST API interface and click run. You should see a response of 200, which indicates a successful operation. [{ "server": "LocalHost", "elasticube": "Sample Lead Generation", "table": "Lead Generation", "column": "Country", "datatype": "text", "shares": [{ "party": "5c0f85690ca2f66cc242e266", "type": "user" }], "members": [ "United States", "England" ] }] Notes The server name value is case sensitive, so make sure it matches with your system. The sample provided is specific to one of the sample databases that comes with SiSense. To modify this to a different system, just update necessary fields to include your specifications. The sample provided is an array that consists of a single element. This could be modified to contain several entries all sent at once.

Blox

Quickly Add Unique Identifier to Blox Action Buttons Without Modifying Blox Template

Quickly Add Unique Identifier to Blox Action Buttons Without Modifying Blox Template A customer recently had the unusual request for a method to select and distinguish, via a CSS selector used within a custom Javascript action, for specific Blox buttons in a existing Blox widget that contained multiple identical buttons, identical in inner text and all other parameters, without adding any new lines to the Blox template to add unique identifiers. The customer had concerns that using the index order of the buttons, where the button was selected based on order, may be likely to break in the future, due to a potentially minor change. The method used for making the least possible change to the Blox template, requiring no new lines or new parameters, while also creating a unique resilient CSS selector method for each button unlikely to be broken by future changes to the template while using an existing parameter, was to use the unexpected route of using the existing " font-size " inline styling as a unique CSS and JS selector, using very small decimal precision that was irrelevant to the rendering of the button itself, but allowed for a unique selecting parameter, without adding a single new line of Blox templating. Blox places CSS styling to actions inline, and this allows for this unusual form of element tagging, where CSS can select based on inline styling text. This is implemented by adding unnecessary and unique precision to the font-size parameter of a Blox template line such as this: "actions": [ { "style": { "font-size": "13px" }, with a very similar line: "actions": [ { "style": { "font-size": "13.01px" }, This results in Blox generating the following HTML with inline styling: <ul class="action-set"> <li class="action"> <button class="btn btn__text" style="font-size: 13.01px;"> Button Text </button> </li> </ul> This then allows that unique button to be selected via the CSS selector (used in code): button[style*="font-size: 13.01px"] This was then repeated for all other buttons (13.02, 13.03...) in both the template and code. The standard Javascript querySelector or jQuery (included in all Sisense web pages) can use this as a CSS selector to return the specific button. This method is valid because CSS treats inline style as any other HTML attribute , so the attribute selector in modern CSS can be used, by treating the "style" parameter as any other HTML attribute of an element. As would be expected, this hundredth pixel does not affect the actual rendering of the button, and while not at all necessary can be identically by using the thousandth decimal place or smaller. While Blox does place action font-size styling inline, it is worth emphasizing that this kind of pseudo-recursive CSS selectors based on inline styling, is only possible when styling is inline and not applied via stylesheets. This request is rather unique, and this method was only required due to the very specific nature of the request and the customer's specific concerns, but the method was unusual and unexpected and worth noting for other Sisense users who may have a similar restrictive use case of selecting otherwise unique Blox action buttons and making very minimal changes to the Blox templating of a Blox type widget. Share your experience in the comments!

Add-ons & Plug-Ins

Track Dashboard Usage With Google Analytics

Plugin Overview This plugin registers every page view from your Sisense instance to your Google Analytics account. https://analytics.google.com Configuration You must specify your Google Analytics "tracking ID" by editing the main.js file. By default, page tracking includes cross session / device tracking using the page viewers' Sisense internal user id. This can be disabled by editing the main.js file. Design Options This plugin is a wrapper for analytics.js. Review the Google Analytics developer guide for full details. https://developers.google.com/analytics/devguides/collection/analyticsjs If you have multiple environments such as development I have found two approaches to segregate tracking information. Utilize a different Google Analytics "tracking ID" for each environment Update the Sisense branding "pageTitle" value to include a suffix that indicates the environment. For example "My Analytics Application - DEV". This would allow you to segment the page view within Google Analytics. This requires the option/license to brand your Sisense installation. Installation Instructions Download the plugin here Extract googleAnalytics_v20170810.zip to your Sisense installations plugin directory. This usually located "C:\Program Files\Sisense\PrismWeb\plugins" Modify the main.js file as directed in the Configuration Section above. By default, this file is located at "C:\Program Files\Sisense\PrismWeb\plugins\googleAnalytics\main.js". Restart IIS to register the new plugin. Support This plugin has been tested with Sisense version 6.6.1.13002. This plugin comes with no warranty and you use it at your own risk. If you have issues, share your experiences on this forum for community support. Revisions 20170822 - Replace ajax call to get internal user id with prism variable reference 20170810 - Initial Release

Blox

Migrating Blox Custom Actions

Migrating Blox Custom Actions When relocating Sisense resources from one server to another, the Sisense Rest API is a possible method for transferring Sisense components and objects like dashboards , users , groups , and data sources. Similarly, Blox Custom Actions can be migrated through Sisense Rest API endpoints. Dashboards that rely on custom Blox actions not yet migrated or manually recreated will lack specific Blox action functionality if the Blox custom actions are absent from the hosting Sisense server. Blox custom actions are objects containing Javascript code capable of introducing custom functionalities not inherent in the default set of Blox actions. Detailed documentation is available here as well as here . Custom action code can be quite extensive and powerful, often matching those achievable by dashboard or widget scripts , but only upon a user triggering a Blox action , such as clicking a Blox button. This article provides instructions for both retrieving existing Custom Blox Actions via API endpoints and creating new Custom Blox Actions via API endpoints. Although the primary focus is on migration, this article applies to various contexts, including scenarios where only a copy of all current Blox actions is needed from a server or the creation of an entirely new Blox action from scratch using the create Blox action API. To retrieve the list of Blox custom actions from a Sisense server, use the following endpoint: GET /api/v1/blox/getSnippets?snippetType=actions To fetch the full body of an individual Blox custom action, employ the following endpoint: POST /api/v1/getActionByType/BloX Payload structure of this endpoint: {"type": "nameOfBloxAction"} To create or migrate a Blox action, utilize the following endpoint: POST /api/v1/blox/saveCustomAction The payload for the new Blox action can be directly copied from the GET getActionByType request. The template structure of the payload for the saveCustomAction is provided below: { "type": "bloxActionTitleHere", "body": "Full Code Here", "snippet": { "type": "bloxActionTitleHere", "title": "title" }, "step": "2" } For Windows and older Sisense versions, the API URL endpoint to fetch actions differs slightly: GET /v1/getCustomActions/actions Similarly, the older Windows endpoint URL for saving or creating Blox actions is: POST /v1/saveCustomAction/BloX The API endpoint for editing an existing Blox action mirrors the endpoint used for creating new endpoints, simply use the name of the existing action with the modified body text. Any code changes required for Blox actions compatibility due to an OS or Sisense version change must still be implemented; the API endpoints migrate Blox actions as-is and do not include any modification of the body text. These API endpoints facilitate all Blox custom action functionality, whether editing existing Blox custom actions or saving all current Blox custom actions to a file. Share your experience in the comments!

How-Tos & FAQs

How To Find Your Sisense Version? (Windows only)

Question : How can I find the exact version and build of my Sisense environment? Solution : There are 3 easy ways to find the exact version of your environment: On the web application Open your Sisense web application On the top toolbar, click on the person icon. The version will be the last item on the menu which pops up: On the Desktop ECM Note: Not relevant for Sisense Linux Open the desktop Elasticube Manager Click the Help & How-To's button on the top scroll bar Click the About button The version will be here: On the web application Open dev tools - console (F12) Copy this and press enter: prism.version The version will be displayed as output:

How-Tos & FAQs

Performing an OR between dashboard filters

Analytical Need A common requirement in data analysis is to be able select values from several filters and to see the results that contains all of those values and not only the results where only selected values appear. In fact, the requirement is to have an OR and not an AND between the filters. For example, I have 2 filters of country & product. I choose country "UK" and product "A": AND will get me results just for product "A" sold in the UK OR will get me results for all the products sold in the UK or all the countries that product "A" has been sold in. Challenge The default behaviour of the filters in a dashboard is AND. We need to find a way to turn this into an OR. Solution We will use the filtered measure plugin to display the OR result. This add-on is pre-installed on Sisense in Linux environments and its version could be different. The download link is for Sisense on Windows. Our data : When we select product A and country UK we don't want to see the second record (B, Greece), but we do want to see all the rest. Dashboard filters : In order to get the desired result we will define the following formula: (sum([value]),[@Country])+(sum([value]),[@Product]) The @ sign means that this part of the formula refers only to the mentioned dashboard filter. The + sign is actually a sum between the values. However, this is only getting us half way, since for the records that contain both UK and product A - we will get the amount doubled like so: We need to divide these result by the amount of filter values the record is associated to. In this case, we need to divide the first row by 2 (because we have UK & A) and the rest by 1 (we have either UK or A). In order to achieve this calculation we will need to use this formula: (([# of unique Country],[@Country])+ ([# of unique Product],[@Product])) So the final formula will be the division between the 2: ((sum([value]), [@Country]) + (sum([value]), [@Product])) / (([# of unique Country], [@Country])+ ([# of unique Product], [@Product])) Now the results are correct: In case you have more than 2 filters, you'll need to add more calculations to the nominator & the denominator. Note: the rest of the dashboard filters that don't participate in the formulas will behave with the normal AND functionality. Cube Detailed calculations The default behavior (no filter measure)

Sisense Administration

DBfarm Cleaner, remove unattached cubes

When a build fails, the folder that was created up to that point with the data will still remain on your server. This can consume 100s of GB and required to clean from time to time. The attached application runs on the server cleaning all unnecessary folders. Steps for running the app - 1. Download the attached exe file 2. Run it as with the selected parameter <span>elasticubedatacleaner <command> [options]<br/></span> Commands list List folders to delete without deletion. delete Delete unused folders. Options -h, --help Show help. --ec data folders [EC DATA FOLDERS] List of folders directory to scan. --ec service name [EC SERVICE NAME] Specify the name of the EC service. Default: Sisense.ECMS (for version 7.1 and earlier change the service to ElastiCubeManager --delete_alternative Delete Alternative folders. An alternative is created for a cube building in an accumulated mode in order to be used as a base cube once the second cube started

Data Sources

Developing Custom REST Connectors

Sisense lets you import data from multiple sources using built-in connectors or by a customized connector. Sisense custom REST connectors framework enable you to program your own connectors to popular data sources which support REST services, to import data directly into the ElastiCube Manager. Custom REST connectors provide Sisense with the end points and authentication information that allows Sisense to return the requested data. To do so, you create a connector configuration file in JSON for each unique source. Data connectors overview – Native vs. Custom REST, when to use each kind? Creating a Custom REST connector workflow: Retrieving RESTful Credentials, Creating configuration files and defining them. Troubleshooting common issues. Additional resources: Example of a connector that uses CSV results as part of the connector The Sisense connections list