Embed Lightning component in Flows and passing data between flow and Ltng Component

This blog post explains how to embed/place/use lightning component in Screen Flow. The Lightning component which will be used in Flow must implement interface lightning:availableForFlowScreens. Let's take a basic example with a contact insertion using screen flow. In this example, the lightning component is used a account look up search field.

Screen Flow preview

To demonstrate this approach in a simple way I took lightning data services tag lightning:recordEditForm and to avoid complexity. The attributes specified in design:component will be accessible from flow. When these design attributes are mapped/connected to flow variables, the lightning component even can restore the field values from paused flows.

Once created the Lightning component then create a Screen flow to insert a Contact. Drag and drop the Lightning component created in previous step. Provide mapping for lightning component variables which are from design attribute section, to the Flow variables. The input and output variables mapping in flow will ensures the Lightning component loads the saved data when flow paused. The flow variable {!acRecId} in this case holds the account Id selected in Lightning component and makes it available for Insert contact stage in flow even user comes back to paused flows.

Add other text fields such as email and phone of contact to the flow screen and provide mapping in the final contact insert stage as mentioned below screenshots.

Adding Lightning component and other text fields in screen flow.

Drag and drop the create records action from flow actions and provide mapping for inserting contact record from flow input fields and variables.

Cheers!!!

This blog post explains how to embed/place/use lightning component in Screen Flow. The Lightning component which will be used in Flow must ...

Navigate users to record detail after finishing Screen Flow

This blog post demonstrates how to navigate a user to record detail automatically after finishing the flow. This can be achieved with a a custom Lightning Component which can accessible in side the flow. The standard Lightning interfaces force:lightningQuickAction and lightning:availableForFlowActions will make the lightning component is accessible from core actions section in Flow builder.

Let's create a Lightning Component that can be accessible inside the flow and can be accessible for core actions in flow. Create a lightning component as specified below. The invoke method in the controller js will be fired automatically when flow invokes the lightning component.

Let's create flow now, To avoid complexity let's consider a basic contact insertion with a screen flow. 

A new contact screen in flow builder. Let's build a form with flow builder with contact first name, last name. mobile and phone. First Drag and drop a screen component from flow builder and add all text components for above mentioned fields in new contact form.

In the next step, drag and drop the create records action from flow builder and select contact object for insertion and also map all the text fields values(no flow variables required) from previous screen flow to contact object fields in current screen. Also create a variable to hold record Id of contact after insertion as in below screenshot {!contactId}. While creating this variable make sure you did not provided any default value for variable and avoid "Available for input" option in flow variable screen or else flow will throws an error.

In the final step, drag and drop the Core Actions action from flow builder and choose the lightning component that we created initially and provide mapping for record Id in the Lightning component from the flow variable contactId which consists a inserted contact Id.  

We can preview this screen flow from app builder. Just go to app builder from Lightning Quick find side bar in setup and create an App Page from app builder and drag and drop your screen flow. Once created an app page we can access it from app launcher search bar.

This blog post demonstrates how to navigate a user to record detail automatically after finishing the flow. This can be achieved with a a c...

Lightning Component for Sending Email for List View Selected Records and using Email Templates

Hi there, At the time of this blog post, There is no standard Lightning component available for Email composer, So I created a custom component for sending Email and mimic of the standard email composer and also for sending Listview selected records.

I assumed sending email for person accounts (person accounts by default not available in salesforce you have to rise a case to enable them) of Opportunities. Please choose different object for sending(from contact List view)  since if you don't have person accounts enabled you will get compile errors.

You also need to create a rich text field in any object since we don't have standard richtext tags in lighting at the time of posting this blog post. We need rich text field to mimic the email composer screen and also to render the text review of template selected.

I have used a List view button of type visualforce in opportunities List view and in visualforce page i have placed Lightning Component.

The list view selected records will be sent to Lightning Component.

Get the snippets below to image.

Visualforce Page:


Controller Extension:
EmailComp:
Controller.js:
Helper.js:
EmailComp Apex Class:



I did not mentioned the snippet for the component "c:reUsableMultiSelectLookup" here. Because it is a custom look up component that can be available from many places like salesforce forums and blogs. All you need to do is to tweak the init section of your look up component by passing the selected items to display them automatically. 

Hi there, At the time of this blog post, There is no standard Lightning component available for Email composer, So I created a custom compo...

Salesforce Lightning Compent to Insert Multiple Attachments

Hello there.

This is about a Lighting Component for uploading multiple Attachments for any Object.

It would work for all objects and can also be re usable in SF communities. To get an easy understanding i've used the component in Quick Action / lightning action. Thanks to Manoj for actual idea and support.

The Attachment would be inserted simultaneously  when selected a file and also deleteing would deleted from database.

Component:


Controller JS:

Helper JS:


Styles:


Apex cls:

Hello there. This is about a Lighting Component for uploading multiple Attachments for any Object. It would work for all objects and ca...

Using external Javascript libraries in Lightning / Chart JS in Salesforce Lightning

To reference a JavaScript library that you’ve uploaded as a static resource, use a <ltng:require> tag in your .cmp or .appmarkup.


The afterScriptsLoaded action in the client-side controller is called after the scripts are loaded. Don't use the init event to access scripts loaded by <ltng:require>. These scripts load asynchronously and are most likely not available when the initevent handler is called

Lets have a look at the basic initialization of external chart librarbies in Lightning using  Chart JS

1) Import Chart JS min bundle  or get the latest from chart js site ans save it into static resource

2) Create a lighting component bundle and app as shown below sample code.



Demo App:

Component:

ControllerJS:

ApexClass:

To reference a JavaScript library that you’ve uploaded as a static resource, use a  <ltng:require>  tag in your  .cmp  or  .app marku...