Accelerator ID Graph LWC - Source
home
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:
- The network graph that visualizes the parent/child relationship, including icons (png) to represent connected systems.
- 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:
- Id - an External ID referencing the relationship to a specific edge node (connected system)
- Type - short reference to the type of connected system (i.e., MDM)
- 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
- In Salesforce, ensure "My Domain" is turned on and activated for the org. Search "My Domain" in the Salesforce setup page.
- 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.
- 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.
- Via MuleSoft API manager, add the Cross-Origin Resource Sharing Policy set to Public Resource.
Deploying Lightning Web Component to Salesforce
Using Visual Studio Code
- 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. - Install the Salesforce CLI (SFDX) on your local system.
- 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
- Open the project folder in the Visual Studio Code app (note: must be the root folder in VS Code).
- Authorize the org to publish the code (search for SFDX in the command palette).
- 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
- In Salesforce organization, navigate to
Custom Code -> Lightning Components -> Lightning Components
and make sure the component is available in the list:
Using Managed Package
- After logging into the target Salesforce org, paste the Install URL into the browser address bar
https://login.salesforce.com/packaging/installPackage.apexp?p0=04tHo000000BgcRIAS
. - Approve the Install for "All Users".
- 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
- 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.
- 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, selectstandard: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.
- Title to display - Set the header title as
Salesforce FSC Deployments
The below configuration steps are specific for Salesforce Financial Services Cloud.
Configuration for Accounts
- 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.
- 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, selectstandard: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.
- Title to display - Set the header title as
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, selectstandard: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
- 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.
- 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, selectstandard: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.
- Title to display - Set the header title as
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, selectstandard: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, selectstandard: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.