Getting started
Create an app from scratch

Create Data - Form & List

4min

Overview

Learn how to build forms that create a new customer record that gets stored in the built-in

 data store called Dynamic Data. The data record is created in the data store by using the submit action. Once the record is created you can view, edit and list the data records using queries that return the record details from SQLite. For more information on the supported data providers read the Data section.

There are two methods to save data collected on a form to a database. 

The first method is to use the form submit action. The submit form action automatically matches the instanceIds of the controls on the

 and creates a record in the local SQLite table with each instanceIds as a property for the JSON object in the Data column.

The second method is to use an execute entity action. The execute entity action allows you to specify the data properties for the SQLite table. You have more granular control over the saved values and can include expressions.

Form & list widgets
New customer form
View customer
Edit customer
Form and list widgets
Form and list widgets



Steps

  1. Open the Hello-
    
    solution in the
    
    in
    
    .
  2. Create a new customer form: Add the new-customer.jigx file with type jig.default, the form uses a two-column layout. Add the component.form to create the three fields on the form. Add the action.submit-form to submit the form data to the
    
    SQLite dynamic data store.
  3. Create a customer list with data Add the list-customer.jigx file with type jig.list. Specify the dynamic data provider and the query that returns the customer's details in the list.
  4. Create a view of the customer record: Add the view-customer.jigx file with type jig.default, specify the datasource.sqlite, and the query to return a view of the customer and their details.
  5. Edit a customer record: Add the edit-customer.jigx file with type jig.default, specify the datasource.sqlite, the query to return the specified customer and their details. Add component.form to display the returned data. Then add the action.submit-form with the method: update to save the changes to the customer's details.
  6. Add the form & list to the Home Hub by adding their jigIds to the widgets in the index.jigx file.
  7. Run the updated solution in the
    
    mobile app, click on the customer icon, this opens a new customer form. Add details for a customer. Tap back to return to the
    
    , the customer will appear in the customer list widget. You can view the customer by tapping on the customer name in the list.

GitHub Samples

You can download the Hello

 solution project on GitHub or build it yourself by following the detailed steps in this section.