Lightning Events Via Visualforce

This post is again as per request from one of my friend .He wanted me to put together a simple demonstration of how to handle lightning events from visualforce and how to publish or fire lightning events from outside salesforce .Both of these cases are extremely common if you are building application using lightning for visualforce .

If you have already started adopting Lightning component framework ,you probably know how important are Events .There are two types of events , Application events and Component Events .Please note that prerequisite for understanding this blog is understanding of events in context of lightning component framework .

The below code snippets apply to only application events .

Application events are handled by all components that are listening to the event. These events are essentially a traditional publish-subscribe model.

1. Firing Events from the Visualforce and Handling the Events in lightning components

To demonstrate this ,lets create a simple event file and fire the event from the visualforce inside the callback and handle the event back in the lightning component file

Below is the component set up for lightning framework

	<aura:application access="GLOBAL" extends="ltng:outApp">
	<aura:dependency resource="c:sampleComponent" />
	</aura:application>

view raw sampleApp.app hosted with ❤ by GitHub

	<aura:component>
	<div>
	Hello world Component!
	</div>
	<aura:handler event="c:sampleEvent" action="{!c.handleevent}"/>
	</aura:component>

view raw sampleComponent.cmp hosted with ❤ by GitHub

	({
	handleevent: function(component, event, helper) {
	console.log('event fired');
	}
	})

view raw sampleComponentController.js hosted with ❤ by GitHub

	<aura:event type="APPLICATION">
	</aura:event>

view raw sampleEvent.evt hosted with ❤ by GitHub

Lets put together the visualforce code needed for the experiment

	<apex:page showHeader="true" sidebar="true">
	<apex:includeLightning />
	<div id="lightning"> hello World VF!! </div>
	<script>
	$Lightning.use("c:sampleApp", function() {
	$Lightning.createComponent("c:sampleComponent", {},
	"lightning",
	function(cmp) {
	var myExternalEvent;
	myExternalEvent = $A.get("e.c:sampleEvent");
	myExternalEvent.fire();
	});
	});
	</script>
	</apex:page>

view raw sampleVf.page hosted with ❤ by GitHub

Here are the exciting results

Now this opens a world of new opportunities to mash up already existing visualforce UI with lightning component framework.

One sample project that i experimented is in my git repo which takes map component as a lightning component but receives pickers from the visualforce select option .

2.Firing events from the lightning component and handling the event inside visualforce

This is another interesting observation ,you can fire an event from the lightning component and handle the event inside visualforce .

Lets see the hello world code for this scenario

	<aura:component>
	<div> Hello World !!!! </div>
	<aura:registerEvent name="myevent" type="c:myEvent" />
	<ui:button label="fireEvent" press="{!c.fireevent}" />
	</aura:component>

view raw myComponent.cmp hosted with ❤ by GitHub

	({
	fireevent: function(component, event, helper) {
	var myEvent = $A.get("e.c:myEvent");
	myEvent.setParams({"data":"Test"});
	myEvent.fire();
	}
	})

view raw myComponentController.js hosted with ❤ by GitHub

	<aura:event type="APPLICATION">
	<aura:attribute type="string" name="data" />
	</aura:event>

view raw myEvent.evt hosted with ❤ by GitHub

	<aura:application access="GLOBAL" extends="ltng:outApp">
	<aura:dependency resource="c:myComponent" />
	</aura:application>

view raw myEventApp.app hosted with ❤ by GitHub

The visualforce code is as below

	<apex:page showHeader="false" sidebar="false">
	<apex:includeLightning />
	<div id="lightning"> Hello world VF ..!!! </div>
	<script>
	$Lightning.use("c:myEventApp", function() {
	$Lightning.createComponent("c:myComponent", {}, "lightning", function(){
	$A.eventService.addHandler({ "event": "c:myEvent", "handler" : visualForceFunction});
	});
	});
	</script>
	<script>
	var visualForceFunction = function(event){
	var myEventData = event.getParam("data");
	console.log(myEventData);
	};
	</script>
	</apex:page>

view raw myHandlervf.page hosted with ❤ by GitHub

Fun part

I hope this opens up a whole world of new directions to design and build some excellent mashups with visualforce and lightning .

Please reach out via my twitter @msrivastav13 or mail msrivastav13@gmail.com.

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

5 Reasons you want to get new set of Trailhead Badges On TrailHead

Last night I smashed new badges available on Trailhead and here are 5 main reasons I would recommend all devs and consultants  to grab them 

• Get a feel of new release features upcoming in Spring 16 release 

Spring 16 release has lots of exciting new features .Either you are business consultant or developer with the platform ,you will be amazed to see new features added for lightning components lightning experience ,sales cloud ,service cloud ,marketing ,community cloud and analytics cloud .

Please note that this is a limited edition badge .Its very clear summary of whats available with Spring 16.So hurry up !!!

• ISV App Strategy 

Are you planning to get your application on appexchange and make some money ? App Strategy module is for you .There are critical things to understand when it comes to app marketing .Do you want to dig deeper in terms of terminology like OEM and ISVForce ,this module will be ideal read .

If you are solution architect working for ISV companies ,you should definitely read this . The modules digs deeper into specific areas like which edition and what should be licensing model for various applications and business needs .

• Hands on experience with asynchronous in Apex 

This module is a must if you are technical architect and advanced developer where you want to know the options available in apex to go asynchronous .You will explore batch jobs ,schedulers , flex queues ,queueabale interfaces .

This has some exercises for you to complete before you claim this badge but definitely worth the time as you learn lot of new stuff .

• Microsoft and Salesforce Integration Overview and benefits

Salesforce and microsoft are in deep love .Micorsofts and salesforce both are working together to provide some cool integration's so that customers leveraging microsoft and salesforce CRM can be benefited best out of both technologies .There are two excellent modules covering some cool products like salesforce for outlook or Outlook webApp plugins ,installations ,features and functionality .

• Learn some management tips and coaching tips and become self aware

This is almost like getting some management tips without management degree .Overall these modules are just great and provide great insight into how to become a better manager .

There are 2 modules that focus on same and worth reading and they are fun.

Last but not least use twitter and show of your badges .Go crush it ...