List records in objects

4min
Reading data from Salesforce using the Salesforce provider is easy. The provider is intuitive, and once you have synced the data from the Salesforce provider to the local data provider, you can design lists, charts, and widgets to show your organization's Salesforce metrics, accounts, opportunities, and more. 
Examples and code snippets
﻿
List of accounts 
Search and filtering a list
﻿
The code below shows a simple example of a list of accounts in Salesforce. Adding search and filter properties allows you to easily find the accounts you looking for.
list-accounts.jigx
title: List Salesforce accounts
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1605152276897-4f618f831968?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2670&q=80


onFocus:
  type: action.action-list
  options:
    actions:
      - type: action.sync-entities
        options:
          provider: DATA_PROVIDER_SALESFORCE
          entities:
            - Account

datasources:
  salesforce-accounts: 
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_LOCAL
      entities:
        - entity: Account
      query: SELECT id, '$.Name', '$.Type', '$.BillingCountry' FROM [Account] WHERE ('$.Type' LIKE @filter OR @filter IS NULL) AND ('$.Name' LIKE '%'||@search||'%' OR @search IS NULL)
      queryParameters:
       filter: [email protected]-list.state.filter
       search: [email protected]-list.state.searchText
       
children:
  - type: component.list
    instanceId: account-list
    options:
      data: [email protected]-accounts
      isSearchable: true
      maximumItemsToRender: 50
      filter: 
        - title: All
          value: ""
        - title: Prospect
          value: Prospect
        - title: Customer - Direct
          value: Customer - Direct
      item:
        type: component.list-item
        options:
          title: [email protected]
          subtitle: [email protected]
          label:
            title: [email protected]
          leftElement:
            element: avatar
            text: SF
        
title: List Salesforce accounts
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1605152276897-4f618f831968?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2670&q=80


onFocus:
  type: action.action-list
  options:
    actions:
      - type: action.sync-entities
        options:
          provider: DATA_PROVIDER_SALESFORCE
          entities:
            - Account

datasources:
  salesforce-accounts: 
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_LOCAL
      entities:
        - entity: Account
      query: SELECT id, '$.Name', '$.Type', '$.BillingCountry' FROM [Account] WHERE ('$.Type' LIKE @filter OR @filter IS NULL) AND ('$.Name' LIKE '%'||@search||'%' OR @search IS NULL)
      queryParameters:
       filter: =@ctx.components.account-list.state.filter
       search: =@ctx.components.account-list.state.searchText
       
children:
  - type: component.list
    instanceId: account-list
    options:
      data: =@ctx.datasources.salesforce-accounts
      isSearchable: true
      maximumItemsToRender: 50
      filter: 
        - title: All
          value: ""
        - title: Prospect
          value: Prospect
        - title: Customer - Direct
          value: Customer - Direct
      item:
        type: component.list-item
        options:
          title: =@ctx.current.item.Name
          subtitle: =@ctx.current.item.BillingCountry
          label:
            title: =@ctx.current.item.Type
          leftElement:
            element: avatar
            text: SF
        
﻿
List of Opportunities
The code below shows a basic example of a list of opportunites in Salesforce with an onPress action that will allow you to update the opportunity amount.
Basic List
﻿
YAML
title: List Salesforce opportunities
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80

onFocus:
  type: action.action-list
  options:
    actions:
      - type: action.sync-entities
        options:
          provider: DATA_PROVIDER_SALESFORCE
          entities:
            - Opportunity

datasources:
  salesforce-opp-list: 
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_LOCAL
      entities:
        - entity: Opportunity
      query: SELECT id, '$.Name', '$.Amount' FROM [Opportunity]
                 
children:
  - type: component.list
    instanceId: account-list
    options:
      data: [email protected]-opp-list
      
      item:
        type: component.list-item
        options:
          title: [email protected]
          leftElement:
            element: avatar
            text: SF
          rightElement: 
            element: value
            text:
              format:
                currency: USD
                numberStyle: currency
              text: [email protected]
          onPress: 
            type: action.go-to
            options:
              linkTo: salesforce-opp-update
              parameters:
                id: [email protected]
                entity: Opportunity
title: List Salesforce opportunities
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80

onFocus:
  type: action.action-list
  options:
    actions:
      - type: action.sync-entities
        options:
          provider: DATA_PROVIDER_SALESFORCE
          entities:
            - Opportunity

datasources:
  salesforce-opp-list: 
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_LOCAL
      entities:
        - entity: Opportunity
      query: SELECT id, '$.Name', '$.Amount' FROM [Opportunity]
                 
children:
  - type: component.list
    instanceId: account-list
    options:
      data: =@ctx.datasources.salesforce-opp-list
      
      item:
        type: component.list-item
        options:
          title: =@ctx.current.item.Name
          leftElement:
            element: avatar
            text: SF
          rightElement: 
            element: value
            text:
              format:
                currency: USD
                numberStyle: currency
              text: =@ctx.current.item.Amount
          onPress: 
            type: action.go-to
            options:
              linkTo: salesforce-opp-update
              parameters:
                id: =@ctx.current.item.id
                entity: Opportunity
﻿
Create a Stage detail jig 
﻿
Below is an example of reading data from the Account, Opportunity, and OpportunityStage objects in Salesforce. Combining the data, using a jig.list with component.list-item and component.summary to create the Stage Detail 
﻿.
stage-detail.jigx
total-sales.jigx
title: Stage detail
type: jig.list
icon: house

header:
  type: component.jig-header
  options:
    children:
      options:
        source:
          uri: https://images.unsplash.com/photo-1555421689-491a97ff2040?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80
      type: component.image
    height: medium
    
onFocus:
  type: action.action-list
  options:
    actions:
      -  type: action.sync-entities
         options:
          provider: DATA_PROVIDER_SALESFORCE
          entities:
            - Account
            - Opportunity
            - OpportunityStage
                   
datasources:
   account-data:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_LOCAL
      entities:
        - entity: Account
      query: |
        SELECT Acc.id as accid
          ,json_extract(Acc.data, '$.Name') as Name
          ,json_extract(Opp.data, '$.AccountId') as AccountId
          ,sum(json_extract(Opp.data, '$.Amount')) as OppValue
          FROM [Account] Acc 
          LEFT JOIN [Opportunity] Opp
          on AccountId = accid
                 
   stage-data:
      type: datasource.sqlite
      options:
        provider: DATA_PROVIDER_LOCAL
        entities:
          - Opportunity
          - OpportunityStage
        query: SELECT opp.id as oppid ,json_extract(opp.data, '$.StageName') as x
          ,sum(json_extract(opp.data, '$.Amount')) as y ,json_extract(opp.data,
          '$.CloseDate') as CloseDate ,json_extract(opp.data, '$.AccountId') as
          oppaccid ,json_extract(OppStg.data, '$.ApiName') as ApiName
          ,json_extract(OppStg.data, '$.SortOrder') as SortOrder FROM
          [Opportunity] opp LEFT JOIN [OpportunityStage] OppStg on x = ApiName
          where CloseDate between '2020-01-01' and '2020-03-31' group by x order
          by SortOrder

data: [email protected]-data
item:
  type: component.list-item
  options:
    title: [email protected]
    rightElement:
      element: value
      text:
        format:
          currency: USD
          numberStyle: currency
        text: [email protected]
      
summary:
  children:
    type: component.summary
    options:
      title: >
        ='Total: $' & $formatNumber(@ctx.datasources.total-sales.totalsales ,
        '#,###.00')
      subtitle: Quarter sales to date
      layout: default
      leftIcon:
        element: icon
        name: currency-dollar-circle
title: Stage detail
type: jig.list
icon: house

header:
  type: component.jig-header
  options:
    children:
      options:
        source:
          uri: https://images.unsplash.com/photo-1555421689-491a97ff2040?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80
      type: component.image
    height: medium
    
onFocus:
  type: action.action-list
  options:
    actions:
      -  type: action.sync-entities
         options:
          provider: DATA_PROVIDER_SALESFORCE
          entities:
            - Account
            - Opportunity
            - OpportunityStage
                   
datasources:
   account-data:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_LOCAL
      entities:
        - entity: Account
      query: |
        SELECT Acc.id as accid
          ,json_extract(Acc.data, '$.Name') as Name
          ,json_extract(Opp.data, '$.AccountId') as AccountId
          ,sum(json_extract(Opp.data, '$.Amount')) as OppValue
          FROM [Account] Acc 
          LEFT JOIN [Opportunity] Opp
          on AccountId = accid
                 
   stage-data:
      type: datasource.sqlite
      options:
        provider: DATA_PROVIDER_LOCAL
        entities:
          - Opportunity
          - OpportunityStage
        query: SELECT opp.id as oppid ,json_extract(opp.data, '$.StageName') as x
          ,sum(json_extract(opp.data, '$.Amount')) as y ,json_extract(opp.data,
          '$.CloseDate') as CloseDate ,json_extract(opp.data, '$.AccountId') as
          oppaccid ,json_extract(OppStg.data, '$.ApiName') as ApiName
          ,json_extract(OppStg.data, '$.SortOrder') as SortOrder FROM
          [Opportunity] opp LEFT JOIN [OpportunityStage] OppStg on x = ApiName
          where CloseDate between '2020-01-01' and '2020-03-31' group by x order
          by SortOrder

data: =@ctx.datasources.stage-data
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.x
    rightElement:
      element: value
      text:
        format:
          currency: USD
          numberStyle: currency
        text: =@ctx.current.item.y
      
summary:
  children:
    type: component.summary
    options:
      title: >
        ='Total: $' & $formatNumber(@ctx.datasources.total-sales.totalsales ,
        '#,###.00')
      subtitle: Quarter sales to date
      layout: default
      leftIcon:
        element: icon
        name: currency-dollar-circle
﻿
See Also
﻿Dashboards and charts﻿﻿
﻿
Updated 22 Nov 2023
Did this page help you?
Delete records in objects
Save & update records in objects