Get Started

Dashbaord designer offers a modern drag-and-drop interface that makes dashboard creation simple, intuitive and user-friendly.

Getting familar with the Designer

The form builder is divided into four main sections, each serving a specific purpose in the form design process:

Understand the Analytics Designer Layout

Visual Components on Canvas - Dragging and dropping

In ViewZen Analytics, visual components can be easily added to the canvas using a simple drag-and-drop action. Users can select a visual component from the available options and drag it onto the dashboard canvas, placing it in the desired location.

The drag-and-drop functionality ensures a smooth dashboard-building experience, making it easy to create interactive and visually appealing data representations.

On the canavas, designers can

1. Change Position – You can place a visual component anywhere on the sheet canvas. Once added, it can be repositioned freely across the canvas. When you hover over the component, the cursor changes into a four-arrow () move cursor, indicating that the element can be moved
2. Resize – You can resize any visual component by dragging the edges or corners to adjust its dimensions. Dragging along the edges will adjust the horizontal or vertical size, while dragging from the corners will modify both the vertical and horizontal dimensions in proportion to the angle in which it's dragged. When you hover over the edges and corners of the component, the cursor changes into a two arrow () drag cursor, indicating that the dimension can be altered in that direction.

Drag and Drop

Design tools

The Design tools can be used to modify the properties or change the behaviour of the visual component once it is placed on the canvas.

Design tools become active only after a component is selected. Once you click on a visual component, the border color will turn blue indicating that the component is selected and the design tools on the toolbar will get activated.

1. Edit - Clicking on the Edit tool will open the component properties panel on the right hand side of the designer page.

2. Delete - The visual component can be deleted by clicking on the Delete tool. A confirmation prompt is displayed to the user and the user has to confirm before a component can be deleted.

3. Copy - Select the visual component, click the copy icon, and then click on the canvas. A duplicate of the selected component will be created at the location where you clicked on the canvas.

4. Move - Select the visual component, click the move icon, navigate to a different sheet in the dashboard, and then click on the canvas. The selected component will be moved from its current sheet to the new sheet at the location where you clicked on the canvas.

5. Lock / Unlock - Select the visual component and click the Lock or Unlock option. Whichever tool (lock / unlock) is displayed in a blue outline is the current lock status of the visual. This property allows you to lock the position of a visual component within a dashboard. When a visual component is locked in place, other components cannot move or displace it.

Tip

To freeze a visual component in its current position, lock the visual.

Precedence of Position

Precedence of Position refers to the order or priority in which visual components are arranged or layered on a canvas. The precedence of position follows the following rules

1. If the "Overlap Visuals" setting is turned off in the sheet settings, moving a component to a location already occupied by another component (in unlock state) will cause the original component to shift to the next available space on the canvas, making room for the component being shifted.

2. If the "Overlap Visuals" setting is turned off in the sheet settings, moving a component to a location already occupied by another component (in locked state) will have no effect on the the original component. The original component will stay at the same place.

3. If the "Overlap Visuals" setting is turned on in the sheet settings, moving a component to a location already occupied by another component (in locked or unlocked state) will cause the component being shifted to lie on top of the original component. The component placed newly will be displayed in front.

Utilities

The designer includes a couple of useful utilities listed below.

1. Fields in datasets - This utility lets you view the dataset fields and their types. You can drag and drop fields from the dataset into various sections of the data properties.

   The fields section lists the following

   1. Dataset columns - Dataset wise-columns present in each dataset that is added to the dashboard and their types.

   2. Expressions - Expressions created on added datasets.

   3. Context fields - If a context field is mapped to an added dataset field, the context field will be listed.

   4. Formuale - Any formula created on the added dataset will be listed.

2. Publish Visual - This feature allows you to publish the selected visual to the Visuals Marketplace. Clicking on the "Publish Visual" option will open the Publish Visual panel on the right-hand side of the dashboard page.

   1. The preview of the selected component is automatically captured. The re-capture option allows you to recaputre the image, if required. The preview image is displayed in the visual marketplace.

   2. Name and description to identify the visual

   In addition to the above, other properties such as the type of visual (e.g., chart, card, table, etc.) and the publishing organization are automatically recorded during the publishing process.

Designer Utilities

Data types of Fields

The data types of fields can be identified by the symbols next to each data field.

1. ABC indicates text

2. 123 indicates number

3. calendar icon indicates date and time