Appearance

npm

Your first form ​

This walkthrough builds a small client registration form: name, email, client type, a company-only section, and a submit button. It touches the four skills you will use every day: placing elements, naming them, adding logic, and previewing.

Lesson 1Your first formWatch on YouTube
Chapters (13)

1. Place the fields ​

From the Single line inputs group, drag onto the canvas (or double click a tile to add it after the selected element):

  • Text: set Label to First name. The Name follows the label and becomes firstName on its own.
  • Text: set Label to Email; its name becomes email.

From the Choice inputs group:

  • Radio: set Label to Client type (name clientType). In the Options category set the first two options to Private person (value person) and Company (value company), and delete the third.

TIP

Drag two elements next to each other to place them side by side in one row. They share the row evenly without any width. Set a Width in the Design category only for an uneven split, and only on one of them: 50% on both makes the second one wrap, because a percentage does not count the gap between them.

2. Make fields required ​

Select the email field and in the Restrictions category turn on Required. In Validators, set Required field message to Email is required.

Then add a format check: still in Validators, press Add validator, pick the type email and set the error message to Enter a valid email address. Close the dialog; the validator is kept.

3. Add a conditional section ​

From Containers, drag a Panel below the radio. Set its Label to Company details. Inside it place a Text element named companyCode with label Company code.

Select the panel and in the Logic category press Add expression. A new rule starts as Visible if. In the visual builder choose the field Client type, keep is equal to, and pick Company as the value. The line above the rule reads it back in words, and the expression it saves is:

visibleIf:  {clientType} == "company"

The panel now appears only when Company is selected. Expressions in {curly braces} reference other fields by name; see Expressions basics.

Make the company code mandatory only when visible. Select the companyCode field, add another expression, switch its type to Require if, and build the same condition:

requireIf:  {clientType} == "company"

4. Add a submit button ​

From Actions, drag a Button. A button shows its caption in Text, so set Text to Register; it has no label row above it. In the Events category press Add action:

  • Trigger: Click
  • Action: Toast notification with title Done, message Registration saved, variant Success
  • Conditions & safety: turn on Validate whole form before action, so an incomplete form shows its messages instead of the toast

In a real project the button would call a data source (Type: dataSource) to send the data to a server; see Events & actions.

5. Preview ​

Switch to the Preview tab. Test that:

  • Submitting an empty form shows the required messages.
  • Choosing Company reveals the company panel and makes the code required.
  • A valid submit shows the success toast.

The result ​

Your form produces this data object at runtime:

json
{
  "firstName": "Sam",
  "email": "sam@harborfoods.com",
  "clientType": "company",
  "companyCode": "HF-20418"
}

Every key is the name you gave an element. This is what the application receives when the form is submitted.

Next steps ​