on - edited on by
jcordell
BloX - A Technical Introduction
To start, download the attached file ‘BloXTutorial-Styling.dash’ file and import this into your Sisense environment. This dashboard uses the ‘Sample Ecommerce’ data model and contains all iterations of the BloX widget. If connecting the .dash file to your Sample Ecommerce data model does not work, the attached file ‘BloX-Tutorial-ECommerce-DataModel.zip’ contains a version of this data model that will work. Additionally, ensure BloX is already enabled on your Sisense environment.
Step 1 - BloX Structure
In the first iteration of this BloX widget, we start with a BloX structure as depicted in the image above. In our widget, we have:
- Country name panel item in the header TextBlock
- Three TextBlocks in the left column
- Profit
- Profit Margin
- Units Sold
- Three TextBlocks in the right column
- Profit panel item
- Profit Margin panel item
- Units Sold panel item
It is worth noting that with the ‘showCarousel’ attribute set to ‘true’, only one Country will display at a time. Now that we understand the layout of the BloX widget, let’s add some styling to make it look more presentable.
Step 2 - Styling
I also encourage you to play around with the values of each property to get a better understanding of how these affect the widget.
- Contai ner style block
In our Container, we’ve added a style element with padding, width, and two margin types. We can use these CSS properties to manipulate the Container element of our BloX widget. In this example, they are dictating the position of the container and, therefore all of the text within.
- Country panel TextBlock
In our Country TextBlock, we’ve added three text styling elements: weight, color, and size. We can use these BloX elements to manipulate how a TextBlock is styled rather than using CSS properties. Note that the size element has also been added to the other TextBlocks as well.
Notice that the CSS properties need to be used within a style element while the BloX elements do not. The BloX elements provide easy access to commonly used style properties. However, you will see we can accomplish the same using the style element.
Step 3 - More Styling
The third iteration of our BloX widget adds background coloring and a border radius. This gives our widget a much more presentable ‘card’ feel.
Note: we’ve added a second container within our first container because the padding property conflicts with the border-radius property.
- Container style block 2
Here, we’ve added the border-radius property to give the container’s edges a sleeker, rounded feel. We also added the overflow property to prevent text from leaving the container.
- TextBlocks
In each text block, we’ve removed the TextBlock attributes and replaced them with CSS properties. Using style elements, we have more control over the look and feel with CSS. The background-color property visually separates each row of text.
Using the style attributes gives more control over the widget, but the code in our Editor can become redundant, bulky, and difficult to read. We can help alleviate this using CSS classes.
Step 3.5 - CSS Classes
The widget in this iteration looks identical to the previous version. However, we consolidated the style code and replaced the style elements with the class element. These classes are defined in the style element in our main BloX . The code in our editor is now much more readable and easy to understand.
- Main style attribute
In our BloX main style attribute, we’ve defined several classes. Let's examine the ‘blox-row-odd-key’ class.
We see ‘.blox-row-odd-key{css code} in this style attribute with this class referenced in two TextBlocks. We moved the style elements from the previous step within this class definition. This makes the code more readable and manageable. Now, if we want to change the background color for these TextBlocks, we only need to change it once.
The downside to defining our classes in the BloX main style element is that the code is limited to one line and difficult to read itself. Using external stylesheets, we can maintain readability for our class definitions.
Step 4 - Other Useful BloX elements
The following BloX elements are useful and some are sparsely documented. The Step 4 widget in the .dash file has placeholders for all of these in the BloX main section. Changing the values of these will give a good sense of how they affect the widget.
showCarousel
- Setting this element to ‘true’ limits the widget to only show one value of the Items
- Setting this element to ‘false’ shows multiple values from the Items
carouselAnimation
- With the showCarousel element set to ‘true’, the ‘showButtons’ and ‘delay’ element become applicable
- Setting ‘showButtons’ element to false hides the carousel buttons
- Setting ‘delay’ element to an integer cycles through the items. The integer is the number of milliseconds between each cycle
i.e. delay = 1000 cycles through the items once per second
titleStyle
- Setting ‘diplay’ element of ‘titlestyle’ to ‘none’ hides the title header row of the BloX widget
- The ‘fontColor’ element allows changing the text color of the title
- The ‘backgroundColor’ element allows changing the background color of the title header row
- The ‘backgroundImage’ element allows changing the background of the title header row to an image with a url
disableLazyLoading
- By default, a limited number of items (10) are loaded when the widget is rendered
- With showCarousel set to false, setting this element to true loads all values when the widget is rendered. This is most useful to show more than 10 columns
- Warning: Disabling lazy loading can have performance impacts on the dashboard
Hopefully, you feel comfortable enough to jump in and start creating your own custom visualizations. This walkthrough gives users a taste of how styling with CSS can help you create your own BloX widgets and touched on some important BloX elements to be aware of. The only way to get better at something is to practice, so I encourage you to challenge yourself and create your own widget.
