Lightning Components are not just static markup; they interact with Salesforce data to send data back and forth between a browser and Salesforce servers.
JavaScript is used in web applications to add interactivity to web pages. It allows you to manipulate DOM elements (by applying new styles, removing styles, changing HTML markup), communicate with the server to send data back and forth, or pass data to the server, add animations, add visual effects, add audio effects, and many other things.
A Lightning Component bundle comprises JavaScript controllers and helpers that allow you to write client-side JavaScript to add interactivity and retrieve and push data to Salesforce servers.
When you create a Lightning bundle, let's assume that the name of the component is YouTube Search component, a JavaScript controller file is created with the name youtubeSearchController.js, and a JavaScript helper file is created with the name youtubeSearchHelper.js.
Controller files consist of methods and are invoked from the Component Markup via actions or event handlers. Component methods usually call helper functions. Component helper files consist of all the reusable code, that can be called from a JavaScript controller method, or a helper method can call other methods in the helper file using the this keyword. Later, we will see that even a Renderer method can reuse methods from a helper file.
Let's look at a short example that demonstrates how we wire up a JavaScript controller, helper, and Component Markup. Let's assume we have a small amount of text input and a Search button. Once the user inputs the search keyword, we display the entered text.
A rough wireframe for the preceding requirement is as follows:
Let's create the component bundle and use the component reference document. In your Salesforce org, you can use https://<myDomain>.Lightning.force.com/componentReference/suite.app?page=home to refer to the docs. Note that <myDomain> should be replaced with the domain name of your Salesforce instance.
The documentation is also available on the developer site at: https://developer.Salesforce.com/docs/component-library/.
The Component markup code for the preceding example is as follows. Observe that we are using lighnting:layout and Lightning: layoutItem, which we learned about in the previous section, to create the layout. Let's name the component bundle youtubeSearch. The youtubeSearch.cmp file will be as follows:
<!-- youtubesearch.cmp-->
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
<div class="c-container">
<Lightning:layout multipleRows="true" horizontalAlign="center" verticalAlign="center">
<Lightning:layoutItem flexibility="auto" size="6">
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-id-1">Enter search term</label>
<div class="slds-form-element__control">
<input type="search" id="text-input-id-1" class="slds-input" placeholder="Enter Search Term" aura:id="searchBox"/>
</div>
</div>
</Lightning:layoutItem>
<Lightning:layoutItem flexibility="auto" size="4" padding="horizontal-small">
<Lightning:button variant="brand" label="Search" title="" onclick="{! c.handleClick }" class="c-btn"/>
</Lightning:layoutItem>
<Lightning:layoutItem flexibility="auto" padding="around-large" size="6">
<p> You searched for </p>
</Lightning:layoutItem>
</Lightning:layout>
</div>
</aura:component>
Add the following to the CSS file of the bundle to adjust the margin of the button. The file that's modified is youtubeSearch.css:
.THIS.c-container {
padding-top :50px;
}
.THIS.c-btn{
margin-top :15px;
}
To view the result, create a shell Lightning Application called youtubeSearchApp. This will look as follows:
<!-- youtubeSearchApp.app -->
<aura:application extends="force:slds">
<c:youtubeSearch />
</aura:application>
The application with static markup should look like the following:
Let's add a functionality that, once a user clicks on the Search button, changes the text at the bottom depending on the search term.
To add this interactivity, we will need the following:
- An attribute to hold the search term and the Expression syntax to refer to the attribute in the markup.
- A click action on the Search button that calls a JavaScript controller action.
- A simple helper file that sets the attribute value equal to the search term entered in the input text box.
- Let's update the Component markup to add the attribute and the Expression in the markup to refer the attribute. Also notice that we have added aura:id to the input element. Observe the code lines that are highlighted in bold:
<!-- youtubesearch.cmp-->
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
<aura:attribute name="searchTerm" type="String" />
<div class="c-container">
<Lightning:layout multipleRows="true" horizontalAlign="center" verticalAlign="center">
<Lightning:layoutItem flexibility="auto" size="6">
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-id-1">
Enter search term
</label>
<div class="slds-form-element__control">
<input type="search" id="text-input-id-1" class="slds-input" placeholder="Enter Search Term" aura:id="searchBox"/>
</div>
</div>
</Lightning:layoutItem>
<Lightning:layoutItem flexibility="auto" size="4" padding="horizontal-small">
<Lightning:button variant="brand" label="Search" title="" onclick="{! c.handleClick }" class="c-btn"/>
</Lightning:layoutItem>
<Lightning:layoutItem flexibility="auto" padding="around-large" size="6">
<p> You searched for {!v.searchTerm} </p>
</Lightning:layoutItem>
</Lightning:layout>
</div>
</aura:component>
- The youtubesearchController.js file is shown as follows. Notice how we do not write a lot of logic in the controller file. It's usually kept light and invokes helper functions present in the youtubesearchHelper.js file.
//youtubesearchController.js
({
handleClick : function(component, event, helper) {
helper.setSearchTerm(component, event);
}
})
- The helper function is as follows:
//youtubesearchHelper.js
({
setSearchTerm : function(component, event) {
var searchTerm = component.find('searchBox').getElement().value;
console.log(searchTerm);
component.set("v.searchTerm",searchTerm);
}
})
- As expected, the output is the following:
There are a couple of things you might have noticed that might be new to you in JavaScript helper code:
- To locate a DOM element by ID, we used the component.find() function, and then we can use DOM functions
- To set the attribute, the syntax is as follows:
component.set(<v.attributename>,<attributevalue>)
attributevalue is the value you want to set
- Note that, to get the value of the attribute, the syntax is:
component.get("v.attributename");