Accelerator ID Graph LWC - Source

(0 reviews)

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.

The Lightning Web Component (LWC) can be used as a front end for displaying data from APIs delivered with Mule. This 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.

acc-datagraph-lwc.png

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"
   }
]

See the Configuration guide for information on how to install and configure the component.


Reviews

TypeCustom
OrganizationMuleSoft
Published by
MuleSoft Solutions
Published onMay 17, 2022
Asset overview

Asset versions for 2.2.x

Asset versions
VersionActions
2.2.9
2.2.8
2.2.7
2.2.6
2.2.4
2.2.3
2.2.2
2.2.1