SLDS

Multiple Actions Batching in Lightning Framework

Posted on Updated on

Hi All,

Today I am going to tell you about multiple actions batching when you are working with multiple Lightning Components in an Application.

Most component based technologies allow independent components to maintain a communication channel with their back-end services unfortunately this can result in redundant messaging specially when it constrain by narrow band width on mobile devices.

Lightning Component Framework is design to optimize calls to Salesforce back-end. There could be many separate actions fired from multiple components in any application but all the actions are processed in a single batch this allow us for very efficient processing.

batchingevents

As actions are instantiated and configured they are enqued in a batch.The framework execute each action in the queue after batching up related request.

Now rather then sending separate request for each individual action a single call is made to the server with batch of asynchronous actions each containing the information they need and fire multiple apex processes.

As it is possible for certain actions to be fired more than once the framework also can ensure that only the most recent instance of any action will be batched for processing.

The related action methods are invoked and the framework than gathers and sends back a batch of results again in a single call invoking all related callback functions.

Hope this will be helpful 🙂

DropBox Lightning Component

Posted on Updated on

Hi All,

Today i will be showing you DropBox Lightning Component created by me and my colleague Sushil Kumar.

Dropbox is a file hosting service operated by Dropbox, Inc., headquartered in San Francisco, California,
that offers cloud storage, file synchronization, personal cloud, and client software. There are limits in storage of files in Salesforce. If you need a secure and free storage space for your files, you can use DropBox Lightning Component to store files directly in your DropBox app from Salesforce.

Features of this Lightning Component are :

  1. You can use this component on any sObject.
  2. You can store files for a specific record.
  3. You can upload multiple files.
  4. You can delete files directly in DropBox.
  5. You can view you files.

Click here to install Manage Package in your org.

After installing package register for My Domain.

Make sure you have DropBox Account. If you don’t have you can sign up and create DropBox App as below.

Sign up Dropbox account from DropBox website.

After the Sign up login into your dropbox account and then create a Dropbox App using following steps:

  1. Go to on dropbox developer edition i.e. https://www.dropbox.com/developer
  2. Click on My Apps > Create App.
  3. Then fill all information about app and then click on create. See below screen shot.

dropbox

Manage Dropbox Key from Custom setting

Insert a record in custom setting using following steps:

  1. Navigate to Setup > Develop > Custom Settings, click on Manage of “Dropbox Key”.
  2. Click on New, than insert following value:

App Key : from DropBox App

App Secret : from DropBox App

Redirect URI : from salesforce <your domain>/apex/DropBoxOAuth or copy url from preview of DropBoxOAuth page.

isAuthentication : false

Click on Save.

Add Redirect URI in Dropbox App

To add Redirect URI, Open your Dropbox App and you must set auth2 Redirect URIs same as above Redirect URL.

That’s It.

Your final result will look like this.

Thanks. 🙂

Who Viewed Record Last Lightning Component

Posted on

Hi All,

In this article I will tell you how to create Lightning Component which shows list of users who viewed record.You can use this Lightning Component for any object whether it is a custom object or standard object.

This can be useful when trying to trace who last Viewed a record? There’s no way to do this in salesforce as of now.It would be great if you could see on a record if anyone has recently viewed it, so I thought to create this Component.

To implement this you have to do following things.
1) On any object you want to use this Lightning Component, create a new custom textarea(255) field called “Last Visited By“.
2) Set History Tracking on for this field.

When complete it will look like this.

Let’s walk through code.

LastVisitedController.apxc :

public with sharing class LastVisitedController{
    
    @AuraEnabled
    public static sObject getViewersList(String recordId, String objectName){
        System.debug('objectName = '+objectName +' recordId = '+recordId);
        
        String query = 'SELECT Id, Name, '+
                       '(Select OldValue, NewValue, Field From Histories Where Field = \'Last_Visited_By__c\' ORDER BY CreatedDate DESC) '+
                       'FROM '+objectName +' Where Id = \''+ recordId + '\' LIMIT 1' ;
        
        sObject obj = Database.Query(query);
        
        return obj;
    }
    
    @AuraEnabled
    public static void updateRecord(String recordId, String objectName){
        Datetime sdate = System.now();        //Format the datetime value to your locale        
        String sysTime = sdate.format('dd/MM/yyyy HH:mm');
    
        String query = 'SELECT Id, Name, Last_Visited_By__c '+
                        'FROM '+objectName +' Where Id = \''+ recordId + '\' LIMIT 1' ;
        
        sObject obj = Database.Query(query);
        obj.put('Last_Visited_By__c' , System.Userinfo.getFirstName() + ' '+ System.Userinfo.getLastName() +' '+ sysTime);
        update obj;
    }
    
}

The getViewersList method is used to return list of users who visited record recently. Method updateRecord is used to update “Last Visited By” field when a user visited record.

LastVisitedCmp.cmp :

<aura:component controller="LastVisitedController" implements="force:appHostable,force:hasRecordId,force:hasSObjectName,flexipage:availableForAllPageTypes">
    <ltng:require styles="/resource/SLDS/assets/styles/salesforce-lightning-design-system-vf.css"/>
    <!-- Atrribute Defination for Object Name -->
	<aura:attribute name="sObjectName" type="String"></aura:attribute>
    <!-- Atrribute Defination for Record Id -->
	<aura:attribute name="recordId" type="String"></aura:attribute>
    <!-- Atrribute Defination for Who visited -->
	<aura:attribute name="visitorsList" type="sObject"></aura:attribute>
    <!-- Event Handler for init Event-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"></aura:handler>
    <!--page header-->
    <div class="slds">
        <div class="slds-page-header">
            <div class="slds-grid">
                <div class="slds-col slds-has-flexi-truncate">
                    <div class="slds-media">
                        <div class="slds-media__body">
                            <div class="slds-grid">
                                <h1 class="slds-text-heading--medium slds-m-right--small slds-truncate slds-align-middle">Recently Visited By</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>   
        </div>
    </div>
    <!--Container-->
    <div class="container" style="overflow-y:scroll;height:300px">
        <ul class="slds-list--vertical slds-has-cards">
            <aura:iteration items="{!v.visitorsList.Histories}" var="h">
                <li class="slds-list__item">
                    <div class="slds-tile slds-tile--board">
                        <div class="slds-tile__detail">
                            <p class="slds-text-heading--medium">{!h.NewValue}</p>
                        </div>
                    </div>
                </li>
            </aura:iteration>	
        </ul>
    </div>
</aura:component>

The force:appHostable interface indicates the component can be hosted in the Salesforce1 Mobile app.
The flexipage:availableForAllPageTypes interface indicates the component can be used in App Builder.
The force:hasRecordId interface indicates the current record Id should be injected in the component’s recordId attribute.
The force:hasSObjectName interface indicates the current sObjectName should be injected in the component’s sObjectName attribute.

When the component is instantiated on the page, the current record Id and sObject are automatically injected in the recordId and sObjectName attribute. You can then make calls to the server passing the recordId and sObjectName as a parameter to retrieve or save data for that specific record.

LastVisitedCmpController.js :

({
	doInit : function(component, event, helper) {
		helper.getViewerList(component);
	},
})

LastVisitedCmpHelper.js :

({
	getViewerList : function(component) {
		var action = component.get("c.getViewersList");
        action.setParams({
            "recordId" : component.get("v.recordId"),
            "objectName" : component.get("v.sObjectName")
        });
        action.setCallback(this, function(action) {
        	component.set("v.visitorsList",action.getReturnValue());
        });
        
        $A.enqueueAction(action);
	},
    updateRecord : function(component) {
		var action = component.get("c.updateRecord");
        action.setParams({
            "recordId" : component.get("v.recordId"),
            "objectName" : component.get("v.sObjectName")
        });
        $A.enqueueAction(action);
	},
})

LastVisitedCmpRenderer.js :

({
    afterRender : function(component,helper){
        this.superAfterRender();
        helper.updateRecord(component);
    }	
})

The afterRender will be called when Component render completly. It will call helper function which updates “Last Viewed By” field of current record in the background.

🙂

Lightning Component, Remote Objects and Visualforce Page

Posted on

Hi All,

In my last post I showed JavaScript Remoting with Lightning Component. In this post I will show you other feature of VisualForce with Lighting Component which is Remote Objects. The Visual Remote Objects supports basic DML operation like create read, update and delete in JavaScript without writing even a single line of Apex code.

You can read more about Remote Objects here at Harshit Pandey’s Blog.

Let’s walk through code

JSRemoteComp.cmp :

<aura:component>
    
    <ltng:require scripts="/resource/stockfiles/stockfiles/jquerymin.js" 
                  afterScriptsLoaded="{!c.myAction}"/>
    
	<aura:attribute name="accounts" type="Account[]"></aura:attribute>
    
    <!-- REQUIRED SLDS WRAPPER -->
    <div class="slds">
        <!-- Page Header -->
        <div class="slds-page-header">
            <div class="slds-grid">
                <div class="slds-col slds-has-flexi-truncate">
                    <h1 class="slds-text-heading--medium slds-truncate" title="Account Information">Account Information</h1>
                </div>
            </div>
        </div>
        <!-- TABLE - BADGE COMPONENT -->
        <table id="tb" class="slds-table slds-table--bordered">
            <thead>
                <tr class="slds-text-heading--label">
                    <th scope="col">
                        <span class="slds-truncate">Name</span>
                    </th>
                    <th scope="col">
                        <span class="slds-truncate">Phone</span>
                    </th>
                    <th scope="col">
                        <span class="slds-truncate">Active</span>
                    </th>
                </tr>
            </thead>
        </table><!-- TABLE - BADGE COMPONENT -->
    </div><!-- REQUIRED SLDS WRAPPER -->  
</aura:component>

This Lighting Component will output Accounts passed from VisualForce Page.

JSRemoteCompController.js :

({
	myAction : function(component, event, helper) {
		var accounts = component.get("v.accounts");
        var row = '<tbody>';
        accounts.forEach(function(account) {
            row += '<tr class="slds-hint-parent">';
            row += '<td data-label="activity">';
            row += '<span class="slds-truncate">'+account.get("Name")+'</span></td>';
            row += '<td data-label="confidence">';
            row += '<span class="slds-truncate">'+account.get("Phone")+'</span></td>';
            row += '<td data-label="confidence">';
            row += '<span class="slds-truncate">'+account.get("Active__c")+'</span></td>';
            row += '</tr>';
        });
        row += '</tbody>';
        jQuery('#tb').append(row);
        
	}
})

In order to display a Lightning Component in a Visualforce page, you need to construct a simple Lightning Application that is used as the bridge between the two technologies. This needs to have a dependency on the Lightning Component that will display the content, I used JSRemote in this case.

JSRemote.app :

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="c:JSRemoteComp" />
</aura:application>

Once the app is in place, there is markup in the Visualforce page to tie things together – note that the Lightning Component is constructed dynamically via JavaScript, rather than being included in the page markup server side.

JSRemoteDemo.page :

<apex:page standardStylesheets="false" sidebar="false" showHeader="false">
    
    <!-- Lightning Resources-->
    <apex:includeScript value="/lightning/lightning.out.js" />
    <apex:stylesheet value="/resource/SLDS/assets/styles/salesforce-lightning-design-system-vf.css"/>
    
    <!-- Remote Objects definition to set accessible sObjects and fields -->
    <apex:remoteObjects >
        <apex:remoteObjectModel name="Account" jsShorthand="Warehouse" fields="Id,Name,Active__c,Phone"></apex:remoteObjectModel>
    </apex:remoteObjects>

    <!-- JavaScript to make Remote Objects calls -->
    <script>
        fetchWarehouses();
        function fetchWarehouses(){
            // Create a new Remote Object
            var wh = new SObjectModel.Warehouse();
            
            // Use the Remote Object to query for 10 warehouse records
            wh.retrieve({ limit: 100 }, function(err, records, event){
                if(err) {
                    alert(err.message);
                }
                else {
                    //Adding Lightning Component Here
                    $Lightning.use("c:JSRemote", function() {
                        $Lightning.createComponent("c:JSRemoteComp",
                              { "accounts" : records },
                              "lightningComponent",
                              function(cmp) {
                                // any further setup goes here
                        });
                    });
                }
            });
        }
    </script>
    
    <!-- Lightning Component -->
    <div id="lightningComponent"/>
    
    
</apex:page>

Output will look similar to this.

remoteobj

So That’s It.

Lightning Component, JavaScript Remoting and Visualforce Page

Posted on Updated on

Hi All,

New Winter 16 feature allows Lighting Components to be embedded inside a Visualforce Page.We know Lightning Components are used as building blocks for faster development of mobile and web app. I thought to embed Lightning Component with some of the features of VisualForce Page which are optimized for use on mobile pages and on pages that use third-party JavaScript libraries. It enables dynamic, interactive pages that feel more responsive than traditional Visualforce pages. JavaScript Remoting is one the features which can be used to make mobile pages. This feature of Visualforce can be combine with Lighting Components to make more interactive pages that feel more responsive than traditional Visualforce pages. You can read more about JavaScript Remoting here.

Let’s walk through code

AccountRemoter.apxc :

global with sharing class AccountRemoter {

    public String accountName { get; set; }
    public static List<Account> accountList{ get; set; }
    
    //Remote Function
    @RemoteAction
    global static List<Account> getAccount(String accountName) {
    
        string tempName = '\'%' + accountName + '%\' ';
        String query = 'SELECT Id, Name, Phone, Active__c FROM Account WHERE Name like' + tempName;
        accountList = Database.Query(query);
        
        return accountList;
    }
}

In this class I have created a RemoteAction method which will return list of accounts. @RemoteAtion annotation is used to define a remote action method.

JSRemoteComp.cmp :

<aura:component>
    <!-- Attribute -->
	<aura:attribute name="accounts" type="Account[]"/>
    <!-- REQUIRED SLDS WRAPPER -->
    <div class="slds">
        <!-- Page Header -->
        <div class="slds-page-header">
            <div class="slds-grid">
                <div class="slds-col slds-has-flexi-truncate">
                    <h1 class="slds-text-heading--medium slds-truncate" title="Account Information">Account Information</h1>
                </div>
            </div>
        </div>
        <!-- TABLE - BADGE COMPONENT -->
        <table class="slds-table slds-table--bordered">
            <thead>
                <tr class="slds-text-heading--label">
                    <th scope="col">
                        <span class="slds-truncate">Name</span>
                    </th>
                    <th scope="col">
                        <span class="slds-truncate">Phone</span>
                    </th>
                    <th scope="col">
                        <span class="slds-truncate">Active</span>
                    </th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.accounts}" var="account">
                    <tr class="slds-hint-parent">
                        <td data-label="activity">
                            <span class="slds-truncate">{!account.Name}</span>
                        </td>
                        <td data-label="confidence">
                            <span class="slds-truncate">{!account.Phone}</span>
                        </td>
                        <td data-label="confidence">
                            <span class="slds-truncate">{!account.Active__c}</span>
                        </td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table><!-- TABLE - BADGE COMPONENT -->
    </div><!-- REQUIRED SLDS WRAPPER -->
</aura:component>

This Lighting Component will output Accounts searched from VisualForce Page.

In order to display a Lightning Component in a Visualforce page, you need to construct a simple Lightning Application that is used as the bridge between the two technologies. This needs to have a dependency on the Lightning Component that will display the content, I used JSRemote in this case.

JSRemote.app :

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="c:JSRemoteComp" />
</aura:application>

Once the app is in place, there is markup in the Visualforce page to tie things together – note that the Lightning Component is constructed dynamically via JavaScript, rather than being included in the page markup server side.

JSRemoteDemo.page :

<apex:page controller="AccountRemoter" standardStylesheets="false" sidebar="false" showHeader="false" >
    
    <!-- Lightning Resources-->
    <apex:includeScript value="/lightning/lightning.out.js" />
    <apex:stylesheet value="/resource/SLDS/assets/styles/salesforce-lightning-design-system-vf.css"/>
    
    <script type="text/javascript">
        function getRemoteAccount() {
            var accountName = document.getElementById('acctSearch').value;
            document.getElementById("lightningComponent").innerHTML = " ";
            document.getElementById("responseErrors").style.display = "none";
            
            //Remote Function
            Visualforce.remoting.Manager.invokeAction(
                '{!$RemoteAction.AccountRemoter.getAccount}',
                accountName, 
                function(result, event){
                    if (event.status) {
                        
                        if(result.length > 0){
                            //Adding Lightning Component Here
                            $Lightning.use("c:JSRemote", function() {
                                $Lightning.createComponent("c:JSRemoteComp",
                                      { "accounts" : result },
                                      "lightningComponent",
                                      function(cmp) {
                                        // any further setup goes here
                                });
                            });
                            
                        }else{
                            document.getElementById("responseErrors").style.display = "block";
                            document.getElementById("responseErrors").innerHTML = "No Records Found";
                        }
                        
                    } else if (event.type === 'exception') {
                        document.getElementById("responseErrors").style.display = "block";
                        document.getElementById("responseErrors").innerHTML = 
                            event.message + "
\n




<pre>" + event.where + "</pre>

";
                    } else {
                        document.getElementById("responseErrors").style.display = "block";
                        document.getElementById("responseErrors").innerHTML = event.message;
                    }
                },
                {escape: true}
            );
        }
    </script>
<div class="slds">
        <input id="acctSearch" class="slds-input" type="text" placeholder="Search Account"/>
        <button class="slds-button slds-button--neutral" onclick="getRemoteAccount()">Get Account</button>
        <!-- Error Message -->
<div id="responseErrors" style="display:none;" class="slds-notify slds-notify--alert slds-theme--error slds-theme--alert-texture" role="alert">
        </div>
</div>

    <!-- Lightning Component -->
<div id="lightningComponent"/>
</apex:page>

Output will look similar to this.

jsremoting

So That’s It.

Lightning Design System with Lightning Component

Posted on Updated on

Hi All,

Salesforce just made a major announcement ahead of Dreamforce by introducing Lightning Design System.With the Design System you can build custom applications with a look and feel that is consistent with Salesforce core features — without reverse engineering your styles.

After browsing the docs I decided to have a try with a SLDS.In this article I am just telling a basic example of SLDS and how you can use it with Lightning Component? If you haven’t looked at the SLDS yet, the best place to start is by getting your Trailhead badge for the Lightning Design System module.

I just updated my previous post with SLDS you can find the orignal post here, you can use Apex class from this post.

img1

Application :

<aura:application controller="bklightning.WClassController">
	<!-- REQUIRED SLDS CSS -->
	<ltng:require styles="/resource/SLDS080/assets/styles/salesforce-lightning-design-system-vf.css"/>
	
	<aura:attribute name="accounts" type="bklightning.WrapperClass"/>
	<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
	
	<!-- REQUIRED SLDS WRAPPER -->
	<div class="slds">
		<!-- Page Header -->
		<div class="slds-page-header">
			<div class="slds-grid">
				<div class="slds-col slds-has-flexi-truncate">
				  <h1 class="slds-text-heading--medium slds-truncate" title="Account Information">Account Information</h1>
				</div>
			</div>
		</div>
		<!-- TABLE - BADGE COMPONENT -->
		<table class="slds-table slds-table--bordered">
		  <thead>
			<tr class="slds-text-heading--label">
			  <th scope="col">
				<span class="slds-truncate">Name</span>
			  </th>
			  <th scope="col">
				<span class="slds-truncate">Contact</span>
			  </th>
			  <th scope="col">
				<span class="slds-truncate">Active</span>
			  </th>
			</tr>
		  </thead>
		  <tbody>
			<aura:iteration items="{!v.accounts}" var="account">
				<tr class="slds-hint-parent">
				  <td data-label="activity">
					<span class="slds-truncate">{!account.acc.Name}</span>
				  </td>
				  <td data-label="stage">
					<span class="slds-truncate">{!account.count}</span>
				  </td>
				  <td data-label="confidence">
					<span class="slds-truncate">{!account.acc.bklightning__Active__c}</span>
				  </td>
				</tr>
			</aura:iteration>
		  </tbody>
		</table><!-- TABLE - BADGE COMPONENT -->
		
	</div><!-- REQUIRED SLDS WRAPPER -->
	
</aura:application>

The markup is wrapped in a div with the class ‘slds’ as the LDS is namespaced – so any styles that I use need to be inside an ancestor with this class or they will revert back to very ordinary looking HTML.Lightning Design System works like Bootstrap.The only draw back of LDS is it only provides you CSS(Designs) not functionality.Means if you want to fire an event onclick of button you have to write JAVACRIPT/JQUERY/CSS or use external jquery/css.

So That’s It.