List records in objects

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

Examples are based on test data in a Jigx demo Salesforce environment. Copying the sample code must be adjusted to represent your own Salesforce environment.

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.

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]
       search: [email protected]
       
children:
  - type: component.list
    instanceId: account-list
    options:
      data: [email protected]
      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
        

List of Opportunities

The code below shows a basic example of a list of opportunities in Salesforce with an onPress action that will allow you to update the opportunity amount.

Basic List

list.jigx

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]
      
      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
              inputs:
                id: [email protected]
                entity: Opportunity

Create a Stage detail jig

Stage detail

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 jig.

stage-detail.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]
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

total-sales.jigx