List product images (GET)

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 product images

How does this work

The REST APIs GET operator for the customer and images table is used in the Jigx functions with an outputTransform to specify the exact data to be returned to be shown in the list and view. A composite jig 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 jigs 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, Jigx 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

provider: DATA_PROVIDER_REST
# Fetches data from the REST Service.
method: GET 
# Use your REST service URL. 
url: https://[your_rest_service]/api/images?custId={custId}&includeImage=true 
# Direct the function call to use local execution between the mobile device
# and the REST service.
useLocalCall: true 
# Use forRowsWithValues with the customer Id to only get images specific 
# to that customer instead of all rows (images).
forRowsWithValues: 
  custId: custId 
parameters:
  accessToken:
    location: header
    required: true
    type: string
    # Use manage.jigx.com to define credentials for your solution.
    value: service.oauth 

  custId:
    type: string
    location: query
    required: true
# Define the customer images that must be fetched from the REST Service.
outputTransform: |
  $.images.
    {
        "id": id,
        "custId": $$.inputs.custId,
        "createdDate": createdDate,
        "createdBy": createdBy,
        "description": description,
        "image": image
    }[]
# Convert the images returned from the REST service to local-uri which
# the jig expects to be able to display the image.
conversions:
  - property: image
    from: base64
    to: local-uri

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 jig per customer which reduces the number of images loaded on the device ensuring that the performance is not affected.

load-data.jigx

# The sync-entities action is used to get the data from the REST data 
# provider using the function.
# The global action can be referenced throughout the solution
# for efficiency and performance.
# The data is synced from the REST data provider to a local data provider
# on the device.
action: 
  type: action.sync-entities
  options:
    provider: DATA_PROVIDER_REST
    entities:
      - entity: customers
        function: rest-get-customers
      - entity: us-states
        function: rest-get-usStates  
        

Jig (screen)

• Use a list jig type to configure a list of customers.

• Use a list jig type to configure a list of customer product images.

• Use a default jig type to configure the customer details view.

• Since the data is already synced to the local Sqlite data provider, the jig's datasource is configured with a query to provide the data for use in the lists and view.

• Create a composite jig and combine the default and image list jigs. In the header use a location component and an expression that uses inputs from the default jig's jsonProperties to show the address, city, state, and zip code of the customer.

• In the datasource query of the view-customer jig 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 jig.

• Expressions are used to reference the exact data property required in each component of the view-customer jig.

list-customer-images.jigx

title: Products and Services
type: jig.list
icon: image-file-camera-alternate
# Add a placeholder if there are no images to return.
placeholders:
  - title: It seems we're fresh out of visuals here
    when: =$count(@ctx.datasources.customerImages) = 0
    icon: loading-data
# Define the data to use in the jig, the data has been synced by the global
# action to the local data provider from the REST Service.
datasources:
  customerImages: 
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_LOCAL
      entities:
        - entity: customer-images
      query: |
        SELECT 
          cim.id AS id,
          json_extract(cim.data, '$.createdDate') AS createdDate,
          json_extract(cim.data, '$.custId') AS custId,
          json_extract(cim.data, '$.createdBy') AS createdBy,
          json_extract(cim.data, '$.description') AS description,
          json_extract(cim.data, '$.image') AS image
        FROM 
          [customer-images] AS cim
        WHERE 
          json_extract(cim.data, '$.custId') = @custId
        ORDER BY 
          json_extract(cim.data, '$.createdDate') DESC
      queryParameters:
        custId: [email protected]

data: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    leftElement: 
      element: image
      text: ''
      uri: [email protected]  

view-customer-details.jigx

customer-composite.jigx

list-customer.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

name: hello-rest-example
title: Hello REST Solution
category: sales
# onFocus is triggered whenever the jig is displayed. 
# The sync-entities action in the global action calls the Jigx REST function
# and populates the local SQLite tables on the device with the data returned
# from REST service.
onFocus: 
  type: action.execute-action
  options:
    action: load-data
# onLoad is triggered when the solution is loaded on the device. 
#The sync-entities action in the global action calls the Jigx REST function
# and populates the local SQLite tables on the device with the data returned
# from REST service.        
onLoad: 
  type: action.execute-action
  options:
    action: load-data
    
tabs:
  home:
    jigId: list-customers
    icon: home