Lightning Wizard Component with jQuery and Bootstrap

Hi All,

In this post I am sharing with you a Lightning Wizard Component built with Bootstrap and jQuery.
It is a multi step form wizard with Progress Bar and jQuery Validations.

Requirements :
1) Download latest version of Bootstrap and jQuery.
2) “bklightning” namespace to “YourNamespace”.

Here is full code :

WizardDemoComponent.cmp

<aura:component controller="bklightning.CreateContactController" implements="force:appHostable">
    <ltng:require styles="/resource/wizarddemo/wizarddemo/bootstrap.min.css,/resource/wizarddemo/wizarddemo/style.css"
                  scripts="/resource/wizarddemo/wizarddemo/jquery.min.js,
                           /resource/wizarddemo/wizarddemo/jquery-ui.min.js,
                           /resource/wizarddemo/wizarddemo/jquery.validate.js,
                           /resource/wizarddemo/wizarddemo/bootstrap.min.js"
                  afterScriptsLoaded="{!c.afterLoaded}"/>
    
    <aura:attribute name="newContact" type="bklightning__ContactDetail__c"
                                        default="{ 'sobjectType': 'bklightning__ContactDetail__c'}"/>
    
    <div class="container">
    <br/><br/>
	<form class="form-horizontal form" id="form">
		<div class="col-md-8 col-md-offset-2">   	
			<div class="progress">
			  <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
			</div>
		
			<div class="box row-fluid">	
				<br/>
				<div class="step">
					<div class="form-group">
						<label for="fname" class="col-sm-2 control-label">First Name</label>
						<div class="col-sm-10">
						  <input type="text" name="fname" value="{!v.newContact.bklightning__Firstname__c}" class="form-control" id="fname" placeholder="First Name"/>
						</div>
					</div>
					<div class="form-group">
						<label for="lname" class="col-sm-2 control-label">Last Name</label>
						<div class="col-sm-10">
						  <input type="text" name="lname" value="{!v.newContact.bklightning__Lastname__c}"  class="form-control" id="lname" placeholder="Last Name"/>
						</div>
					</div>
					<div class="form-group">
						<label for="email" class="col-sm-2 control-label">Email</label>
						<div class="col-sm-10">
						  <input type="text" name="email" value="{!v.newContact.bklightning__Email__c}" class="form-control" id="email" placeholder="email"/>
						</div>
					</div>			  
					  
				</div>
				<div class="step">
					<div class="form-group">
						<label for="phone" class="col-sm-2 control-label">Phone</label>
						<div class="col-sm-10">
						  <input type="text" name="phone" value="{!v.newContact.bklightning__Phone__c}" class="form-control" id="phone" placeholder="Phone"/>
						</div>
					</div>
					<div class="form-group">
						<label for="address" class="col-sm-2 control-label">Address</label>
						<div class="col-sm-10">
						  <textarea name="address" class="form-control" id="address" cols="10" rows="5" >{!v.newContact.bklightning__Address__c}</textarea>
						</div>
					</div>			  
					  
				</div>
				<div class="step display">
					<div class="form-group">
						<label for="company" class="col-sm-2 control-label">Company</label>
						<div class="col-sm-10">
							<input type="text" name="company" value="{!v.newContact.bklightning__Company__c}" class="form-control" id="company" placeholder="Company"/>
						</div>
					</div>
					<div class="form-group">
						<label for="numberofemp" class="col-sm-2 control-label">Number of Employees</label>
						<div class="col-sm-10">
							<input type="text" name="numberofemp" value="{!v.newContact.bklightning__NumberOfEmployee__c}" class="form-control" id="numberofemp" placeholder="Number of Employees"/>
						</div>
					</div>			  
					<div class="form-group">
						<label for="website" class="col-sm-2 control-label">Website</label>
						<div class="col-sm-10">
							<input type="text" name="website" value="{!v.newContact.bklightning__Website__c}" class="form-control" id="website" placeholder="Website"/>
						</div>
					</div>			  
				</div>
			
				<div class="row">
					<div class="showMsg" style="display:none;color:red;text-align:center;">
						<b>Your Information Saved Successfully</b><br/>
					</div>
				</div>
            
				<div class="row">
					<div class="col-sm-12">
						<div class="pull-right">
							<button type="button" class="action btn-sky text-capitalize back btn">Back</button>
							<button type="button" class="action btn-sky text-capitalize next btn">Next</button>
							<button type="button" onclick="{!c.saveContact}" class="action btn-hot text-capitalize submit btn">Submit</button>
						</div>
					</div>
				</div>			

			</div>
		
			</div> 
		</form> 
	</div>
</aura:component>

In WizardDemoComponent.cmp you can see I have used Latest Bootstrap and jQuery Library.
When all scripts loaded I am calling afterLoaded() function of WizardDemoComponentController.js.

WizardDemoComponentController.js

({
	afterLoaded : function(component, event, helper) {
        var current = 1;
        
        widget = jQuery(".step");
		btnnext = jQuery(".next");
		btnback = jQuery(".back"); 
		btnsubmit = jQuery(".submit");
        
        widget.not(':eq(0)').hide();
		
		helper.hideButtons(component,widget,current);
        helper.setProgress(component,widget,current);
        
        //Next Button Action
        btnnext.click(function(){
			if(current < widget.length){
				// Check validation
				if(jQuery(".form").valid()){
					widget.show();
					widget.not(':eq('+(current++)+')').hide();
					helper.setProgress(component,widget,current);
				}
			}
			helper.hideButtons(component,widget,current);
		})
        
        //Back Button Action
        btnback.click(function(){
			if(current > 1){
				current = current - 2;
				if(current < widget.length){
					widget.show();
					widget.not(':eq('+(current++)+')').hide();
					helper.setProgress(component,widget,current);
				}
			}
			helper.hideButtons(component,widget,current);
		})
		
		jQuery('.form').validate({ // initialize plugin
			ignore:":not(:visible)",			
			rules: {
				fname     : "required",
				lname     : "required",
				email    : {required : true, email:true},
				phone  : {required : true, number:true},
				address : "required",
				company : "required",
				website : {required : true, url:true},
				numberofemp : {required : true, number:true},
			},
	    });
        
	},
    
    saveContact : function(component, event, helper) {
        component.set("v.newContact.bklightning__Firstname__c",jQuery("#fname").val());
        component.set("v.newContact.bklightning__Lastname__c",jQuery("#lname").val());
        component.set("v.newContact.bklightning__Email__c",jQuery("#email").val());
        component.set("v.newContact.bklightning__Phone__c",jQuery("#phone").val());
        component.set("v.newContact.bklightning__Address__c",jQuery("textarea#address").val());
        component.set("v.newContact.bklightning__Company__c",jQuery("#company").val());
        component.set("v.newContact.bklightning__NumberOfEmployee__c",jQuery("#numberofemp").val());
        component.set("v.newContact.bklightning__Website__c",jQuery("#website").val());
        
        var newContact = component.get("v.newContact");
        
		helper.upsertContact(component, newContact); 	
        
        jQuery('.showMsg').show();
        jQuery('.form')[0].reset();
    }
    
})

In afterLoaded method of WizardDemoComponentController.js I am defining validations and click events.

WizardDemoComponentHelper.js

({
	setProgress : function(component,widget,currstep) {
		var percent = parseFloat(100 / widget.length) * currstep;
		percent = percent.toFixed();
		jQuery(".progress-bar").css("width",percent+"%").html(percent+"%");
	},
    
    hideButtons : function(component, widget,current) {
		var limit = parseInt(widget.length); 

		jQuery(".action").hide();

		if(current < limit) jQuery(".next").show();
		if(current > 1) jQuery(".back").show();
		if (current == limit) { 
			// Show entered values
			jQuery(".display label:not(.control-label)").each(function(){
				console.log(jQuery(this).find("label:not(.control-label)").html(jQuery("#"+jQuery(this).data("id")).val()));	
			});
			jQuery(".next").hide(); 
			jQuery(".submit").show();
		}	
	},
    
    upsertContact : function(component, newContact) {
        var action = component.get("c.createContact");
        action.setParams({
          "con": newContact
        });
        action.setCallback(this, function(a) {
        });
        $A.enqueueAction(action);
    }
})

In WizardDemoComponentHelper.js setProgress() and hideButtons() methods are used to set progress-bar and to hide buttons as wizard progresses.

So that’s it,Simple.