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.

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”

Use Lightning Component in Visualforce Page

How to use Lightning Out to surface Lightning Component on Visualforce Pages

In all of my projects currently, I have stopped creating Visualforce code. well, thats partially correct ;). I still need Visualforce page because most my clients are still on classic / Aloha Salesforce. However, If you have noticed, all Salesforce release notes, talks, webinars, Dreamforce focuses on Lightning experience. And I can say with confidence that Lightning is really really very cool. Sky is limit to your imagination, You can unleash hidden talent within you. Well, all talk talk… and you may be thinking, how can I start with Lightning Component? My client don’t even want to move away from classic. Its lots of work and money for them.

Well, here is an Idea what I am doing. I still uses Salesforce classic, still uses Visualforce but behind the scene, magic… tadaaa , Lightning Component. I will show walk you through this, how its being done.

We will use existing Flipcard Lightning Component to display on Visualforce page. Once Lightning Component is created, we need to create a Lightning Application to act an as a container. Continue reading “Use Lightning Component in Visualforce Page”

Flipcard Lightning Component

Author posted by Jitendra on Posted on under category Categories Salesforce and tagged as Tags with Leave a comment on Flipcard Lightning Component

A simple CSS based animated Flip card Lightning Component for beginners

There could be situation where we want to display a calculation or summary of some records. This information sometimes needed to be stand out from other piece of data on same page. We may also need component where number is displayed in big text and when cursor is moved, related information explaining calculation should be displayed. It can be achieved in many ways and one of them is to have animated flip card where information can be swapped on cursor hover event.

In this post, we will create a very simple animated Flip card Lightning component. This component will support following properties

  • Animation direction horizontal or Vertical
  • Background color
  • font color
  • border color
  • Text on front size
  • Text on back side

Continue reading “Flipcard Lightning Component”

Twitter’s Like button as Salesforce Lightning Component- pure CSS3 with Video

Building Lightning component checkbox to have Twitter’s Heart like animation without any image or JavaScript.

Twitter uses image sprite and JavaScript to produce Like button animation. We would be giving same effect to checkbox by using Lightning component. Combination of Checkbox, Label and Box property of CSS3 is used to give final result.

Lightning Component will contain only declaration of checkbox as shown below.

TwitterLove.cmp


<aura:component >
<input id="toggle-heart" type="checkbox" />
<label for="toggle-heart">❤</label>
</aura:component>

Note : In above source code, heart UTF icon is getting replaced by emoji code, so refer this screen to see exact code written for Lightning Component.

We have used Sassy CSS (SCSS) in this demo, as it would be little bit hard to write pure CSS with animation. Once SCSS is written, we can use this online tool to convert it to CSS. All these are explained and build live on my channel. Continue reading “Twitter’s Like button as Salesforce Lightning Component- pure CSS3 with Video”

Lightning component code review using CLI – Video

Video tutorial explaining how we can use Lightning CLI to identify possible issues and enhancements needed for Lightning Component and enabling it for Locker Service

Lightning CLI is code linting tool, which can be used to validate source code of Lightning components (Javascript files only). This tool is made specially keeping Locker Service in mind where we can validate if Lightnign component is breaking any contract while trying to access DOM element out of its own scope.

Lightning CLI is based on open source project ESLint. Below video demonstrates how we can install Lightning CLI and use it for existing Lightning Components. You can subscribe to my youtube channel to get latest update on Salesforce related videos. Continue reading “Lightning component code review using CLI – Video”

Responsive Datagrid component in Lightning – Basics

This blog post explains simple use case of Nested Lightning Component. It goes through example on how to interact and combine nested components to be used in parent Lightning component.

This is a first blog post of a series, to develop advance lightning components and understand various features offered by Salesforce Lightning Platform. This post will explain why do we need nested components and how do they communicate.

At first, nested components looks like displaying something in child component and wrapped in parent component. However, to make most of nested components and designing efficient Lightning components, we should use nested component only to define set of rules. Unlike components in Visualforce, where we render some reusable output on page, Nested components in Lightning defines set of attributes to be used by parent component.

Hard to digest and imagine ? Please read on this post, you will understand concept soon. Continue reading “Responsive Datagrid component in Lightning – Basics”

Lightning Component for Wikipedia search

Author posted by Jitendra on Posted on under category Categories Salesforce and tagged as Tags with 3 Comments on Lightning Component for Wikipedia search

Initially I thought creating Wikipedia Search component will be straight forward. I can simply use AJAX request from Lightning component to get result from Wikipedia using its REST API. Soon, I discovered about Content Security Policy in Lightning components developer guide.

If we attempt to use AJAX or REST API in Lightning component then below error will be thrown

Uncaught error in markup://ui:keyup : caught Failed to execute ‘open’ on ‘XMLHttpRequest’: Refused to connect to ‘https://en.wikipedia.org/w/api.php?action=opensearch&search=jitendra&limit=10&namespace=0&format=jsonfm’ because it violates the document’s Content Security Policy.

So, other workaround I came up is by using Apex controller to create HttpRequest and return result as JSON to lightning component. You can download this as unmanage package from this URL.

Salesforce Lightning Component for Wikipedia Search
Salesforce Lightning Component for Wikipedia Search

Continue reading “Lightning Component for Wikipedia search”