Opening Modal Using Lightning Component Framework of SFDC

One of my friend from India threw a challenge .The challenge was to open a modal by using latest and greatest lightning components framework and modals design from SLDS .For the love of community I thought of sharing the entire code base that I did .

So here we start ..

Business Use Case - Need a handy SalesLeader board component that can be used to display the Sales revenue generated by each sales rep for current year in the order of decreasing total revenue .On click of the tile ,we will show detail opportunity list aggregating the revenue .

The component can be dragged in lightning design experience or in App builder lightning Page .

Video Demonstration-



SalesLeaderBoard from Mohith Kumar Shrivastava on Vimeo.

Frameworks Used -

1. Lightning Design Systems (SLDS) for CSS
2. Lightning Component Framework for client side logic
3. Apex aura enabled class for backend logic

Approach

• The component hierarchy is very important to imagine or mindmap before we dig deeper

- SalesLeaderMain
    -SalesLeaderBoard
         -SalesLeaderBoardCard
    -SalesLeaderDetail

• On load of page hide the SLDS modal with classes described in the style guide and once the user clicks on each individual cards use events to fire off and open the modal .

Here is the core logic that control model toggle behaviour

	<div class="slds">
	<div aria-hidden="true" role="dialog" class="slds-modal slds-modal--large slds-fade-in-hide" aura:id="modaldialog">
	</div>
	<!--Other markups-->
	<div class="slds-backdrop slds-backdrop--hide" aura:id="backdrop">
	</div>
	</div>

view raw SalesLeaderDetail.cmp hosted with ❤ by GitHub

The JS controller

	({
	showOppmodal: function(component, event, helper) {
	//Toggle CSS styles for opening Modal
	helper.toggleClass(component,'backdrop','slds-backdrop--');
	helper.toggleClass(component,'modaldialog','slds-fade-in-');
	helper.getopportunitylst(component,event);
	},
	hideModal : function(component, event, helper) {
	//Toggle CSS styles for hiding Modal
	helper.toggleClassInverse(component,'backdrop','slds-backdrop--');
	helper.toggleClassInverse(component,'modaldialog','slds-fade-in-');
	}
	})

view raw SalesLeaderDetailController.js hosted with ❤ by GitHub

The Helper 

	({
	toggleClass: function(component,componentId,className) {
	var modal = component.find(componentId);
	$A.util.removeClass(modal,className+'hide');
	$A.util.addClass(modal,className+'open');
	},
	toggleClassInverse: function(component,componentId,className) {
	var modal = component.find(componentId);
	$A.util.addClass(modal,className+'hide');
	$A.util.removeClass(modal,className+'open');
	}
	})

view raw SalesLeaderHelper.js hosted with ❤ by GitHub

Use application events to communicate between components and the message of event carry the respective ID of the User .

Double check to name event file in small letters else the application events dont work

	<aura:event type="APPLICATION">
	<aura:attribute name="userId" type="String"/>
	</aura:event>

view raw displayopp.evt hosted with ❤ by GitHub

Below is the github link for all code 

https://github.com/msrivastav13/SalesLeaderBoard

The code in the repository is self explanatory but if you need more explanation feel free to reach me on twitter or via my mail(msrivastav13@gmail.com) .