Getting started
...
Create an app from scratch
Create Data - Form & List
Create a new customer form
5min
In this section, you learn how to create a form with a two-column layout and three fields, and how to configure an action button on the form that will create the record in the Dynamic data provider.
- Open the Hello-Jigx solution in Jigx Builder in VS Code, right-click on the jigs node in Explorer, and select New file.
- Name the file new-customer. The file opens and shows the Jigx's auto-complete popup listing the five jig types. Click on Default to open the skeleton YAML created by the Jigx Builder.
- Give the jig a title called Customers and provide a description like New customer form.
- Add icon: person under the description line. This icon displays on the widget on the Home Hub .
- You can delete this jig's header, onFocus, and datasource lines.
- The controls displayed on the jig are defined under the children node on a default jig. All the input controls are placed on a form component. A control is uniquely identified by its instanceId. They are added as children of a field-row component to display two controls next to each other. A text-field component is used to capture text information on a form, and the email field component is used to capture email addresses. Under the children: node, add these fields as shown below to capture the customer's first and last name and email address:
- The top-level action on a default jig places a button at the bottom of the screen. A submit-form action saves the data from the text boxes to the SQLite database. The submit form action automatically matches the instanceIds of the controls on the jig and creates a record in the local SQLite table with each instanceIds as a property for the JSON object in the Data column. At the same root YAML level as children: use ctrl+space to add the actions node. Use the code below to create the action.submit-form type, define the data provider to be the Dymamic data provider, and use the method: create to save the record.
2. After the record is created you want to navigate back to the Home Hub, add the onSuccess: type: action.go-back action to the bottom of the actions node. 3. With Dynamic Data you need to add the reference to the table in the database. In the databases node click on the default.jigx file. Type customers: null under tables: as shown below.
4. Your new-customer.jigx file should resemble the code below.
Updated 05 Nov 2024
Did this page help you?
Yes
No