{"id":7066,"date":"2024-03-30T10:36:00","date_gmt":"2024-03-30T10:36:00","guid":{"rendered":"https:\/\/www.greytrix.com\/blogs\/salesforce\/?p=7066"},"modified":"2025-07-30T06:59:33","modified_gmt":"2025-07-30T06:59:33","slug":"how-to-call-screen-flow-from-lightning-web-component-in-salesforce","status":"publish","type":"post","link":"https:\/\/www.greytrix.com\/blogs\/salesforce\/2024\/03\/30\/how-to-call-screen-flow-from-lightning-web-component-in-salesforce\/","title":{"rendered":"How to call Screen Flow from Lightning Web Component in Salesforce"},"content":{"rendered":"\n<p>This blog post will go over how to call the Winter&#8217;23 release of Screen Flow from a Lightning Web component. With Lightning Web Components, we can now initiate Screen flows. Additionally, we may adjust the final behavior by adjusting the styling and transferring the custom logic to the flow.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-vivid-red-color has-text-color has-link-color wp-elements-6c3a60eb713c3869406d512b257dbc4a\"><strong>Call Screen Flow from Lightning Web Component<\/strong><\/h2>\n\n\n\n<p><strong>Below are the steps to create a New Screen Flow in Salesforce:-<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Log in to your Salesforce Org.<\/li>\n\n\n\n<li>Go to \u201c<strong>Setup<\/strong>\u201d and Search for <strong>\u201cFlow\u201d<\/strong>.<\/li>\n\n\n\n<li>Click on <strong>\u201cNew Flow\u201d<\/strong> Button. Select <strong>\u201cScreen Flow\u201d<\/strong>(As shown in the below image).<\/li>\n<\/ul>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2023\/02\/1.Screen-Flow.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2023\/02\/1.Screen-Flow.png\" alt=\"Screen Flow\"><\/a><\/center>\n<font size=\"2\"><center><i>Screen Flow <\/i><\/center><\/font>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add a <strong>\u201cDisplay Screen\u201d<\/strong> in the Flow (as shown in the below image).<\/li>\n<\/ul>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2023\/02\/2.-Display-Screen.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2023\/02\/2.-Display-Screen.png\" alt=\"Display Screen\"><\/a><\/center>\n<font size=\"2\"><center><i>Display Screen <\/i><\/center><\/font>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add a <strong>\u201cDisplay Text\u201d<\/strong> on the Display Screen. Enter the text which you want to display(As shown in the below image).<\/li>\n\n\n\n<li>Save the &#8220;<strong>Flow&#8221; <\/strong>and Make it &#8220;<strong>Active&#8221;<\/strong>.<\/li>\n<\/ul>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2023\/02\/3.Display-Text.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2023\/02\/3.Display-Text.png\" alt=\"Display Text\"><\/a><\/center>\n<font size=\"2\"><center><i>Display Text <\/i><\/center><\/font>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a New LWC Component using IDE (example: Visual Studio Code). Use the below code for Component Html.<\/li>\n\n\n\n<li>As per Winter&#8217;23 release a new&nbsp;<code>lightning-flow<\/code>&nbsp;component is available, using which we can call screen flows inside the LWC component.<\/li>\n\n\n\n<li>flow-api-name&nbsp;\u2013 Enter the API name of the Screen Flow that you created above to call inside LWC.<\/li>\n\n\n\n<li>flow-input-variables&nbsp;\u2013 You can pass the input parameters to the Screen Flow.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong><em>Note:&nbsp;<\/em><\/strong><em>This feature works with Winter&#8217;23 and later releases only.<\/em><\/p>\n<\/blockquote>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2023\/02\/5.flowcomponentLWC.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2023\/02\/5.flowcomponentLWC.png\" alt=\"flowcomponentLWC\"><\/a><\/center>\n<font size=\"2\"><center><i>flowcomponentLWC <\/i><\/center><\/font>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to \u201c<strong>Setup<\/strong>\u201d and search for <strong>\u201cTabs\u201d<\/strong>.<\/li>\n\n\n\n<li>Click on <strong>\u201cNew\u201d<\/strong> Button under the Lightning Component Tabs Section. Create a Lightning Component Tab.<\/li>\n\n\n\n<li>Add the tab to any Application where you want to display the Output.<\/li>\n<\/ul>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2023\/02\/4.LWC-Flow-Output.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2023\/02\/4.LWC-Flow-Output.png\" alt=\"call Screen Flow from Lightning Web Component\"><\/a><\/center>\n<font size=\"2\"><center><i>LWC Flow Output<\/i><\/center><\/font>\n\n\n\n<p>By following the above blog instructions, you will be able to understand \u201c<strong>How to call Screen Flow from Lightning Web Component in Salesforce<\/strong>\u201c. If you still have queries or any related problems, don\u2019t hesitate to contact us at <a href=\"mailto:salesforce@greytrix.com\" target=\"_blank\" rel=\"noreferrer noopener\">salesforce@greytrix.com<\/a>. More details about the Product are available on <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/erp-integration\/\" target=\"_blank\" rel=\"noreferrer noopener\">our website<\/a> and <a href=\"https:\/\/appexchange.salesforce.com\/listingDetail?listingId=a0N30000000psM5EAI\" target=\"_blank\" rel=\"noreferrer noopener\">Salesforce AppExchange<\/a>.<\/p>\n\n\n\n<p>We hope you may find this blog resourceful and helpful. However, if you still have concerns and need more help, please get in touch with us at <a href=\"mailto:salesforce@greytrix.com\" target=\"_blank\" rel=\"noreferrer noopener\">salesforce@greytrix.com<\/a>.<\/p>\n\n\n\n<p style=\"text-align: justify\"><b>About Us<\/b><\/br>\n<p><a href=\"https:\/\/www.greytrix.com\/\">Greytrix<\/a> \u2013 a globally recognized and one of the oldest Sage Development Partner and a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners and Sage PSG across the globe. We offer Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that require apex code incorporation into the Salesforce platform.<br><br> Greytrix has some unique solutions for Cloud CRM such as <a href=\"\">Salesforce Sage integration<\/a> for <a href=\"https:\/\/www.greytrix.com\/sage-x3-erp\/integration\/\">Sage X3<\/a>, <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/sage-100-integration\/\">Sage 100<\/a> and <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/sage-300-integration\/\">Sage 300 (Sage Accpac)<\/a>. We also offer best-in-class Cloud CRM <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/crm-development\/\">Salesforce customization and development services<\/a> along with services such as Salesforce <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/data-migration-support\/\">Data Migration<\/a>, <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/crm-development\/\">Integrated App development<\/a>, Custom App development and Technical Support business partners and end users. Salesforce Cloud CRM integration offered by Greytrix works with Lightning web components and supports standard opportunity workflow. Greytrix GUMU&#x2122; integration for Sage ERP \u2013 Salesforce is a 5-star rated app listed on <a href=\"https:\/\/appexchange.salesforce.com\/appxListingDetail?listingId=a0N30000000psM5EAI\" target=\"_blank\" rel=\"noopener\">Salesforce AppExchange<\/a>.<br> The GUMU&#x2122; Cloud framework by Greytrix forms the backbone of cloud integrations that are managed in real-time for processing and execution of application programs at the click of a button.<br><br> For more information on our Salesforce products and services, contact us at <a href=\"mailto:salesforce@greytrix.com\">salesforce@greytrix.com<\/a>. We will be glad to assist you.<\/p>\n\n\n\n<p><strong>Related Posts<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/02\/09\/how-to-fetch-current-record-id-from-lightning-web-components-lwc\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Fetch current Record Id from Lightning Web Components (LWC)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/08\/18\/navigation-service-in-lwc\/\" target=\"_blank\" rel=\"noreferrer noopener\">Navigation Service in LWC<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/02\/16\/how-to-invoke-an-lwc-component-function-from-aura-component\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to invoke an LWC Component function from Aura Component<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This blog post will go over how to call the Winter&#8217;23 release of Screen Flow from a Lightning Web component. With Lightning Web Components, we can now initiate Screen flows. Additionally, we may adjust the final behavior by adjusting the styling and transferring the custom logic to the flow. Call Screen Flow from Lightning Web\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2024\/03\/30\/how-to-call-screen-flow-from-lightning-web-component-in-salesforce\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":2,"featured_media":9443,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[1224,799,206,207,208,942,1195,1241],"class_list":["post-7066","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-salesforce-srv","tag-flow","tag-flow-setting-in-salesforce","tag-lightning","tag-lightning-basics","tag-lightning-component","tag-lightning-flows","tag-salesforce-flows","tag-screenflow"],"_links":{"self":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/7066","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/comments?post=7066"}],"version-history":[{"count":11,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/7066\/revisions"}],"predecessor-version":[{"id":10774,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/7066\/revisions\/10774"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/media\/9443"}],"wp:attachment":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/media?parent=7066"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/categories?post=7066"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/tags?post=7066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}