Illustrations in Salesforce Lightning Experience

An illustration is an image or a diagram that helps make something clear. Inline texts work with illustrations to communicate a state in a more friendly way.

Illustrations are used to make users aware of different scenarios like:

When there is No Content/No Access/No Connections
When there is No data available now, but there are possibilities of getting data soon
You would like to navigate the user to a new path

We have many Salesforce illustrations available in Lightning Design System like OpenRoad, Desert, LakeMountain, etc. from which you can pick to describe the expected scenario. Also, we have several SVG code snippets available for all of these.

But the problem here is, since the SVG tag is not supported in Salesforce Lightning Component, we cannot use these SVG snippets directly inside our component. Let’s understand a quick way to display the illustrations inside lightning components.

How to use Illustrations in Lightning Component?

As we have seen above for the cases when-

Requested data is not available or
The user is not looking at the right place and we would like to navigate the user in the right direction then, we need illustrations.

Scenario

Let’s take a scenario here and understand. The scenario covers the following requirements –

Display LakeMountain Illustration on Object’s Detail page inside a lightning component if requested data not available/visible.

Solution

Let’s create a simple lightning component that will help us to solve the above requirement:

Navigate to LakeMountain Illustration SVG and click on show code, then copy/paste LakeMountain SVG into your notepad.
Then update the message below the illustration. You can search for “Lorem ipsum dolor” and replace it with your custom message.
Now save this file as “LakeMoutain.html”.

Don't forget to check out: 10 Reasons to Switch On Salesforce Lightning

Create a new public static resource named “LakeMountain” and upload the above “LakeMoutain.html” file and Save it.

Create a new lightning component named “DisplayIllustration” as shown below. We have just used a div tag with id=”illustration” to create a container for the illustration to display –

We will use the afterRender method of renderer.js to get the SVG from the static resource and add it to the above div tag.

You must be wondering why we had added this to the afterRender method. The reason behind it is, once the framework’s rendering service has inserted DOM elements, afterRender() method is used to interact with the DOM tree –

Now we have created the component which will help us display illustrations whenever needed. We can call this component from any other component based on our requirement as follows –