Convert Standard Page Messages in Lightning Design System

OverridingPageMessages

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="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	<link type="text/css" rel="stylesheet" href="https://www.lightningdesignsystem.com/assets/styles/slds.css"/>

<style>
.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
}
</style>


<script>
    $(document).ready(function(){
       overridePageMessages();    
    });
       
    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);    
                        
        $('.errorM3').removeClass('errorM3'); 
        $('.confirmM3').removeClass('confirmM3'); 
        $('.infoM3').removeClass('infoM3');   
        $('.warningM3').removeClass('warningM3');  
    }
</script>
<apex:pagemessages/>
</apex:page>

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!!!
🙂

Advertisements

6 thoughts on “Convert Standard Page Messages in Lightning Design System

  1. Pingback: Convert Standard Page Messages in Lightning Design System | SutoCom Solutions

  2. Pingback: How to convert apex:pageMessages to be slds style - Learning Salesforce Coding with Examples

  3. Hi Vishnu,

    Can I get error icon embedded within the block of Error Message Block. I have tried the above code and it is working fine, however if there is any way to get icon then it would be great.

    Thanks & Regards,
    Noopur Rathod

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s