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
The JS controller The Helper 

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
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) .