Star War Probability Progress Bar for Opportunity :)

Screen Shot 2016-07-11 at 7.49.21 PM.png

Star Wars: The SalesForce Awakens

I am here with some fun in salesforce. 🙂 You may have seen Star War movie. It is my favorite movie. In this post i will integrate Salesforce with Star Wars.( i am Kidding 🙂 ) In this article i am creating Star War’s Sword as a progress bar.

starwars-logo

Steps to create:
1. Save this image in Static Resource in salesforce. Name it as Sword.

Screen Shot 2016-07-11 at 7.24.33 PM.png

2. Go to Setup -> Develop -> Visualforce Pages
3. Create a New page here and name it StarWarProbability
4. Copy paste below code in this page and save it.

<apex:page standardController="opportunity" showHeader="false" sidebar="false" standardStylesheets="false">
<style>
    .starWar{
        border-radius: 0px 2px 2px 0px;
        display: block;
        width: 0%;
        background-color: #fff;
        height: 8px;
        width: {!opportunity.Probability}%;
        font-size:8px;
        text-align: center;
    }

    .vader{
        box-shadow:0px 0px 10px 1px #FD4275, 0 0 1px #FD4275, 0 0 1px #FD4275, 0 0 1px #FD4275, 0 0 1px #FD4275, 0 0 1px #FD4275, 0 0 1px #FD4275;
    }
    .yoda{
        box-shadow:0px 0px 10px 1px #68B37A, 0 0 1px #68B37A, 0 0 1px #68B37A, 0 0 1px #68B37A, 0 0 1px #68B37A, 0 0 1px #68B37A, 0 0 1px #68B37A;
    }
    .obi{
        box-shadow:0px 0px 10px 1px #3B8CF8, 0 0 1px #3B8CF8, 0 0 1px #3B8CF8, 0 0 1px #3B8CF8, 0 0 1px #3B8CF8, 0 0 1px #3B8CF8, 0 0 1px #3B8CF8;
    }
    .windu{
        box-shadow:0px 0px 10px 1px #AC85B4, 0 0 1px #AC85B4, 0 0 1px #AC85B4, 0 0 1px #AC85B4, 0 0 1px #AC85B4, 0 0 1px #AC85B4, 0 0 1px #AC85B4;
    }
</style>
<div>
<table style="border-spacing: 0px;width:100%;">
<tr>
<td style="width: 114px;">
                <img src="{! $Resource.Sword }"/></td>
<td>
                <span class="vader starWar" title="{!opportunity.Probability}%">{!opportunity.Probability}%</span></td>
</tr>
</table>
</div>
</apex:page>

I have added four types of Swords in css. You just need to change in line 33. Like replace vader with yoda.

5. Now Go to Setup -> Customize -> Opportunities -> Page Layouts –> Here click on layout for show sword on detail page of opportunity record.
6. Go here for Visualforce Pages. Add Blank Section on the top and add drag your page in this section.
7. Set Section Properties ( Layout = 1-Column )
Set Visualforce Page Properties ( Height (in pixels) : 50px )

8. Save setting and open any opportunity record.

Now do changes in probality and get your StarWar Sword. 🙂

Happy Salesforce 🙂

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

Javascript Framework for Lightning Design System

Salesforce has launched a new UI which is called lightning design system. This is very sharp and neat UI. But salesforce yet not providing any JS framework for SLDS(salesforce lightning design system).

I am facing a problem with JS for SLDS. Are you also facing problems? I found two of JS framework. They both are providing JS for SLDS.

A. Appiphony Lightning JS (ALJS):

ALJS
Appiphony Lightning JS (ALJS) harnesses the power of jQuery and Ember to deliver a rich JavaScript experience to the Lightning Design System. ALJS is developed and maintained by Appiphony.

Click Here to Getting Started with ALJS.

B. Lightning Dart:

DartLogo
Lightning Dart is a library for developing web applications based on the CSS framework Salesforce Lightning Design System. Lightning Dart provides a complete component functionality for SLDS. Written in Dart, it compiles into Javascript (“Dart – the better Javascript”), so the delivery is a “one-page apps”. You can add business functionality by writing the code in Dart – or in Javascript directly – or any language which can call Javascript.

The Framework is not dependent on salesforce.com functionality or context and can be used independently.
Click Here to Getting Started with Lightning Dart.

If you know some other JS frameworks. Please type in comments. I will add here. Make it useful for others.

Thanks
Happy SLDS

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

vf2lds
Hi Everyone

As we know that with the Lightning Design System(LDS) we can build custom applications with a look and feel that is consistent with Salesforce core features — without reverse engineering our styles. See here more about LDS.

We have lots of standard visualforce pages. Now a days we all are facing some problems to convert standard visualforce pages in Lightning design system. We need to customize all of the standard things.

We can easily implement LDS to many standard components like checkbox, picklist etc. But in these days i am facing problem in convert list of checkboxes And list of  Radio Buttons to LDS view.

So for this I have written a script to convert list of checkboxes and list of radio buttons to LDS. Using this, we don’t loose our binding with controllers as well.

Update : Previously this script is used for  list of checkboxes, now I have updated it, for list of radio buttons as well.

Script :

    function convertCheckBoxToLDS() {
        var Row = document.getElementsByClassName("convertToLSD");
        for (var k = 0; k < Row.length; k++) {
            var colTds = Row[k].getElementsByTagName("td");
            for (var i = 0; i < colTds.length; i++) {
                var inrHtml = colTds[i].innerHTML;
                var chkId = inrHtml.substring(inrHtml.indexOf("id=") + 4, inrHtml.indexOf("\"", inrHtml.indexOf("id=") + 4));
                var chkBx = inrHtml.substring(inrHtml.indexOf("<input"), inrHtml.indexOf(">") + 1);
                var chkLable = colTds[i].getElementsByTagName("label")[0].textContent;
                var typeOfInput = colTds[i].getElementsByTagName("input")[0].getAttribute("type");
                var newChkBox = '<label class="slds-' + typeOfInput + '" for="' + chkId + '">' + chkBx +
                    '<span class="slds-' + typeOfInput + '--faux"></span>' +
                    '<span class="slds-form-element__label">' + chkLable + '</span>' +
                    '</label>';
                colTds[i].innerHTML = newChkBox;
            }
        }
    }

Here is example :
Create a class :

public class VFToLDSController{
    public List<SelectOption> lstSelOpt{get;set;}
    public VFToLDSController(){
        lstSelOpt = new List<SelectOption>();
        for(integer i=1 ; i<100 ; i++ ){
           lstSelOpt.add( new SelectOption( 'ID-'+i, 'CheckBox'+i ) ); 
        }
    }
}

Create a VisulaforcePage :

<apex:page controller="VFToLDSController" sidebar="false" showHeader="false" standardStylesheets="false">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="{!URLFOR($Resource.SLDS080,'SLDS080/assets/styles/salesforce-lightning-design-system.css')}" type="text/css" rel="stylesheet" />

<style>
    body{
        background-color: whitesmoke;
    }
</style>

<script>
    $( document ).ready(function() {
        convertCheckBoxToLDS();
    });
    
    //Convert standard checkboxes to Lightning Design System
    function convertCheckBoxToLDS() {
        var Row = document.getElementsByClassName("convertToLSD");
        for (var k = 0; k < Row.length; k++) {
            var colTds = Row[k].getElementsByTagName("td");
            for (var i = 0; i < colTds.length; i++) {
                var inrHtml = colTds[i].innerHTML;
                var chkId = inrHtml.substring(inrHtml.indexOf("id=") + 4, inrHtml.indexOf("\"", inrHtml.indexOf("id=") + 4));
                var chkBx = inrHtml.substring(inrHtml.indexOf("<input"), inrHtml.indexOf(">") + 1);
                var chkLable = colTds[i].getElementsByTagName("label")[0].textContent;
                var typeOfInput = colTds[i].getElementsByTagName("input")[0].getAttribute("type");
                var newChkBox = '<label class="slds-' + typeOfInput + '" for="' + chkId + '">' + chkBx +
                    '<span class="slds-' + typeOfInput + '--faux"></span>' +
                    '<span class="slds-form-element__label">' + chkLable + '</span>' +
                    '</label>';
                colTds[i].innerHTML = newChkBox;
            }
        }
    }
</script>

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<div class="slds-page-header nav" role="banner">
  <div class="slds-grid">
    <div class="slds-col slds-has-flexi-truncate">
      <div class="slds-media">
        <div class="slds-media__figure">
          <b>VF<font style="font-size:40px;color: blue;">2</font>LDS</b>
        </div>
        <div class="slds-media__body">
            <p class="slds-text-heading--label" style="font-size: 15px;margin-top: 13px;">Convert Visualforce checkboxes And Radio Buttons in Lightning Design System Using Javascript</p>
        </div>
      </div>
    </div>    
  </div> 
</div>
<apex:form >       
    <table style="width:100%;margin-left: 16%;">       
        <tr> 
            <td>           
                <h1><b>Before</b></h1>         
                <div style="height:200px;width:200px;" class="slds-scrollable--y">                        
                    <apex:selectCheckboxes layout="pageDirection">
                        <apex:selectOptions value="{!lstSelOpt}"/>
                    </apex:selectCheckboxes>
                </div>
            </td>
            <td>                   
                <h1><b>After</b></h1> 
                <div style="height:200px;width:200px;" class="slds-scrollable--y">                        
                    <apex:selectCheckboxes styleClass="convertToLSD" layout="pageDirection">
                        <apex:selectOptions value="{!lstSelOpt}"/>
                    </apex:selectCheckboxes>
                </div>
            </td>
        </tr>
    </table>        
</apex:form>
</html>
</apex:page>

Happy LDS !!!

Voice Recognition Search in Salesforce (VF-Page)

icon128

Hi All,

Recently i have posted “Create Chrome Extension for Voice Recognition Search in Salesforce“. Some devs are little confused about how is it working. So i am writing this post for implement this feature on visualforce pages to get it better.

How is it working on salesforce standard search bar ?
First of all we need to right click on search bar and then select “Inspect Element”. After that we need to understand id and classes for this box.

Capture

In this javascript we will use searchBoxClearContainer,phSearchInput,phSearchInput and phSearchButton.

<apex:page>
<h1>Click on search bar...</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
(function() {
    'use strict';
    if (! ('webkitSpeechRecognition' in window) ) return;
    var talkMsg = 'Speak now';
    var patience = 6;
    function capitalize(str) {
        return str.length ? str[0].toUpperCase() + str.slice(1) : str;
    }
    var speechInputWrappers = document.getElementsByClassName('searchBoxClearContainer');
    //It works for only text box which is located in 'searchBoxClearContainer'
    [].forEach.call(speechInputWrappers, function(speechInputWrapper) { 

        //Getting text from phSearchInput textbox
        var inputEl = document.getElementById('phSearchInput');

        //Handle click event on inputBox
        var micBtn = document.getElementById('phSearchInput');

        var inputHeight = inputEl.offsetHeight;
        var inputRightBorder = parseInt(getComputedStyle(inputEl).borderRightWidth, 10);
        var buttonSize = 0.8 * inputHeight;
        var finalTranscript = '';
        var recognizing = false;
        var timeout;
        var oldPlaceholder = null;
        var recognition = new webkitSpeechRecognition();
        recognition.continuous = true;

        function restartTimer() {
            timeout = setTimeout(function() {
                recognition.stop();
            }, patience * 500);
        }

        //Changing the placeholder text inside textbox
        recognition.onstart = function() {
            oldPlaceholder = inputEl.placeholder;
            inputEl.placeholder = talkMsg;
            recognizing = true;
            micBtn.classList.add('listening');
            restartTimer();
        };

        //When someone stop to speaking, it will run
        recognition.onend = function() {
            //Checking for is textbox contains ant string or not
            if( document.getElementById('phSearchInput').value != '' ){
                //It click the default search button
                document.getElementById('phSearchButton').click();
            }
            recognizing = false;
            clearTimeout(timeout);
            micBtn.classList.remove('listening');
            if (oldPlaceholder !== null) inputEl.placeholder = oldPlaceholder;
        };

        recognition.onresult = function(event) {
            clearTimeout(timeout);
            for (var i = event.resultIndex; i < event.results.length; ++i) {
                if (event.results[i].isFinal) {
                    finalTranscript += event.results[i][0].transcript;
                }
            }
            finalTranscript = capitalize(finalTranscript);
            inputEl.value = finalTranscript;
            restartTimer();
        };

        //Handling click event on Textbox -  we can make it for button as well but right now we have no mic button as google have so i am giving this event on textbox
        micBtn.addEventListener('click', function(event) {
            event.preventDefault();
            if (recognizing) {
                recognition.stop();
                return;
            }
            inputEl.value = finalTranscript = '';
            recognition.start();
        }, false);
    });
})();
</script>
</apex:page>