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

List product images (GET)

8min

Scenario

From the list of customers, swipe left and select the View button. The customer's details are shown on a screen with the customer's location at the top, the contact person's details, and then a list of the customer's products with images.

List customer images
List customer images


How does this work

The REST APIs GET operator for the customer and images table is used in the functions with an outputTransform to specify the exact data to be returned to be shown in the list and view. A composite with a location header, combines the view-customer.jigx and list-customer-images.jigx and uses inputs to know which customer's details to show. 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 s the local data provider is used to configure the components.

This code sample builds upon the previous List customers (GET) step, to develop a complete and functional solution.

REST API

REST

Detail

URL

https://[your_rest_service]/api/images?custId={custId}&includeImage=true

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 image metadata properties to be returned. The customer images are 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-images.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.

The rest-get-customers-images function is NOT added to the sync-entities action due to the large number of images that will be returned. Rather the images are returned on demand in the per customer which reduces the number of images loaded on the device ensuring that the performance is not affected.

load-data.jigx


Jig (screen)

  • Use a list type to configure a list of customers.
  • Use a list type to configure a list of customer product images.
  • Use a default type to configure the customer details view.
  • 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 lists and view.
  • Create a composite and combine the default and image list s. In the header use a location component and an expression that uses inputs from the default 's jsonProperties to show the address, city, state, and zip code of the customer.
  • In the datasource query of the view-customer use jsonProperties to return the complex structure for address and phone.
  • Configure a queryParameter using inputs to return the customer details by id in the datasource for the view-customer .
  • Expressions are used to reference the exact data property required in each component of the view-customer .
list-customer-images.jigx
view-customer-details.jigx
customer-composite.jigx
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