Dashboard designer
Updated over a week ago

The Dashboard designer is used to create and design dashboard pages with drag-N-drop controls. The Yeeflow designer allows you to build your page structure, design the look and feel, add controls, interactions, animations, and custom code to create fully functioning pages.

In the Designer you can visually manipulate form content, set CSS properties, and create interactions without writing code.

Accessing the Designer

To open the Dashboard designer, firstly access one of the existing dashboard page and click the "Edit Page" button from the right of the form title bar.

Add controls panel

This opens the Add panel from where you can add controls from the Controls panel

There are different types of controls in the controls panel, which are grouped based on categories:

  1. General: Includes general form layout related controls, which can be used to create well-designed form styles.

  2. Advanced: Includes advanced controls which gives you more powerfully layouts and elements, and presenting data from data list with data table, gallery and Gantt chats etc.

  3. Data Analytics: Includes the data analytics controls like Pie Chart, Column Chart, Pivot Table etc., to build visual dashboard charts.

Page settings

Click Page from the add controls panel to switch to the Page settings tab.

Background & Content Area

Set the background color of this page, and the content area style here. Please refer Page Background and Content Area Styles to learn more details.

Custom CSS

Add custom CSS which will be used on this form. Learn more about custom CSS, please refer: Custom CSS

The bottom navigation bar

The bottom navigation bar shows you the options to open navigator or preview your design.


Shows the hierarchy of every element on the page you are currently on. Here, you can visually interact with these elements. Learn more about the Navigator.


Toggles between the preview and design mode of the Designer, allowing you to see how your form will look when published.

Show / Hide the Controls Panel

When using the editor, the default view pins the controls panel to the left side of the screen. It’s useful for when you’re designing, but not so much when you want to preview how everything looks on the page.

One way to collapse the panel is to click the arrow along the right edge of it:

The Canvas

The major area in the Designer is the Canvas. It's where you can interact with the form in real-time. You can select elements, move them around, and edit content right on the page. Learn more about the Canvas.

The top bar

The top bar provides another set of view settings as well as some useful tools to manage actions, save changes and close this designer.

Page indicator

Shows which page you are currently on.

Breakpoints buttons

Located in the middle of the top bar, these icons allow you to switch between different breakpoints to see and edit the design of your page on these breakpoints.


  • Actions: Define and manage actions

  • Save: Click to save changes of this page.

  • Close: Click the close button to exit from the designer model.

Did this answer your question?