Skip to main content

Veritran Docs

Visual Builder

The visual builder is a low-code tool that allows you to create or edit the screens of your app. To access the visual builder, go to Global > Applications, find the card for the app you want to work with, hover over the card and click Screens. To create a new screen, click + New screen. To edit an existing screen, find it in the list and click Design or double click the screen's card.

The visual builder opens in a new tab, and shows the new screen or the screen you selected to edit. Refer to the annotated image and sections below to learn more about the visual builder’s interface.

VB_HOME_2_10.png

Toolbar

The toolbar contains a set of essential tools you can use while building your screens. Tools are explained below in order of appearance.

1-save.PNG

Save. Click the Save icon to save changes and close the tab, or click the down arrow to see the following options:

Save and continue

Click to save changes and continue editing.

Quick Publish

Click to generate and publish the changes made to the screen. You won’t need to generate and publish the entire app.

Close without saving

Click to go back to the [Screens] List page without saving any changes.

When there are unsaved changes, a dot appears in the visual builder tab, to the right of the screen's. After you save changes, the dot disappears.

2-duplicate.PNG

Duplicate. Click to duplicate a selected component. This tool doesn't allow you to duplicate screens.

3-copy.PNG

Copy. Click to copy the selected component and its attributes.

4-paste.PNG

Paste. Click to paste the copied component in the selected screen.

5-copystyle.PNG

Copy style. Click to copy the style of the selected component.

5-copystyle.PNG

Paste style. Click to apply the copied style to the selected component.

7-lock.PNG

Lock. Click to disable changes to the selected component. All the sections in the right panel are grayed-out to prevent changes.

When a component is locked, the icon turns into an open lock. Click it to unlock the component.

9-stackup.PNG

Arrange up. Click to move the selected component upwards in the treeview.

8-stackdown.PNG

Arrange down. Click to move the selected component downwards in the treeview.

10-folder.PNG

Create Library. Click to create a new library component for the component selected.

The New Library Component window appears, where you must complete the following parameters:

Component name

Enter a name for your library component.

Thumbnail image

Click the upload button. In the file explorer that opens, select an image and click Open. Check that the file types and image dimensions are allowed.

Click Save to save changes or Cancel to return to the Visual Builder without saving.

11-css.PNG

Create theme. Click to create a new style to apply to the selected component. Once you save the new style (click CREATE to save), it is available for reuse in other components. You can select it in the CSS Class drop-down menu in the Basic section of the Design tab of the attributes editor, and you can also find it listed in the Custom tab of the theme selected for your app.Basic

12-delete.PNG

Delete. Click to delete the selected component from the screen.

Important

All buttons, except for the Save options, are only enabled after you select a component within the canvas.

Canvas Options

Canvas options affect how you view the screen. Refer to the annotated image below to learn more about each option.

VB_HOME_CANVAS_OPTIONS_2_10.png
  1. Simulator view modes:

    Overflow

    Check this option to see the components of a screen that occupy more space than the canvas of the simulated screen for the device selected. Click the checkbox to show the components placed outside the canvas.

    User mode

    Check this option to see the simulated images and texts of the components within the screen.  It allows you to see how the values specified in the attributes of the components will look like in the app, instead of seeing only the space these components occupy in the screen.

  2. Screen view modes

    13-treeview.PNG

    Treeview. Click to hide the canvas and open the treeview tab only. You won't be able to see the components in the simulator.

    14-screen.PNG

    Simulator. Click to open the treeview tab without hiding the canvas. By default, this option is selected.

  3. View. View modes show the position and alignment of objects. The only option available in the drop-down menu is Show Guides. It is selected by default.

  4. Undo and Redo buttons.

  5. Canvas zoom. Click - or + to decrease or increase the zoom on the canvas, respectively. You can also click the percentage field to type a custom percentage or click the arrow and choose a fixed option from the drop-down menu: 25%, 50%, 100%, 200% or Fit to Canvas.

  6. Device options and orientation. These options are only available for universal apps. By selecting a device and orientation, you will be able to see in the canvas how the screen will look like in such device.

    16-device.PNG

    Click to open the drop-down menu and select a device or group of devices from the list. Each option includes the name of the device or devices and their screen resolution in pixels.

    17-orientation.PNG

    Click to switch orientation from landscape to portrait and vice-versa.

  7. Languages. Click the arrow and select a language from the drop-down menu.

    Important

    The Languages drop-down menu contains the languages selected in you app's settings. If no languages were set, English will be the default language for the app and the Languages menu won't be displayed in the in the Visual Builder.

  8. Device view. These options are only available for web apps.

    18-mobile1.PNG

    Click to view the screen as a mobile-first project in smartphone portrait mode with the default device settings.

    19-mobile2.PNG

    Click to view the screen as a mobile-first project in smartphone landscape mode with the default device settings.

    20-tablet.PNG

    Click to view the screen as a mobile-first project in tablet portrait mode with the default display settings.

    21-desktop.PNG

    Click to view the screen as a desktop-first project with the default display settings.

    Once you select any of the device views, the icon is highlighted in blue and you can click the arrow to open a list of more devices and their resolutions. Click any device from the list to select it.

    device_view_dropdown.png

    The number in pixels that appears next to the device view options is the width of the currently-selected device's resolution.

Building Tabs and Left Panel

The left panel of the Visual Builder provides a set of tabs that allow you to build and customize your screen. Read Building Tabs and Left Panel to learn more.

Canvas

The canvas is the simulator that allows you to see what the screen of your app will look like while adding or removing components and setting their attributes. It can also simulate the screen on different devices and with different resolutions. 

As you drag certain types of components through the canvas, you can see the distance between them in pixels to help you with design.

Note

Certain changes made to the attributes of components (like changes to the angle and component shadows) will not be reflected in the canvas as you are working. These changes will only appear in the screen upon publishing the app.

Attributes Editor (Right Panel)

The right panel of the Visual Builder allows you to set different types of attributes for each component. The attributes to be configured will specifically depend on the selected component. Read Attributes Editor to learn more.