Posts

Lightning Web Component(LWC) Setup and Example Component

Image
Lightning Web Component(LWC) is a new framework for building Lightning Components. In this post, we are going to learn how to setup SalesforceDX and  VsCode in order to create Lightning Web Components. Step 1: Sign up for Salesforce pre-release developer org.                https://www.salesforce.com/form/signup/prerelease-spring19/ Step 2: Add a custom domain name to your salesforce URL.                          a)  From setup enter the MyDomain in the Quick Find Box.                b)Complete the four steps.                     Step 3: Download and install CLI.              a)  Windows 64 bit:  https://sfdc.co/sfdx_cli_win64                           macOS:  https://sfdc.co/sfdx_cli_osx               b) Just check which version is installed for your CLI using this command  sfdc version             c) Upgrade to the pre-release version of the CLI by running this command                sfdx plugins:install salesforcedx@pre-release             Step 4: In
1 comment
Read more

ReactJs - Installation

Image
React Js ReactJs is a javascript library used for building UI components. React Advantages: 1)Uses virtual DOM which is a JavaScript object. This will improve apps performance since JavaScript virtual DOM is faster than the regular DOM. 2)Can be used on client and server side as well as with other frameworks. 3)Component and data patterns improve readability, which helps to maintain larger apps. React Limitations: 1)Covers only the view layer of the app, hence you still need to choose other technologies to get a complete tooling set for development. 2) Uses inline templating and JSX, which might seem awkward to some developers. Installation Of Rect Js : Step 1: Install NodeJs. Here is the link to install NodeJs  node-v6.3.1-x64.msi             after installation to test whether NodeJs is installed or not using "npm" command like below. Step 2 : Installing reactJs using webpack and babel.  Create the root folder using the below commands :
2 comments
Read more

SLDS Table--Insert And Delete Rows Dynamically

Image
In this post, we are going to create a lightning component to insert and delete rows dynamically on slds   datatable . If we hit an INSERT button a new row will be added at the end of the slds table. If we hit a DELETE button the last row will be deleted from the slds datatable automatically. Child Lightning Component1 Component:- <aura:component > <aura:attribute name=”rowIndex” type=”String” default=”1″/> <!– Register 2 Lightning Event for handle add or Delete rows on Parent Component –> <aura:registerEvent name=”DeleteRowEvt” type=”c:DeleteRowEvt”/> <aura:registerEvent name=”AddRowEvt” type=”c:AddNewRowEvt”/> <lightning:button name=”details” label=”ADD” onclick=”{!c.AddNewRow}” /> <lightning:button name=”details” label=”DELETE” onclick=”{!c.removeRow}” /> <table class=”slds-table slds-table_bordered slds-table_cell-buffer”> <thead> <tr class=”slds-text-title_caps”> <th scope=”col”> Name </th>
Post a Comment
Read more

Lightning:recordForm - Lightning Data Service

Image
Lightning:recordForm is a very powerful component for editing, viewing and adding a record in lightning and combines both lightning:recordEditForm and lightning:recordViewForm. Here is an example lightning component for lightning:recordForm. Lightning Component:- <aura:component implements="flexipage:availableForRecordHome,force:hasSObjectName,force:hasRecordId" access="global" >     <aura:attribute name="fieldsList" type="String[]" default="['Id', 'Name', 'BillingAddress', 'Phone' , 'Type']"/>     <div class="THIS">                <lightning:recordForm                               recordId="{!v.recordId}"                               objectApiName="{!v.sObjectName}"                               fields="{!v.fieldsList}"                               columns="2"                               mode="View&qu
1 comment
Read more

Custom Lookup Lightning Component

Image
Lookup Relationship: A Lookup Relationship creates a field that allows users to click a Lookup Icon and select another record from a popup window. In visual force pages, we create a lookup field simple using  " apex:inputField" component. But, in lightning components, we can not create a lookup field simply using any component like above. So, here we can find the solution for this please find the Lightning components below to create a lookup field. Apex Controller: public class InputLookup {     @AuraEnabled     public static SObject loadDefault(String s, String sObjectType) {         try {             String query = 'SELECT Id, Name FROM {1} WHERE Id={0}';             return Database.query(String.format(query, new List<String> { '\''+s+'\'', sObjectType }));         } catch (Exception e) {                }          return null;     }     @AuraEnabled     public static List<SObject> searchLookup(String s, St
Post a Comment
Read more

Fixed Header For DataTable

Lightning Component: <aura:component implements="force:appHostable" >     <div class="slds-table--header-fixed_container" style="height:450px;">         <div class="slds-scrollable_y" style="height:100%;">             <table class="slds-table slds-table_bordered slds-table--header-fixed">                 <thead>                     <tr class="slds-text-title_caps">                         <th scope="col">                             <div class="slds-truncate slds-cell-fixed" title="Opportunity Name">Opportunity Name</div>                         </th>                         <th scope="col">                             <div class="slds-truncate slds-cell-fixed" title="Account Name">Account Name</div>                         </th>                         <th
1 comment
Read more