Data Providers
...
REST
Create an app using REST APIs

List customers (GET)

8min

Scenario

Create a list of customers showing the company name, contact person's first and last name, status, and an avatar on the left displaying the US state.

Customer list
Customer list


How does this work

The REST APIs GET operator is used in a function with an outputTransform to specify the exact data to be returned. In the outputTransform, the properties we want to return and use are specified. A global action is configured to sync the data in the app with the REST data provider calling the function. In turn, the global action is called in the index.jigx file to load the data when the app is opened. In the list the local data provider is used to configure the list-item component.

REST API

REST

Detail

URL

https://[your_rest_service]/api/customers

Operation/Method

GET

Function

Specify the REST API url and operation (method), parameters to include authentication in the header and in the outputTransform define the data properties to be returned. The customer logo is stored in the REST service in base64, requires the logo in local-uri format for display. A conversion is configured in the function to change the base64 to local-uri.

rest-get-customer.jigx


Action (global)

Create a load-data.jigx file under the actions folder. This file is configured with an action that syncs the data from the REST service, by calling the function, to the local Sqlite table. The action file is referenced in the index.jigx file to load the data when the app is opened or is in focus on the device.

load-data.jigx


Jig (screen)

  • Use a list type to configure a list of customers.
  • Since the data is already synced to the local Sqlite data provider, the s datasource is configured with a query to provide the data for use in the list.
  • Expressions are used to reference the exact data property required in each component.
list-customers.jigx


Index

For performance and offline support the data is synced from the REST service as soon as the app is opened or recieves focus. This is achieved by calling the global action in the OnFocus and onLoad events.

index.jigx