Lighting Design System for Apex Page Messages in Salesforce

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:-

We are the ISV Partners and Please reach us for custom development => www.merfantz.com

————————————Happy to help you!!!!!!———————————–

Author Bio

Merfantz Editor
+ Recent Posts
Tags:

Leave a Reply