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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s