{"id":6908,"date":"2019-10-21T22:56:44","date_gmt":"2019-10-22T02:56:44","guid":{"rendered":"https:\/\/www.jitendrazaa.com\/blog\/?p=6908"},"modified":"2019-10-22T00:00:49","modified_gmt":"2019-10-22T04:00:49","slug":"use-lightning-web-components-in-flow","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/point-and-click\/use-lightning-web-components-in-flow\/","title":{"rendered":"Use Lightning Web Components in Flow"},"content":{"rendered":"\n

As part of Winter 20, we can embed Lightning Web Components<\/strong> in Flow. Imagine, endless possibilities for Rapid Application Development (RAD) and ease of maintaining application. <\/p>\n\n\n\n

Few examples where this could come handy are like embedding lookup components (no more workaround)<\/a>, showing data table, capturing signature, slide shows and so on. <\/p>\n\n\n\n

It’s time to jump into water. In this blog post, I would be creating Simple Lightning Web Component (LWC). This LWC Component would be able to get value from flow, pass value to flow, navigate to Next screen and hookup into flow validation<\/strong> engine to restrict next page navigation if there is error in LWC input.<\/p>\n\n\n\n

Note : Read this blog post to learn how to embed Aura Component in Flow<\/a>.<\/p>\n\n\n\n\n\n\n\n

Below LWC component, only has one text box<\/p>\n\n\n

\n<template>\n    <lightning-card title="Lightning Web Component For Flow" icon-name="custom:custom14">\n        <div class="slds-m-around_medium">\n                <lightning-input label="Message To Send" type="text" value={_txtBoxVal} onchange={handleChange}><\/lightning-input>\n                <br \/> \n                <lightning-button label="Publish Attribute" onclick={handleClick}><\/lightning-button>\n                <lightning-button label="Navigate to Next" variant="brand" onclick={handleNext} ><\/lightning-button> \n        <\/div>\n    <\/lightning-card>\n<\/template>\n<\/pre><\/div>\n\n\n
Javascript of LWC component looks like <\/p>\n\n\n
\nimport { LightningElement , track, api} from 'lwc';\nimport {FlowAttributeChangeEvent, FlowNavigationNextEvent} from 'lightning\/flowSupport';\n  \n\nexport default class Lwc_TextBox extends LightningElement {\n   @track _txtBoxVal = '';\n   @api availableActions = [];\n    \n\n    @api \n    get txtBoxVal(){\n        return this._txtBoxVal;\n    }\n\n    set txtBoxVal(val){\n        this._txtBoxVal = val;\n    }\n\n    handleChange(event) { \n        this._txtBoxVal = event.target.value; \n    }\n\n    \/\/Change attribute on Flow\n    handleClick(event) {   \n        const attributeChangeEvent = new FlowAttributeChangeEvent('txtBoxVal', this._txtBoxVal); \n        this.dispatchEvent(attributeChangeEvent);   \n    }\n\n    \/\/Hook to Flow's Validation engine\n    @api\n    validate() {\n        if(!this._txtBoxVal.includes('oracle')) { \n            return { isValid: true }; \n            }  \n        \/\/If the component is invalid, return the isValid parameter as false and return an error message. \n        return { \n            isValid: false, \n            errorMessage:  'You cannot have string oracle in String' \n            };  \n    }\n\n     \/\/Go to Next screen of Flow\n    handleNext(event){ \n       const nextNavigationEvent = new FlowNavigationNextEvent();\n       this.dispatchEvent(nextNavigationEvent); \n    } \n}\n<\/pre><\/div>\n\n\n
In above Javascript, one method informs parent Flow that attribute changed. Another Javascript method navigates to next page. There is another Javascript method, which hooks up to flow validation engine saying that text box cannot have word ‘Oracle’.<\/p>\n\n\n\n
Metadata file of LWC component looks like<\/p>\n\n\n
\n<?xml version="1.0" encoding="UTF-8"?>\n<LightningComponentBundle xmlns="http:\/\/soap.sforce.com\/2006\/04\/metadata" fqn="lwc_TextBox">\n    <apiVersion>47.0<\/apiVersion>\n    <isExposed>true<\/isExposed>\n    \n    <targets>\n        <target>lightning__FlowScreen<\/target>\n    <\/targets>\n\n    <targetConfigs>\n        <targetConfig targets="lightning__FlowScreen">\n            <property name="txtBoxVal" type="String"  \/> \n        <\/targetConfig>\n    <\/targetConfigs>\n\n<\/LightningComponentBundle>\n<\/pre><\/div>\n\n\n
In LWC metadata, we are informing Salesforce platform that this component can be used in flow. <\/p>\n\n\n\n
Its time to create Flow<\/strong> in Salesforce , below image shows how final flow will look like<\/p>\n\n\n\n
\"LWC
LWC in Flow – Summary<\/figcaption><\/figure>\n\n\n\n
Screen 1 would look like<\/p>\n\n\n\n
\"LWC
LWC Flow Screen 1<\/figcaption><\/figure>\n\n\n\n
In above screen, we are simply showing current value in variables and then changing those variables via text components. Next Assignment components are reading text box and assigning values in variable. <\/p>\n\n\n\n
Next Screen contains LWC component and setting informing flow that which flow variable needs to be updated if attribute in flow changes <\/p>\n\n\n\n
\"Setting
Setting Output attribute from LWC to Flow<\/figcaption><\/figure>\n\n\n\n
Output :  Screen 1<\/p>\n\n\n\n
\"\"
Flow Output – Screen 1<\/figcaption><\/figure>\n\n\n\n
Output : Screen 2<\/p>\n\n\n\n
\"\"
Flow Output – Screen 2<\/figcaption><\/figure>\n\n\n\n
Resources :<\/strong><\/p>\n\n\n\n
LWC attributes for Flow<\/a><\/p>\n\n\n\n
Using LWC in Flow<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Endless limit for your Salesforce application by combining Flow with Lightning Web Components (LWC)<\/p>\n","protected":false},"author":1,"featured_media":6917,"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":[475,474],"tags":[352,462,464,476],"class_list":["post-6908","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lightning-web-components","category-point-and-click","tag-flow","tag-lightning-web-component","tag-lwc","tag-winter-20"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=3408%2C1848&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":7140,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/using-custom-label-in-lightning-web-components-lwc\/","url_meta":{"origin":6908,"position":0},"title":"Using Custom Label in Lightning Web Components – LWC","author":"Jitendra","date":"April 4, 2020","format":false,"excerpt":"Quick Code Snippet on how to use custom label in Lightning Web Components - LWC","rel":"","context":"In "Lightning Web Components"","block_context":{"text":"Lightning Web Components","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning-web-components\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6920,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/data-exchange-between-aura-lightning-web-components-lwc-and-visualforce\/","url_meta":{"origin":6908,"position":1},"title":"Event Handling between Aura, Lightning Web Components (LWC) and Visualforce","author":"Jitendra","date":"October 16, 2019","format":false,"excerpt":"How to use Lightning Message Services for event handling between Lightning Web Components, Aura Components and Visualforce","rel":"","context":"In "Lightning"","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Salesforce Lightning Message Service","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":7101,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/implement-infinite-scrolling-for-lightning-data-table\/","url_meta":{"origin":6908,"position":2},"title":"Implement Infinite Scrolling for lightning-datatable","author":"Jitendra","date":"June 10, 2020","format":false,"excerpt":"When to use wire vs Imperative approach to call Apex in Lightning Web Component","rel":"","context":"In "Lightning Web Components"","block_context":{"text":"Lightning Web Components","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning-web-components\/"},"img":{"alt_text":"Salesforce Lightning Datatable Infinite Scrolling","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/06\/Salesforce-Lightning-Datatable-Infinite-Scrolling-e1624579111169.png?fit=700%2C385&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/06\/Salesforce-Lightning-Datatable-Infinite-Scrolling-e1624579111169.png?fit=700%2C385&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/06\/Salesforce-Lightning-Datatable-Infinite-Scrolling-e1624579111169.png?fit=700%2C385&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/06\/Salesforce-Lightning-Datatable-Infinite-Scrolling-e1624579111169.png?fit=700%2C385&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":7044,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/limitations-of-lwc\/","url_meta":{"origin":6908,"position":3},"title":"Limitations of LWC","author":"Jitendra","date":"April 22, 2020","format":false,"excerpt":"Considerations & Limitations of Lightning Web Component in Salesforce","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"LWC Not Supported","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/04\/LWC-Not-Supported.png?fit=1200%2C569&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/04\/LWC-Not-Supported.png?fit=1200%2C569&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/04\/LWC-Not-Supported.png?fit=1200%2C569&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/04\/LWC-Not-Supported.png?fit=1200%2C569&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/04\/LWC-Not-Supported.png?fit=1200%2C569&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":6848,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lightning-web-component-event-handling-pub-sub\/","url_meta":{"origin":6908,"position":4},"title":"Lightning Web Component Event Handling – Pub Sub","author":"Jitendra","date":"June 21, 2019","format":false,"excerpt":"How to handle events in Lightning Web Components between nested and non nested Components","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Event Communication between Lightning Web Components","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/05\/Event-Communication-between-Lightning-Web-Components.png?fit=675%2C382&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/05\/Event-Communication-between-Lightning-Web-Components.png?fit=675%2C382&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/05\/Event-Communication-between-Lightning-Web-Components.png?fit=675%2C382&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":7129,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/change-icon-color-in-lightning-web-component\/","url_meta":{"origin":6908,"position":5},"title":"Change Icon Color in Lightning Web Component","author":"Jitendra","date":"June 30, 2020","format":false,"excerpt":"Why fill css property not working for LWC Icon","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/06\/View-Source-code-of-LWC-Icon-as-svg.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6908","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=6908"}],"version-history":[{"count":4,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6908\/revisions"}],"predecessor-version":[{"id":6919,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6908\/revisions\/6919"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media\/6917"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=6908"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=6908"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=6908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}