Getting started
...
Create an app from scratch
Create Data - Form & List

Create a view of the customer record

7min

Overview

In this section, you learn how to create a view using the entity-field component to display the data returned from the Dynamic data provider. Add an action to go to a form that allows you to edit and update a record.

Steps

Create a jig to view data

  1. Open the Hello-
    
    solution in
    
    in
    
    , right-click on the
    
    s node in Explorer, and select New file.
  2. Name the file view-customer. The file opens and shows the
    
    's auto-complete popup listing the five types of
    
    s you can select. Click on Default to open the skeleton YAML created by the
    
    .
  3. Give your jig a title and description.
  4. Delete the header and onfocus nodes.
  5. Specify the SQLite Dynamic data provider, the table, and the SQLite query needed to return the customer's details. Below is an example of the code you can use.
YAML


Create the view form

  1. Now that you have the data you want to view, specify how you want to view the data. For this step, we want to view the data in a form similar to the new customer form. The code below shows using the form component, field-row, and entity- fields to display the customer's first and last name, and email address.
YAML


Add an edit action (button)

  1. Once you can view the returned customer record, you want to be able to edit the record and save the changes to the SQLite Dynamic Data provider. Add the action.go-to that directs you to the edit form using the custId to reference the individual customer record. Use the code below to create the action button.
YAML


2. Your view-customer.jigx file should resemble the code below.

view-customer.jigx


The view-customer file will display in red and cannot be saved yet as it references the edit-customer file that you will be creating in the Edit a customer record step.