Lighting Design System for Apex Page Messages in Salesforce

July 27, 2017
Merfantz Editor
Salesforce Developments Tutorial
0

We can show the Apex Page Messages.

Apex Class:

public class Messages{

public MessagesController(){

ApexPages.addmessage(new ApexPages.message(ApexPages.severity.FATAL,'Enter Account name'));

ApexPages.addmessage(new ApexPages.message(ApexPages.severity.ERROR,'This is not valid'));

ApexPages.addmessage(new ApexPages.message(ApexPages.severity.WARNING,'It should be correct format'));

ApexPages.addmessage(new ApexPages.message(ApexPages.severity.INFO,'You need to complete this page'));

ApexPages.addmessage(new ApexPages.message(ApexPages.severity.CONFIRM,'Record successfully updated'));

}

Visualforce Page:

<apex:page controller="MessagesController"  >
<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>
Result:-