[SalesForce] Lightning – how to use apex:pageMessages in a VisualForce page with SLDS

I'm using SLDS library to decorate a VisualForce page and have got some standard validation rules defined at the back,
How could I throw the error message to the VF page with using apex:pageMessages?

Please see the below code;

<apex:page standardController="Account" showHeader="false" sidebar="false" showQuickActionVfHeader="true" docType="html-5.0">
<apex:stylesheet value="/resource/slds0120/assets/styles/salesforce-lightning-design-system-vf.css"/>
<div class="slds" >
    <h2 class="slds-page-header slds-text-heading--small slds-truncate" title="Account">Account - Appointment</h2>
    <apex:form >
        <div class="slds-box">


            <apex:pageMessages />


            <apex:outputPanel layout="block1"  id="auth" >
                <div class="slds-tile">
                    <div class="slds-form--horizontal">
                        <div class="slds-form-element">
                            <label class="slds-form-element__label" for="EffectiveDate">{!$ObjectType.Account.fields.EffectiveDate__c.Label}</label>
                            <div class="slds-form-element__control">
                                <apex:inputfield styleclass="slds-input slds-size--10-of-12" value="{!Account.EffectiveDate__c}"/>
                            </div>
                        </div>
                        <div class="slds-form-element">
                            <label class="slds-form-element__label" for="Authority">{!$ObjectType.Account.fields.Authority__c.Label}</label>
                            <div class="slds-form-element__control">
                                <apex:inputfield styleclass="slds-input" value="{!Account.Authority__c}"/>
                            </div>
                        </div>

                    </div>
                    <div class="slds-m-vertical--large"></div>      
                </div> 
            </apex:outputPanel> 
        </div>
        <div class="slds-col slds-no-flex slds-align-bottom slds-m-around--small" id="saveDiv">
            <div class="slds-button-group" role="group">
                <apex:commandButton onclick="openConfirmationPopup()"  immediate="false" styleClass="slds-button slds-button--neutral slds-button--brand" value="Save" reRender="none" />
            </div>
        </div>
        <div aria-hidden="true" role="dialog" class="slds-modal slds-modal--large slds-fade-in-closed" id="tstpopup" >
            <div class="slds-modal__container">
                <div class="slds-modal__header">
                    <h2 class="slds-text-heading--medium">Update Movement Details</h2>
                    <button class="slds-button slds-button--icon-inverse slds-modal__closed">
                        <span class="slds-assistive-text">Close</span>
                    </button>
                </div>
                <div class="slds-modal__content">
                    <div>
                        <p>Are sure, you want to save the Movement details?</p>
                    </div>
                </div>
                <div class="slds-modal__footer">
                    <div class="slds-x-small-buttons--horizontal">
                        <apex:commandButton styleClass="slds-button slds-button--neutral" value="Cancel" onclick="closePopup()" />
                        <apex:commandButton styleClass="slds-button slds-button--neutral slds-button--brand" value="Confirm" action="{!save}" immediate="false" reRender="none" onclick="confirmed()" oncomplete="hideSpinner()" />
                    </div>
                </div>
            </div>
        </div>
        <div id="backdropDiv" class="slds-modal-backdrop slds-modal-backdrop--closed"></div>
        <div aria-hidden="true" role="dialog" class="slds-modal slds-modal--large slds-fade-in-closed" id="spinnerDiv">
            <div class="slds-modal__container">
                <div class="slds-align-content-center">
                    <div class="slds-spinner--medium" >
                        <img src="/resource/slds0120/assets/images/spinners/slds_spinner_brand.gif" alt="Loading..." />
                    </div>
                </div>
            </div>
        </div>
    </apex:form>
</div>  

<script> 

// open the confirmation popup
function openConfirmationPopup(){  
    document.getElementById("tstpopup").className =
        document.getElementById("tstpopup").className.replace( /(?:^|\s)slds-fade-in-closed(?!\S)/g , ' slds-fade-in-open' )
    showBackDrop();
    return true;
}

// close the confirmation
function closeConfirmationPopup(){       

    document.getElementById("tstpopup").className =
        document.getElementById("tstpopup").className.replace( /(?:^|\s)slds-fade-in-open(?!\S)/g , ' slds-fade-in-closed' )

    hideBackDrop();
    return false;
}

// hide the transparent overlayer on message popup 
function hideBackDrop(){    
    document.getElementById("backdropDiv").className =document.getElementById("backdropDiv").className.replace
    ( /(?:^|\s)slds-modal-backdrop--open(?!\S)/g , ' slds-modal-backdrop--closed' )
    return false;
}

// show the transparent overlayer on message popup
function showBackDrop(){    
    document.getElementById("backdropDiv").className =document.getElementById("backdropDiv").className.replace
    ( /(?:^|\s)slds-modal-backdrop--closed(?!\S)/g , ' slds-modal-backdrop--open' )
    return false;
}

// show the progress spinner
function showSpinner(){    
    document.getElementById("spinnerDiv").className = document.getElementById("spinnerDiv").className.replace
    ( /(?:^|\s)slds-fade-in-closed(?!\S)/g , ' slds-fade-in-open' )
    return false;
}

// hide the progress spinner
function hideSpinner(){  
    document.getElementById("spinnerDiv").className = document.getElementById("spinnerDiv").className.replace
    ( /(?:^|\s)slds-fade-in-open(?!\S)/g , ' slds-fade-in-closed' )
    return false;
}

// on confirmation we close the dialog modal and start showing the spinner
function confirmed(){
    closeConfirmationPopup();
    showSpinner();
}

</script>

Best Answer

Try this:

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

This is what it looks like (in comparison):

Source: https://vishnuvaishnav.wordpress.com/2016/02/21/convert-standard-page-messages-in-lightning-design-system/

Related Solutions

[SalesForce] How to convert a Visualforce apex:pageMessages to be lightning style

Here is what I do:

Class used by all my controllers:

VF Messages Abstract:

public abstract class VF_Messages_Abstract {


    public void createError(ApexPages.Severity s, String message) {
        ApexPages.addMessage(
                New ApexPages.Message(
                        s, string.escapeSingleQuotes(message.escapeJava())
                )
        );

    }

    /**@description Indicates if a custom message is present*/
    public boolean hasMessages {
        get {
             return ApexPages.hasMessages();
        }
    }

    /**@description The custom error message */
    public String errorMessage {
        get {
            if (hasMessages) {
                return ApexPages.getMessages()[0].getDetail();
            }

            return null;
        }
    }

    /**@description The type of message: 'error' or 'success' */
    public string alertType {
        get {
            if (hasMessages) {
                return ApexPages.getMessages()[0].getSeverity() == ApexPages.Severity.CONFIRM ? 'success' : 'error';
            }

            return 'error';
        }
        private set;
    }



}

All controller for VF extend this class

Then in my vf pages I use the following:

Messages Toast

    <!-- ERROR ALERT DIV -->
    <apex:outputPanel layout="block" id="msg_block" style="display: none;">
        <div id="err_wrapper"
             class="slds-notify slds-notify--alert slds-theme--{!alertType} slds-theme--alert-texture"
             role="alert">
            <h2>
                <div xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <svg aria-hidden="true"
                         class="slds-icon icon-text-email slds-icon--small slds-m-right--x-small">
                        <use xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#' + if(alertType = 'success','check','ban'))}"></use>
                    </svg>
                    <span id="err_text"></span>
                </div>
            </h2>
        </div>

    </apex:outputPanel>

Helper Panel

        <!--APEX VARIABLES DIV-->
        <apex:outputPanel id="post_processing">

            <script>

                var hasMessages = {!hasMessages};
                var errorMessage = "{!errorMessage}";

                checkMessages();

            </script>

        </apex:outputPanel>

Check Messages Code (Using jQuery)

function checkMessages() {
    if (hasMessages) {
        $('#err_text').html(errorMessage);
        $('[id$=msg_block]').show();
    } else {
        $('[id$=msg_block]').hide();
    }

}

My buttons, action functions, etc rerender the post_processing and msg_block

Creating an error In the controller when I catch or want to display an error I simply:

createError(ApexPages.Severity.[ERROR | CONFIRM],YOURMESSAGEHERE);

This allows me to control the messages, when to display it and which theme to show.

Note: The xmlns= on the div containing the SVG is a MUST as if you try to rerender without it the page will simply stall. Important trick to remember for anytime you are re rendering a container containing an SLDS SVG

If you need a example all put together let me know.

End result is (Error):

Or (Confirm)

I also have implemented a way to pass messages between transactions so if you need to say DML on button click and then Callout oncomplete of button click, if there was an error in the first step, when the second step happens it does not clear the message like it normally would (not shown in code)

[SalesForce] VisualForce page with SLDS: apex:inputField lookup button way too big

Lightning design system do not supports apex input filed. Try to create custom CSS styles for lookups and other field types

Best Answer

Related Solutions

[SalesForce] How to convert a Visualforce apex:pageMessages to be lightning style

[SalesForce] VisualForce page with SLDS: apex:inputField lookup button way too big

Related Topic