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

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