Search results

Tab Widget

Tab widget allows you to add multiple widgets in a single tab and multiple tabs within a single widget. It groups number of widgets in one place which reduces the large design area of the dashboard.

Tab Widget

How to add Tab Widget

You can drag and drop tab widget into the dashboard which is present under the Miscellaneous group in the left side item panel. Also, you can resize the dragged widget to add more widgets in the same tab.

Add Tab Widget

How to configure Tab Widget with multiple widgets

You can add multiple widgets in tabs using following three ways:

  1. Configure tab widget by dragging some other widgets from the item panel. Assign required data to configure widgets.

    Method1 Tab Widget

  2. Drag the configured widgets from design canvas into the tab widget.

    Method2 Tab Widget

  3. Drag the existing panel widgets into the tab widget.

    Method3 Tab Widget

Tab Functionalities

Tab can be add or remove by using following options:

  1. Add Tab.
  2. Remove Tab.

1. Add Tab

Tab widget contains (+) icon at the right of last tab name. Click add icon and a new tab will be created.

Add Tab

2. Remove Tab

Every tab is created with close icon at the right end of tab name. A tab can be removed by clicking close icon.

Remove Tab

How to format tab widget

You can format the tab widget for better illustration of the view that you require using the settings available in Properties tab.

Basic settings

Tab Widget properties

Tab Order

Tab Order helps to rearrange the created order of all tabs. Choose any one of the tab name and then click corresponding arrow icon wherever the tab get placed either upwards or downwards.

Tab Order

After clicking arrow icon, the selected tab will be switched as shown in following image.

Tab Order

Tab Rename

A tab name can be renamed by clicking the edit icon at the top right of the Tab Order section. Follow these steps to edit tab name:

  1. Select tab name.

  2. Click edit icon at the right side of Tab Order section.

  3. Text box appears for the selected tab name.

  4. Rename the tab name as shown in following image.

    Tab Rename

Widget Order

Widget Order rearrange the number of widgets within a tab. You can overlap the widgets over one another in a tab. The order of the widgets can be changed by Widget Order section in property panel.

Widget Order listed the number of widgets inside a tab. You can rearrange the order by using arrow icons.

For example, the last dragged Department widget was placed at the bottom of the list and bound over the Feedback Report widget. Now select Feedback Report tab in the Widget Order section and then click the downward arrow icon which has to be shown in the following image.

Widget Order

After clicking downward arrow icon, Feedback Report tab moves to bottom of the list and it appears over the Department widget within a Patient Feedback tab in tab widget.

Overlapping widgets

Hide Tab Header

When the Hide Tab Header checkbox is enabled, the tab header will be disabled.

Hide tab header

Header color and Font size

The color of the tab header can be changed by choosing color from Header Color and size of the tab font can be changed by selecting the HeaderFontsize option.

Active Tab

Active Tab sets the selected tab as default when the dashboard is rendered.

Container Appearance

Container Appearance

Show Border

This allows you to toggle the visibility of border surrounding the widget.

Corner Radius

This allows you to apply the specified radius to the widget corners if the Show Border is enabled. Value can be between 0 and 10.

Show Background Image

This allows to set the background image for the tab widget.

Show Background Color

This allows to set the background color to the tab widget.


This property allows you to specifies the transparency for the background color.

Show Shadow

This allows you to toggle the visibility of shadow surrounding the widget.


Export tab widget as Image and PDF format. Currently, active tab with widgets will get exported.

Export Tab Widget