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.

Please refer this post of latest version of responsive Datagrid 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”

Dynamically Instantiate and destroy Lightning Components – Modal dialog component

Learn how to create advance lightning component (Modal dialog) and dynamically instantiate and destroy it

This blog post focuses on how we can create Modal Dialog component in Lightning and dynamically instantiate and destroy it on button click event as shown in below image.

Salesforce Ligtning Modal Window
Salesforce Ligtning Modal Window

Continue reading “Dynamically Instantiate and destroy Lightning Components – Modal dialog component”

Lightning Component for Wikipedia search

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

Override default loading message in Salesforce lightning application using template

While developing Lightning component, all of us might have been noticed that default user interface for loading component looks like below image.

Default loading screen in Salesforce lightning
Default loading screen in Salesforce lightning

Most of us, for sure will want to customize this loading message to match their Salesforce implementation theme. We can use “Lightning Template” to override this message to show something like below image.

Customized default loading message in Salesforce lightning
Customized default loading message in Salesforce lightning

Continue reading “Override default loading message in Salesforce lightning application using template”

Login to Lightning enabled Salesforce instance using SessionId

If you have session Id, then you could login to Salesforce directly using below URL hack :

https://[intance].salesforce.com/secur/frontdoor.jsp?sid=[sessionId]

on above URL, you have to replace [instance] by actual salesforce instance name and [sessionId] by actual sessionId of user.

In same way, we can directly login to portals or communities using below URL hack

https://[instance].salesforce.com/secur/frontdoor.jsp?sid=[sessionid]&orgId=[orgId]&portalId=[portalOrCommunityId]

I tried to see, how can we login to Salesforce after Lightning design is enabled in Salesforce and found that below URL hack actually works, assuming we want to open Opportunity record after successful login. If you don’t want to redirect on any existing lightning page or record then you can simply ignore URL part after [SessionId]

https://[instance].salesforce.com/one/one.app?sid=[SessionId]#/sObject/006B0000002p2FrIAI/view

Note : You have to be very careful while using SessionId, If its publicly available then anyone can have access to your Salesforce Org.

Salesforce Lightning Component – Radar Chart

Author posted by Jitendra on Posted on under category Categories Salesforce and tagged as Tags with 3 Comments on Salesforce Lightning Component – Radar Chart

How to create Radar chart using Lightning Component in Salesforce with the help of Chart.js library

To create Radar chart in lightning component, we will be using chart.js library. If you are new to lightning then please go through basics and also I would suggest to go through lightning trailhead modules.

Lightning Component for Radar Chart
Lightning Component for Radar Chart

Continue reading “Salesforce Lightning Component – Radar Chart”

Barcode scanner component in Salesforce lightning – Video

Recording of Live code – Creating Barcode decoder component using Javascripyt library in Salesforce Lightning

This post is rewritten of previous post for decoding Barcode using JavaScript in Salesforce1 mobile application. Assuming you already have static resource of javascript library  QuaggaJS (we need only js file from dist folder).

This code was written live on my streaming channel on 10-Jul-2015, You can find recording here.

Barcode Scanner Lightning App
Barcode Scanner Lightning App

I have not added capability for image preview like I did in previous did, but it can be easily done by referring this blog post from Peter Knolle.

Continue reading “Barcode scanner component in Salesforce lightning – Video”

Compilation of resources to learn Lightning Components in Salesforce

An attempt to gather all resources to learn Salesforce lightning component in one blog post

  1. Lightning Component developers guide
  2. Salesforce Lightning Design System (SLDS)
  3. Salesforce style Bootstrap CSS
  4. Lightning Components tutorial on trailhead
  5. Creating Lightning Components : Single Page Applications by Don Robins
  6. Basics of Lightning components by Jitendra
  7. Building lightning components in Spring 15 by Jeff Doughlas
  8. Pure Javascript based Collapsable panel component by Jitendra
  9. Search bar and contact list component in Lightning by Salesforce
  10. Working with controllers by Peter Knolle
  11. Handling custom events in Lightning Component by Peter Knolle
  12. Debugging Lightning Components by Peter Knolle
  13. Extending Lightning Components by Peter Knolle Continue reading “Compilation of resources to learn Lightning Components in Salesforce”

Salesforce Lightning Component – expand and collapsable panel example

How to use aura:facet component and Learn creating expand and collapsable reusable lightning component in Salesforce

In previous blog post, we saw that how Lightning component bundles are related to each other and how to create simple Hello World component.

In this post, we will create very simple yet powerful reusable lightning component for collapse and expand panel. This time, we will skip basics of lightning and directly start with code.

Complete component is build with plain javascript and CSS, no library used.

Lightning CollapsiblePanel Component - Collapsed
Lightning CollapsiblePanel Component – Collapsed
Lightning CollapsiblePanel Component - Expanded
Lightning CollapsiblePanel Component – Expanded

 

Continue reading “Salesforce Lightning Component – expand and collapsable panel example”

Getting started with basics of Lightning Component

As you might already know that next big change in Salesforce is introduction to lightning components. As technology is changing rapidly and to take advantage of cutting edge innovations in web technology, Salesforce doesn’t want to stay behind. If we see trend, all major platform has introduced component based design like Polymer, React, Web Components, Angular 2.

We will be discussing basics of Lightning components in this post and how Lightning application, component, controller, helpers and Apex controllers are connected with each other.

Lightning components are based on open source UI framework for web development. Every Salesforce organization already has aura documents available in their instance and can be opened by navigating to http://instance.salesforce.com/auradocs. You can also visit my other blog post explaining FAQ of lightning and Lightning Trailhead module.

In below image, I have tried to explain at high level, how different JavaScript files are related in Lightning components, there are many other parts as well, but I tried to keep it short and simple.

Getting started with lightning components
Getting started with lightning components

Continue reading “Getting started with basics of Lightning Component”