Pivot2 Styler Add-on

Description

Installing the Pivot2 Styler Add-on

1. Download the add-on.
2. Extract the ZIP file to the plugins folder. If the folder doesn't exist, create it:
   • Linux: /opt/sisense/storage/plugins
   • Windows: C:/Program Files/Sisense/app/plugins

Configuring the Pivot2 Styler Add-on

• The plugin configuration file (config.6.js). This file is located inside the Pivot2Styler plugin folder.
• Widget script configurations, which are merged with the config file and will only affect the relevant widget

Custom Style Object

• Default general style (general): This is the default style for cells with no panel or index style applied
• Default style per panel (rows/columns/values): This is the default style for all fields in the panel with no index style
• Index field style (for example, rows.byIndex.0): This is the default style per field by the field index

Custom Style Object Structure

Object Properties

• global: Affects pivot cells that do not have any other specific customizations:
• headers: Style object**
• cells: Style object**
• grantTotal 
  headers Style object**
  cells Style Object**
• rows: Customize the row fields style using the Cell Groups object*
• columns: Customize column field styles using the Cell Groups object*. There is no meaning for comumn cells
• values: Customize value field styles using the Cell Groups object*
• hiddenRowsByIndex: An array of numbers that indexes the row fields to hide
• hiddenValuesByIndex: An array of numbers that indexes the value fields to hide

• headers: Style object** that affects header cells
• cells: Style object** that affect cells that are not headers
• grantTotal object can be applied to only rows and columns.
  title string used as the new title of the grand total. 
  headers Style Object**
  cells Style Object**
• byIndex object: The keys are field indexes (the position in the widget metadata panel) and the values are Style objects**. This option has the highest priority and overrides the properties from both the global and rows/column/values. Field numbering is based on the panel it's related to, where the first item is index 0. Disabled items are taken into account. For example: A widget has three items in the Rows panel: Brand, Country (disabled), and Category. The index of the Category field is 2.

• myDomain.com URL without the protocol
  A “https://www.” prefix is added to the text so the href is “https://www.myDomain.com”.
• protocol://myDomain.com 
  URL with the protocol 
• <a href=”protocol://myDomain.com”>My Domain</a> HTML “a” tag  

• Specify valid CSS rule names
• Convert CSS rule names to camelcase format. For example, border-right-color converts to borderRightColor
• Specifgy valid values for CSS rules
• Update the configurations if the metadata field order has changed

Apply Custom Style Using a Widget Script

1. open /plugins/pivot2Styler/config.6.js
2. Update the options object: const options = customStyleObject;

Example 1

• The header cells of row, column, and value fields have a background colored in pink #ffc0cb
• The value cells of the row and value fields have a background colored in light blue #9dd1fe

Example 2

• The rows field header cells are in bold with a yellow #ffffce background (affected by the rows.headers and overriding the global.headers background color
• The rows field value cells have a light blue #9dd1fe background (affected by global.cells)
• The columns field header cells have a pink #ffc0cb background (affected by global.headers)
• The value field header cells have a pink #ffc0cb background (affected by global.headers)
• The value field value cells have 18px font size with a light green #97f6d7 background (overriding global.cells) and a blue #614ae1 font color
• The Country column is hidden
• Each Total Revenue column from a subset of Age Range values is hidden

Example 3

• The rows field header cells have a normal font weight (overriding global.headers.fontWeight), a yellow #ffffce background, and a black, 1px thick border (affected by the global.headers style)
• The row field value cells have a light blue #9dd1fe background with a black, 1px thick border and 18px font size
• The columns field header cells have a pink #ffc0cb background with a bold, 20px size font. The border is black and is 1px thick
• The column field with index 1 has a header cell with a yellow #fff170 background with bold, 18px size. The border is black and is 1px thick
• The values field header cells are affected by the global.headers style
• The values field value cells have a light green #97f6d7 background, a dark yellow #ffffce font color, and 20px font size (overrides global.cells.fontSize)
• For the value field with index 0:
• Header style: The background color is light purple #b37dee and the font size is 24px (overrides global.headers.fontSize)
• Value style: The background color is dark green #59b9b9, 20px bold font (affected by values.cells.fontSize), and a yellow #ededa1 font color. The border is light purple #b185ff and is 1px thick 

Example 4

• The row with index 0 will be presented as a link.
  For example, if the cell value is “google.com”, the href attribute will change to https://www.google.com, and the target attribute will be “ _blank”. 
• The page is opened in a new tab with the presented text as “google.com”.

Implementing the Pivot2 Styler Add-on

• Pivot2 API Cell styles: Affects specific pivot cells (based on the configuration) using the Pivot2 APIs, customization applied before the widget is rendered in the Sisense UI
• Dom manipulations: Manipulating Pivot2 dom elements to apply CSS styles directly to a specific cell. Changes are applied after the widget is rendered

Limitations

• Subtotal and Grand Total cell customizations are not supported
• Some CSS rules can cause unpredictable UI changes or behavior changes to the Pivot2 widget
• After the widget script is updated, you need to refresh the page to apply changes
• Pivot2 widgets that have exactly 1 Values item and one or more Column items are not fully supported. Row cells are customized properly, but Values and Column cells are not
• Exporting the Pivot2 widget to CSV, Excel, or an image is not supported
• Highlighting and coloring fields are overridden by the add-on
• If there are hidden fields, disabling and enabling items in the Pivot2 widget edit mode is not supported
• After duplicating a Pivot2 widget, you need to refresh the page to apply all style changes
• No support for search and customization of cells with Subtotals.
• Grand Total for Columns panel support
  No support for a widget with a column grand total enabled that has more than one value item.
• Grand Total styling
  The bottom right cell is affected by the columns.grandTotal.cells style. In case that property is not defined, the bottom right cell is affected by the rows.grandTotal.cells style.
• Widget full screen mode and widget edit mode will not reflect style changes upon panel item updates, like disable/enable items.