Getting Started / Low-code app designer

Low-code app designer

Low-code designer allows you to quickly customize the apps by using drag-and-drop. You can configure:

  • Forms. Customize the cards interface by adding various components. For example, determine what the user sees when creating a document page.
  • Pages. Configure the user interface for work in the system.
  • Widgets. Configure the components that help to customize the forms and the pages.

The screenshot below demonstrates the basic arrangement of the Designer window.

LcD1

The main field for configuring a page or a form is located in the middle. On the right side you can find a panel with all available interface components and properties. You can drag them to the field and configure as needed.

How to set up your app form

 

You can configure your own forms in a low-code designer after creating an app. Read more about creating new apps in the Creating an app article. Now, let's see how to configure a form that users are going to fill out when a new contract in the Contracts app is created.

Go to the low-code designer

 

  1. Open the Contracts app and click the gear icon next to its name. In the menu, select Form settings. In the pop-up settings window click Advanced mode.

LcD2

  1. The Context tab opens. Here you can add new fields that are not in the app context yet, for example, the «Responsible user». In this field you can enter an employee in control of the process. To do this, click the +Add button and configure the settings. As a property type, select Users in order to be able to select a system user.
  2. Go to the Create tab. Click the <Default> link. The +Create form button appears. Click on it to go to the low-code designer.

LcD3

 

Configure the form

In the low-code designer you can make a convenient form with the help of the widgets and properties on the right panel: add different blocks to the form and write clear instructions.

  1. Drag the Panel with header widget to the form. In the Title type in «Enter the contract information».

LcD4

  1. Drag the fields from the Properties tab to the added panel. Here, users enter the information: the contractor's name, the total sum, the contract number, etc. Note that the field for the file upload is added by default. If you want, you can move it to a separate panel with a header.
  2. Next, configure the sidebar. Note that it has a «Standard item form» widget by default. This widget contains the fields you added when creating the app. As we have already added them in the previous step, you should delete this widget.LcD5Now, set up the field to add the user responsible for the contract execution. Add the side panel widget to the side panel. Call it Control and drag the Responsible user property into it.

Finally, the form looks like this: the main part is divided into two blocks: one for the information entering, and the other for the file uploading. The side panel contains a field where you can select the responsible user.

LcD6

Click the Save button in the top menu to make it available for the users.

Now, when the employees add new contracts the interface will look like this:

LcD7

Add a script

Widgets allow you to create interactive forms by using simple scripts. For example, when a user hovers the mouse over the field to download a file, a window with additional information pops up.

How it is done

  1. Add a variable of the Yes/No switch type to the context. It will be used when configuring the form behavior. Let's call it info.
  2. Add the Information box widget to the panel for downloading the file. In the widget settings, specify the text of the instruction, for example, «Upload the file in the .docx format». Then, check the Hide checkbox and bind the pre-configured Yes/No switch variable to this field. The widget will be hidden if the variable's value is Yes, and will be shown if the value is No.
  3. Open the Upload and preview file widget settings. In the On mouse enter handler create a script; click the Create button, enter the function name, for example, showInfo. Click Open to go to the page for writing the script.

 

You will see the already written function.

async function showInfo(): Promise<void> {
}

 

You need to specify that the info variable value is No. The script will look as follows:

async function showInfo(): Promise<void> {
Context.data.info = false
}

Now when the user hovers their mouse over the area for uploading the file, the system will calculate that the variable's value specified in the Information box widget settings is No and the instruction window will appear.