Extend Salesforce1 Using the Lightning Component Framework

The Lightning Component framework empowers you to extend the Salesforce1 mobile app with your own custom components. Using JavaScript on the client side and Apex on the server side, the possibilities for extending Salesforce1 are endless.

By now you may have heard that we made the UI framework behind Salesforce1 mobile app available to Force.com developers. The Lightning Component framework empowers you to extend Salesforce1 with your own custom components. Components are reusable sections of the UI and can range in granularity from a single line of text to an entire app. This framework is based on the open-source Aura Framework available at https://github.com/forcedotcom/aura.

The Lightning Component framework encapsulates components while enabling them to communicate their data using events. Components can contain HTML or other components, and their logic is maintained in JavaScript controllers, which react to events and use component attributes and expressions to display data. You can handle user interactions using these client-side controllers, and persist data updates using an Apex controller.

The Lightning Component Framework enables you to extend Salesforce1 easily.

Build Apps Lightning Fast

Load Record Data in a Lightning Component

Let’s say you have a custom object to track your expenses and you’re building a custom interface to let users quickly update whether the expense has been reimbursed. You can load the expense data using an Apex controller class that looks like this.

public class ExpenseController {
    @AuraEnabled
    public static List<Expense__c> getExpenses() {
        return [SELECT id, name, amount__c, client__c, date__c,
        reimbursed__c, createdDate FROM Expense__c];
    }
}

@AuraEnabled enables client- and server-side access to the Apex controller method, which is wired to the following component via the controller attribute on the aura:component tag. namespace refers to your registered namespace prefix.

<aura:component controller="namespace.ExpenseController">
    <!-- Use an attribute to load record data -->
    <aura:attribute name="expenses" type="namespace.Expense__c[]"/>

   <!--Handle component initialization -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <aura:iteration items="{!v.expenses}" var="exp">
        <p>{!exp.name}, {!exp.namespace__Client__c}, {!exp.namespace__Amount__c}</p>
        <!-- Other fields here -->
    </aura:iteration>
</aura:component>

Component attributes are typed fields that are set on a specific instance of a component,
and can be referenced from within the component’s markup using an expression syntax. Attributes enable you to make components more dynamic. Our component has an expenses attribute, defined by the aura:attribute tag. We will populate this attribute with the data returned by the Apex controller.

aura:iteration iterates over the list of expenses and renders them in the component. The expression {!v.expenses} wires up the component to the expenses object. var="exp" denotes the name of the variable to use for each item inside the iteration. {!exp.namespace_Client__c} represents data binding to the client field in the expense object.

Load the expense data on component initialization in the following client-side controller. The init event enables you to call a client-side controller action when the component is initialized. In this case, we call the doInit() action via the {!c.doInit} expression, which calls the getExpenses() method of the Apex controller via component.get("c.getExpenses").

({
    doInit : function(component, event, helper) {
        // Create an instance of the Apex controller method
        var action = component.get("c.getExpenses");

        // Set the response data on the component attribute 
        action.setCallback(this, function(a) {

            // Error handling omitted for brevity
            component.set("v.expenses", a.getReturnValue());
        });

        // Add the server-side action to the queue of actions to be executed
        $A.enqueueAction(action);
    }
})

All action calls are asynchronous and run in batches to minimize network traffic. Rather than sending a separate request for each individual action, the framework processes the event chain and executes the action in the queue after batching up related requests.

See how easy it is to create Lightning components? From there, you can use some of the out-of-the-box input and output components to get and display user input, using an Apex controller method to insert or update data changes. The possibilities for extending Salesforce1 with Lightning components are endless.

For the rest of the tutorial and tips on using Lightning components, see the Lightning Components Developer’s Guide.

Published
October 21, 2014

Leave your comments...

Extend Salesforce1 Using the Lightning Component Framework