# Configuring Rows, Cells, Menus and Buttons

### Cells

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](https://docs.flexikanban.ai/standard-kanban/configure-kanban/how-to-add-kanban-statistics), [Column Group](https://docs.flexikanban.ai/standard-kanban/configure-column/how-to-set-column-groups) Headers, [Column Headers](https://docs.flexikanban.ai/standard-kanban/configure-column/how-to-configure-column-header) and [Footers](https://docs.flexikanban.ai/standard-kanban/configure-column/how-to-configure-column-footer), and Cards (see proper [article](https://docs.flexikanban.ai/standard-kanban/configure-card/how-to-configure-card-compact-layout) 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.

<img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FGg5WDEyJ8b2rlcYpwTGo%2Ffile.excalidraw.svg?alt=media&#x26;token=0664a033-68b5-4617-ad7d-a5f2e5fdba63" alt="" class="gitbook-drawing">

{% hint style="warning" %}
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.
{% endhint %}

To add a cell into dashboard element go to this element configuration and click "Add cell" button in the proper place:

<img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FkKyUdxX8WIXxe33XRs11%2Ffile.excalidraw.svg?alt=media&#x26;token=aae04693-9c1c-44f7-92b1-446fbd258abf" alt="" class="gitbook-drawing">

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](https://docs.flexikanban.ai/standard-kanban/tools/using-merge-field-picker) or [formula](https://docs.flexikanban.ai/standard-kanban/tools/using-formula-editor)
* 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](https://docs.flexikanban.ai/standard-kanban/using-kanban/how-to-use-kanban-api-actions), like "Refresh Cell" or "Update Cell"
* Specify Cell width in % or pixels, if you're not satisfied with default "auto" value

<img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FOiRmcSlUwsEjII4sIcfe%2Ffile.excalidraw.svg?alt=media&#x26;token=7ee61327-27df-4232-bc0b-d72f5621c7a5" alt="" class="gitbook-drawing">

{% hint style="info" %}
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](https://www.lightningdesignsystem.com/icons/).

Note: If specify incorrect icon, cell will contain no icon.
{% endhint %}

{% hint style="warning" %}
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:
{% endhint %}

<img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FFBLhJ9gmNPG7iiV6lskR%2Ffile.excalidraw.svg?alt=media&#x26;token=df95fc9a-643f-4533-8a8e-1a2facd4cb9a" alt="" class="gitbook-drawing">

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](https://docs.flexikanban.ai/standard-kanban/tools/configuring-handlers).

### Rows

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:

<img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FPkVti7K1K0YAvCUtHGTt%2Ffile.excalidraw.svg?alt=media&#x26;token=739777d0-348c-4506-b4d1-45ff30248568" alt="" class="gitbook-drawing">

Add cell(s) into the row as described above. \
Add more rows, if necessary.\
Use small arrow buttons to rearrange rows.

<img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FsvNWzdxzWzV20iZ4vl98%2Ffile.excalidraw.svg?alt=media&#x26;token=effe7ea1-822f-4492-9493-17de8e38fdc8" alt="" class="gitbook-drawing">

### Buttons

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)

<img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FlLCNGceN2a54UHbYe3sV%2Ffile.excalidraw.svg?alt=media&#x26;token=b9ccba0f-bf33-4d6d-8bb2-508648036e5a" alt="" class="gitbook-drawing">

{% hint style="warning" %}
If specify incorrect icon, button will contain red warning sign.
{% endhint %}

To add buttons to dashboard element go to its configuration and click "Add Button" button:

<img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2Fl2YF7VY84BpSO6BfUyPY%2Ffile.excalidraw.svg?alt=media&#x26;token=315a7b22-328b-4b37-9dbe-6f2c9a780314" alt="" class="gitbook-drawing">

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](https://docs.flexikanban.ai/standard-kanban/tools/configuring-css-styles), if necessary

<img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FNUvtBC2UpC3qKSkH7rTw%2Ffile.excalidraw.svg?alt=media&#x26;token=9cdf5e3a-e378-4179-9ef7-0daf13df2e0d" alt="" class="gitbook-drawing">

{% hint style="info" %}
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](https://www.lightningdesignsystem.com/icons/).
{% endhint %}

Click to "Handler Configuration" tab to configure handler(s) for this button.

### Menus

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.

{% hint style="warning" %}
If specify an incorrect icon, menu will contain red warning sign
{% endhint %}

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

<img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2F54RYTZl4RzKrhrE4GYOe%2Ffile.excalidraw.svg?alt=media&#x26;token=58978189-1304-4c74-a491-c3a0d77d5bd3" alt="" class="gitbook-drawing">

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.&#x20;
* **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

<img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FZNtA310lmMP9JKa9OsIU%2Ffile.excalidraw.svg?alt=media&#x26;token=66ccfced-897d-4d21-b01e-80a06b9b0851" alt="" class="gitbook-drawing">

After menu has been added, menu buttons should be added there. Click "**Add Button**" link in the menu row:

<img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FfkDE3NrXVLsvb8A5GNIh%2Ffile.excalidraw.svg?alt=media&#x26;token=583f6d37-0eef-4593-982c-eb7be39bdf4e" alt="" class="gitbook-drawing">

A button configurator popup will be shown. It is the same as for single buttons with only "**Separator**" button type added.&#x20;

Rearrange buttons with small arrows:

<img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FXTnDkjEJwgp98MgfKqJ9%2Ffile.excalidraw.svg?alt=media&#x26;token=5ec1ea46-4e53-4dae-bf59-afda94b8db74" alt="" class="gitbook-drawing">

Menu will look like this when clicked:

<figure><img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2F5RPkCR1CjSxjPgxi7r23%2Fimage.png?alt=media&#x26;token=7990e4af-82c5-4ed3-850b-0bc1b6bf0489" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
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.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.flexikanban.ai/standard-kanban/tools/configuring-rows-cells-menus-and-buttons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
