Lookup component in Salesforce Lightning

Author posted by Jitendra on Posted on under category Categories Salesforce and tagged as Tags , with Leave a comment 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”

Use Lightning Components on external websites – Lightning Out

How to use Lightning component in node.js (External websites) by using Lightning Out. It shows how to enable CORS and SSL in Node.js with Video and complete source code.

If you were the users of IGoogle, few years back, you would be excited to know that web development is progressing in that direction. Architect of web application development is getting shifted towards component based development by introducing concepts like Web Components and frameworks like polymer and Lightning Components. One of the possible use case of component driven development is ability to use whole component externally. In IGoogle, components were built by partners and then was exposed as widgets to be used on your custom Google home page. Salesforce product team, being visionary came up something like this by introducing Lightning Out. With the help of Lightning Out, we can surface our existing Lightning Component to external websites. Previously, we already discussed that how Lightning components can be used on Visualforce pages using Lightning Out.

Let’s see how we can do it. Continue reading “Use Lightning Components on external websites – Lightning Out”

Generic and Responsive Table Component in Salesforce Lightning

Complete Source code to create generic and responsive Table component in Salesforce Lightning

Almost one year ago, I wrote this article to demonstrate how to create a responsive datagrid component in Lightning. Recently, when I went back to the post, I realized that responsive table component in Lightning could be a lot more easier. So, lets see easier and efficient approach to create a Responsive and Generic Table component in Lightning.

First and foremost, we need to provide data in below JSON format to Lightning component, everything else would be taken care by component itself.

JSON format for responsive datagrid Lightning component
JSON format for responsive data grid Lightning component

Continue reading “Generic and Responsive Table Component in Salesforce Lightning”

Circular Progress Bar with Conditional Theme – Salesforce Lightning Component

Salesforce Lightning Component – Circular Progress Bar with Conditional Theme. Ready to be used by Developers and Admins on App builder for any object. No External Javascript Library, Lightweight CSS based.

Just after two days of writing Circular Progress Bar , came up with few more requirements. So, In this post, will share updated code of Circular Progress Bar. This component can be easily used from Lightning App Builder, check this video to get an idea on how it can be used and configured.

Complete source code of this component is available on my git repository. Make sure to follow me to get updated by other free source codes. 🙂

In additional to all previous capabilities, below features are added:

  1. Conditional Theme – Let’s say before 50% progress bar should be displayed as red and after 50% green.
  2. Threshold – On basis of this value, theme will change
  3. Added one more theme – red
  4. We can show value inside component in three format now – percentage, Actual value or Mix
  5. Legend font size changes according to size of component

Continue reading “Circular Progress Bar with Conditional Theme – Salesforce Lightning Component”

Circular Progress Bar – Salesforce Lightning Component

Demo and Complete Source code of Circular Progress Bar, Salesforce Lightning Component

In this blog post we will create reusable Lightning Component to show progress of record using Circular Progress Bar. This component is mostly build using CSS. Javascript is used only for Lightning component support and calling Apex Class. Check video demo here on how to configure and use this component.

Note – There is updated version of this component here.

Circular Progress Bar LEX Component Capabilities

  1. Size – small, medium , large
  2. Theme – blue, orange , green
  3. Legend – Legend to display
  4. Total – Either Number Or API Name of field. Used to derive percentage of Progress Bar
  5. Actual – Either Number Or API Name of field. Used to derive percentage of Progress Bar. If Object contains percentage type of field, then Total can be blank and this field can only contain API name of field of type percentage

Continue reading “Circular Progress Bar – Salesforce Lightning Component”

Calling Apex method at regular interval from Lightning Component

Importance of $A.getCallback and Modifying Components Outside the Framework Lifecycle

Recently, I was in need of Lightning Component, which can poll Apex class at regular interval and display status of some process running in background. Initially, I thought its very easy and straight forward. Just like we do in Visualforce, use window.setInterval method of Javascript and I came up with below code. Continue reading “Calling Apex method at regular interval from Lightning Component”

Get Selected HTML or Lightning component in Aura Iterator

How to detect event from Lightning Component and HTML5 components in Aura Iterator

Coming from Visualforce background, most of us are well aware about repeater component. Same way, Lightning also offers iterator component.

Detecting Selected Lightning Component in Iterator

Usage is very simple, It is used to iterate over collection and render some HTML / Lightning component dynamically as shown below

<aura:component>
  <aura:iteration items="1,2,3,4,5" var="item">
    <meter value="{!item}"/>
  </aura:iteration>
</aura:component>

In above example, each element in collection can be referred using variable “item”. Most of time we find ourselves in situation where we need to get value or component selected in iterator. As we don’t know upfront, how many items would be there, so identifying selected item at run time seems little bit tricky but believe me it easy. Continue reading “Get Selected HTML or Lightning component in Aura Iterator”