Low-code designer > Set up interfaces / Interface designer

Interface designer

In the Interface designer, you can customize the company’s interfaces with pre‑built and custom widgets.

Widgets are interface elements that allow users to upload files, display data, activity streams, tables, users lists, etc.

You can use widgets to:

By combining different widgets, you create an interface tailored for your users. In addition, you can save your widget combination and use it on different pages and forms over and over again. This way you can create various interfaces catered to the needs of your company.

Open the interface designer

The interface designer helps you design app forms and pages, as well as create custom widgets. There are several ways to open the designer depending on the item that you want to set up.

  1. To create an interface:
  • Go to Administration > Interfaces. Create a new widget of the Page type or other custom widget. The designer will open automatically.
  • To set up an interface for a particular workspace or app, go to the app or workspace menu, click on the gear icon next to its name, and select Interfaces. Then create a new page or widget. The designer will open automatically.
  1. To set up a new page from the main menu or workspace menu:
  • Add a new page or open an existing one. Click on the gear icon in the top right corner of the page and click Widget Builder.
  1. To set up an app form:
  • Open an app form in the advanced mode. Open the tab corresponding to the form you wish to set up, click <Default>, then click + Create Form. If the form has been created earlier and now you want to edit it, click Edit Form. To learn more, see Form templates.

If another administrator is already working with an interface element in the designer, you can open this element in the designer for viewing only. To do this, when entering the designer, click Open in View Mode in the pop-up window.

How to work in the interface designer

Here is what the interface designer looks like:

interface_designer-1

  1. Modeling canvas. This is a workspace within which you will create custom widgets and customize the layout of pages or forms with widgets and properties. You can easily find any nested element.
  2. The toolbar allows you to save, publish, or debug an interface, as well as check whether the widgets are correctly composed. You can also undo or redo an action.
  3. The interface designer has the following main tabs: TemplateContext, Scripts, History, Settings, and Files.
  4. The tabs on the right are for adding components to interfaces:
  • Widgets. All available widgets are grouped by type.
  • Properties. System properties of widgets, all the context variables of an app or business process, and properties added on the Context tab.

Top toolbar

The top toolbar has the following controls for working with the interface you are setting up:

interface_designer-toolbar

  • Save. The page or form that you have set up will be saved as a draft. The changes will not be made available to users. You can return and edit it later.
  • Check. The widgets that you have added are checked for errors. If there is an error, for example, there is an invalid scripts, you will see an alert.
  • Publish. After being published, scripts are displayed on forms or pages, and become available to users. Each time you want your changes to be applied, you need to publish the interface. When publishing, you can leave a comment about the changes you have made. This comment will then be displayed on the History tab where you can restore one of the previous versions of a page or form.
  • Debug. A window opens showing you how the form or page will look like in the interface after it is published. You can learn more in Debug an interface.
  • Undo. When working in the Template tab, you can undo your latest action: adding or deleting a widget, moving it, changing its settings.
  • Redo. You can repeat the action that you have undone.
  • Start Editing. This action is only available if you opened an interface element in the view mode. It allows you to switch to editing mode if another administrator has finished working with this element in the designer.

начало внимание

To make changes available to users, don’t forget to Publish the form or page that you have set up.

конец внимание

 

Found a typo? Highlight the text, press ctrl + enter and notify us