How to bind fields as Output in Lightning Component

Hi, friends and Gurus,

Welcome to my SFDC4Students blog.

After a long time, I came up with Lightning Component in Salesforce. Today we will discuss how to bind fields as output in Lightning Component. This is a very simple code that I give you. So let's go.

This is the design of our Lightning Component.

Step 1 - Create A Class named "fetchOrgInfoController" to get the Org data.

1 2 3 4 5 6 7 8 9

public class fetchOrgInfoController{ @AuraEnabled public static Organization fetchOrgInfo() { // Query on "Organization/Company" object and get the fields which you want to show on your Lightning Component Organization objOrg = [SELECT City,Country,Name,PostalCode,Street FROM Organization limit 1]; return objOrg; } }

Step 2 - Create Lightning Component named "SFDC4StudentsOutput"

<!-- Use the above Controller --> <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" controller="fetchOrgInfoController" access="global" > <!-- The "handler" will call the "onLoad" JavaScript Controller --> <aura:handler name="init" value="{!this}" action="{!c.onload}" /> <!-- The "orgInfo" attribute is used to hold the query record of the Apex Class (Please go to helper for understand) --> <aura:attribute name="orgInfo" type="Sobject" default=""/> <!-- The Component Design Start from Here --> <div class="slds-box"> <div class="slds-box"> <p class="slds-text-heading_medium"> <b>Please Follow My Blog</b></p> <p> On this Blog you can find the simple and understandable code.</p> </div> <div class="slds-card" style="background-color:#7d89a0;color:#f9fbff;padding-bottom: 1%;padding-top: 1%;"> <p class="slds-text-align_center"> SFDC4Students" is the best blog for the new students of Salesforce.</p> </div> <br/> <div class="slds-box"> <p class="slds-text-align_center"> If you want to know more easy things to understand on this blog then please click <a href="#" style="color:#6f9cf7;">Go to Easy and Best things</a> </p> </div> <br/> <div class="slds-grid slds-gutters"> <div class="slds-col slds-size_6-of-12"> <lightning:input name="OrgName" readonly="true" value="{!v.orgInfo.Name}" label="Organization Name" /> <lightning:input name="OrgCountry" readonly="true" value="{!v.orgInfo.Country}" label="Organization Country" /> <lightning:input name="OrgCity" readonly="true" value="{!v.orgInfo.City}" label="Organization City" /> </div> <div class="slds-col slds-size_6-of-12"> <lightning:input name="OrgStreet" readonly="true" value="{!v.orgInfo.Street}" label="Organization Street" /> <lightning:input name="OrgPostalCode" readonly="true" value="{!v.orgInfo.PostalCode}" label="Organization Postal Code" /> </div> </div> </div> <!-- The Component Design End Here --> </aura:component>

Step 3 - Create a JavaScript Controller named "SFDC4StudentsOutputController"

1 2 3 4 5 6

({ // This JavaScript Controller function will call the Helper named "onloadHelper" onload : function(component, event, helper) { helper.onloadHelper(component, event, helper); } })

Step 4 - Create a JavaScript Helper named "SFDC4StudentsOutputHelper"

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

({ // This JavaScript Helper function will call the Apex method named "fetchOrgInfo" onloadHelper : function(component, event, helper) { // Call the Apex Method var action = component.get("c.fetchOrgInfo"); // The response code start which verify that the Apex Method has called successfully action.setCallback(this, function(response){ if(response.getState() === "SUCCESS") { // "orgInfo" is the Component attribute which hold the Apex Method return value component.set("v.orgInfo",response.getReturnValue()); } }); // $A.enqueueAction(action) adds the server-side controller action to the queue of actions to be executed. $A.enqueueAction(action); } })

Step 5 - Create an App named "SFDC4StudentsOutputApp"

1 2 3

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

Please develop this Component from your side, when you write a code yourself then you can learn else copy paste doesn't mean.

In the next post, we will discuss some points of Lightning Component that you have to need to know.

Thanks for come to my Blog. If this post is helpful to you then share and follow to get new coming SFDC4Students blog posts.