Use Lightning Component in Salesforce Flow

Embed Lightning Component in 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.


Posted

in

by

Comments

8 responses to “Embed Lightning Component in Flow”

  1. Mark H. Morrison Avatar

    Jitendra,

    What a blessing this post and the others you have leading up to this are. I’ve added to your code base and implemented a few added features I needed. I could do a pull request if you are interested. Here is my repo: https://github.com/MarkHMorrison/Salesforce/tree/master/Lightning/Lookup

    Awesome information and well presented. Thanks!

    1. Jitendra Avatar

      Hi Mark, what changes have you made ? Would love to get a pull request !!!

  2. Nikunj Avatar
    Nikunj

    Hi JItendra, can we make it autocomplete ? I am using it for user lookup in the flow for creating task.

  3. Rajat koradiya (@KoradiyaRajat) Avatar

    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,

    1. Jitendra Avatar

      Rajat, If you are assigning Lex Component attribute back in flow Input/Output variable, you should be able to persist values between pages

  4. Dev Avatar
    Dev

    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.

    Thanks,
    Dev

  5. harithaanjiJI Avatar
    harithaanjiJI

    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.

    Thanks
    Anji

  6. Mihir Avatar
    Mihir

    Hi Jitendra,

    Nice article. Is there a possibility to add Lightening Web component in the flow.

Leave a Reply

Your email address will not be published. Required fields are marked *

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