I had a requirement to generate a fixed layout of tables, where the values in each cell were calculations (much like an excel worksheet) as opposed to aggregations grouped by a dimension (typically how we use pivot tables).
Using Blox we created some templates that can be used for this purpose without too much effort spent editing JSON.
Download them here: (make sure to change the extension from txt to json):
There are a variety of table sizes to start with, and you can add more columns/rows as you need using copy/paste.
First, choose the template you want e.g. 2 x 4 Table.
Now let's say you want a value placed into cell A1: Go ahead and add an item to the widget Values, then rename that value to 'A1'. Format it for display as needed.
Repeat for more values.
If you want to display text instead, you can edit the JSON and, for example, change "text": "{panel:A1} " to "text": "MyText"
There's a maximum of 20 values per widget. If you need more, check out the LHS (left hand side) and RHS templates for inspiration. (I removed the extra rows I had in these for simplicity, in case you're wondering why there aren't 20 cells per widget)
Placed side by side, these two widgets will appear as a single table when in view mode (css removes the borders and padding in the right places).
In edit mode you will still see the separator like below:
In view mode, it will appear like a single widget
Last of all, if you end up having issues vertically aligning multiple rows of these tables, then you can manually set the widths of each widget by:
- exporting the dashboard to a .dash file
- using a text editor to set the width (percentage) of each widget
- import dashboard from .dash file and overwrite the existing one
When doing this, all widths for a row should add up to 100.
The structure of the above dash file is as follows:
- "columns" - this relates to the dashboard columns, mine only has one column (default layout), therefore the width is 100 (%)
- each "subcells" is a row in the dashboard
- each item in "elements" is a widget in that row, and you can see the width highlighted
I also used this editing technique to get more than 8 widgets onto a single row by moving them from different "subcells" (row).
Additional solutions:
How to get the dotted vertical lines as a separator between columns?
To do that, you can add more CSS properties to set the left border style on the column cells to the right of the divider you want to change. Here's a screenshot of an example (I added the highlighted section to the Blox template)
That's it, hope you find it useful!
Bear in mind the more of these you have on one page, the more requests and queries are hitting Sisense, so tread carefully and make backups!
