Customizing Your BloX Widget's Look and Feel
You can customize the look and feel of your Sisense BloX widgets. The look and feel of your templates are defined in the Configuration Editor. In addition, you can customize any element in your widgets by adding the <style> key and using inline CSS as the value of the <style> key. Both methods are described below.
Configuration Editor
The Configuration Editor contains a JSON structure that renders the key:value pairs as CSS in your card. From the Configuration Editor, you can define the look and feel of your template.
Each template has its own JSON structure and elements. Some of these elements can be referenced from the Card Editor, but most can be set in the Configuration Editor.
For example, the color key inside the Card Editor of the multiple_indicators card refers to the “attention” object. This object defines the font color of the text displayed in the card and is located in the Configuration Editor.
Layout Editor
"type": "Column",
"items": [
{
"type": "TextBlock",
"spacing": "small",
"text": "42%",
"color": "attention",
"size": "extralarge",
"horizontalAlignment": "center",
"weight": "bolder"
},
Configuration Editor
},
"emphasis": {
"foregroundColors": {
"default": {
"normal": "#333333",
"subtle": "#EE333333"
},
"accent": {
"normal": "#2E89FC",
"subtle": "#882E89FC"
},
"good": {
"normal": "#54a254",
"subtle": "#DD54a254"
},
"warning": {
"normal": "#e69500",
"subtle": "#DDe69500"
},
"attention": {
"normal": "#cc3300",
"subtle": "#DDcc3300"
}
},
"backgroundColor": "#08000000"
}
},
You can modify the hex values of these colors in the Configuration Editor, or remove the reference in the BloX Editor and define your own colors specific for each element, such as TextBlocks.
Another example is redefining the background color of your BloX. The following is an example taken from the ‘Sparkline’ template:
The ‘Sparkline’ template has a white background color by default. You can change this to yellow by modifying the value of the backgroundColor key.
"backgroundColor": "#FFFFFF"
To
"backgroundColor": "yellow"
The Configuration Editor provides most of the CSS you need to redefine your BloX, but with Sisense BloX, you have complete freedom to customize the look and feel to meet your use-case using custom CSS written in JSON key:value pairs.
Customizing Elements
For each element in your Sisense BloX widgets, you can customize the look and feel by adding the <style> key with some inline CSS as the value. This is useful if you want to specify custom styling that is distinct from the rest of your template or dashboard.
The example below shows a text block that has been customized through the <style> key:
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "❤️️ Welcome to BloX ❤️️",
"style": {
"text-align": "center",
"font-weight": "bold",
"font-size": "24px",
"margin": "100px"
}
}
]
}
],
.r.
