Example: Customize an app in the Low-code designer

In the low-code designer, using drag-and-drop, you can create and configure user-friendly interfaces:

• Forms. For apps and business process tasks, such as pages for creating and viewing documents.
• Pages. User interfaces for working in the system.
• Widgets. Components used to determine the appearance of forms and pages.

Let's walk through creating and configuring a custom form and modifying the create form in the Contracts app:

1. Divide the data in the page into logical blocks.
2. Display the responsible employee on the side panel.
3. Add an interactive tooltip for the user using a script.

Step 1. Create a form and open the low-code designer

After you have created an app, you can add a custom form and configure it in advanced mode within the low-code designer. To do this:

1. Open the Contracts app and click the gear icon next to its name. In the menu, select Form Settings, and in the window that opens, click Advanced Mode.

2. On the Context tab that opens, you can add fields that are not yet in the app context. In this example, create a field to specify the employee who will supervise contract processing. To do this, click + Add and create a Responsible field of type Users (single) to select system users.
3. To open the low-code designer, go to the tab corresponding to the form you want to configure: Create, View, or Edit. In this example, open the Create tab, click <Default>, and then click + Create Form.

Step 2. Configure form appearance

The canvas is located in the center of the low-code designer, while the panels containing app properties and ready-made widgets are on the right.

Use them to configure a user-friendly contract creation form:

1. Divide the form into blocks. To do this, drag the Panel with Header widget onto the canvas. In the header, specify: Input the contract information.

2. Place the main input fields within the block. To do this, drag the following fields from the Properties tab: Contractor, Contract number, Contract date.
3. Create a separate block for file upload. To do this, add another panel with a header named Upload Contract File. Inside it, place the Upload and preview file widget located on the form by default.
4. Configure the side panel. By default, it contains the Standard item form widget, which includes all created app fields. Select and delete it, since in our example the required fields are located in the main part of the form. Then add the Side panel widget, name it Control, and place the Responsible user property inside it.

The form is now configured as follows: the main section is divided into two logical blocks—one for entering information and one for uploading a file; the side panel contains a field for selecting the employee responsible for the contract.

5. Click Save and Publish in the top menu to make the form available to users.

Now, when employees add new contracts, the interface will look as follows:

Step 3. Add a script to display a tooltip

Using widgets, you can create interactive forms with simple scripts. For example, when an eployee hovers the cursor over the file upload field, a pop-up window with additional information appears.

To add such a script:

1. In the interface designer on the Context tab, create a info variable of the Yes/No Switch type.
2. Add the Information box widget to the canvas. In the settings window that opens, enter the instruction text: "Upload a file in .docx format". Then go to the System tab, select the Show on condition option in the Visibility field, and specify the info variable. The display of the information block will depend on the value of this variable: the widget will be shown if the value is true.

3. Select the Upload File with Preview widget and open its settings by clicking the gear icon.

3. Go to the Events tab and add a script that changes the value of the info variable to true. To do this, under On mouse enter event, click Create, enter the function name showInfo, and select Save, and then—Open.

5. On the Scripts tab that opens, add the following code to the created function to set the value of the info variable:

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

6. Save and publish the changes.

Now, when the user hovers the cursor over the file upload area, the value of the info variable will change to true, and the information block with instructions will appear in the item creation card.

What's next

After configuring and adapting the app's create, view, and edit forms, you can automate contract processing in the company.

начало примечание

Useful articles:

• Interface designer. How to configure pages and widgets in the designer.
• Work on the modeling canvas. How to manage elements in the designer when creating complex interfaces.
• Example: Associate a process with an app. How to model a contract approval process and set it to launch after an item is created.
• Example: Set up statuses and process monitoring. How to track item progression stages along a configured route.

конец примечание