Configuring Rows, Cells, Menus and Buttons
Last updated
Last updated
Cells are the small parts of the different elements on your dashboard that contain pictures or text and can be used for visual, informational and interactive purposes. Cells can be added into Kanban Statistics, Column Group Headers, Column Headers and Footers, and Cards (see proper article to know about card cells). Cells can be one of these types:
Icon - a small picture
Text - looks as generic text matching selected Kanban theme
Link - looks as generic link matching selected Kanban theme
Menu - looks as generic text matching selected Kanban theme, but shows a dropdown menu with standard button-like items. This menu is the same as shown when click button of "Menu" type - see proper button description below.
Note: Cells of "Link" type just look like links, but do nothing when clicked by default, as far as other cells types. You need to add handlers to them to make them do something.
To add a cell into dashboard element go to this element configuration and click "Add cell" button in the proper place:
A cell entry row will be added. Then:
Select cell type
Configure CSS styles of this cell, if necessary
Click ">>" button for "Value" field to show Cell Properties popup
Specify cell value. It can be text, merge field or formula
Specify Cell Title - a tooltip that will be shown on mouse hover; this is not mandatory. Tooltip also can be made dynamic with the help of merge fields and formulas
Set some custom ID for Cell, if needed. This ID is required to be used in some actions related to Cells, like "Refresh Cell" or "Update Cell"
Specify Cell width in % or pixels, if you're not satisfied with default "auto" value
For cell of "Icon type" it will be an icon category and name in format "category:name".
Icon and it's category should match one from Lightning Design System icons library.
Note: If specify incorrect icon, cell will contain no icon.
Note: If you specify a Cell ID in the Cell Properties popup, it will be shown in "ID" field of the Cell entry row. Do not edit it there:
Add more cells if needed. Use small arrow buttons to rearrange cells (first cell is most left, last is most right).
To make cell interactive (do something on mouse click) click ">>" button in "Handler" column and configure handlers.
In some dashboard elements (e.g. column footer) cells can be shown in more than one line. In this case cells are organized in rows.
Go to proper element configuration and click "Add Row" button:
Add cell(s) into the row as described above. Add more rows, if necessary. Use small arrow buttons to rearrange rows.
Buttons can be shown in the different elements on your dashboard. They are used to add some interactivity to dashboard. Buttons can be one of these types:
Standard - look as generic button (matching selected Kanban theme)
Standard with icon - look as generic button containing both icon and text
Icon - look as generic button with icon only
Separator - look not like a button, used to separate menu items (available to add in menus only)
If specify incorrect icon, button will contain red warning sign.
To add buttons to dashboard element go to its configuration and click "Add Button" button:
A modal popup will appear. The main button properties will be shown at "Basic Configuration" tab:
Select button type - standard or icon
Set button label - text that will be shown on the button. It can be static text, merge field or formula
This field is unavailable for buttons of "icon" type
Set button title - text that will be shown as tooltip on mouse hover
Specify button icon. Icon is mandatory for "Icon" type buttons and optional for "Standard"
Configure conditions that button should match to be displayed. This is optional and by default button will be displayed unconditionally
Configure CSS styles, if necessary
For button of "Icon type" it will be an icon category and name in format "category:name".
Icon and it's category should match one from Lightning Design System icons library.
Click to "Handler Configuration" tab to configure handler(s) for this button.
Menus are way to aggregate buttons into dropdown blocks of submenu items. Menus can be one of these types:
Button - menu look as generic button matching selected Kanban theme.
Icon - look as generic button with icon only.
Text - look as generic text string.
If specify an incorrect icon, menu will contain red warning sign
Menus are available for some dashboard elements, e.g. dashboard top (in Kanban properties). Go to proper configuration and click "Add Menu" button.
Menu configurator popup will be shown. Here you can:
Select menu type
Specify menu label - text on menu item. It can be static text, merge field or formula
Note: if menu type is set to "Icon", an "Icon" field will be displayed instead of "Label"
Specify menu item title - text that will be shown as tooltip on mouseover
Select menu position (see below)
Optionally configure conditions, that should be matched to show menu
Configure CSS styles, if necessary
Menu position shows direction where block with submenu items will be dropped to:
Right means submenu will start at left side of menu and continue to right direction when menu items text will be long.
Left - submenu will start at left side of menu and continue to left direction when menu items text will be long. These directions are shown with red arrows
Top - submenu will be shown above menu. Bottom - submenu will drop down below menu. These directions are shown with green arrows
After menu has been added, menu buttons should be added there. Click "Add Button" link in the menu row:
A button configurator popup will be shown. It is the same as for single buttons with only "Separator" button type added.
Rearrange buttons with small arrows:
Menu will look like this when clicked:
Note: currently buttons with "Icon" type are not suitable for using in menus due to mandatory text label that you can't edit. Use "Standard" type buttons with icons instead.
