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”
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.
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
Lightning Component will contain only declaration of checkbox as shown below.
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 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.
Use below command to install heroku CLI plugin, assuming you already have heroku installed :
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.
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.
While developing Lightning component, all of us might have been noticed that default user interface for loading component looks like below image.
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.