Embed Lightning Component in Flow

Use Lightning Component in Salesforce Flow
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.


  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.!

  2. Hi Jitendra,

    Great post ! Any suggestions on how to the make the lookup field inside the component as required and implement a null validation ? Not sure if I can mark the attribute in the component as required. That would not display the error message on the flow screen.


  3. Hi Jitendra,

    I have similar kind of work. I have a flow with embedded Lightning component. In lightning components input Text are required.
    While running flow and click “Next” required fields are not firing, but required fields are working in application.

    Please let me know in lightning component if input Text have required it will fire in flow also?

    If not can you send me sample code to validate.


Leave a comment

Your email address will not be published.

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