This article deals with various ways of embedding process content in external applications. 

Article outline

  1. Before you start embedding content in other apps...
  2. Embedding processes in iframes (webpages, Confluence, Sharepoint and others)
  3. Embedding processes in Salesforce Lightning Pages (requires adoption license)
  4. Embedding process diagram inside Salesforce Classic (VisualForce) (requires adoption license)
  5. Embedding processes content in Salesforce Utility Bar (requires adoption license)

Before you start embedding content in other apps...

If you want to make process diagrams accessible by users from an external application (be it Salesforce, Sharepoint, Confluence, your company's intranet etc.), there are some universal steps you need to do first.

1.Make sure users have access to the process diagrams

Your target audience must have access to the process maps inside the application even if they are going to use it outside of it. Here are some useful resources to help you set it up:

2.Get the diagram URL/ID

At any point you can just copy the diagram URL straight from the right panel OR you can run a "Diagram list" report (remember to include lower levels) to get a list of multiple process diagrams - their URLs will be available as hyperlinks on diagram names.

You will need the whole URL to embed processes in iframes but you will need just the ID string if you wan to embed processes inside Salesforce. 


3.Amend the URL to get a leaner version of the process

To make sure your end-users focus only on the process content and are not distracted by the interface and options that they do not need you should amend the diagram url by adding a parameter at the end ?stripped=true

For example:

https://diagram.q9elements.com/diagram/5bd7425bf1fa1c051862cfe5?stripped=true 

Sometimes you might get the diagram URL which points at a particular version of a diagram (e.g. draft or master) in which case add &stripped=true

https://diagram.q9elements.com/diagram/57de335d06d0895f0644b0a9?v=master&stripped=true

Now you are ready to start embedding process diagrams...

Embedding processes in iframes

An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website. The IFrame HTML element is often used to insert content from another source, such as an advertisement, into a Web page. It also allows you to insert process diagrams in other applications so that your users can see the Catalyst content without the need to go into the application. 

Nowadays you can insert iframes almost anywhere, be it Sharepoint, Confluence, Wordpress, and other web-based applications. Depending on the application, the procedure might be a bit different and you might need to consult your software's "how-to" guides to embed an iframe. 

Very often you will be required to either provide a URL or a specific html code with the URL as well as width and height parameters, like:

<iframe src="your_diagram_url" width="700" height="500"></iframe> 

Here are some useful resources:

Example: iframe with Catalyst process inside Confluence

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 salesforce adoption 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 Catalyst 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.

You will need the diagram ID - scroll up to the first section of this article to see how you can 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. 

Embedding process diagram inside Salesforce Classic (VisualForce) 

To display diagrams inside a standard or custom object the managed package integration must be installed into a Production Org, the salesforce adoption 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.

1.Open Elements settings in the package and assign diagrams to Salesforce 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 details page of the Salesforce Object.  The panel is a VisualForce page that is added to the details page of the object.

You will need the diagram ID - scroll up to the first section of this article to see how you can get it.

2.Generate VisualForce page for each object

For each object where a diagram ID has been specified a Visualforce page needs to be generated so that it can be added to the details page for the object.

For each object, select the object from the dropdown.  Copy the code that is displayed. Click the ‘Create New VF Page’ button

The VisualForce page editor will be shown.  Paste the copied code into the editor, replacing what is there.  Give the page a name and click Save. 

3. Add the VisualForce page to the Object details page

If the page is a standard object click the ‘Modify Layout’ button.  If the page is for a custom object then select the page layout using the normal customization steps.

Go to the layout and select the page.  Go to the Visualforce Pages items and add a new section (1 column).  Given the section a suitable name such as ‘Process’.  

Add the Visualforce page you created to the section. Set the Properties for the new section to have an 600px height.  Click ‘Save’.

You have now added a dropdown panel in an object and an Elements diagram is shown in the panel.

4. Make the VisualForce accessible for appropriate profiles

Go to the VisualForce Page listing.

For each Elements Visualforce page you have just created, click Security and add the Profiles that need access.

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 salesforce adoption 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 Catalyst managed package. 

1.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 details page of the Salesforce Object.

You will need the diagram ID - scroll up to the first section of this article to see how you can 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 a the default Diagram ID setup in the component.

2. Configuring the utility bar component

In Salesforce Setup go 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.

    You will need the diagram ID - scroll up to the first section of this article to see how you can get it.

    If no diagram is set for the Object/Record Type and there is no default diagram set 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?