Illustrations in 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
• 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”.

• 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 –

Add this component to the objects flexipage and let’s see how it looks –

Yay, we are done. You can use the same approach to display any of the illustrations available in Lightning Design System.

Resources 

• Try this out. Here’s the package link to install in your org.

• Once you install the package, go to any object’s detail page in lightning and just add the “DisplayIllustrationOnLightningPage” component.

Try this approach and please let me know if you find it useful. Feel free to share your inputs. Also if you have tried out a different approach for illustrations, please share.