0

I'd like to know if we can override screen flow's buttons (Pause, Previous, Finish) to do something else, not what they are originally meant to do. I basically want to fire an apex method via those buttons.

e.g.

enter image description here

1 Answer 1

1

Yes you can override the buttons using a custom lwc button. lightning/flowSupport module provides events that enable a component to control flow navigation and notify the flow of changes in attribute values.

Make sure to add flow target in meta xml file as below:-

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
</LightningComponentBundle>

and the footer component on screen flow and make sure to do uncheck show footer inside configure footer panel at the right bottom of the image.

enter image description here

The buttons in footer lwc component can look like this:-

<footer class="slds-modal__footer">
            <lightning-button class="slds-m-top_small" variant="brand" type="submit" name="update" label="Submit">
            </lightning-button>
            <lightning-button class="slds-m-top_small" onclick={handleRefresh} name="refresh" label="Refresh">
            </lightning-button>
  </footer>

handle the button click in js file of the lwc component. You can call apex method there. To finish the flow, you can fire this event:-

// navigate to the next screen
const navigateNextEvent = new FlowNavigationFinishEvent();
this.dispatchEvent(navigateNextEvent);

A working example you can find here:- LWC INSIDE FLOW WITH CUSTOM FOOTER

1
  • Exactly what I was looking for. 10/10 thank you! Nov 21, 2022 at 6:26

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .