{"id":6496,"date":"2018-06-24T22:54:06","date_gmt":"2018-06-25T02:54:06","guid":{"rendered":"https:\/\/www.jitendrazaa.com\/blog\/?p=6496"},"modified":"2018-06-24T23:07:26","modified_gmt":"2018-06-25T03:07:26","slug":"embed-lightning-component-in-flow","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/embed-lightning-component-in-flow\/","title":{"rendered":"Embed Lightning Component in Flow"},"content":{"rendered":"<p style=\"text-align: justify;\">Most of us are big fan of Flow but at the same time we miss a lot of obvious features like <a href=\"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/creating-lookup-field-in-flow\/\">lookup fields<\/a>, model dialogues etc.\u00a0 This blog post might bring excitement and motivation to give more attention and love to <a href=\"https:\/\/www.jitendrazaa.com\/blog\/tag\/flow\/\">Flow<\/a>.<\/p>\n<p style=\"text-align: justify;\">Around 3 years back, <a href=\"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/creating-lookup-field-in-flow\/\">I had written a post on how to create a lookup component in Flow<\/a>. 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 <a href=\"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lookup-component-in-salesforce-lightning\/\">reusing existing Lightning Component<\/a>.<\/p>\n<p style=\"text-align: justify;\"><a href=\"https:\/\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Use-Lightning-Component-in-Flow.gif\"><strong>Click here for animated image showing Flow in action supporting Lightning Component.<\/strong><\/a><\/p>\n<p style=\"text-align: justify;\">First and foremost, make sure you enable <strong>Enable Lightning runtime for flows<\/strong> by navigating to <em>Workflow | Process Automation Settings , <\/em>Otherwise flow would not run in classic runtime environment.<!--more--><\/p>\n<p style=\"text-align: justify;\">Complete source code of Lightning Component is available <a href=\"https:\/\/github.com\/JitendraZaa\/LightningLookup\/tree\/master\/metadata\/unpackaged\/aura\/Lookup\">here<\/a>. You can also refer this blog post explaining <a href=\"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lookup-component-in-salesforce-lightning\/\">how Lightning Component is built and can be used<\/a>.<\/p>\n<p style=\"text-align: justify;\">To use Lookup Component in Flow, only thing you have to do is <a href=\"https:\/\/github.com\/JitendraZaa\/LightningLookup\/tree\/master\/metadata\/unpackaged\/aura\/Lookup\">download it from git repository<\/a> and deploy it in your Salesforce Org.<\/p>\n<p style=\"text-align: justify;\">Follow below steps to see working of Lightning Component in Flow<\/p>\n<ol>\n<li style=\"text-align: justify;\"><a href=\"https:\/\/github.com\/JitendraZaa\/LightningLookup\/tree\/master\/metadata\/unpackaged\/aura\/Lookup\">Deploy Lightning Lookup Component<\/a> in your org<\/li>\n<li style=\"text-align: justify;\">Create a new Flow<\/li>\n<li style=\"text-align: justify;\">Drag a Screen element in Canvas<\/li>\n<li style=\"text-align: justify;\">Add a new field of type\u00a0<strong>Lightning Component\u00a0<\/strong>in\u00a0<strong>extension\u00a0<\/strong>section as shown in below image\n<p><figure id=\"attachment_6511\" aria-describedby=\"caption-attachment-6511\" style=\"width: 840px\" class=\"wp-caption aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-6511\" src=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.21.52-PM.png?resize=840%2C959&#038;ssl=1\" alt=\"Lightning Component in Salesforce Flow\" width=\"840\" height=\"959\" srcset=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.21.52-PM.png?resize=897%2C1024&amp;ssl=1 897w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.21.52-PM.png?resize=263%2C300&amp;ssl=1 263w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.21.52-PM.png?resize=768%2C877&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.21.52-PM.png?w=916&amp;ssl=1 916w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><figcaption id=\"caption-attachment-6511\" class=\"wp-caption-text\">Lightning Component in Salesforce Flow<\/figcaption><\/figure><\/li>\n<li>Once Lightning Component field is dragged on canvas, set all applicable properties.\n<ul>\n<li style=\"text-align: justify;\">We need to make sure\u00a0<a href=\"https:\/\/github.com\/JitendraZaa\/LightningLookup\/blob\/master\/metadata\/unpackaged\/aura\/Lookup\/Lookup.design\"><strong>design\u00a0<\/strong>resource bundle<\/a>\u00a0in Lightning Component has all attribute mentioned which needs to be set by flow<\/li>\n<li style=\"text-align: justify;\">All attributes must be declared as\u00a0<strong>global<\/strong><\/li>\n<li>\n<p><figure id=\"attachment_6512\" aria-describedby=\"caption-attachment-6512\" style=\"width: 840px\" class=\"wp-caption aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-6512\" src=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.26.28-PM.png?resize=840%2C500&#038;ssl=1\" alt=\"Lightning Component attributes in Flow\" width=\"840\" height=\"500\" srcset=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.26.28-PM.png?resize=1024%2C610&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.26.28-PM.png?resize=300%2C179&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.26.28-PM.png?resize=768%2C458&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.26.28-PM.png?resize=1200%2C715&amp;ssl=1 1200w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.26.28-PM.png?w=1752&amp;ssl=1 1752w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><figcaption id=\"caption-attachment-6512\" class=\"wp-caption-text\">Lightning Component attributes in Flow<\/figcaption><\/figure><\/li>\n<li style=\"text-align: justify;\">As shown in above image we have set various attributes of Lightning Component like\n<ul>\n<li>which object to search<\/li>\n<li>which value to show<\/li>\n<li>which value to return<\/li>\n<li>how many records to display<\/li>\n<li>Which Icon to display<\/li>\n<li>Placeholder Text<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li style=\"text-align: justify;\">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\n<ul>\n<li>\n<p><figure id=\"attachment_6513\" aria-describedby=\"caption-attachment-6513\" style=\"width: 840px\" class=\"wp-caption aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-6513\" src=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.33.49-PM.png?resize=840%2C636&#038;ssl=1\" alt=\"Returning value from Lightning Component in Flow\" width=\"840\" height=\"636\" srcset=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.33.49-PM.png?resize=1024%2C775&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.33.49-PM.png?resize=300%2C227&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.33.49-PM.png?resize=768%2C581&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.33.49-PM.png?resize=1200%2C908&amp;ssl=1 1200w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.33.49-PM.png?w=1324&amp;ssl=1 1324w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><figcaption id=\"caption-attachment-6513\" class=\"wp-caption-text\">Returning value from Lightning Component in Flow<\/figcaption><\/figure><\/li>\n<\/ul>\n<\/li>\n<li style=\"text-align: justify;\">Now, all we have to do is to create a new Screen and show selected record&#8217;s Id. That proves we can use Lightning Component, set attribute and read attributes from it.<\/li>\n<\/ol>\n<p style=\"text-align: justify;\">Hope this blog post would open gates of innovation for your next Salesforce adventure.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to create a lookup field in Flow by embedding Lightning Component<\/p>\n","protected":false},"author":1,"featured_media":6516,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9],"tags":[352,311],"class_list":["post-6496","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-salesforce","tag-flow","tag-lightning-component"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.52.30-PM.png?fit=1708%2C586&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":6908,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/point-and-click\/use-lightning-web-components-in-flow\/","url_meta":{"origin":6496,"position":0},"title":"Use Lightning Web Components in Flow","author":"Jitendra","date":"October 21, 2019","format":false,"excerpt":"Endless limit for your Salesforce application by combining Flow with Lightning Web Components (LWC)","rel":"","context":"In &quot;Lightning Web Components&quot;","block_context":{"text":"Lightning Web Components","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning-web-components\/"},"img":{"alt_text":"Using LWC in Flow","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":6176,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lookup-component-in-salesforce-lightning\/","url_meta":{"origin":6496,"position":1},"title":"Lookup component in Salesforce Lightning","author":"Jitendra","date":"July 6, 2017","format":false,"excerpt":"Salesforce Lightning component in plain JavaScript and SLDS with complete source code","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Lightning Lookup Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":6298,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-winter-18-release-my-favorite-features\/","url_meta":{"origin":6496,"position":2},"title":"Salesforce Winter 18 Release \u2013 My Favorite Features","author":"Jitendra","date":"October 4, 2017","format":false,"excerpt":"My favorite Salesforce Winter 18 features about Lightning, Flow, Platform Event , Shield and Salesforce DX","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Flow in Salesforce App Builder","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/10\/Flow-in-Salesforce-App-Builder.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/10\/Flow-in-Salesforce-App-Builder.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/10\/Flow-in-Salesforce-App-Builder.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/10\/Flow-in-Salesforce-App-Builder.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":6538,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/send-salesforce-survey-without-writing-code\/","url_meta":{"origin":6496,"position":3},"title":"Send Salesforce Survey Without Code","author":"Jitendra","date":"October 21, 2018","format":false,"excerpt":"Use Flow & Process builder to send customer satisfaction survey on case close","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Send Salesforce Survey using Flow and Process Builder","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/10\/Send-Salesforce-Survey-using-Flow-and-Process-Builder.png?fit=1120%2C540&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/10\/Send-Salesforce-Survey-using-Flow-and-Process-Builder.png?fit=1120%2C540&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/10\/Send-Salesforce-Survey-using-Flow-and-Process-Builder.png?fit=1120%2C540&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/10\/Send-Salesforce-Survey-using-Flow-and-Process-Builder.png?fit=1120%2C540&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/10\/Send-Salesforce-Survey-using-Flow-and-Process-Builder.png?fit=1120%2C540&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":4970,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/creating-lookup-field-in-flow\/","url_meta":{"origin":6496,"position":4},"title":"Creating Lookup field in Flow","author":"Jitendra","date":"October 30, 2015","format":false,"excerpt":"How to create alternative solution for Lookup fields in Salesforce flow","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Lookup field - Screen 3","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/10\/Lookup-field-Screen-3.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/10\/Lookup-field-Screen-3.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/10\/Lookup-field-Screen-3.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":5885,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-spring-17-release-my-favorite-features\/","url_meta":{"origin":6496,"position":5},"title":"Salesforce Spring 17 release &#8211; My favorite features","author":"Jitendra","date":"January 27, 2017","format":false,"excerpt":"List of my favorite features in Salesforce Spring 17","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Apex Batch job - Spring 17","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/01\/Salesforce-Apex-Batch-job-Spring-17.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/01\/Salesforce-Apex-Batch-job-Spring-17.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/01\/Salesforce-Apex-Batch-job-Spring-17.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/01\/Salesforce-Apex-Batch-job-Spring-17.png?resize=700%2C400&ssl=1 2x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=6496"}],"version-history":[{"count":8,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6496\/revisions"}],"predecessor-version":[{"id":6523,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6496\/revisions\/6523"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media\/6516"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=6496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=6496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=6496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}