{"id":5135,"date":"2016-01-05T20:00:52","date_gmt":"2016-01-05T20:00:52","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=5135"},"modified":"2016-01-08T03:19:39","modified_gmt":"2016-01-08T03:19:39","slug":"override-default-loading-message-in-salesforce-lightning-using-template","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/override-default-loading-message-in-salesforce-lightning-using-template\/","title":{"rendered":"Override default loading message in Salesforce lightning application using template"},"content":{"rendered":"

While developing Lightning component, all of us might have been noticed that default user interface for loading component looks like below image.<\/p>\n

\"Default<\/a>
Default loading screen in Salesforce lightning<\/figcaption><\/figure>\n

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.<\/p>\n

\"Customized<\/a>
Customized default loading message in Salesforce lightning<\/figcaption><\/figure>\n

Using “Lightning Template”, we can change default message, image or even background color.<\/p>\n

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.<\/p>\n

CustomTemplate.cmp<\/span><\/em><\/p>\n

\r\n<aura:component isTemplate="true" access="GLOBAL" extends="aura:template">\r\n\t<aura:set attribute="title" value="Customized Loading Message"\/>\r\n\t<aura:set attribute="loadingText" value="Loading..."\/>\r\n\r\n<style>\r\n    body {\r\n        background-color: #ffffff;\r\n    }\r\n\r\n    .auraMsgBox {\r\n        background-color: #ffffff;\r\n        min-width: 400px;\r\n        min-height: 160px;\r\n        border: none;\r\n        box-shadow: none;\r\n    }\r\n\r\n    .auraMsgBox .logo {\r\n        \/* replace below base64 by actual image code *\/\r\n        background-image: url( 'data:image\/png;base64, iVBORw0K......CYII=');\r\n        background-repeat: no-repeat;\r\n        background-position: center center;\r\n        height: 405px;\r\n        width: 400px;\r\n    }\r\n\r\n    .auraMsgBox h2 {\r\n        color: #000000;\r\n    }\r\n<\/style>\r\n   \r\n<\/aura:component>\r\n<\/pre>\n
Note :<\/em> 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<\/a> to convert any image to base64 encoded format.<\/p>\n
As we can see in above code, “auraMsgBox” class needs to be modified to add any custom style.<\/p>\n
Second and final step is to use this template in our lightning component.<\/p>\n
Example of Lightning app using template :<\/p>\n
\r\n<aura:application template="c:customTemplate">\r\n      <c:CustomComponent \/> \r\n<\/aura:application>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
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.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9],"tags":[311],"class_list":["post-5135","post","type-post","status-publish","format-standard","hentry","category-salesforce","tag-lightning-component"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":4646,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/compliation-of-resources-to-learn-lightning-components-in-salesforce\/","url_meta":{"origin":5135,"position":0},"title":"Compilation of resources to learn Lightning Components in Salesforce","author":"Jitendra","date":"July 8, 2015","format":false,"excerpt":"An attempt to gather all resources to learn Salesforce lightning component in one blog post","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6920,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/data-exchange-between-aura-lightning-web-components-lwc-and-visualforce\/","url_meta":{"origin":5135,"position":1},"title":"Event Handling between Aura, Lightning Web Components (LWC) and Visualforce","author":"Jitendra","date":"October 16, 2019","format":false,"excerpt":"How to use Lightning Message Services for event handling between Lightning Web Components, Aura Components and Visualforce","rel":"","context":"In "Lightning"","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Salesforce Lightning Message Service","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":6798,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/getting-started-with-lightning-web-component\/","url_meta":{"origin":5135,"position":2},"title":"Getting Started with Lightning Web Component","author":"Jitendra","date":"March 3, 2019","format":false,"excerpt":"Before starting with Lightning Web Component, I would suggest to read this introduction post first. If you enjoy watching video then you might enjoy below video where I conducted Live coding explaining basics of Lightning Web Component. https:\/\/www.youtube.com\/watch?v=KKNEpPP6V4s In this post, we are going to Show loading image on initial\u2026","rel":"","context":"In "Lightning"","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/img.youtube.com\/vi\/KKNEpPP6V4s\/0.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":6142,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/show-lightning-component-on-public-website-without-authentication\/","url_meta":{"origin":5135,"position":3},"title":"Show Lightning component on public website without authentication","author":"Jitendra","date":"June 5, 2017","format":false,"excerpt":"How to show Lightning component on public sites without need of user authentication","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7140,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/using-custom-label-in-lightning-web-components-lwc\/","url_meta":{"origin":5135,"position":4},"title":"Using Custom Label in Lightning Web Components – LWC","author":"Jitendra","date":"April 4, 2020","format":false,"excerpt":"Quick Code Snippet on how to use custom label in Lightning Web Components - LWC","rel":"","context":"In "Lightning Web Components"","block_context":{"text":"Lightning Web Components","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning-web-components\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5717,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/flipcard-lightning-component\/","url_meta":{"origin":5135,"position":5},"title":"Flipcard Lightning Component","author":"Jitendra","date":"September 8, 2016","format":false,"excerpt":"A simple CSS based animated Flip card Lightning Component for beginners","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Flipcard Lightning Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/FlipCard-Component.gif?fit=420%2C328&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=5135"}],"version-history":[{"count":6,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5135\/revisions"}],"predecessor-version":[{"id":5169,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5135\/revisions\/5169"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=5135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=5135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=5135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}