Salesforce Lightning Component Bundle

Salesforce Lightning Components are not just static markup, they communicate with Browser and Salesforce Servers by sending data between a browser and Salesforce servers. A Lightning Component bundle comprises JavaScript controllers and helpers that allow users to write client-side JavaScript to add interactivity and retrieve and push data to Salesforce servers.

When you create a Salesforce Lightning component bundle, and we name it as Salesforceltngcomponent, a JavaScript controller file is created with the name Salesforceltngcomponent.js, and a JavaScript helper file is created with the name Salesforceltngcomponent.js.

  • 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, adds audio effects, and many other things.

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

Now we are going to create a Lightning Component bundle, in this example eew use lightning:layout and lightning:layoutItem components.

The Salesforceltngcomponent.cmp will be as shown below:

<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-inputid-
                                                                     1">Enter search term</label>
                        <div class="slds-form-element__control">
                            <input type="search" id="text-input-id-1" class="sldsinput"
                                   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>

Salesforceltngcomponent.css

.THIS.c-container {
padding-top :20px;
}
.THIS.c-btn{
margin-top :10px;
    border:2px;
}

Salesforceltngcomponentapp.App

<aura:application extends="force:slds" >
    <c:Salesforceltngcomponent/>
</aura:application>

Result

For the above markup, we have to add some functionality like changing the text at the bottom depending on the search term. To add such functionalities, we have to add an attribute that hold the search term  and click action on the search button that calls JavaScript controller action.

And also we have to add helper file that sets the attribute value equal to the search term entered in the input text box.

Now we will update our previous Salesforceltngcomponent.cmp by adding aura:id to the input values. Check the code given below

<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 to search in https://www.crmsalesforcetraining.com
                    </label>
                    <div class="slds-form-element__control">
                        <input type="search" id="text-input-id-1" class="slds-input"
                               placeholder="crmsalesforcetraining.com" 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>

SalesforceltngcomponentController.js 

({
handleClick : function(component, event, helper) {
helper.setSearchTerm(component, event);
}
})

SalesforceltngcomponentHelper.js

({
setSearchTerm : function(component, event) {
var searchTerm =
component.find('searchBox').getElement().value;
console.log(searchTerm);
component.set("v.searchTerm",searchTerm);
}
})

Result output

Salesforce Lightning Component Bundle 1

Scroll to Top