Posts

Lightning RecordForm - An enhanced Lightning Data Service

Image
As always with every release Salesforce introduces bunch of new base components and this time they have "Lightning: recordForm" which suppresses using "lightning:recordEditForm and lightning:recordViewForm" separately to handle record view and edit. Lets go ahead and put some sample code to create a Lightning Component using lightning recordForm! RecordFormComp.cmp: <aura:component implements= "force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasSObjectName,force:hasRecordId,force:lightningQuickAction" access= "global" > <aura:attribute name= "fieldsList" type = "String[]" default= "['Id', 'Name', 'BillingAddress', 'AnnualRevenue']" /> <div> <center> <h1><b>Lightning Record Form<br/> Object_Name: { ! v.sObjectName} - Record_Id: { ! v.recordId} ...

Using Component.find vs Document.getElementById to Dynamically Hide or Show Content in Lightning Components

Image
Business Scenario: To dynamically Show or Hide content in Lightning Components. Using "Document.getElementById" Below are Component and Controller code to show or hide content by using Document.getElementById HideShow.cmp <aura:component implements= "force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access= "global" > < ! --Set component attribute--> <aura:attribute name= "valSet" type = "Set" /> <center> < ! --Button to display Set values--> <lightning:button onclick= "{!c.getSetValues}" label= "Set Values" /> </center> < ! --Construct HTML Table using SLDS--> <table class= "slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout" > <thead> <tr c...

Collections In Lightning Components

Image
Collections are building blocks for any object oriented programming language. In Apex we use LIST, SET, MAP collection types in order to work with records! Here in this blog, we are going look at some basic code on using Collection Types in context with Lightning Components..... First we create an Apex Controller with two methods to return List and Map respectively. We will use these methods to access from our Lighting Component and display them on the Home Page. public class LightningCollectionTypes { @AuraEnabled public static List < Account > lghtList() { List < Account > lstAccnts = [SELECT Id, Name FROM Account LIMIT 22 ]; return lstAccnts; } @AuraEnabled public static Map < Id, Account > lghtMap() { Map < ID, Account > m = new Map < ID, Account > ([SELECT Id, Name FROM Account LIMIT 22 ]); return m; } } LIST Below are component and...

Salesforce User Interface API

Image
With new Salesforce UI API we can get the orgs data and metadata in a single response returned form an Api call. Even Salesforce uses the same UI API to build their Lightning Experience and Salesforce for Android, iOS, and mobile web. While making calls and getting the data, salesforce does take care of checking the field-level security settings, sharing setting, and perms. We don't have to worry about making the SOQL queries to get record data, getting object metadata and themes info, getting layout info, all this heavy lifting work will be taken care by Salesforce. Best part is that every response is returned in a formatted JSON! UI API Endpoints are divided into 3 levels namely 1. Records Endpoint 2. Actions Endpoint 3. Favorites Endpoint For Authentication, User Interface API uses OAuth 2.0 just like all other Salesforce REST APIs does Reference Links: 1. User Interface API Developer Guide 2. Salesforce Blog by Raja Rao DV Salesforce UI API helps with ...

SFDX - Create and Deploy Project to Dev Hub using VS Code

Image
In this blog post we are going to create a sample project in Scratch Org and deploy it to Dev Hub using VisualStudio Code using SFDX commands Create DevHub Account: In order to create a Scratch Org we need to have a DevHub Account which can be created using this Link . This DevHub is a free account and is valid only for 30 days to use! Create Scratch Org: Once we have our DevHub Account created and now we can go ahead and create our Scratch Org using below commands Also make sure you have CLI installed for Windows/Mac using Install the Salesforce CLI steps Now lets go ahead and authorize DevHub using " sfdx force:auth:web:login -d -a MyDevHub " from terminal and this will prompt you to allow access screen and once authentication is successful you will see a message saying 'You may now close the browser' like below Now that we have authenticated our DevHub, let's check logging into it using alias name 'MyDevHub' which we gave in above...

Displaying Toast Message from Modal in Lightning Components

Image
With traditional Visualforce development we use apex:pageMessage to display custom messages to the User. And now with Lightning Components development we can use force:showToast to display custom messages! Here we are going to display our Toast Messages from a Modal and expose it through a Lightning Component Tab. Below we are going to create our custom Lightning Component and Lightning Component custom Tab. LightningToastMsg.cmp: This is our component code <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:lightningQuickActionWithoutHeader,force:hasRecordId" access="global"> <!--Load LDS from static resource--> <ltng:require styles="/resource/SLDS/assets/styles/salesforce-lightning-design-system.css"/> <!--Define Modal--> <div class="demo-only" style="height: 800px;"> <section role="dialog" tabindex="-1"...

Using Aura:Set with Lightning Components Extension

Image
When we think about Object Oriented Concepts, Inheritance is one thing where we can extract functionality from Super Class and in Lightning Components development aura:set serves with similar feature where we can assign values for the attributes of a Super Component from a Sub Component which extends a Super Component. Resource Link: Lightning Components Developer Guide Below is a simple implementation of having two components and using aura:set we will populate attributes of a base component using another component which will extend our base component. Component 1: This will be our base component which will display records Name and Id which are passed from Component 2 using Aura:Set AuraSet1.cmp <!--AuraSet1--> <aura:component extensible="true" > <!--Load LDS from static resource--> <ltng:require styles="/resource/SLDS/assets/styles/salesforce-lightning-design-system.css"/> <aura:attribute name="rc...