JQuery Based Raffle in Salesforce

Recently i run into very interesting scenario where i had to randomly take name of few contacts. There are many ways to do it but I thought why not to implement this functionality in Salesforce with help of some Javascript? So i came up with this – JQuery based Raffle in Salesforce.

I have created a List View Button, where I select few contacts and using JQuery, One Contact is selected Randomly. Assuming that you already know how to create List View Button, I will share my Visualforce and Controller Extension code with you.

Also, Please note that to run this demo, you need to have JQuery file in your static resource with name “JQueryAndCss”.

Visualforce – PlayRaffle

<apex:page standardController="sfdc_contact__c" recordSetVar="contacts" extensions="PlayRaffle">
<script type="text/javascript" src="{!URLFOR($Resource.JQueryAndCss, 'jquery_1.7.1.min.js')}"> </script>

<style type="text/css">

        ol.raffleComponent {
            list-style-type: none ;
            float: left ;
            font-size: 20px ;
            margin: 0px 0px 0px 0px ;
            padding: 0px 0px 0px 0px ;
            }

        ol.raffleComponent li, .winnerDiv {
            background-color: #FAFAFA ;
            border: 2px solid #454545 ;
            float: left ;
            line-height: 60px ;
            margin: 0px 10px 10px 0px ;
            overflow: hidden ;
            padding: 0px 10px 0px 10px ;
            text-align: center ;
            }

        ol.raffleComponent li.on , .winnerDiv{
            background-color: gold ;
            }

        .winnerDiv{
            display : none;
            font-size: 30px ;
            }

    </style>

    <button type="submit" OnClick="RunRaffle()">Run Raffle</button>
    <br />

    <ol class="raffleComponent">
         <apex:repeat value="{!contactNames }" var="conName">
            <li><div> {!conName} </div></li>
         </apex:repeat>
    </ol>

        <br clear="all" />
    <br />

    <div class="winnerDiv" ></div>
    <br clear="all" />

<script type="text/javascript">

        // Initializes and runs the raffle.
        function RunRaffle(  ){
            var jRaffle = $( ".raffleComponent" );

            // Clear the raffle list.
            //jRaffle.empty();
            $(".winnerDiv").hide();

            // Find the "on" element.
            var jCurrentLI = jRaffle.find( "li:first" ).addClass( "on" );

            // Get base pause time.
            var intPause = 40;

            // Get the time to wait before chaning the pause time.
            var intDelay = (4500 + (Math.random() * 2000));

            // Define the ticker.
            var Ticker = function(){

                var jNextLI = jCurrentLI.next( "li" );

                // Check to see if there is a next LI.
                if (!jNextLI.length){

                    // Since there is no LI left in the list, our next LI will be the
                    // first one in the list.
                    jNextLI = jRaffle.find( "li:first" );

                }

                // Turn off the current list.
                jCurrentLI.removeClass( "on" );

                // Turn on next list.
                jNextLI.addClass( "on" );

                // Store the new LI in the current LI (for next iteration).
                jCurrentLI = jNextLI;

                // Check to see if we should start changing the pause duration.
                if (intDelay > 0){

                    // Substract from the delay.
                    intDelay -= intPause;

                } else {

                    // Change the pause.
                    intPause *= (1 + (Math.random() * .1));

                }

                // Check to see how long the pause it. Once it gets over a certain wait
                // time, we are done playing and picking the winner.
                if (intPause >= 400){

                    // We found a winner!
                    var resulDiv = $(".winnerDiv");
                    resulDiv.html("Winner is - "+ jCurrentLI.text() + ' !!!');
                    resulDiv.addClass("on");
                    resulDiv.show();

                } else {

                    // Not done yet, call again shortly.
                    setTimeout( Ticker, intPause );

                }
            }

            // Start ticker.
            Ticker();
        }
    </script>

</apex:page>

Controller Extension : PlayRaffle

public class PlayRaffle {

    public List<String> contactNames {get;set;}

    public PlayRaffle(ApexPages.StandardSetController controller) {

        contactNames = new List<String>();
        List<SFDC_Contact__c> sfdcContacts = (List<SFDC_Contact__c>)controller.getSelected();
        Set<Id> conIds = new Set<Id>();
         for(SFDC_Contact__c s : sfdcContacts )
        {
            conIds.add(s.Id);
        }

        sfdcContacts = [Select Name, Last_Name__c FROM SFDC_Contact__c Where Id IN : conIds];

        for(SFDC_Contact__c s : sfdcContacts )
        {
            contactNames.add(s.Name+' '+s.Last_Name__c);
        }

    }

}