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. For example, pages for creating and viewing a document.
  • Pages. User interface for working in the system.
  • Widgets. Components that help customize forms and pages.

The image below shows what the low-code designer looks like.

designer-window-1

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

Set up your app form

You can configure your own forms in low-code designer after you have created an app. To learn more about creating new apps, see Create an app article. Now, let's see how to configure a form that users will fill out when creating a new contract in the Contracts app.

Go to 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, 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, add the Responsible user field for selecting an employee to be in charge of a contract. To do this, click the +Add button and fill out the settings. As property type, select Users in order to be able to select a user of ELMA365.
  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

You can create a convenient form by using widgets and properties located on the right panel: add different blocks to the form and enter clear instructions for users.

  1. Drag the Panel with header widget to the form. In Title, type "Enter contract information".

LcD4

  1. Drag fields from the Properties tab to the panel. Here, users will 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. You can move it to a separate panel of needed.
  2. Configure the sidebar. Note that the Standard item form widget is placed there by default. This widget contains the fields you added when creating the app. As we have already added them in the previous step, delete this widget.
    LcD5
  3. Now, set up the field to add the user in charge of the contract. Add the side panel widget to the side panel. Name it Control and drag the Responsible user property into it.

The final form looks like this: the main part is divided into two blocks, one for entering information, and one for uploading a file. The sidebar has a field for selecting a user in charge of processing the contract.

LcD6

  1. Click the Save and the Publish buttons in the top menu to make it available for the users.

Now, the form for adding a new contract looks 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 a field for file upload, a window with additional information pops up.

To add a script:

  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 uploading a the file. In widget settings, enter instructions, for example, "Upload a file in the .docx format". Then, check the Hide checkbox and bind the 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 field, create a script: click the Create button, enter the function's name, for example, showInfo. Click Open to go to the page for writing the script.

 

The function is already there.

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

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

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

Now when a user hovers the mouse over the area for uploading a file, the system will see that the value of the variable specified in the Information box widget settings is No and instructions will appear.

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