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”

Where to find me in Dreamforce 2016

Author posted by Jitendra on Posted on under category Categories Salesforce and tagged as Tags with Leave a comment on Where to find me in Dreamforce 2016

Find me at Brain Dating , Cognizant Booth , Community Powered Circle Sessions and Admin Meadow in Dreamforce 2016

Hey All,

Its time of year again where we will get a chance to meet¬†personally in virtually connected world. I know most of you either on Facebook, Twitter or Youtube, let’s plan to connect this Dreamforce.

  • My Session in Dreamforce
    My Session in Dreamforce
  • MVP's in Dreamforce
    MVP's in Dreamforce
  • Sassy in Dreamforce
    Sassy in Dreamforce
  • Meeting with Friends
    Meeting with Friends
  • Parker Harris in Lightning Suit
    Parker Harris in Lightning Suit
  • Do you see my name there ;)
    Do you see my name there ūüėČ
  • Dreamforce Keynote
    Dreamforce Keynote

So, like all previous Dreamforce, this year as well I would be involved in some activities . Question is, where can we meet ? Well, here are some details about me. Please don’t hesitate to comment on this blog about availability, place etc.

Brain Dating

This is a new event in Dreamforce 2016 and I am totally excited about this. We would be exchanging best practices and challenges on pre-decided topic. I would be discussing on two topics Continue reading “Where to find me in Dreamforce 2016”

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”

Considerations and Best Practices before enabling Salesforce Shield Platform Encryption

Best practices and things to consider before rolling out Shield Platform Encryption for your customer

Its been more than a year since launch of platform encryption solution by Salesforce named Shield. Even though its one of most costly offerings by Salesforce however momentum of adaption amongst financial and healthcare industry are very high. I have already implemented platform encryption for few of my clients within a year. In this post, I will share some of my learning and best practices around rolling out platform shield to customers.

First question to ask customer before going with Platform encryption is, “Which security threat customer¬†trying to solve” ?

If answer is security from internal Salesforce users then unfortunately shield is not an answer. We can leverage OWD, sharing rules, profiles, FLS to set security for Salesforce internal users.

If answer from customer is – compliance, security at database and data center level then¬†Shield¬†is a way to go to solve security issue. Continue reading “Considerations and Best Practices before enabling Salesforce Shield Platform Encryption”

Send Visualforce as an email attachment from Apex Trigger – Alternate design

Process Builder & InvocableMethod- Alternative to send Visualforce as an email attachment from Apex Trigger

Previously I had written same blog post and it was working fine before Winter 16. However, after Winter 16 critical update was released by Salesforce to consider getContent() method as a callout. If this update is enabled in your Salesforce instance then my previous blog post will not work.

In this blog post, we will go through alternate design, where we would still be able to send Visualforce page content as an Email attachment. Difference is, instead of Apex Trigger , Invocable Method and Process builder will help us getting there.

Again, consider below simple Visualforce page, which we want to send as an attachment.

Continue reading “Send Visualforce as an email attachment from Apex Trigger – Alternate design”

Dynamically remove XML content from metadata before Salesforce deployment using xmlTask – Video

Example – automatically remove listview before deployment

Many post about deployment using ANT has been posted on this blog like auto backup complete Salesforce instance daily, upload Salesforce data on FTP Server, auto generate package.xml, continuous integration and so on.

While implementing real Continuous integration in Salesforce, we need to perform various adjustments in metadata before deploying it to build server or production instance, many automated scripts (automation) are needed. If you need to change ANT scripts or metadata frequently, then it means continuous integration or deployment process in your Salesforce project is not yet fully matured.

There could be multiple situation where we don’t want some component to be deployed on production and example¬†of¬†one of them is¬†List view.¬† Continue reading “Dynamically remove XML content from metadata before Salesforce deployment using xmlTask – Video”

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”

Tips to effectively use Google chrome developer tool

While building Lightning Components in Salesforce, how to effectively use Google chrome developer tools to troubleshoot and analyze issue

Web based applications are dominating the software industry and various frameworks like Angular 2, React, polymer and Lightning are on rise. From movie Spider man, this dialogue stands very true –¬†With great power comes great responsibility.

As a web developer, its our job to make sure the application implemented by us, stands on performance benchmark and at the same time development time is reduced. To achieve this, fast¬†and effective troubleshooting of web application becomes integral part of project development. One of the best tool to troubleshoot web applications are available freely –¬†Google chrome developer tools.

In this blog post, we will uncover lots of tips and tricks about using chrome developer tools.

To launch, chrome developer tools in chrome, use shortcut ctrl+shift+I or ctrl+shift+J. We can directly execute Javascript in chrome dev tools without creating any html or javascript file.

Console API

we will start with console API of chrome developer tool first.

Printing Debug statements in Javascript

we can use various methods of console in javascript to debug our code. Previously, if we wanted to debug JavaScript, alert methods were mostly used however they were very annoying. Below code snippet shows available methods to print debug statements in chrome console.

<script> 
	console.error('Google chrome dev tools - error');
	console.warn('Google chrome dev tools - warn'); 
	console.info('Google chrome dev tools - info'); 
	console.debug('Google chrome dev tools - debug'); 
	console.log('Google chrome dev tools - log');  
</script>

Below is output, how its displayed in chrome

Console.log levels
Console.log levels

As shown in above image, different log levels of console method printed in different color. error log level even prints complete stack trace of methods showing origin of error.

Continue reading “Tips to effectively use Google chrome developer tool”

Salesforce Summer 16 – My favorite top 20 features

List of Salesforce Summer 16 features

Summer 16 is already in production and most of you already knows what’s there in pandora box. In this post, I will share¬†my favorite 20 features of Summer 16 release.

Salesforce Summer 16
Salesforce Summer 16

1. Clone Sandbox (Pilot) : This feature is not yet generally available however worth mentioning. Till now, we could create Sandbox only from production, however Summer 16 gives us a way to create brand new sandbox from other existing sandbox instead of production.

2. New Trace Flags in Debug Log : Now we can add trace flags on Automated Process, User, Apex Trigger and Apex classes as well. Before this release, we could only add trace flag on user. This enhancement will give developers more control over what to display in debug log and overcome debug log size limit problems.

Salesforce Summer 16 new Debug logs

Continue reading “Salesforce Summer 16 – My favorite top 20 features”