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

In this post, i will put a way to implement Skype URIs in 5 Minute with salesforce. Skype is a popular way to chat or calls. We have lots of contacts on skype and salesforce. How can we open standard skype app on mobile or desktop from salesforce records? Lets have a walk here….. It’s not too long 🙂

Untitled

What is Skype URIs:
Skype URIs enable you to create innovative mobile, web, and desktop apps that initiate Skype calls and chats, enabling your users to reach their friends, family and businesses in a convenient yet familiar way. For example, if your salesforce record that contains Skype names, your salesforce record can use a Skype URI to launch the official Skype client and initiate a call or chat to a selected contact.

For a Skype URI to work, a Skype client must be installed on the user’s device, and the user must have an active Skype account. Certification of applications or webpages using Skype URIs is not required, because all interaction—specifically all audio and video—is through the Skype client.

In its simplest form, you can embed a hyperlink referencing a Skype URI in a webpage to place a Skype call. For example, to initiate a call to the Skype Echo / Sound Test Service, the link would be:

Call : <a href=”skype:echo123?call”>Call the Skype Echo</a>
Chat : <a href=”skype:echo123?chat”>Chat the Skype Echo</a>
Video Call : <a href=”skype:echo123?call&amp;video=true”>Video Call the Skype Echo</a>

Clicking the link:
1. Brings the device’s Skype client into focus, starting it as necessary.
2. Effects auto-login or prompts your users for their Skype Name and password.
3. Typically opens a confirmation dialog to authorize placing the call.
4. Places the call(Chat/Video Call).

Implement Skype URIs in salesforce:
I am taking Salesforce Standard Contact Object to implement Skype URIs. Please follow these steps:
1. Click on Setup (Placed at Top Right Corner)
2. Now in the left bar Go Build –> Contact –> Click on Fields
3. Click on New in the section “Contact Custom Fields & Relationships
4. Create text type field with name “Skype ID” and Length can be 30 (Or more).(Complete this wizard of creation)

5. Create a new Formula type field with name “Skype” (Formula return type should be Text)
6. Now you are on Formula Screen. Put following formula here:
HYPERLINK(“skype:”& vish1993__Skype_ID__c & “?chat”, ‘Chat’,’_top’) &” “&
HYPERLINK(“skype:”& vish1993__Skype_ID__c & “?call”, ‘Call’,’_top’) &” “&
HYPERLINK(“skype:”& vish1993__Skype_ID__c & “?call&video=true”, ‘Video Call’,’_top’)
Note: “vish1993__Skype_ID__c” is my skype id field’s Api name. Please see yours.
Complete Your wizard.

Steps to run:
Create or open contact record. Fill required field and Skype ID of this contact. I have created record of Nitin Indora with him Skype ID. Click on Save. You can see formula field with three links. Now you can chat, call and video call with your contact.

Chat Call Video

This is a use case in salesforce classic view. You can also use this fetaure in Salesforce1 app. It more beautifuly works and usefull in mobiles.

Call Chat Video Salesforce1

Happy Salesforce 🙂

Salesforce Coding Utility Chrome Extension

SFCU

Hi Everyone,

In this post, I will introduce my new salesforce coding utility chrome extension. This is a very cool extension. I have made this for me and my friends. But after some time, we felt that we are addicted to this extension very much and it can be useful for another developer too. That’s why I published it and I hope you will like it.

About SFCU:
This extension provides you following features:
1. Code in maximized window:
We can code in Developer console and Setup tab(Like VisualForce Pages, Apex Classes, Apex Triggers, Visualforce Components). In Developer Console, we can code in maximized window but using the Setup tab we don’t have the option to maximize the window. In this case, it is difficult to code and see compile time errors on the page.
Using this extension you just need to check the Maximize checkbox, which will appear on the top-left corner. You can minimize the window just by unchecking the Maximize  checkbox.

2. View only debugs: If you are looking debugs from Developer console. Then we have Debug Only checkbox. Same thing you can do on apex debugs page using this extension. You need to just check the Debugs checkbox to see only debugs.

3. Clear All Button: In salesforce sometimes we have lots of Debugs generated. Salesforce provides a button “Delete All” but it deletes only one page of debugging at a time. This extension will give you a “Clear All” button next to Delete All button. This button will delete all debugs. You just need to click on this button it will delete all debugs one by one. You don’t need to click Delete All button again and again.

This extension has many features. Maybe you don’t need all features but I think you would like to use at least one or two of them.

I will try to add some more feature in this extension.

Install it from here

If you like this extension then please don’t forget to give your review and feedback. 🙂

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

Impact of Employee’s Mood on Company

1370097681

Is really Mood of Employees affects performance, growth and environment of the company? I think it does.
You know what employees are the base of the company. It doesn’t matter that the company has a single employee or tons of employees, but we can’t imagine a company without employees.

Moo???????????????
>A mood is a mental or emotional state.
Positive moods would exist when employees feel excited or enthusiastic.
Negative moods can cause hostile employees who are stressed.

A positive mood can enhance creativity and problem solving and a negative mood can only lead towards INFERNO.

So each and everything which is aligned with an employee at the workplace affects too much to company in both positive and negative ways.

Most importantly to managers, employee mood had a clear impact on performance, including both how much work employees did and how well they did it. That means company is getting work but is company getting what exactly supposed to get from employees?? Research finds that employees who report to work in a awful mood do less and lower quality work than those who come in upbeat.

Starting work in a bad mood can trigger a chain reaction that can cause an employee’s job performance to spiral downward throughout the workday.

An employee who never have anything positive to say, whether at the office meeting or in the office group chat outside of the office. They can suck the energy from a brainstorming session with a few choice comments. Their bad mood frequently puts others in one, too. Their negativity can ruin even good news. You already knew that unhappy employees are bad for business, but did you know they are actually costing you money?

“Employees bring all of themselves to work, including their traits, moods and emotions, and their affective experiences and expressions influence others.”

The research found that employees’ moods when they clocked in tended to affect how they felt the rest of the day. While this might seem like common sense, the research went further and determined that employee mood had a direct impact on how customers were treated.

Let’s have a look on what professor says about it:
“We saw that employees could get into these negative spirals where they started the day in a bad mood and just got worse over the course of the day“, said Steffanie Wilk, associate professor of management and human resources at Ohio State University’s Fisher College of Business.
That’s why it is so important for companies to find ways to help their workers start off the day on the right foot.

Positive customers were related to workers’ positive moods, Wilk also said.

Emotions travel from person to person like a virus.” Said by Wharton management professor who studies the influence of emotions on the workplace.

Don’t bring it to work
Negative moods affect productivity because a grumpy frame of mind tends to demotivate and demoralize; even when the cause is nothing to do with work. Feeling fed up leads to feeling lethargic, and lowered energy levels make it hard to get stuck into the daily grind. It would be great to think that a quick fix could prevent this ever happening, but the causes of bad moods are innumerable and impossible to predict. It could be an issue with work that needs tackling, or an argument at home, or a ding in your car. Whatever the cause, the important thing is to find a way to move past it and cheer up.” Written in Lauren Bearman’s blog.

Take action
Taking action to improve a bad mood is the crucial next step, for individuals and for businesses. Nobody really wants to stay miserable, and companies certainly don’t want unhappy employees unable to focus and very likely spreading their negative feelings about the workplace. In fact, it’s worth reviewing company policies to see how small changes could actually make a big impact to this sort of scenario. For example, if an employee is struggling to make it into work on time, and the rush and pressure is creating a poor state of mind, then fear of being reprimanded for a tardy arrival will only make this worse and increase the pressure. Finding fair and effective ways to deal with these situations will reduce pressure and help staff to find peace of mind rather than constant levels of stress.” Written in Lauren Bearman’s blog.

In the end, I would like to say that We should focus on our mood and presence of mind at work.
As employees perspective, it impacts on your future growth. If you can’t be positive then you should not be negative. “BE ON ZERO OR POSITIVE“.

And as a manager perspective these bad moody face will make your organization in a bad situation. Here is a simple solution just try to do something which really helpful to your employees and you will get back your benefit automatically.

Thanks for reading it.
Happy Mood 🙂

Share Youtube Videos on Chatter Using Lightning Components (YouTube2Chatter)

Screenshot_2015-09-17-21-00-31

Hi Everyone
I am here with some cool stuff. As you know that YouTube is very popular for videos. Many of salesforce videos on YouTube as well. After reading this post, you can search videos in salesforce1 and also you can share to chatter as well.

Chatter feeds

We will learn following things in this post :
1. Lightning Components
2. Lightning Design System with lightning Components
3. YouTube Integration
4. Wrapper Classes in lightning
5. Nested Components
6. Passing values from child to parent Component
7. Creating app on google console

First of all we need a google API key to fetch data for YouTube. For getting API key we need to create a App on google console.

A. Get a API key from Google :
1. Go to https://console.developers.google.com
2. Create a new project here.
Create Project
3. A pop-up will open, fill all project’s info here, Then click on Create button.
Fill Info Of Project
4. Now navigate to left panel and select APIs & Auth –> APIs
5. Then click on YouTube Data API under YouTube APIs section.
Youtube APis
6. Then press Enable API button to enable YouTube’s API.
Enable Api
7. After that Go to Credentials then click on Add Credential –> Api Key
Cred
8. A popup will open, select Server Key option here.
Server Key
9. Now give Server Api Key name here and click on create. now you have your Api Key. Please do secure your API key.

B. Building Lighting Components and Apex Classes:
1. YouTubeFeedCtrl.cls
2. YouTubeWrraper.cls
3. YouTubeJSON.cls
4. YouTubeToFeed.cmp
5. YouTubeToFeedContoller.js
6. YouTubeViewPort.cmp
7. YouTubeViewPortContoller.js

1.YouTubeFeedCtrl.cls
This class used for fetching data from google API and sharing feeds on chatter. We are making request on http://www.googleapis.com and filling wrapper class list from response of http request.

public with sharing class YouTubeFeedCtrl{
    private static final String SEARCH_URL = 'https://www.googleapis.com/youtube/v3/search';
    private static final String API_KEY = 'AIzaSyC60-a9ziN9zLIcb9ueYv2-IwS03CnYgI4'; //API_KEY
    
    //Fetching youtube data by given search string
    @AuraEnabled
    public static List<YouTubeWrapper> fetchVideos(string searchString){
        //If no search keywords found then it will search for salesforce keyword
        searchString = searchString == null ? 'salesforce' : searchString ;
        
        //Making Http request to google apis
        Http http = new Http();
        HttpRequest req = new HttpRequest();
        HttpResponse res = null;
        String endpoint = SEARCH_URL +
            '?part=snippet' +
            '&maxResults=20' +
            '&type=video' +
            '&q=' + EncodingUtil.urlEncode(searchString, 'UTF-8') +
            '&key=' + API_KEY;
            
        req.setEndPoint(endpoint);
        req.setMethod('GET');
        res = http.send(req);
        
        //Deserializing json data
        YouTubeJSON.Response response = (YouTubeJSON.Response)JSON.deserialize(res.getBody(), YouTubeJSON.Response.class);
        List<YouTubeJSON.Item> items = response.items;
        
        //Filling Wrapper Data for lightning component
        List<YouTubeWrapper> LstYTWrapper = new List<YouTubeWrapper>();
        For( YouTubeJSON.Item itemObj : items ){
            YouTubeWrapper YuTuWr = new YouTubeWrapper();
            YuTuWr.videoId = itemObj.id.videoId;
            YuTuWr.title = itemObj.snippet.title;
            YuTuWr.Description = itemObj.snippet.description;
            YuTuWr.thumbnails = itemObj.snippet.thumbnails.medium.url;            
            YuTuWr.channelTitle = itemObj.snippet.channelTitle ;
            YuTuWr.publishedAt = itemObj.snippet.publishedAt+'';
            LstYTWrapper.add(YuTuWr);
        }
        return LstYTWrapper;
    }    
    
    //Function for share youtube link to chatter
    @AuraEnabled
    public static boolean shareOnChatter(string chatterText,String youTubeUrl){
        chatterText  = chatterText == null ? '' : chatterText ;
        FeedItem post = new FeedItem();
        post.ParentId = userinfo.getUserId();
        post.Body = chatterText;
        post.LinkUrl = youTubeUrl;
        insert post;
        return true;
    }
}

2. YouTubeWrraper.cls
Lightning wrapper classes different from salesforce wrapper classes. We can’t access inner classes in lightning so we are not creating wrapper class as inner class here. In wrapper classes each variable should be @AuraEnabled.

public class YouTubeWrapper{
    @AuraEnabled
    public String videoId { get; set; }
    @AuraEnabled
    public String Description { get; set; }
    @AuraEnabled
    public String thumbnails{ get; set; }
    @AuraEnabled
    public String title { get; set; }
    @AuraEnabled
    public String channelTitle { get; set; }
    @AuraEnabled
    public String publishedAt  { get; set; }
}

3. YouTubeJSON.cls
This class contains wrapper classes for json de-serialization.

public class YouTubeJSON{
    public List<YouTubeJSON.Item> items { get; set; }    
    public class Response {
        public String kind { get; set; }
        public String etag { get; set; }
        public String nextPageToken { get; set; }
        public String prevPageToken { get; set; }
        public YouTubeJSON.PageInfo pageInfo { get; set; }
        public List<YouTubeJSON.Item> items { get; set; }
    }
    
    public class PageInfo {
        public Integer totalResults { get; set; }
        public Integer resultsPerPage { get; set; }
    }
    
    public class Item {
        public String kind { get; set; }
        public String etag { get; set; }
        public YouTubeJSON.Id id { get; set; }
        public YouTubeJSON.Snippet snippet { get; set; }
    }
    
    public class Id {
        public String kind { get; set; }
        public String videoId { get; set; }
    }
    
    public class Snippet {
        public Datetime publishedAt { get; set; }
        public String channelId { get; set; }
        public String title { get; set; }
        public String description { get; set; }
        public YouTubeJSON.Thumbnails thumbnails { get; set; }
        public String channelTitle { get; set; }
        public String liveBroadcastContent { get; set; }
    }
    
    public class Thumbnails {
        public YouTubeJSON.Thumbnail medium { get; set; }
        public YouTubeJSON.Thumbnail high { get; set; }
    }
    
    public class Thumbnail {
        public String url { get; set; }
    }
}

4. YouTubeFeed.cmp
From here we are going to develop lightning part for this app. This is our main component, we will use this component to show our app in salesforce1. In this component we are defining success message, iframe for YouTube videos, searching of videos on YouTube and share videos link on chatter.

<aura:component controller="YouTubeFeedCtrl"  implements="force:appHostable">
	<!--Describing Youtube video id for Parent Component(YouTubeFeed.cmp)-->
	<aura:attribute name="ParentviewIt" type="string"/>
	
	<!--Describing attribut of YouTubeWrapper class-->
	<aura:attribute name="YouTubeVideos" type="YouTubeWrapper"/>
	
	<!--Including Lightninh Design System resource-->
	<ltng:require styles="/resource/SLDS080/assets/styles/salesforce-lightning-design-system-vf.css"/>
	
	<!--Calling doSearch function on loading of component-->
	<aura:handler name="init" value="{!this}" action="{!c.doSearch}"/>
	
	<div class="slds" style="background-color: #F4F6F9;">
	  <!--Success Message Start Here-->
	  <div id="ChatterSuccessMessage" class="slds-notify-container" style="display:none;">
		 <div class="slds-notify slds-notify--toast slds-theme--success" role="alert" style="min-width: 0px;">
			<span class="slds-assistive-text">Info</span>
			<div class="notify__content">
			   <h2 class="slds-text-heading--small">Feed succefully posted...</h2>
			</div>
		 </div>
	  </div>
	  <!--Success Message End Here-->
	  
	  <!--Header Start Here-->
	  <div class="slds-page-header" role="banner">
		 <div class="slds-grid">
			<div class="slds-col slds-has-flexi-truncate">
			   <div class="slds-media">
				  <div class="slds-media__figure">
					 <b style="color:red;">Youtube</b><b style="font-size: 45px;">2</b><b style="color:blue;">Chatter</b>
				  </div>
			   </div>
			</div>
		 </div>
		 <div class="slds-grid">
			<div class="slds-col--padded slds-size--3-of-4">
			   <!--Input box for taking search string for videos-->
			   <ui:inputText aura:id="searchstr" class="slds-input slds-m-top--medium" placeholder="Type here...."/>
			</div>
			<div class="slds-col--padded slds-size--1-of-4">    
			   <!--Search Button-->
			   <button  onclick="{!c.doSearch}" style="margin-left: 2%;" class="slds-button slds-button--brand slds-m-top--medium">Search</button>                	
			</div>
		 </div>
	  </div>
	  <!--Header End Here-->
	  
	  <!--Container Start Here-->
	  <div class="slds-container--fluid  slds-container--center">	 
		  <div class="slds-grid" id="youtubeframe" style="display:none;">
			 <div class="slds-card slds-card--empty" style="width:100%;">
				<div class="slds-card__body" style="padding: 0;">
				   <iframe style="height:200px;width:100%;border-radius: 2px;" src="{!v.ParentviewIt}"/>
				</div>
				<div class="slds-grid slds-m-top--medium slds-m-bottom--medium">
				   <div class="slds-col slds-size--1-of-2">
					  <!--Chatter Feed Message-->
					  <ui:inputText aura:id="chatterStr" class="slds-input slds-m-left--medium" placeholder="Type your feed here ..."/>
				   </div>
				   <div class="slds-col slds-size--1-of-2">                            
					  <!--Share on chatter button-->
					  <button  onclick="{!c.shareOnChatterClient}"  class="slds-button slds-button--neutral slds-m-left--large slds-theme--success">Share to Chatter</button>
				   </div>
				</div>
			 </div>
		  </div>
		  <div class="slds-grid slds-m-top--medium" >
			 <div class="slds-col">
				<ul class="slds-timeline" style="background-color: #F4F6F9;">
				   <!--Passing youtube records in YouTubeViewPort Component using Iteration-->
				   <aura:iteration items="{!v.YouTubeVideos}" var="YTV">
					  <c:YouTubeViewPort YTVVar="{!YTV}" ChildViewIt="{!v.ParentviewIt}"/>
				   </aura:iteration>
				</ul>
			 </div>
		  </div>
	  </div>
	  <!--Container Start Here-->
	</div>
</aura:component>

5. YouTubeToFeedContoller.js
This is the controller of YouTubeToFeed.cmp. Here are two methods first one is used for fetch data and set data to wrapper attribute on YouTubeToFeed.cmp and second one is used to share feed on chatter.

({
    //Searching and getting data from apex class
    doSearch: function(cmp, event, helper) {
        var fetchVideo = cmp.get("c.fetchVideos");
        fetchVideo.setParams({
            searchString: cmp.find("searchstr").get("v.value")
        });
        fetchVideo.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                cmp.set("v.YouTubeVideos", response.getReturnValue());
            } else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] &amp;amp;amp;&amp;amp;amp; errors[0].message) {
                        $A.error("Error message: " + errors[0].message);
                    }
                } else {
                    $A.error("Unknown error");
                }
            }
        });
        $A.enqueueAction(fetchVideo);
    },

    //Posting feeds to chatter
    shareOnChatterClient: function(cmp, event, helper) {
        var myVar;
        var shareOnChatterAuraFun = cmp.get("c.shareOnChatter");
        //Passing params to apex shareOnChatter function
        shareOnChatterAuraFun.setParams({
            "chatterText": cmp.find("chatterStr").get("v.value"),
            "youTubeUrl": cmp.get("v.ParentviewIt")
        });

        shareOnChatterAuraFun.setCallback(this, function(response) {
            var state = response.getState();
            //If result is successfull then notification will apears for 5 second
            if (state === "SUCCESS") {
                document.getElementById("ChatterSuccessMessage").style.display = 'block';
                //Run a interval and call eraseSuccessMessage in 5 second to hide notification
                myVar = setInterval(function() {
                    eraseSuccessMessage();
                }, 5000);
            }
        });
        $A.enqueueAction(shareOnChatterAuraFun);

        //Function for hide notification
        function eraseSuccessMessage() {
            document.getElementById("ChatterSuccessMessage").style.display = 'none';
            clearInterval(myVar);
        }
    }
})

6. YouTubeViewPort.cmp
In this component, I am implementing nested components concept in lightning. This is child component of YouTubeToFeed.cmp. Here we are filing data of for each <li> of Lighting Design System’s timeline. See more here about Lightning Design System Timeline component.

<aura:component controller="YouTubeFeedCtrl">
    
	<!--Describing Youtube video id for Child Component(YouViePort.cmp)-->
    <aura:attribute name="ChildViewIt" type="string"/>
	
	<!--Describing attribut of YouTubeWrapper Variable-->
	<aura:attribute name="YTVVar" type="YouTubeWrapper"/> 
	
    <li class="slds-timeline__item">
    <span class="slds-assistive-text">Event</span>
    <div class="slds-media slds-media--reverse">
      <div class="slds-media__body">
        <div class="slds-media slds-media--timeline slds-timeline__media--event">
          <div class="slds-media__figure">
            <img id="{!v.YTVVar.videoId}" onclick="{!c.seeVideo}" style="width: 100px;height: 100px;border-radius: 9px;" src="{!v.YTVVar.thumbnails}"/>
          </div>
          <div class="slds-media__body">
            <p><a onclick="{!c.seeVideo}">{!v.YTVVar.title}</a></p>
            <p class="slds-truncate">{!v.YTVVar.Description }</p>
            <ul class="slds-list--horizontal slds-text-body--small">
              <li class="slds-list__item slds-m-right--large">
                <dl class="slds-dl--inline">
                  <dt class="slds-dl--inline__label">By:</dt>
                  <dd class="slds-dl--inline__detail">{!v.YTVVar.channelTitle }</dd>
                </dl>
              </li>
              <li class="slds-list__item">
                <dl class="slds-dl--inline">
                  <dt class="slds-dl--inline__label">Date:</dt>
                  <dd class="slds-dl--inline__detail">{!v.YTVVar.publishedAt }</dd>
                </dl>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </li> 
</aura:component>

7. YouTubeViewPortContoller.js
This is controller of YouTubeViewPort.cmp. In this, we will learn how can we pass values from child component to parent component. Whenever YouTube video’s link is clicked that time it will set value in “ChildViewIt” attribute and using this attribute, value will pass to “ParentviewIt” and after this iframe will be shown up with video.

({
	//Use for set value src of iframe
	seeVideo : function(cmp, event, helper) {  
        cmp.set("v.ChildViewIt", "https://www.youtube.com/embed/"+cmp.get("v.YTVVar.videoId") ) ;
        document.getElementById("youtubeframe").style.display = 'block';        
	}        
})

We have almost done our functionality. Now we are going to setup for salesfroce1 app.

C. Create a lightning component tab for salesforce1 :
1. Go to setup menu
2. Go to Create –> Tab –> Create Lightning Component Tabs
3. Fill Values here :
Tab creating

4. After creating tab Go to Mobile Administration –> Mobile Navigation
5. Here move YouTube tab to selected list.
Mob Nav

All Setup ???

Happy Coding…

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

How to Setup MavensMate in Atom (Salesforce1 IDE)

About MavensMate :

logo2
MavensMate is great tool for building Force.com IDE. It provides the super-powerful Salesforce.com Partner, Metadata, and Tooling APIs to provide a rich experience for developers. It provides rich UIs for common operations like creating new projects, editing projects, running Apex unit tests, deploying to servers etc.
mavensmate.com

About Atom ( A hackable text editor for the 21st Century ):

logo-16711bee3666d535359eb00daddd6075
Atom is a text editor that’s modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file.
1. Cross-platform editing : Atom works across operating systems. You can use it on OS X, Windows, or Linux.
2. Built-in package manager : Search for and install new packages or start creating your own—all from within Atom.
3. Smart autocompletion : Atom helps you write code faster with a smart, flexible autocomplete.
4. File system browser : Easily browse and open a single file, a whole project, or multiple projects in one window.
5. Multiple panes : Split your Atom interface into multiple panes to compare and edit code across files.
6. Find and replace : Find, preview, and replace text as you type in a file or across all your projects.
atom.io

You can make lighting apps and components. Atom provides code assist, quick find etc. Atom support commands as well. Like press ctrl + shift + p and type New Apex class.

3

6

Download Atom from here

Setup :

A. Install Atom on your machine.

B. After installing open it.

C. Install MavensMate :
1. Now go to Packages > Setting View > Install Packages/Themes
1
2. Search here for MavensMate then click on Packages.
3. After that click on Install Button.
2
4. Restart your machine after installing MavensMate .

D. Setup Directories :
1. Go to Packages > Setting View > Install Packages/Themes
2. Click on Packages.
3. Here click on Setting button on MavensMate package.
4

4. In setting section, specify you directory.
5

 

E. Setup Salesforce Projects :
1. Open Atom and Go on MavensMate > Project > New Project.
2. Fill Info of project here.
1

Note : In the password box , password must be password+Security Token
Like if password is test123 and security key is asdfghjkkblvls then put both together test123asdfghjkkblvls

NOTE : If you are getting Error 5: Access is denied error , please turn off your firewall or disable your antivirus. In my case i removed my McAfee.

Cheers with lightning development !!