Star War Probability Progress Bar for Opportunity :)

 

 

The Blog has been shifted here (0to1code.com)…

https://0to1code.wordpress.com/2016/07/11/star-war-probability-progress-bar-for-opportunity/

Sorry for the inconvenience.
Advertisements

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

Skype URIs in Salesforce (One Click to Call or Chat on Skype)

The Blog has been shifted here (0to1code.com)…

https://0to1code.wordpress.com/2016/01/30/skype-uris-in-salesforce-one-click-to-call-or-chat-on-skype/

Sorry for the inconvenience.

Javascript Framework for Lightning Design System

 

The Blog has been shifted here (0to1code.com)…

https://0to1code.wordpress.com/2016/01/06/javascript-framework-for-lightning-design-system/

Sorry for the inconvenience.

Share Youtube Videos on Chatter Using Lightning Components (YouTube2Chatter)

 

The Blog has been shifted here (0to1code.com)…

https://0to1code.wordpress.com/2015/09/18/share-youtube-videos-on-chatter-using-lightning-components-youtube2chatter/

Sorry for the inconvenience.

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

 

The Blog has been shifted here (0to1code.com)…

https://0to1code.wordpress.com/2015/09/17/convert-visualforce-checkboxes-in-lightning-design-system-using-javascript/

Sorry for the inconvenience.

Voice Recognition Search in Salesforce (VF-Page)

The Blog has been shifted here (0to1code.com)…

https://0to1code.wordpress.com/2015/08/02/voice-recognition-search-in-salesforce-vf-page/

Sorry for the inconvenience.