Read Query Parameter in Lightning Component

Launch Lightning Component using formula field and also read query parameter in Salesforce Lightning Component

Before Summer 18, to read parameter in Lightning Component, we had to wrap Lightning Component in Lightning Application. After Summer 18, it has changed for good.

In this blog post we would create a formula field to launch Lightning Component (yes, you read it right). And then we would read URL parameter in Lightning Component using pageReference provided by interface lightning:isUrlAddressable.

Create a formula field on Account to launch Lightning Component and read its parameter. Continue reading “Read Query Parameter in Lightning Component”

Embed Lightning Component in Flow

Author posted by Jitendra on Posted on under category Categories Salesforce and tagged as Tags , with 5 Comments on Embed Lightning Component in Flow

How to create a lookup field in Flow by embedding Lightning Component

Most of us are big fan of Flow but at the same time we miss a lot of obvious features like lookup fields, model dialogues etc.  This blog post might bring excitement and motivation to give more attention and love to Flow.

Around 3 years back, I had written a post on how to create a lookup component in Flow. That solution was just a workaround without user friendly experience. Lets focus on better user interface today, In this post we will give lookup field ability to flow by simply reusing existing Lightning Component.

Click here for animated image showing Flow in action supporting Lightning Component.

First and foremost, make sure you enable Enable Lightning runtime for flows by navigating to Workflow | Process Automation Settings , Otherwise flow would not run in classic runtime environment. Continue reading “Embed Lightning Component in Flow”

15 ways to improve performance of Lightning Components in Salesforce

Improve Lightning Component performance using simple 15 rules like Storable Actions, avoiding server trips, Lightning Data Service, Unidirectional data binding, creating component APIs etc

  1. Avoid Server Trips

Most obvious idea to improve Lightning Component Performance is to avoid server trips. Let’s say, you need to know the queue Id to be assigned as owner in Case and also need custom setting information to derive the behavior of Lightning Component. There are two ways to achieve this – Call Apex Controller two times vs return combined results from Apex in single call and process JSON in client side controller of Lightning Component.

2. Use Storable Action

In this approach, Lightning component shows cached result instead of making immediate server trip. Lightning component will make server (Apex) call in background and if cached result is stale, then it would cache and refresh the lightning component. This is very useful for devices which has slow internet connections. If you are Facebook or Google News user, you would be easily relate it. When we open these apps, it shows previous feed and if there are new feeds, it gives us option to refresh view or automatically refresh it. All you have to do is, on client side controller of Lightning component, mark action as storable using this code action.setStorable(). This blog post explains working of storable action in detail. Continue reading “15 ways to improve performance of Lightning Components in Salesforce”

Introduction to Lightning Test Services with Jasmine

Complete Source code and video of using Lightning Datatable Component and Jasmine in Salesforce

In previous post, we discussed what is Jasmine and simple hello world program to see how it works. In this blog post, we will discuss how Jasmine can be used in Salesforce to test Lightning Component’s Javascript code.

Note : Everything we are discussing here is completely covered as part of Live coding in Apex Salesforce Saturday organized by Amit. Would like to thank Mohith for his support and answers during the demo. It also shows How SalesforceDX can be used daily by developers to perform development.

Jasmine and Mocha support is provided as a part of Lightning Test Service (LTS) by Salesforce. Jasmine and Mocha, both are well known and industry wide solution accepted in Javascript world. of course, Salesforce don’t want to stay behind in terms of its offering to developers thats why we have new baby in town – Lightning Test Service (LTS). Continue reading “Introduction to Lightning Test Services with Jasmine”

Salesforce Path – Read Only Lightning Component

Author posted by Jitendra on Posted on under category Categories Salesforce and tagged as Tags with 10 Comments on Salesforce Path – Read Only Lightning Component

Chevron Component build in Lightning with Same look and feel as of Salesforce Path in read only mode

Salesforce Path is awesome feature, where you can display picklist value at top of record page and on click, it updates value in Salesforce database. However same solution does not fit in all scenario. Consider situation where picklist field is supposed to be changed by some other process or Integration. Now you don’t want anyone to change it from user interface. Even though you like Salesforce Path to show summary at top of page however it won’t be useful in above scenario.

Because of this, I created a Read Only Path Component in Lightning. I tried to keep same look and feel as of Standard Path component. This component will need only two inputs

  1. Record Id – It would be automatically passed if we use it using App Builder
  2. Field API Name – API name of picklist type of field

Now think about it. Only thing I got is Record Id. How would I know Object Name ? How would I know all picklist values for field name supplied ?

 With the help of this post, I will get Object name on basis of record Id.  And, with the help of this post, I will get Field Description. Hopefully you got it, I am talking about Dynamic Apex here 🙂 .

Continue reading “Salesforce Path – Read Only Lightning Component”

Lightning Data Service – Standard Controller for Lightning Components

Best Practices for Salesforce Lightning Component. How Lightning Data Service can improve Lightning Component performance and solve inconsistent data problem without writing single line of Apex code. Demo source code, image and slides included.

If you have worked on Visualforce and started playing with Lightning Component, you must have identified one important missing feature, which is standard Controller.

Lets assume a scenario, you have two Lightning Components on Account page. One Lightning Component is used to show some fields and other component is used to edit same record.

Problem 1 :

To achieve this, both Lightning components would invoke Apex method separately at the cost of performance, by issuing duplicate server calls. Below image depicts problem, where multiple Lightning component requests same content by making separate server calls.

Lightning Components - Duplicate Server Calls
Lightning Components – Duplicate Server Calls

Continue reading “Lightning Data Service – Standard Controller for Lightning Components”

Lookup component in Salesforce Lightning

Author posted by Jitendra on Posted on under category Categories Salesforce and tagged as Tags , with 32 Comments on Lookup component in Salesforce Lightning

Salesforce Lightning component in plain JavaScript and SLDS with complete source code

Salesforce comes up with many out of box UI components and Lightning Base components. However, one important component missing is Lookup component or Type ahead component in Lightning. There are some lookup components available however either they are using some JavaScript library or UI doesn’t match with Salesforce Lightning Design system. So, I wanted to have something similar used by Salesforce Lightning interface itself and come up with this component. Complete source code of this component can be found on my Github repository also.

Before, jumping directly to source code, lets first discuss some important points. Continue reading “Lookup component in Salesforce Lightning”

Show Lightning component on public website without authentication

How to show Lightning component on public sites without need of user authentication

I have posted few articles on Lightning OutIn this post, we will see how Lightning components can be displayed on public website. To access these Lightning components, users don’t need to login to Salesforce.

For this post, I will consider Text slider component created in this post. Using this same method, I have displayed Live demo of Lightning component on wordpress blog. Continue reading “Show Lightning component on public website without authentication”

Text Slider Lightning Component for Salesforce with Live Demo

How to use Nested Components and create a simple yet powerful Text Slider Component in Lightning for Salesforce

In this post we will create simple and powerful Text Slider Component in Lightning.

Below are list of all features supported by this Component

  • Its pure CSS based without any JavaScript libraries therefore super fast
  • Long contents are auto scrolled with nice overloaded CSS for scroll bars
  • Ability to set Header and Body Text for each slides
  • Enable or disable auto background colors
  • Enable or disable auto slideshow
  • Control slides delays in case timer enabled
  • If auto background color turned off then ability to control background and text color
  • Slider contents are un-escaped means we can render richtext content

Continue reading “Text Slider Lightning Component for Salesforce with Live Demo”

Export or print code review feedback generated by Salesforce Lightning CLI

How to print or export code review feedback report generated by Salesforce Lightning CLI tool

Update : We can use this heroku app to scan Lightning component online and get code review feedback. Complete source code is available here. We don’t need to install Lightning CLI until its project compliance issue.

Salesforce Lightning Component - Code review - Javascript lint
Salesforce Lightning Component – Code review – Javascript lint

In this post, we discussed that how Lightning CLI can be used to get a code review information of custom Lightning component. However, code review is either printed or exported as a file in text or JSON format. Question is, how to get Lightning component code review feedback in HTML or PDF format ?

I tried various options available here however there were no way to export code review feedback generated by Lightning CLI. Output generated by Lightning CLI is not presentable to business executives or clients.

Finally, I came up with very simple Heroku application, which can be used to get Lightning CLI code review feedback in HTML or pdf format. We need to run below command to get CLI code review in JSON format. Continue reading “Export or print code review feedback generated by Salesforce Lightning CLI”