Building Apps with Jigx
...
Jigs (screens)
Forms

Forms and Composite Jigs

4min

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 with type composite.

composite-form.jigx


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


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

personal-info-form.jigx


3) 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.

composite-form.jigx


4) 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: =@ctx.jigs.names.components.first-name.state.value =@ctx.jigs.names - will refer to the specific jig components.first-name.state.value - will refer to the specific component inside the jig that we refer before.

composite-form.jigx


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