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

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

  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 
﻿ 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 effieicency 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  
        
# 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 effieicency 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 
﻿ 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
title: Customer Details
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children: 
      type: component.location
      options:
        address: [email protected] & ' ' & @ctx.jig.inputs.customer.city & ', ' & @ctx.jig.inputs.customer.state & ', ' & @ctx.jig.inputs.customer.zip
#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: 
  customer: 
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_LOCAL
  
      entities:
        - entity: customers
  
      query: |
        SELECT 
          cus.id AS id, 
          json_extract(cus.data, '$.firstName') AS firstName, 
          json_extract(cus.data, '$.lastName') AS lastName,
          json_extract(cus.data, '$.companyName') AS companyName,
          json_extract(cus.data, '$.address') AS address,
          json_extract(cus.data, '$.city') AS city,
          json_extract(cus.data, '$.state') AS state,
          json_extract(cus.data, '$.zip') AS zip,
          json_extract(cus.data, '$.phone1') AS phone1,
          json_extract(cus.data, '$.phone2') AS phone2,
          json_extract(cus.data, '$.email') AS email,
          json_extract(cus.data, '$.web') AS web,
          json_extract(cus.data, '$.customerType') AS customerType,
          json_extract(cus.data, '$.jobTitle') AS jobTitle
        FROM 
          [customers] AS cus
        WHERE
          id = @custId
        ORDER BY 
          json_extract(cus.data, '$.companyName')

      queryParameters:
        custId: [email protected]
#Use jsonProperties to return the complex structure for address and phone      
      jsonProperties: 
        - addresses
        - phones
       
children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Name
            value: [email protected]
        - type: component.field-row
          options:
            children:
              - type: component.entity-field
                options:
                  label: Contact
                  value: [email protected] & ' ' & @ctx.datasources.customer.lastName
              - type: component.entity-field
                options:
                  label: Job Title
                  value: [email protected]
        - type: component.entity-field
          options:
            contentType: email
            label: Email
            rightIcon: email
            value: [email protected]
        - type: component.entity-field
          options:
            contentType: phone
            label: Phone
            rightIcon: phone
            value: [email protected]
        - type: component.entity-field
          options:
            contentType: link
            label: Web
            value: [email protected]
          
title: Customer Details
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children: 
      type: component.location
      options:
        address: =@ctx.jig.inputs.customer.address & ' ' & @ctx.jig.inputs.customer.city & ', ' & @ctx.jig.inputs.customer.state & ', ' & @ctx.jig.inputs.customer.zip
#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: 
  customer: 
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_LOCAL
  
      entities:
        - entity: customers
  
      query: |
        SELECT 
          cus.id AS id, 
          json_extract(cus.data, '$.firstName') AS firstName, 
          json_extract(cus.data, '$.lastName') AS lastName,
          json_extract(cus.data, '$.companyName') AS companyName,
          json_extract(cus.data, '$.address') AS address,
          json_extract(cus.data, '$.city') AS city,
          json_extract(cus.data, '$.state') AS state,
          json_extract(cus.data, '$.zip') AS zip,
          json_extract(cus.data, '$.phone1') AS phone1,
          json_extract(cus.data, '$.phone2') AS phone2,
          json_extract(cus.data, '$.email') AS email,
          json_extract(cus.data, '$.web') AS web,
          json_extract(cus.data, '$.customerType') AS customerType,
          json_extract(cus.data, '$.jobTitle') AS jobTitle
        FROM 
          [customers] AS cus
        WHERE
          id = @custId
        ORDER BY 
          json_extract(cus.data, '$.companyName')

      queryParameters:
        custId: =@ctx.jig.inputs.customer.id
#Use jsonProperties to return the complex structure for address and phone      
      jsonProperties: 
        - addresses
        - phones
       
children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Name
            value: =@ctx.datasources.customer.companyName
        - type: component.field-row
          options:
            children:
              - type: component.entity-field
                options:
                  label: Contact
                  value: =@ctx.datasources.customer.firstName & ' ' & @ctx.datasources.customer.lastName
              - type: component.entity-field
                options:
                  label: Job Title
                  value: =@ctx.datasources.customer.jobTitle
        - type: component.entity-field
          options:
            contentType: email
            label: Email
            rightIcon: email
            value: =@ctx.datasources.customer.email
        - type: component.entity-field
          options:
            contentType: phone
            label: Phone
            rightIcon: phone
            value: =@ctx.datasources.customer.phone1
        - type: component.entity-field
          options:
            contentType: link
            label: Web
            value: =@ctx.datasources.customer.web
          
﻿
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
    
widgets:
  - size: 1x1 
    jigId: list-customers
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
    
widgets:
  - size: 1x1 
    jigId: list-customers
﻿
﻿
Updated 15 May 2024
Did this page help you?
List & View customers (GET)
Upload product images (POST)
Docs powered by Archbee
TABLE OF CONTENTS
REST	Detail
URL	https://[your_rest_service]/api/images?custId={custId}&includeImage=true
Operation/Method	GET