edit-icon download-icon

Basic editor

Last Updated: Jul 11, 2018

The project editor is the main interface within DataV where you can adjust page layouts, bind data sources and widgets, and publish projects. The following image show key components of the project editor (outlined in red):

Editor Page

The key components are numbered as follows:

  • 1: Widgets
  • 2: Canvas
  • 3: Layers
  • 4: Page settings
  • 5: Publish area

Canvas

In the canvas area, you can select, drag, scale, delete, duplicate, and layer one or multiple widgets.

Select widgets

You can click widgets individually, or hold down SHIFT or CTRL (for Windows), or COMMAND (for macOS), and then click multiple widgets to select the required amount of widgets.

You can also go to the left-side widget pane and check the required widgets from the widget list, as shown in the following figure.

Layer

Drag

Select one or multiple widgets as needed, hover your mouse over a selected widget, and then click and drag your mouse to reposition the selected widgets on the canvas. If multiple widgets are selected, the widgets will move simultaneously in the same direction.

Scale

  1. Select one or multiple widgets, and then hover your mouse over a selected widget.

  2. When the scale icon appears at the lower-right corner of a selected widget, click and hold your mouse on the icon to adjust the size of the widget (or widgets) by dragging the widget’s border with the mouse. If multiple widgets are selected, the widgets will scale simultaneously in the same direction.

Duplicate

  1. Select a widget.

  2. At the upper left corner of the widget’s border, click the Duplicate icon.

  3. Click and drag the duplicated widget and position on the canvas as needed.

    Replicate Component

Layer

At the upper-left corner of the widget pane, you can click “Bring forward”, “Send backward”, “Bring to front” or “Send to back” to layer one or more selected widgets.

You can also click and drag a widget upward or downward in the widget list. The higher a widget is positioned on the list, the closer it is to the front of the canvas, and conversely the lower a widget is positioned, the closer it is to the back of the canvas. The blue horizontal line indicates the position of the selected components after the movement.

Layer Movement

Alignment and distribution

When multiple widgets are selected, Alignment and Distribution are displayed on the right side of the page. Alignment methods include “Align Top”, “Align Middle”, “Align Bottom”, “Align left”, “Align Center” and “Align Right”. Automatic distribution methods include “Horizontally”, “Vertical”, and “Average”.

Alignment and Distribution

Delete

  • Delete a single widget
  1. Select the required widget.

  2. At the upper-right corner of the widget’s border, click the recycle bin icon.

  3. Click Delete.

    Delete component

  • Delete multiple widgets
  1. Select the required widgets.

  2. Under the left-side widget pane, click Delete.

    ## Batch delete components

Thank you! We've received your feedback.