How We Can Use Third Party JavaScript Libraries With Lightning Components?

How We Can Use Third Party JavaScript Libraries With Lightning Components?

Third-party Libraries are used by most of the developers nowadays because Third-party libraries provide quick and easy work around that can save you a lot of time and help you avoid some lines and efforts while writing codes.

Third-party libraries usually fall in one of the following categories:
DOM manipulation libraries ( ex. jQuery, etc.)
Specialized Utility Libraries (ex. moment.js, numeral.js, etc)
UI Libraries (ex. Bootstrap, jQuery UI, etc.)
Data Visualization Libraries (ex. D3, Chart.js, Leaflet, etc.)
MVC Frameworks (ex. React, Angular, etc.)
How to use third party libraries in lighting components-

There is a whole lot of powerful features which are provided by the Lightning Framework. In lighting components, Functionalities by your library might not always work.
In lightning component, we need to add these libraries to a static resource, and then we can include the library by using tag <ltng:require>
Upload everything in zip format under static resources. And use them in <ltng:require> tag.

Example:-
<ltng:require styles=”{!$Resource.YourCSSResource}” scripts=”{!$Resource.YourJSResource}” afterScriptsLoaded=”{!c.afterScriptsLoaded}”/>

afterScriptsLoaded attribute is used to execute some javascript method after the script is loaded.
USE SCRIPTS
To include a JavaScript library that you’ve uploaded as a static resource, use a <ltng:require> tag in your .cmp or .app markup.
Using styles attributes, you can include the .css resources into the component or app and be using scripts attribute you can include the javascript resources into the component or page.
Here is an Example of aura component:

<aura:component>
<ltng:require styles=”{!$Resource.YourCSSResource}” scripts=”{!$Resource.YourJSResource}” afterScriptsLoaded=”{!c.libLoaded}” />
<div class=’mynamespace’>
<div class=”dropdown”>
<ul class=”dropdown-menu” role=”menu” aria-labelledby=”mLabel”>
<li role=”presentation”><a role=”menuitem” href=””>Action</a></li>
<li role=”presentation”><a role=”menuitem” href=””>Another action</a></li>
</ul>
</div>
</div>
</aura:component>

Class mynamespace, dropdown, dropdown-menu would be defined into the libraries.
This is the method of how one can use JS Function which will always execute after loading of the script.

({
libLoaded: function(component, event, helper) {
alert(‘ready to go’);
}
})

Here is the example of JQuery sortable. We have to add the JQuery resource in the page and use functions to perform the functionality.

USS CSS FRAMEWORKS

You can use bootstrap classes for CSS. After adding the Bootstrap resource, you need to add the class on the element.

Steps to include bootstrap in your lightning:
Download the salesforce.com optimized Bootstrap package.
Unzip that package and go to Setup > Build > Develop > Static Resources and click New.
Specify bootstrap as the Name, then click the Choose File button, and select the bootstrap.css in the dist/CSS directory of the unzipped bootstrap folder.

After adding bootstrap in static resources, you can use the classes of bootstrap to your component elements.
Ex:

<div class=”navbar-header”>
<a href=”#” class=”navbar-brand”>Accounts Details</a>
</div>

So, this is how you can implements the standard UI by third party libraries with your lightning components.

Aura Basics

Aura Basics

I have been working a lot on Salesforce Lightning framework recently and completed more than 5 big small projects in converting Salesforce classic apps into making them lightning ready. Let me summarize what I have learned recently.

What is Aura?

Aura is a UI framework for developing dynamic web apps for mobile and desktop devices.Aura supports partitioned multi-tier component development that bridges the client and server. It uses JavaScript on the client side and Java on the server side.

The screenshot below merely give you a hint of the look and feel of an Aura App:

 What is an APP?
The line just above the screenshot “look and feel of an Aura APP”. The word APP(bold) is like container in Aura i.e. it holds the component which is having the fields and button in it. Let’s get into little bit technical explanation of the above screenshot. The component file will have the .cmp extension whereas App will have the .app extension.

Component aura_basic (aura_basic.cmp)


<aura:component >

<!-- Below div is used for header designing -->

<div class="slds-page-header" role="banner">

     <div class="slds-grid">

       <div class="slds-col">

         <p class="slds-text-heading--label">Aura</p>

         <h1 class="slds-text-heading--medium">Component</h1>

       </div>

     </div>

   </div>

<!-- this form is being design so as to create complete  input form -->

    <form class="slds-form--stacked">     

<div class="slds-form-element slds-is-required">

         <div class="slds-form-element__control">

             <ui:inputText aura:id="expname" label="Input Text Field"  class="slds-input" labelClass="slds-form-element__label"/>

         </div>

    </div>
    <div class="slds-form-element slds-is-required">

         <div class="slds-form-element__control">

             <ui:inputNumber aura:id="amount" label="Number Field"  class="slds-input" labelClass="slds-form-element__label"/>
         </div>

     </div>
     <div class="slds-form-element">

         <div class="slds-form-element__control">

             <ui:inputDate aura:id="expdate" label="Date Field" class="slds-input" labelClass="slds-form-element__label" displayDatePicker="true"/>

         </div>

     </div>
     <div class="slds-form-element">

         <ui:inputCheckbox aura:id="reimbursed" label="Checkbox" class="slds-checkbox" labelClass="slds-form-element__label"/>

     </div>
     <div class="slds-form-element">

         <ui:button label="Submit" class="slds-button slds-button--brand" />

     </div>
    </form>

</aura:component>

 

 APP(Aura_BasicAPP.app):

<!– “force: slds”  attribute is used to give the page as lightning effect–>

<aura:application extends=”force:slds”>

<c:aura_basic />

</aura:application> 

 

Lightning Bundle:

Now let me introduce you all to the term Lightning Bundle. Lightning Bundle basically, a collaborative name of the following files:

  • Component
  • Controller JS File (Client-Side JavaScript file)
  • Helper JS File (Server-Side JavaScript file)
  • Style File (CSS file)
  • Renderer
  • Documentation
  • SVG (Depreciated)

We basically work on the first four files (Bold). SVG is used for icons but it is outdated and salesforce now is introducing lightning icons instead.

Let’s talk about Component, Controller JS, Helper JS and Style file individually.

Component: Components are the self-contained and reusable units of an app. They represent a reusable section of the UI and can range in granularity from a single line of text to an entire app.

A component can contain other components, as well as HTML, CSS, JavaScript, or any other Web-enabled code. This enables you to build apps with sophisticated UIs.

Controller JS: A client-side controller handles events within a component. It’s a JavaScript resource that defines the functions for all of the component’s actions. Client-side controllers are surrounded by brackets and curly braces to denote a JSON object containing a map of name-value pairs.


({

myAction : function(component, event, helper){

// add code for the action

}

}) 

 

Each action function takes three parameters:

  • component—The component to which the controller belongs.
  • event—The event that the action is handling.
  • helper—The component’s helper, which is optional. A helper contains functions that can be reused by any JavaScript code in the component bundle.    

Helper JS: A helper resource is part of the component bundle and is auto-wired via the naming convention, <componentName>Helper.js. To create a helper using the Developer Console, click HELPER in the sidebar of the component. This helper file is valid within the scope of the component to which it’s auto-wired.

The following code shows you how to call the updateItem helper function in a controller, which can be used with a custom event handler.

Controller JS File :


({

newItemEvent : function(component, event, helper){

helper.updateItem(component, item, callback);

}

})

 

Helper JS FIle :


({

updateItem : function(component, item, callback){

//Update the items via a server-side action

var action = component.get(“c.saveItem”);

action.setParams({“item” : item});

//Set any optional callback and enqueue the action

if (callback){

action.setCallback(this, callback);

}

$A.enqueueAction(action);

}

})

 

CSS File : Style your components with CSS. Let’s look at a sample helloHTML.cmp component. The CSS is in helloHTML.css.

 

Component Source:


<aura:component>

<div class=”white”>

Hello, HTML!

</div>

<h2>Check out the style in this list.</h2>

<ul>

<li class=”red”>I’m red.</li>

<li class=”blue”>I’m blue.</li>

<li class=”green”>I’m green.</li>

</ul>
<br/>
</aura:component>

CSS Source:


.THIS {

background-color: grey;

}

.THIS.white {

background-color: white;

}

.THIS .red {

background-color: red;

}

.THIS .blue {

background-color: blue;

}

.THIS .green {

background-color: green;

}

 

Complete Example:
Let’s have a glimpse of Aura where on submitting the Account Name you will get all the contacts related to that Account.

APPLICATION:


<aura:application extends=”force:slds”>

<c:GetContactList />

</aura:application>

 

COMPONENT:


<aura:component Controller=”ContactListAura”>

  <aura:attribute name=”contList” type=”Object[]” />

<div class=”slds-page-header” role=”banner”>

<div class=”slds-grid”>

<div class=”slds-col”>

<p class=”slds-text-heading–label”>Aura</p>

<h1 class=”slds-text-heading–medium”>Component</h1>

</div>

</div>

</div>

<form class=”slds-form–stacked”>

<div class=”slds-form-element slds-is-required”>

<div class=”slds-form-element__control”>

<ui:inputText aura:id=”accName” label=”Input Text Field”  class=”slds-input” labelClass=”slds-form-element__label” placeholder=”Enter Account Name”/>

</div>

</div>

<div class=”slds-form-element”>

<ui:button label=”Submit”  class=”slds-button slds-button–brand” press=”{!c.getSubmit}” />

</div>

<table class=”slds-table slds-table_bordered slds-table_cell-buffer”>

<thead>

<tr class=”slds-text-title_caps”>

<th scope=”col”>

<div class=”slds-truncate” title=”Name”>Name</div>

</th>

</tr>

</thead>

<tbody>

<aura:iteration items=”{!v.contList}” var=”item”>

           <tr>

                <td>{!item.Name}</td>

            </tr>

    </aura:iteration>

</tbody>

</table>

</form>

</aura:component>

 

CONTROLLER:


({

getSubmit : function(component, event, helper){

helper.getContactListHelper(component, event, helper);

},

})

 

HELPER:


({

getContactListHelper : function(component, event, helper) {

var action = component.get(“c.getContactLists“);

action.setParams({

“nm” : component.find(“accName“).get(“v.value”)

});

action.setCallback(this, function(a){

component.set(“v.contList“, a.getReturnValue());

console.log(‘v.contList ‘+component.get(“v.contList”));

});

$A.enqueueAction(action);

}

}

})

APEX CLASS:


public class ContactListAura {

@AuraEnabled

public static List<Contact>getContactLists(String nm){

system.debug(‘nm–> ‘+nm);

if(!String.IsBlank(nm)){

return [SELECT ID,Name FROM CONTACT WHERE Account.Name=:nm];

}

return null;

}

}

 

Flow of Page :

<aura:attribute name=”contList” type=”Object[]” />

The very first line after <aura:component> will be use to display the data on the Component. When I have entered the Account Name to the Input Text and click “Submit”. It has evoked getSubmit method of Client-Side JS i.e. Controller JS method.

In Controller JS.

helper.getContactListHelper(component, event, helper);

will call the HELPER JS method i.e. Server-Side JS. In Helper JS the line

var action = component.get(“c.getContactLists”);

Give the reference of the AuraEnabled method in the Apex class (We have set the Controller attribute of aura:component tag with the name of ApexClass Name.)


action.setParams({

           “nm” : component.find(“accName”).get(“v.value”)

       });

 

Will set the set the Parameter of Apex Method with the Value which we have inserted in the input text having aura Id as accName.


action.setCallback(this, function(a){

           component.set(“v.contList”, a.getReturnValue());

           console.log(‘v.contList ‘+component.get(“v.contList”));

       });

 

This line will set the variable which we will be using on the component to display the data.

In the above snippet, “this” keyword is used to refer the current component which has invoked the complete execution.

$A.enqueueAction(action);

This line is most important as it is responsible for getting the returning result from apex class and set it to the attribute/variable which we are going to use the component.

Note: Alphabet v is used to access variables whereas c is used to access controllers.

Difference Between SLDS & Aura Components

Difference Between SLDS & Aura Components

As we all know Lightning has been added to Salesforce very recently and it is the future of Salesforce. So a lot of people who are new to Lightning but have the curiosity to learn it sometimes find it difficult to understand.I realized that the best way to start would be by describing what are the differences between Salesforce Lightning Design System and Salesforce Lightning Components Framework. So in this blog, I will try to explain what are the major differences between Salesforce Lightning Design System and Salesforce Lightning Components Framework and hopefully, it will clear out most of the doubts that a new developer is having regarding The Lightning Framework.

Introduction to Salesforce Lightning Design System

It is a CSS framework which is used for creating dynamic web apps.   By Using SLDS  We can make our apps responsive and can also provide  Look and feel similar to the Lightning Experience.

Steps to install the SLDS Unmanaged Packaged: For using SLDS in our Salesforce org. First We need to install the Latest Salesforce Lightning Design System unmanaged packaged as a static resource zip file.

  • Log into your Developer Org.
  • Open the Salesforce Lightning Design System in a Separate Window.
  • Go to the Download Section.
  • Click on the latest unmanaged package
  • Now click on Install it.

After Completing the above steps the package will get installed into your org.

Benefits of using Salesforce Lightning Design System:

  • By using SLDS it’s easier to build apps which are responsive and also have the look and feel similar to 260662Lightning Experience.
  • It is compatible with multiple browsers like  Google Chrome, Latest Mozilla Firefox,   Latest  Safari Latest Internet Explorer 11 and above.
  • It provides a robust grid system because of which It is easier to build responsive layouts that work elegantly across different screen sizes.
  • The CSS is fully namespaced with the slds- prefix to avoid CSS conflicts.

Introduction To Lightning Components Framework 

It is built using Open Source Aura Framework. By Using Aura Framework We can build apps completely independent of the Data present in our Salesforce org.

Benefits Of Lightning Components Framework:
  • It provides an out-of-the-box set of components for building apps
  • When we use Lightning Components  Framework We do not need to worry about the optimization of our apps for different devices as  Components take care of that by themselves.
  • It uses the stateful client and stateless server architecture which uses  Javascript on the client side for managing UI component metadata and Application data.
  • It uses an Event Driven architecture which enhances the decoupling  Between components.
  • It supports the latest browser technology such as HTML5, CSS3.
 Use Of Developer Console:

The Developer Console provides us the tools which are Used for developing Components and applications. By Using Developer Console We can perform the following functions

  • We need to use File option for either creating or opening the following Lightning Resources:
    • Application
    • ComponentInterface
    • Event
  •  We need to use the sidebar to create or open client-side resource.
  • Component
  • Controller
  • Helper
  • Style
  • Documentation
  • Render
Differences Between SLDS and Aura

free-Vector-File-EPS-87250 FRAMEWORK:

  • First of all Salesforce Lightning Design System is a CSS-based framework.
  • Used for creating dynamic apps while on the other hand Lightning Components Framework uses aura components for creating the dynamic apps.

CONTROLLERS:

  • In the case of Lightning Components Framework, We need to write two Controllers one for client side and the other one for server side. while in the case of Salesforce Lightning Design System we need to write only one controller which will be a server side controller.

Note: Java scriptThe client side Controller that we will write for Lightning Components Framework would be written using javascript while the server side controller will be written using apex.

PPO3aSALESFORCE DATA:

  • By using Lightning Components Framework we can build an app which will be completely independent of Salesforce data while in the case of Salesforce Lightning Design System(SLDS) do need some Salesforce data which can be accessed using Javascript Remote Objects.

CLIENT CENTRIC:

  • Lightning Components Framework is client-side centric while Salesforce Lightning Design System are server-side centric.

PERFORMANCE:

  • Because Lightning Components are client side centric therefore they are better.
  • Equipped for creating dynamic web apps then Salesforce Lightning Design    System.

MOBILE FRIENDLY:

  • As mentioned above  Lightning Components are client side centric therefore they are more mobile friendly as compared to the Salesforce Lightning Design  System(SLDS).

EVENT-DRIVEN PROGRAMMING

  • In Lightning Component Framework Event Driven programming such as Javascript and Java swing is used for writing helpers which respond to Interface events as they occur but in Salesforce Designing System there is no such concept of Event Driven Programming.

COMPLEXITY

  • Because In the Lightning Component Framework we need to create two controllers and also it uses  event-driven programming language such as  Javascript, therefore, it is much for complex as compared to the Salesforce Lightning Design System(SLDS)

 

Pin It on Pinterest