While developing Lightning component, all of us might have been noticed that default user interface for loading component looks like below image.
Most of us, for sure will want to customize this loading message to match their Salesforce implementation theme. We can use “Lightning Template” to override this message to show something like below image.
Using “Lightning Template”, we can change default message, image or even background color.
First we need to create a Lightning component which extends “aura:template” and attribute “isTemplate” is marked as true. We can add custom text as well by introducing attribute “loadingText” in component. With help of some CSS, we can achieve any look and feel. To add any image on default loading screen, we need to add it as “Base64” encoded format. There are tons of utilities available on web to convert image into base64 format.
CustomTemplate.cmp
<aura:component isTemplate="true" access="GLOBAL" extends="aura:template"> <aura:set attribute="title" value="Customized Loading Message"/> <aura:set attribute="loadingText" value="Loading..."/> <style> body { background-color: #ffffff; } .auraMsgBox { background-color: #ffffff; min-width: 400px; min-height: 160px; border: none; box-shadow: none; } .auraMsgBox .logo { /* replace below base64 by actual image code */ background-image: url( 'data:image/png;base64, iVBORw0K......CYII='); background-repeat: no-repeat; background-position: center center; height: 405px; width: 400px; } .auraMsgBox h2 { color: #000000; } </style> </aura:component>
Note : Only copy paste of above code will not work, we need to replace base64 by actual image code. To make code simpler, I have trimmed it in CSS. We can use this website to convert any image to base64 encoded format.
As we can see in above code, “auraMsgBox” class needs to be modified to add any custom style.
Second and final step is to use this template in our lightning component.
Example of Lightning app using template :
<aura:application template="c:customTemplate"> <c:CustomComponent /> </aura:application>
Leave a Reply