Create a customer list with data
In this section, you learn how to create a jig.list type that uses the dynamic data provider to return and display a list of records. You specify the fields that must be returned in the list and add an onPress list action that opens a used to view the selected list item record.
- Open the Hello- solution in in , right-click on the s node in Explorer, and select New file.
- Name the file list-customer. The file opens and shows the 's auto-complete popup listing the five types of s you can select. Click on List to open the skeleton YAML created by the .
- Give the a title called List customers and provide a description like List my customers.
- Change the icon to icon: list.This icon displays on the widget on the .
- Delete the header and onfocus nodes.
- Under the datasource node specific the data provider where the customer records are stored. The name of the table that the information is being returned from. All Dynamic Data-based tables are saved in the "default" database. Use a SQLite query to specify the fields to be returned in the list, in this case, we want the customer's first and last name as well as their email address. You can add your own datasource entries or use the code example below.
- All list output controls are placed on the list-item component. Use the swipeable: action to configure a left or right swipe and the method to call. For example, in this step, we use a left swipe to delete the customer using the delete method. You can add your own controls or use the code example below.
2. Configure the action to take once the list item has been deleted by going back to the list, by using the code below.
- Add a navigation action that is performed when a single item is clicked in the list, and referenced by using the custId parameter. In this step clicking on a customer in the list opens the view-customer to view the customer's details. Use the onPress action with an action.go-to type and the linkTo option as shown below.
2. Your list-customer.jigx file should resemble the code below.