Accelerator ID Graph LWC - Source

This asset is used in the following MuleSoft Accelerators:

• MuleSoft Accelerator for Financial Services — Simplifies the creation of a customer 360 view by unlocking data from key systems including core banking platforms, systems of engagement (e.g., CRM and ITSM), and FinTechs, which enables real-time relationship management and connected customer experiences.
• MuleSoft Accelerator for Retail — includes pre-built APIs, connectors, integration templates, and reference architecture to enable retail IT teams to jumpstart digital transformation initiatives.
• MuleSoft Accelerator for SAP — includes pre-built APIs, connectors, integration templates, and reference architecture to simplify connectivity between SAP ECC, S/4HANA, and Salesforce.
• MuleSoft Accelerator for Manufacturing — includes pre-built APIs, connectors, integration templates, and reference architecture to simplify connectivity between SAP S/4HANA and Salesforce Manufacturing Cloud.

---

ID Graph LWC

The ID Graph Lightning Web Component (LWC) displays a network graph relating a source record in Salesforce (as the root node) to N-number of systems (as child / edge nodes). This LWC is written generically to support any PARENT/CHILD relationship as a network graph.

Component layout

The LWC is comprised of two visual elements, which can be added to a record detail view page:

1. The network graph that visualizes the parent/child relationship, including icons (png) to represent connected systems.
2. A 'lightning tabset' that dynamically generates tabs for each edge node (connected system), to display basic information. Currently, only the ID is displayed; however, this could be extended to display a wide range of data elements.

Mule App formatting notes

The format of the input data is critical for the LWC to render correctly. The API should return an array of JSON with the following minimum fields:

1. Id - an External ID referencing the relationship to a specific edge node (connected system)
2. Type - short reference to the type of connected system (i.e., MDM)
3. Name - the label / display name presented on the Lightning Tabset

Additional data elements may be provided but are not consumed nor required:

[
   {
      "Type":"MDM",
      "Name":"Global",
      "Id":"a114325f-ad0f-11eb-b4c8-0233bdd64096",
      "Status":"VALID",
      "LastChanged":"2021-05-04T19:33:40.000Z"
   },
   {
      "Type":"SALESFORCE_CORE",
      "Name":"Salesforce",
      "Id":"0014x000009EdboAAC",
      "Status":"VALID",
      "LastChanged":"2021-05-04T19:33:40.000Z"
   },
   {
      "Type":"SALESFORCE_MARKETING",
      "Name":"Marketing",
      "Id":"1289752144",
      "Status":"VALID",
      "LastChanged":"2021-05-04T19:33:45.000Z"
   },
   {
      "Type":"SAP_ECC",
      "Name":"SAP",
      "Id":"0000001446",
      "Status":"VALID",
      "LastChanged":"2021-05-04T19:33:45.000Z"
   },
   {
      "Type":"SALESFORCE_B2C",
      "Name":"Commerce",
      "Id":"00014002",
      "Status":"VALID",
      "LastChanged":"2021-05-04T19:33:45.000Z"
   }
]

Installing and configuring the component

The following example shows how to fetch Customer Profile Data using the Salesforce Experience API endpoint and display in Salesforce using this Lightning Web Component.

Prerequisite setup

1. In Salesforce, ensure "My Domain" is turned on and activated for the org. Search "My Domain" in the Salesforce setup page.
2. Create CSP Trusted Sites (Note: this step takes 15-45 minutes to kick in after enabled. There is no alert when ready). In Salesforce Setup, search "CSP Trusted Sites". Create a CSP trusted site with the URL of the Salesforce Experience API deployed to CloudHub (for example, https://org-salesforce-exp-api-v2-dev.us-e1.cloudhub.io). Be sure to not include a trailing slash on the URL.
   
   
   
   
3. Salesforce API callouts validate authenticity and ensure security via the use of CORS. It is necessary to configure the Mule API to support CORS. It can be done one of 2 ways:
   • Via MuleSoft API manager, add the Cross-Origin Resource Sharing Policy set to Public Resource.
     
     
     
     
   • Manually return the appropriate headers in your Salesforce Experience API.
     
     
     
     

Deploying Lightning Web Component to Salesforce

Using Visual Studio Code

1. Deploy static resources (zip file in the root project folder containing D3.js, CSS/stylesheet, and icons) to Salesforce as a new Static Resource called network_d3. See https://help.salesforce.com/articleView?id=sf.pages_static_resources_manage.htm&type=5 for details.
2. Install the Salesforce CLI (SFDX) on your local system.
3. Set up Visual Studio Code by following this trailhead: https://trailhead.salesforce.com/en/content/learn/projects/quick-start-lightning-web-components/set-up-visual-studio-code
4. Open the project folder in the Visual Studio Code app (note: must be the root folder in VS Code).
5. Authorize the org to publish the code (search for SFDX in the command palette).
6. Deploy the component source to org. This is best accomplished from the command line by running the following command from the project directory: sfdx force:source:deploy --sourcepath force-app/main/default/lwc/networkVisualizer
7. In Salesforce organization, navigate to Custom Code -> Lightning Components -> Lightning Components and make sure the component is available in the list:
   
   
   
   

Using Managed Package

1. After logging into the target Salesforce org, paste the Install URL into the browser address bar https://login.salesforce.com/packaging/installPackage.apexp?p0=04tHo000000No3cIAC.
2. Approve the Install for "All Users".
3. After installation is complete, navigate to "Packaging -> Installed Packages" and make sure the package Accelerator ID Graph is available in the list.
   
   
   
   

Note
In case of Apex compile failure, expand the 'Advanced Options' and select Compile only the Apex in the package option. If the target Salesforce Org has Accelerator ID Graph of version prior to 2.3.2 installed, uninstall the older version and install the latest one as the upgrade option will not work.

Configuring the ID Graph Component

The ID Graph component can be added to page layouts for any object where there's an API available to retrieve external identifiers for a given record. The following sections provide some instructions for adding the component to Account page layouts for generic Salesforce instances as well as some layouts specific to Salesforce Financial Services Cloud (FSC).

Salesforce CRM Deployments

The below configuration steps are for Salesforce CRM and other core-based Clouds.

Configuration for Accounts

1. Navigate to a record page within Accounts object and click the gear icon at the top right to select Edit Page. On the edit page menu, on the left side menu scroll to the bottom to find the custom component Accelerator ID Graph. Drag the components onto the page as shown in the image below.
   
   
   
   
2. Click on the component to configure parameters. Set the following attributes with parameters:
   • Title to display - Set the header title as Customer360.
   • Icon for display - From Salesforce Lightning Design System (LDS) https://www.lightningdesignsystem.com/icons/, select an appropriate icon. For FINS use cases, select standard:customer_360.
   • URL for API call - Set the endpoint of Mule Experience API to retrieve Global Ids, https://org-salesforce-exp-api-v2-dev.us-e1.cloudhub.io/api/customers/{id}/externalIds.
   • Field for API Lookup - Set {id} URI parameter to Account.Global_Customer_Id__c. The pattern is FSC object name and the custom Global Identifier Id field: ObjectName.FieldName.
   • Image Id for center icon - Set image id to account.
   • Label for center icon - Set the label to Customer to be displayed in the id graph for center icon.
   • Show labels for icons - Default is disabled. Enabling this will display labels under each icon, that is, the centre icon and the icons for each system.
   • Save and publish your changes.

Salesforce FSC Deployments

The below configuration steps are specific for Salesforce Financial Services Cloud.

Configuration for Accounts

1. Navigate to a record page within Accounts object and click the gear icon at the top right to select Edit Page. On the edit page menu, on the left side menu scroll to the bottom to find the custom component Accelerator ID Graph. Drag the components onto the page as shown in the image below.
   
   
   
   
2. Click on the component to configure parameters. Set the following attributes with parameters:
   • Title to display - Set the header title as Customer ID Graph.
   • Icon for display - From Salesforce Lightning Design System (LDS) https://www.lightningdesignsystem.com/icons/, select an appropriate icon. For FINS use cases, select standard:customer_360.
   • URL for API call - Set the endpoint of Mule Experience API to retrieve Global Ids, https://org-salesforce-financial-exp-api-v1-dev.us-e1.cloudhub.io/api/customers/{id}/externalIds.
   • Field for API Lookup - Set {id} URI parameter to Account.Global_Customer_Id__c. The pattern is FSC object name and the custom Global Identifier Id field: ObjectName.FieldName.
   • Image Id for center icon - Set image id to account.
   • Label for center icon - Set the label to Customer to be displayed in the id graph for center icon.
   • Show labels for icons - Default is disabled. Enabling this will display labels under each icon, i.e., the centre icon and the icons for each system.
   • Save and publish your changes.

Configuration for Financial Accounts

Follow the previous steps to add the ID Graph in Financial Accounts object. Update the below fields with the following values:

• Title to display - Set the header title as Financial Account ID Graph.
• URL for API call - Set the endpoint of Mule Experience API to retrieve Global Ids, https://org-salesforce-financial-exp-api-v1-dev.us-e1.cloudhub.io/api/accounts/{id}/externalIds.
• Field for API Lookup - Set {id} URI parameter to FinServ__FinancialAccount__c.Global_Account_Id__c. The pattern is FSC object name and the custom Global Identifier Id field: ObjectName.FieldName.
• Label for center icon - Set the label to Financial Account. The label displays in the ID Graph for center icon.

Salesforce Configuration for Financial Transactions

Follow the previous steps to add the ID Graph in Financial Transactions object. Update the below fields with the following values:

• Title to display - Set the header title as Financial Transaction Graph.
• URL for API call - Set the endpoint of Mule Experience API to retrieve Global Ids, https://org-salesforce-financial-exp-api-v1-dev.us-e1.cloudhub.io/api/transactions/{id}/externalIds.
• Field for API Lookup - Set {id} URI parameter to FinServ__FinancialAccountTransaction__c.Global_Transaction_Id__c. The pattern is FSC object name and the custom Global Identifier Id field: 'ObjectName.FieldName'.
• Label for center icon - Set the label to Transaction. The label displays in the ID Graph for center icon.

Salesforce Configuration for Financial Cards

Follow the previous steps to add the ID Graph in Cards object. Update the below fields with the following values:

• Title to display - Set the header title as Cards ID Graph.
• URL for API call - Set the endpoint of Mule Experience API to retrieve Global Ids, https://org-salesforce-financial-exp-api-v1-dev.us-e1.cloudhub.io/api/cards/{id}/externalIds.
• Field for API Lookup - Set {id} URI parameter to FinServ__Card__c.Global_Card_Id__c. The pattern is FSC object name and the custom Global Identifier Id field: ObjectName.FieldName.
• Label for center icon - Set the label to Card. The label displays in the center icon of the ID Graph.

Salesforce Configuration for Contacts

Follow the previous steps to add the ID Graph in Product object. Update the below fields with the following values:

• Title to display - Set the header title as Contacts Sync ID Graph.
• Icon for display - From Salesforce Lightning Design System (LDS) https://www.lightningdesignsystem.com/icons/, select an appropriate icon. For FINS use cases, select standard:contact.
• URL for API call - Set the endpoint of Mule Experience API to retrieve Global Ids, https://org-salesforce-financial-exp-api-v1-dev.ca-c1.cloudhub.io/api/contacts/{id}/externalIds.
• Field for API Lookup - Set {id} URI parameter to Contact.Global_Individual_Id__c. The pattern is FSC object name and the custom Global Identifier Id field: 'ObjectName.FieldName'.
• Label for center icon - Set the label to Contacts. The label displays in the ID Graph for center icon.
• Show labels for icons - Default is disabled. Enabling this will display labels under each icon, i.e., the centre icon and the icons for each system.
• Save and publish your changes.

Salesforce MFG Deployments

The below configuration steps are specific for Salesforce Manufacturing Cloud.

Salesforce Configuration for Accounts

1. Navigate to a record page within Accounts object and click the gear icon at the top right to select Edit Page. On the edit page menu, on the left side menu scroll to the bottom to find the custom component Accelerator ID Graph. Drag the components onto the page.
   
   
2. Click on the component to configure parameters. Set the following attributes with parameters:
   • Title to display - Set the header title as Customer ID Graph.
   • Icon for display - From Salesforce Lightning Design System (LDS) https://www.lightningdesignsystem.com/icons/, select an appropriate icon. For MFG use cases, select standard:customer_360.
   • URL for API call - Set the endpoint of Mule Experience API to retrieve Global Ids, https://org-salesforce-exp-api-v1-dev.us-e1.cloudhub.io/api/customers/{id}/externalIds.
   • Field for API Lookup - Set {id} URI parameter to Account.Global_Customer_Id__c. The pattern is MFG object name and the custom Global Identifier Id field: ObjectName.FieldName.
   • Image Id for center icon - Set image id to account.
   • Label for center icon - Set the label to Customer to be displayed in the id graph for center icon.
   • Show labels for icons - Default is disabled. Enabling this will display labels under each icon, i.e., the centre icon and the icons for each system.
   • Save and publish your changes.

Salesforce Configuration for Products

Follow the previous steps to add the ID Graph in Product object. Update the below fields with the following values:

• Title to display - Set the header title as Products Sync ID Graph.
• Icon for display - From Salesforce Lightning Design System (LDS) https://www.lightningdesignsystem.com/icons/, select an appropriate icon. For MFG use cases, select standard:product.
• URL for API call - Set the endpoint of Mule Experience API to retrieve Global Ids, https://org-salesforce-exp-api-v1-dev.us-e1.cloudhub.io/api/products/{id}/externalIds.
• Field for API Lookup - Set {id} URI parameter to Product2.Global_Product_Id__c. The pattern is MFG object name and the custom Global Identifier Id field: 'ObjectName.FieldName'.
• Label for center icon - Set the label to Product. The label displays in the ID Graph for center icon.
• Show labels for icons - Default is disabled. Enabling this will display labels under each icon, i.e., the centre icon and the icons for each system.
• Save and publish your changes.

Salesforce Configuration for Orders

Follow the previous steps to add the ID Graph in Order object. Update the below fields with the following values:

• Title to display - Set the header title as Orders Sync ID Graph.
• Icon for display - From Salesforce Lightning Design System (LDS) https://www.lightningdesignsystem.com/icons/, select an appropriate icon. For MFG use cases, select standard:orders.
• URL for API call - Set the endpoint of Mule Experience API to retrieve Global Ids, https://org-salesforce-exp-api-v1-dev.us-e1.cloudhub.io/api/orders/{id}/externalIds.
• Field for API Lookup - Set {id} URI parameter to Order.Global_SalesOrder_Id__c. The pattern is MFG object name and the custom Global Identifier Id field: ObjectName.FieldName.
• Label for center icon - Set the label to Order. The label displays in the center icon of the ID Graph.
• Show labels for icons - Default is disabled. Enabling this will display labels under each icon, i.e., the centre icon and the icons for each system.
• Save and publish your changes.