LEARNING OBJECTIVES
After completing this unit, you’ll be able to:
- Display process diagrams as po-up help for objects and fields
- Insert process content into Lightning Record Pages
- Insert process content into the Lightning Utility Bar
- Insert process content into Classic Record Pages
PREREQUISITES
You need access to Elements Catalyst so you will need to run a free 14 day trial.
PROCESS-LED TRAINING
You are not training users on Salesforce. Pull back a little and look at the bigger picture. You are training users to execute business processes. Those business processes will have manual steps and many of the steps will require Salesforce.
Those processes are the ones that you documented in the live workshops to capture user requirements (and that were used in UAT). The benefit is that they are live diagrams, delivered from a central database and they are version controlled. So the users see the published versions, not your WIP. This is why it is important to apply version control to your diagrams. That way all users always see the latest version.
If you haven’t built any process diagrams, don’t worry. You can quickly build them now, based on how the app works and your training needs.
There are 4 places you can display a process diagram inside Salesforce:
- In-app pop-up help
- Lightning record pages
- Lightning Utility Bar
- Classic record pages
USERS HATE BORING PROCESS DIAGRAMS
You developed process diagrams in your live workshops. These should represent how the business works, and they may be perfect for training users on the business processes. Remember you can add links (notes, images, URLs) that is training content. You can also build simplified processes with links.
Or create diagrams using images, free text and URL links that look nothing like processes.
Your choice.
GIVE ACCESS TO PROCESS DIAGRAMS
To display diagrams inside Salesforce the Elements Catalyst managed package must been installed into a Production Org, the Org must be connected to an Elements Space, and user provisioning must be set up so that Salesforce users have a user account in Elements.
To see process content, Salesforce users need to be Elements users and this can be set up automatically through SSO. This gives them an Elements user account but also means that they don’t need to log into Elements. They use their Salesforce credentials to log in. Here is the help topic for Salesforce SSO.
The users need to have access to the process diagrams, so go to the Processes list in Elements, select the process map in the list. In the SHARE tab in the right panel either select “All users can view map” or give view rights to individual users.
PROCESS DIAGRAMS AS IN-APP POP-UP HELP
In the Org model, for any diagram linked to a field you can make it pop-up help – in one click. In the image below it is the process diagram “Lead to Sale”.
PROCESS DIAGRAM INSIDE A LIGHTNING PAGE
A Lightning component “ElementsDiagramView” is installed with the Elements Catalyst managed package.Lightning Components are only visible if you have MyDomain enabled for your Org. The component 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. The DiagramID for a process diagram can be found in the DETAILS tab in the right panel of the diagram or in the URL. For example: th diagram ID is 5be3358ecb4a70051575979b in the URL below https://diagram.q9elements.com/diagram/5be3358ecb4a70051575979b
Use Component Visibility to make different process diagrams visible based on the value of a field on the record – e.g. record type.
PROCESS DIAGRAM INSIDE A 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
A Lightning component “ElementsDiagramView” is installed with the Elements Catalyst managed package.
Setting up the Lightning Utility Bar
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 of the current record. The Diagram ID for a process diagram can be found in the DETAILS tab in the right panel of the diagram or in the URL. For example: 5be3358ecb4a70051575979b in the URL below https://diagram.q9elements.com/diagram/5be3358ecb4a70051575979b
- 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.
Setting a specific diagram
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
To specify a diagram to display for the Record Type or Object go to the Elements Settings tab of the Elements App in Salesforce. Select the Objects sub tab and against the Object or Object/Record Type enter the Diagram ID.
PROCESS DIAGRAM INSIDE A CLASSIC PAGE
An Elements diagram can be 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.
To specify a diagram to display for the Record Type or Object go to the Elements Settings tab of the Elements App in Salesforce. Select the Objects sub tab and against the Object or Object/Record Type enter the Diagram ID.
Add a VF page to the Classic Record Layout
For each object where you want a diagram to be displayed you need to create a Visualforce Page. This must 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.
Make sure that this page is accessible for the different users’ profiles.
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.
Change security setting of the VisualForce page
Go to the VisualForce Page listing.
For each Elements Visualforce page you have just created, click Security and add the Profiles that need access.
=======================================================================