Designer

Prev Next

Designer can be launched from the Web Vision configuration page in the WebUI, as shown in the below image. Alternatively, the designer can be launched directly from the web browser by adding /designer to the Web Vision URL. For instance, https://localhost:8444/designer.

The Designer includes the following areas:

Section

Description

Navigation

  1. Project tree

Displays the templates in the project. This includes visual templates, such as Containers and Components, which can be reused to build customized screens; and Functions and Datasets, which allow application of logic and data structures to be reused across multiple views.

  1. Properties tree

Displays the properties of the selected element. Each property can be configured using expressions or literals on the Value column, and the result of this expression is shown on Output column, if expanded.

  1. Help tool

When a property is selected, the Help panel becomes available at the bottom of the navigation area. Expand this panel to view additional information, descriptions, and usage details for the selected property.

Working space

Shows the UI view of the selected template, if any is available, and allows users to build and edit the visual interface of the project.

Help bar

Contains quick access to the main design tools and frequently used actions in the Designer UI.

  1. Burger Menu

  1. Save/Discard changes

  1. Opened elements tabs

  1. Snap grid

  1. Preview mode

Key shortcuts

The following shortcut keys can be used when working in the designer:

Shortcut

Description

Ctrl + S

Saves the current module status, applying all changes made during the session.

Ctrl + X

Cuts the selected property value, element, or template. Elements and templates remain available until they are pasted, while property values are removed immediately when cut.

Ctrl + C

Copies the selected property value, element, or template.

Ctrl + D

Duplicates the selected element or template.

Ctrl + V

Pastes the property value, element, or template stored in the clipboard into the selected destination. Copied elements can be pasted multiple times, while cut elements are removed from the clipboard after being pasted.

Ctrl + Drag

Duplicates the dragged element or template, creating a new instance in the destination.

Web Vision Full Product Details