System StatusSamples on GitHub

Forms and Composite Jigs

In this section, we will have a look at how you can create and update forms using composite jigs. For more information see the jig.composite topic.

  1. First we need to create a new jig with type composite. :::CodeblockTabs composite-form.jigx

    title: Composite
type: jig.composite

children:
  - jigId: myjig1
  - jigId: myjig2

  2. Now we create two new jigs with a form as we did on the top of this section where we created our first form. For the first, we put just tow text-fields one for the Firstname and the second for the Lastname. Let's call this jig name-form.jigx

name-form.jigx
title: Employees name
type: jig.default

children:
  - type: component.form
    instanceId: form-name
    options:
      children:
        - type: component.field-row
          options:
            children:
              - type: component.text-field
                instanceId: first-name
                options:
                  label: First name
              - type: component.text-field
                instanceId: last-name
                options:
                  label: Last name

After that, we create a second jig where we can put some additional information like phone number and email.

  1. Now we have two jigs where we have two forms. Let's back to the composite jig that we create at the start on the top of this section. Change the myjig1 and 2 to the name-form and personal-info-form and add the instanceId: thanks to instanceId we can refer to the children in the specific jig.

  2. For saving our data from we need to create action with action.execute-entity but now our section data will look a little different. The syntax for first-name will be as follows - firstname: [email protected] [email protected] - will refer to the specific jig components.first-name.state.value - will refer to the specific component inside the jig that we refer before.

The full example of the composite form is available on GitHub.

PreviousUpdating a RecordNextComponents (controls)

Last updated

Was this helpful?