Convert Standard Page Messages in Lightning Design System


We all know about salesforce lightning design system. A very great UI for salesforce VF pages. But we have always some challenges to convert in lightning design system from salesforce classic UI. I have posted about a javascript trick before for convert standard checkbox and radio button to the lightning design system.

In this post, I will introduce a new UI trick using Jquery and CSS. We have standard page messages, so here is a challenge to convert in these messages in salesforce lighting design system.

I have made a small trick with Jquery  and CSS. You just need to copy-paste code on your page and need to call this function in document ready or after on complete of any ajax function(Action Function).

Here is demo code:
Apex Class:

public class ConvertPageMessagesController{
    public ConvertPageMessagesController(){
        ApexPages.addmessage(new ApexPages.message(ApexPages.severity.FATAL,'Please enter Account name'));
        ApexPages.addmessage(new ApexPages.message(ApexPages.severity.ERROR,'Please enter Account number'));
        ApexPages.addmessage(new ApexPages.message(ApexPages.severity.WARNING,'Please enter Account phone'));
        ApexPages.addmessage(new ApexPages.message(ApexPages.severity.INFO,'Please enter Account site'));
        ApexPages.addmessage(new ApexPages.message(ApexPages.severity.CONFIRM,'Please enter Account industry'));

VisalForce Page:

<apex:page controller="ConvertPageMessagesController"  >
<script src=""></script>
	<link type="text/css" rel="stylesheet" href=""/>

.msgIcon {
    display: none!important
.customMessage * {
    color: #fff!important
.customMessage {
    margin: 5px 0!important;
    max-width: 1280px;
    opacity: 1!important;
    width: 100%;
    font-size: 12px;
    border: 0px;
    padding-left: 10px;
.message {
    opacity: .1

    function overridePageMessages(){    
        var textureEffect = '';
        //Uncomment below line for texture effect on page messages
        //textureEffect = 'slds-theme--alert-texture';
        $('.warningM3').addClass('slds-notify slds-notify--toast slds-theme--warning customMessage '+textureEffect);          
        $('.confirmM3').addClass('slds-notify slds-notify--alert slds-theme--success  customMessage '+textureEffect);    
        $('.errorM3').addClass('slds-notify slds-notify--alert slds-theme--error customMessage '+textureEffect);                  
        $('.infoM3').addClass('slds-notify slds-notify--toast customMessage '+textureEffect);    

Call overridePageMessages() on documnet ready or oncomplete of action function(AJAX). Uncomment textureEffect for texture effect on page messages.
Fewer efforts more work. Just try it.

Happy Salesforce!!!


Javascript Framework for Lightning Design System

Salesforce has launched a new UI which is called lightning design system. This is very sharp and neat UI. But salesforce yet not providing any JS framework for SLDS(salesforce lightning design system).

I am facing a problem with JS for SLDS. Are you also facing problems? I found two of JS framework. They both are providing JS for SLDS.

The Blog has been shifted here (…

Sorry for the inconvenience.

Share Youtube Videos on Chatter Using Lightning Components (YouTube2Chatter)

Hi Everyone
I am here with some cool stuff. As you know that YouTube is very popular for videos. Many of salesforce videos on YouTube as well. After reading this post, you can search videos in salesforce1 and also you can share to chatter as well.

We will learn following things in this post :

The Blog has been shifted here (…

Sorry for the inconvenience.

Convert Visualforce Checkboxes And Radio Buttons in Lightning Design System Using Javascript

Hi Everyone

As we know that with the Lightning Design System(LDS) we can build custom applications with a look and feel that is consistent with Salesforce core features — without reverse engineering our styles. See here more about LDS.

The Blog has been shifted here (…

Sorry for the inconvenience.