Skip to main content
All CollectionsFeature overviewsSalesforce Org ModelsDrive up Salesforce user adoption
Embedding process diagram in Salesforce Lightning Pages and Salesforce Utility Bar
Embedding process diagram in Salesforce Lightning Pages and Salesforce Utility Bar

How to display process maps in Salesforce; Lightning utility bar; Lightning page; embedded diagrams

Updated over 4 months ago

Embedding process diagrams into external services is bringing more detailed information right where is belongs, and creating ever more common knowledge based experience for your users.

Prerequisites

Embedding processes in Salesforce Lightning Pages

To display diagrams inside a standard or custom object the managed package integration must be installed into a Production Org, the Enterprise license must be purchased for the target Space, and user provisioning must be set up so that Salesforce users have a user account in Elements.

A Lightning component, "ElementsDiagramView", is installed with the Elements managed package. This allows any Salesforce user to view Elements process diagrams in a Lightning page for a standard or custom object.

The Lightning Component is called "ElementsDiagramView" and is accessed from the left panel. Drag it onto a Lightning page. The screenshot below shows it in a separate tab called "Process Diagram". Click on the component to configure it in the right panel.

TIP You will need the diagram ID - click this link to learn how to get it

Use Component Visibility to make different process diagrams visible based on the value of a field on the record - e.g. record type.

Embed process diagram in Lightning Utility Bar

The Lightning Utility Bar is a cool way to give users access to other content within an App, no matter what object they are looking at. Here is the Salesforce Help on Utility Bar.

To display diagrams inside a standard or custom object the managed package integration must be installed into a Production Org, the Enterprise license must be purchased for the target PRO space, and user provisioning must be set up so that Salesforce users have a user account in Elements.

A Lightning component "ElementsDiagramView" is installed with the Elements managed package.

Assigning diagrams to Objects

Go to the managed package configuration page, open Elements settings -> Objects. This is where you define which Elements diagram that is displayed in a collapsible panel on the detail's page of the Salesforce Object.

TIP You will need the diagram ID - click this link to learn how to get it

The diagram that gets shown is determined by the order of following rules.

  • If a Diagram ID has been specified for the Record Type, use that.

  • If a Diagram ID has been specified for the Object User, use that.

  • Use the default Diagram ID setup in the component.

Configuring the utility bar component


In Salesforce Setup, go to the Lightning Experience App Manager and edit your App. In the left bar, select Utility Items. Then click Add Utility Item. Scroll down and select ElementsDiagramView.

The diagram that gets displayed is based on the following rules

Configure it in the right panel.

  • Chose a cool icon.

  • Set the Panel Width and Panel Height based on the layout of your diagram

  • Select Start automatically so the diagram loads in the background when the user opens the Salesforce page

  • Set the default Diagram ID. This is the diagram that will be shown if there is no specific Diagram ID set for the Record Type or Object on the current record.

    TIP You will need the diagram ID - click this link to learn how to get it

    If no diagram is set for the Object/Record Type and there is no default diagram set to them, an error message is shown when the utility bar is opened.

  • Component height should be the same as Panel Height

Here is an example, with the content displayed in the Utility Bar.

Did this answer your question?