How to configure Card Compact Layout
Last updated
Last updated
Go to "Layout" section of card properties at the right sidebar. Select Compact Layout and click on link "create" ("edit", if card already has compact layout configured).
Card builder will open. You can add components to card and configure card settings.
To delete component drag it and drop outside of the card layout.
Configuring settings:
If checkbox "Collapsible" is checked, the card on dashboard will show only the first row of components by default. Hover mouse on it to display the whole card.
Expand "Styles" section to show CSS styles form.
Click on component of a card. Settings of component will open at the right sidebar. Select Type (if you want to change type), fill in ID, Value, Title and set width of this component, if necessary.
ID is required to be used in some actions related to Cells, like "Refresh Cell" or "Update Cell".
Click on "Formula Builder" button to display very helpful assistant.
You can copy/paste components with settings using proper buttons.
Expand "Handler" section and configure handler(s), if necessary. Expand "Styles" section to show CSS styles form for current component.
Click on Card Preview button to show "Card Preview" popup:
Select any existing record in the "Search" field to populate card preview with actual data from this record. Drag the slider to play with card preview width. You can set values to the variables in this list to affect element in card preview (variables are set in Dashboard Configuration). Click "Save" to apply changes in card builder and save dashboard.
There are 4 types of card components:
Text (looks like generic text)
Link (looks like a link, default design depends on selected Kanban theme)
Icon (has no text, only small image that should be taken from icon library)
Menu
Text, link and icon are simple and intuitive to set up. Menu is more complex. It can have both text and icon, which position can be left or right. The position where submenu is dropped, also can be set there:
Note: open menu cant take more room than card can offer, and it can be cut off by card edges; in this case you can allow menu fall down out of card area by adding "overflow:visible" style to the card.
The Menu component has no sense without menu items. Thus, user must set up at least one menu item in Options section. Menu items should have handlers set as usual:
