Illustrations in Salesforce

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”.

dont miss out iconDon't forget to check out: 10 Reasons to Switch On Salesforce Lightning

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

staticresource

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

lakemountainillustration

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

rerender-3

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 –

displayillustration-2

Add this component to the objects flexipage and let’s see how it looks –Illustrations-in-Lightning-Exper

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

dont miss out iconCheck out another amazing Salesforce tutorial video here: Client-Side Search in Lightning Component Salesforce | Lightning Data Table

Resources

To get the package link to install in your org please visit Salesforce Expertise at bit.ly/2FC7ojB

Try this approach and please let me know if you find it useful. Feel free to share your inputs on Contact Us.

To learn more about other Salesforce topics, please visit SalesforceExpertise.

Responses

Popular Salesforce Blogs