Lightning Components – Dreamforce 2015 minihack lessons learned

trailhead_module_lightning_components

While at Dreamforce this year I spent a good amount of time focusing on the minihacks in the DevZone. I managed to complete all seven of the challenges, but also became somewhat of the local Lightning Components expert in the challenge area while helping a friend of mine on that challenge.

It was tons of fun helping other developers out and seeing how differently developers think about the implementation, and learning more about Lightning Components in the process. I gained more than I expected by helping others though; when I completed my challenge the first day, I failed to notice that all my accounts returned the same contact. I only discovered the issue in my code while helping others to solve the challenge.

Dreamforce 2015 Minihack - Lightning Components

Dreamforce 2015 Minihack – Lightning Components

The problem:

You can pass null variables from client-side controllers to server-side controllers. More specifically, I was passing data from my component to my client-side controller wrong, and as a result sending a null value to my server-side controller in Apex. In a developer edition org with basic data, this would normally be obvious when no contacts were returned, but for some reason I had tested with contacts that have no account in my dev org.

So how do we properly send data from component to its client-side controller? Here are the different options I found when working to resolve the issue.

Option 1: Passing via a data- attribute on a standard HTML tag

In the component you pass a data- attribute to carry the data on the event triggering element where you can grab it in the client-side controller. I noticed this method didn’t work with standard components of aura like ui:button (it rejected HTML5 data- attributes on save). I’m using an anchor tag instead, and attaching it to the data-accountid attribute.

 

<aura:component controller="AccountListUtil" implements="flexipage:availableForAllPageTypes">
	<aura:attribute name="accountList" type="Account[]"/>
	<aura:registerEvent name="AccountSelected" type="ds23:AccountSelected"/>
	<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

	<ul>
		<aura:iteration items="{!v.accountList}" var="acc">
			<li>
				<a href="" data-accountid="{!acc.Id}" onclick="{!c.handleAccountSelected}">{!acc.Name}</a>
			</li>
		</aura:iteration>
	</ul>


</aura:component>

Once inside the onclick event handler in the component’s client-side controller, we can grab the element from the event parameter with event.target. From here we have the element and can use standard Javascript methods to manipulate or inspect the element. Because HTML5 data attributes start with data-, and Javascript rightfully sees “-” as a minus operator, we have to grab the attribute with the .getAttribute method.

 

({
	handleAccountSelected : function(component, event, helper) {
		var accountId = event.target.getAttribute('data-accountid');

		var appEvent = $A.get("e.ds23:AccountSelected");
		appEvent.setParams({ "accountId": accountId });
		appEvent.fire();
	},
		doInit: function(component, event, helper) {
		helper.getAccountList(component);
	}
})

 

Option 2: Passing data with another component and aura:attribute

This is the option I chose when fixing my entry, and the reason I chose it was to keep my application modular. I’ve been developing in Meteor for some time now, and as a result, I tend to write components more often than before (Meteor is heavily component based). I like this solution for re-usability, but both solutions work well from my experiences.

 

<aura:component controller="AccountListUtil" implements="flexipage:availableForAllPageTypes">
	<aura:attribute name="accountList" type="Account[]"/>
	<aura:registerEvent name="AccountSelected" type="ds23:AccountSelected"/>
	<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

	<ul>
		<aura:iteration items="{!v.accountList}" var="acc">
			<li>
				<c:AccountView accountId="{!acc.Id}" name="{!acc.Name}"/>
			</li>
		</aura:iteration>
	</ul>
</aura:component>

 

The main account list component passes the account’s Id and Name fields into a second component that has aura:attributes setup to receive each. The account view component then uses those attributes to display the data. Note: You could pass in an entire Account SObject instead and have this component do much more.

 

<aura:component >
	<aura:attribute name="accountId" type="Id"/>
	<aura:attribute name="name" type="String"/>

	<ui:outputText value="{!v.name}" click="{!c.handleAccountSelected}"/>
</aura:component>

 

On the element of the component that displays the account name, I setup a click handler to process when someone clicked on an account. In the account view’s client-side controller we can now access the attributes containing the account’s Id and Name with the component.get method using the “v.[ATTRIBUTENAME]” parameter.

 

({ 
	handleAccountSelected : function(component, event, helper) {
		var accountId = component.get("v.accountId");

		var appEvent = $A.get("e.ds23:AccountSelected");
		appEvent.setParams({ "accountId": accountId });
		appEvent.fire();
	}
})

 

Summary

With both methods we end up with an accountId variable in the client-side controller.  Once we have that attribute value, we just need to wire up the rest of the challenge and send the event message to the other components (another post, another day).

If you didn’t get a chance to try these challenges out during Dreamforce 2015, I posted the challenge cards to Imgur for later reference.  Definitely check out the minihacks at the DevZone next year, it took me a bit of time, but the real world examples and hands on time were worth every second.