Base Lightning Components

Lightning Components has been released from a long time now and salesforce is promoting them big time. They are supposed to be replacing visualforce pages since everyone is using lightning experience now because of that everyone wants lightning components not VF pages. For people who are good in frameworks like AngularJS, Backbone or good in JavaScript or any MVC pattern frameworks it is easy for them to pick up lightning components.

But for people who are comfortable using <apex:pageBlock/> <apex:something/>, etc where VF tags take cares of the CSS and provide necessary attributes to play with. It will be a big change But don’t worry this is what I love about Salesforce they always make developers life easy. There is something called Base Lightning Components which will save you from addition external css, adjusting css and attribute actions etc. Enough talking let see some code

Lightning Bases Components  Example

	<lightning:button label="Save" iconName="utility:database" iconPosition="left" onclick="{!c.submitForm}"/>

In place of writing full html and putting all that css you have to just put tags, just like your VF tags.

There are list of tags available right now

  • Button
  • ButtonIcon
  • Spinner
  • Layout
  • LayoutItem
  • Tab
  • TabSet
  • Input
  • Card

And etc. etc. I know there are not many but hang in there. Using these base components tags I have designed a 3 tab Lightning Component which looks kind of cool where I know I have not added any CSS.

screen-shot-2016-10-23-at-12-47-19-amscreen-shot-2016-10-23-at-12-47-27-amscreen-shot-2016-10-23-at-12-47-34-am

Click on the image to see more

This is a working component where I tried to use all the Base Lightning Component tags almost.

I have created lot of lightning components and trust me you have to put lot of effort on the UI, on the other hand controller and handler are easy to manage but with this you can quickly design a basic lightning component.

Component Code:

<aura:component controller="Customer360Lightning" implements="force:appHostable,flexipage:availableForAllPageTypes">
 <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
 	<lightning:spinner variant="brand" size="large" aura:id="loading" class="slds-hide" />
 <aura:attribute name="accounts" type="Account[]"/>
 <aura:attribute name="account" type="Account" default="{ 'sobjectType': 'Account',
 'Name': '',
 'AnnualRevenue': '0',
 'NumberofLocations__c':'0',
 'Industry':'Energey',
 'Description':''}"/>
 	<lightning:tabset onselect="{!c.changeTab}">
 	<lightning:tab label="New Account" id="newAccount">
 <form>
<fieldset>
 <legend>Select your favorite color:</legend>
 	<lightning:input type="text" label="Name" name="Name" value="{!v.account.Name}"/>
 	<lightning:input type="number " label="Annual Revenue" formatter="currency" step="0.01" name="rev" value="{!v.account.AnnualRevenue}" aura:id="rev"/>
 	<lightning:input type="number" label="Number of Locations" name="numloc" value="{!v.account.NumberofLocations__c}" aura:id="numloc"/>
 	<lightning:select value="{!v.account.Industry}" name="select1" label="Select an item">
<option value="Energey">Energey</option>
<option value="Banking">Banking</option>
<option value="Finance">Finance</option>
<option value="Healthcare">Healthcare</option>
<option value="Insurance">Insurance</option>
<option value="Media">Media</option>
 </lightning:select>
 	<lightning:textarea name="myTextArea" value="{!v.account.Description}" label="Comments" maxlength="300" /></fieldset>
	<lightning:buttonGroup >
 	<lightning:button label="Refresh" iconName="utility:refresh" iconPosition="left"/>
 	<lightning:button label="Edit" iconName="utility:edit" iconPosition="left"/>
 	<lightning:button label="Save" iconName="utility:database" iconPosition="left" onclick="{!c.submitForm}"/>
 </lightning:buttonGroup>
 </form>
	<lightning:card footer="Please like and comment if you like my blog and want to post more cool blogs">
 <a href="" target="_blank" >Base lightning Components</a>
 </lightning:card>
 </lightning:tab>
 	<lightning:tab label="All Account" id="allAccount">
 <aura:iteration items="{!v.accounts}" var="acc">
 	<lightning:layout horizontalAlign="spread" verticalAlign="center">
 	<lightning:layoutItem size="4" ></pre>
<div>{!acc.Name}</div>
</lightning:layoutItem> 	<lightning:layoutItem size="2" >
<div>{!acc.Type}</div>
</lightning:layoutItem> 	<lightning:layoutItem size="2" >
<div>{!acc.Type}</div>
</lightning:layoutItem> 	<lightning:layoutItem size="2" >
<div>{!acc.Website}</div>
</lightning:layoutItem> 	<lightning:layoutItem size="2" >
<div></div>
</lightning:layoutItem> </lightning:layout>

<hr style="margin:0px;"/>

</aura:iteration> </lightning:tab> 	<lightning:tab label="Activity" id="activity"> 	<lightning:card footer="All Activities are done Footer"> <aura:set attribute="title"> 	<lightning:badge label="Hello"/> </aura:set> <aura:set attribute="actions"> 	<lightning:buttonMenu alternativeText="Toggle menu"> 	<lightning:menuItem label="New" value="New" iconName="utility:record_create" /> 	<lightning:menuItem label="Past Activities" value="Past" iconName="utility:deprecate" /> </lightning:buttonMenu> 	<lightning:button label="Calender" iconName="utility:event" iconPosition="left"/> 	<lightning:button label="FollowUp" iconName="utility:new" iconPosition="left"/> </aura:set>

</lightning:card>

</lightning:tab>

</lightning:tabset>

</aura:component>

Controller Code :-

({
 doInit : function(component, event, helper) {
 var loading = component.find("loading");
 $A.util.toggleClass(loading, "slds-hide");
 //helper.getAllAccounts(component);
 },
 submitForm : function(component, event, helper){
 var loading = component.find("loading");
 $A.util.toggleClass(loading, "slds-hide"); 
 var account = component.get("v.account"); 
 helper.saveAccount(component,account); 
 },
 changeTab : function(component, event, helper){
 var tab = event.detail.selectedTab;
 var tabId = tab.get('v.id');
 if(tabId === 'allAccount'){
 var loading = component.find("loading");
 $A.util.toggleClass(loading, "slds-hide");
 helper.getAllAccounts(component);
 }

 }
})

Handler Code :-

({
 getAllAccounts : function(component) {
 var action = component.get("c.getAllAccounts");
 action.setCallback(this, function(response) {
 var state = response.getState();
 if (component.isValid() && state === "SUCCESS") {
 component.set("v.accounts", response.getReturnValue()); 
 var loading = component.find("loading");
 $A.util.toggleClass(loading, "slds-hide");
 }
 });
 $A.enqueueAction(action);
 },
 saveAccount : function(component,acc){
 var action = component.get("c.createAccount");
 action.setParams({
 "acc": acc
 });
 action.setCallback(this, function(response) {
 var state = response.getState();
 if (component.isValid() && state === "SUCCESS") {
 var loading = component.find("loading");
 $A.util.toggleClass(loading, "slds-hide"); 
 }
 });
 $A.enqueueAction(action);
 }
})

Apex Code :

// All Accounts
 @AuraEnabled
 public static List getAllAccounts(){
 try{
 return [SELECT 
 Id,Name,Type,Industry,Website,LastModifiedDate 
 FROM Account LIMIT 10];
 }catch(Exception e){
 system.debug(e.getMessage());
 return null;
 } 

 }

 // Create Account
 @AuraEnabled
 public static void createAccount(Account acc){
    try{
 insert acc;
 }catch(Exception e){
 system.debug(e.getMessage());
 } 

 }

Reference Links

Base Lightning Component Tags

Don’t forget to like or comment.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s