Embed Lightning Component in Flow

Author posted by Jitendra on Posted on under category Categories Salesforce and tagged as Tags , with 5 Comments on Embed Lightning Component in Flow

How to create a lookup field in Flow by embedding Lightning Component

Use Lightning Component in Salesforce Flow

Most of us are big fan of Flow but at the same time we miss a lot of obvious features like lookup fields, model dialogues etc.  This blog post might bring excitement and motivation to give more attention and love to Flow.

Around 3 years back, I had written a post on how to create a lookup component in Flow. That solution was just a workaround without user friendly experience. Lets focus on better user interface today, In this post we will give lookup field ability to flow by simply reusing existing Lightning Component.

Click here for animated image showing Flow in action supporting Lightning Component.

First and foremost, make sure you enable Enable Lightning runtime for flows by navigating to Workflow | Process Automation Settings , Otherwise flow would not run in classic runtime environment.

Complete source code of Lightning Component is available here. You can also refer this blog post explaining how Lightning Component is built and can be used.

To use Lookup Component in Flow, only thing you have to do is download it from git repository and deploy it in your Salesforce Org.

Follow below steps to see working of Lightning Component in Flow

  1. Deploy Lightning Lookup Component in your org
  2. Create a new Flow
  3. Drag a Screen element in Canvas
  4. Add a new field of type Lightning Component in extension section as shown in below image

    Lightning Component in Salesforce Flow
    Lightning Component in Salesforce Flow
  5. Once Lightning Component field is dragged on canvas, set all applicable properties.
    • We need to make sure design resource bundle in Lightning Component has all attribute mentioned which needs to be set by flow
    • All attributes must be declared as global
    • Lightning Component attributes in Flow
      Lightning Component attributes in Flow
    • As shown in above image we have set various attributes of Lightning Component like
      • which object to search
      • which value to show
      • which value to return
      • how many records to display
      • Which Icon to display
      • Placeholder Text
  6. We also need to set output variable. We can return multiple variables from Lightning component. In this case, I would be returning only one variable containing ID of record selected
    • Returning value from Lightning Component in Flow
      Returning value from Lightning Component in Flow
  7. Now, all we have to do is to create a new Screen and show selected record’s Id. That proves we can use Lightning Component, set attribute and read attributes from it.

Hope this blog post would open gates of innovation for your next Salesforce adventure.

Related posts

5 thoughts on “Embed Lightning Component in Flow”

  1. Hi Jitendra,

    This is great solution. Document is helpful to learn how we can embed a lightning component in flow. Thanks for writing this.

    I have a custom lightning component & I am putting it into flow screen. When I click previous & again come back to the lightning component screen using next button, values that i have selected earlier are not being preserved. Do you know, How we can do this?

    Thanks in advance.!
    Rajat,

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.