Author Archives: Biswajeet

About Biswajeet

Biswajeet is my Name, Success is my Aim and Challenge is my Game. Risk & Riding is my Passion and Hard Work is my Occupation. Love is my Friend, Perfection is my Habit and Smartness is my Style. Smiling is my Hobby, Politeness is my Policy and Confidence is my Power.

jQuery Data Tables in Visualforce Page

Here is an example of ‎jQuery Data tables using in Visualforce. It will give you the pagination and search functionality in Visualforce page. Here I’m displaying list of account records.

Apex Class:

public class SampleController{
    public List<Account> accList {get; set;}
    
    public SampleController(){
    accList = [SELECT Name, AccountNumber, Phone FROM Account LIMIT 10000];
    }

}

Visualforce Page:

<apex:page Controller="SampleController" readOnly="true" tabStyle="Account" sidebar="false">
    <head>
        <apex:includescript value="//code.jquery.com/jquery-1.11.1.min.js"/>
        <apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"/>
        <apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css"/>
        <script>
        j$ = jQuery.noConflict();
        j$(document).ready( function () {
            var accTable = j$('[id$="accTable"]').DataTable({
                
            });
        });
        </script>
    </head>
    <body>
        <table id="accTable" class="display">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Account Number</th>
                    <th>Phone</th>
                </tr>
            </thead>
            <tbody>
                <apex:repeat value="{!accList}" var="acc">
                    <tr>
                        <td>{!acc.Name}</td>
                        <td>{!acc.AccountNumber}</td>
                        <td>{!acc.Phone}</td>
                    </tr>
                </apex:repeat>
            </tbody>
        </table>
    </body>
</apex:page>

Output:

Progress Indicator in Lightning Component

Progress Indicator Component:

<!--ProgressIndicator.cmp-->
<aura:component >
    <aura:attribute name="selectedStep" type="string" default="step1"/>
    <div class="slds-m-around_xx-large">
        
        <lightning:progressIndicator currentStep="{!v.selectedStep}" type="base">
            <lightning:progressStep label="Step One" value="step1" onclick="{!c.selectStep1}"/>
            <lightning:progressStep label="Step Two" value="step2" onclick="{!c.selectStep2}"/>
            <lightning:progressStep label="Step Three" value="step3" onclick="{!c.selectStep3}"/>
            <lightning:progressStep label="Step Four" value="step4" onclick="{!c.selectStep4}"/>
        </lightning:progressIndicator>
        
        <div class="slds-p-around--medium">
            <div class="{!v.selectedStep == 'step1' ? 'slds-show' : 'slds-hide'}">
                <p><b>Step 1</b></p>
            </div>
            <div class="{!v.selectedStep == 'step2' ? 'slds-show' : 'slds-hide'}">
                <p><b>Step 2</b></p>
            </div>
            <div class="{!v.selectedStep == 'step3' ? 'slds-show' : 'slds-hide'}">
                <p><b>Step 3</b></p>
            </div>
            <div class="{!v.selectedStep == 'step4' ? 'slds-show' : 'slds-hide'}">
                <p><b>Step 4</b></p>
            </div>
        </div>
        
        <div>
            <button disabled="{!v.selectedStep != 'step1' ? '' : 'disabled'}" class="slds-button slds-button--neutral" onclick="{!c.handlePrev}">Back</button>  
            <aura:if isTrue="{!v.selectedStep != 'step4'}">
                <button class="slds-button slds-button--brand" onclick="{!c.handleNext}">Next</button>
            </aura:if>
            <aura:if isTrue="{!v.selectedStep == 'step4'}">   
                <button class="slds-button slds-button--brand" onclick="{!c.handleFinish}">Finish</button>  
            </aura:if>
        </div>
    </div>
</aura:component>

Progress Indicator Component JS Controller:

({
    handleNext : function(component,event,helper){
        var getselectedStep = component.get("v.selectedStep");
        if(getselectedStep == "step1"){
            component.set("v.selectedStep", "step2");
        }
        else if(getselectedStep == "step2"){
            component.set("v.selectedStep", "step3");
        }
         else if(getselectedStep == "step3"){
            component.set("v.selectedStep", "step4");
        }
    },
    
    handlePrev : function(component,event,helper){
        var getselectedStep = component.get("v.selectedStep");
        if(getselectedStep == "step2"){
            component.set("v.selectedStep", "step1");
        }
        else if(getselectedStep == "step3"){
            component.set("v.selectedStep", "step2");
        }
        else if(getselectedStep == "step4"){
            component.set("v.selectedStep", "step3");
        }
    },
    
    handleFinish : function(component,event,helper){
        alert('Finished...');
        component.set("v.selectedStep", "step1");
    },
    
    selectStep1 : function(component,event,helper){
        component.set("v.selectedStep", "step1");
    },
    selectStep2 : function(component,event,helper){
        component.set("v.selectedStep", "step2");
    },
    selectStep3 : function(component,event,helper){
        component.set("v.selectedStep", "step3");
    },
    selectStep4 : function(component,event,helper){
        component.set("v.selectedStep", "step4");
    },
})

Lightning Test App:

<!--Test.app-->
<aura:application extends="force:slds">
    <c:ProgressIndicator />
</aura:application>

Output:

Note: To create “base” style progress indicator you have need to add type="base" attribute in your lightning:progressIndicator tag in lightning component.

Modal Box in Lightning Component

Modal Popup Component:

<!--ModalPopup.app-->
<aura:component>
    <aura:attribute name="openModal" type="boolean" default="false"/>
    <div class="slds-m-around--xx-large">
        <button class="slds-button slds-button--brand" onclick="{!c.handleOpenModal}">Open Modal</button>  
        <aura:if isTrue="{!v.openModal}">
            <!--Modal Box Start--> 
            <div role="dialog" class="slds-modal slds-fade-in-open ">
                <div class="slds-modal__container">
                    <div class="slds-modal__header">
                        <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.handleCloseModal}">
                            X
                            <span class="slds-assistive-text">Close</span>
                        </button>
                        <h1 class="slds-text-heading--medium">Biswajeet Samal</h1>
                    </div>
                    
                    <!--Modal Box Header--> 
                    <div class="slds-modal__content slds-p-around--medium">
                        <center> <p><b>
                            Welcome to Biswajeet Samal's Blog
                            </b>
                            </p></center>
                    </div>
                    <!--Modal Box Button--> 
                    <div class="slds-modal__footer">
                        <button class="slds-button slds-button--brand" onclick="{!c.handleCloseModal}">Cancel</button>
                    </div>
                </div>
            </div>
            <div class="slds-backdrop slds-backdrop--open"></div>            
        </aura:if>
    </div>
</aura:component>

Modal Popup Component JS Controller:

({
    handleOpenModal: function(component, event, helper) {
        //For Display Modal, Set the "openModal" attribute to "true"
        component.set("v.openModal", true);
    },
    
    handleCloseModal: function(component, event, helper) {
        //For Close Modal, Set the "openModal" attribute to "fasle"  
        component.set("v.openModal", false);
    }
})

Lightning Test App:

<!--Test.app-->
<aura:application extends="force:slds">
    <c:ModalPopup />
</aura:application>

Output:

Toggle Checkbox in Lightning Component

Sample Lightning Component:

<!--Sample.cmp-->
<aura:component>
    <aura:attribute name="toggleValue" type="String"/>
    <div class="slds-m-around--large">
        <div class="slds-form-element">
            <label class="slds-checkbox_toggle slds-grid">
                <span class="slds-form-element__label slds-m-bottom_none">Toggle Label </span>
                <ui:inputCheckbox aura:id="chkbox" class="slds-input" change="{!c.selectChange}"/>
                <span id="toggle-desc" class="slds-checkbox_faux_container" aria-live="assertive">
                    <span class="slds-checkbox_faux"></span>
                    <span class="slds-checkbox_on">Enabled</span>
                    <span class="slds-checkbox_off">Disabled</span>
                </span>
            </label>
            <p><b>The toggle is {!v.toggleValue} </b></p>
        </div> 
    </div> 
</aura:component>

Sample Lightning Component JS Controller:

({
    selectChange : function(cmp, event, helper) {
        var checkCmp = cmp.find("chkbox");
        cmp.set("v.toggleValue" ,  checkCmp.get("v.value"));
    }
})

Output: