Can you tell if an LWC is being used in a Flow?

Question

I am building a generic component which can be used either on a record detail page or within a flow. If it's being used in a flow, I want the user to go Next when they click a button, and if being used on a detail page, I want the user to remain on the page.

Is it possible to handle these two scenarios?

I am using FlowNavigationNextEvent to navigate my flow.

Answer 1

Declaring a class property @api availableActions = [];, if the component is in a flow context, the framework will provide the following values:

• NEXT
• BACK
• PAUSE
• RESUME
• FINISH

Then it could be used to know whether a navigation action is available, so you could enclose the dispatch of FlowNavigationNextEvent event in an if block:

if (this.availableActions.includes('NEXT')) {
    this.dispatchEvent(new FlowNavigationNextEvent());
}

This will also prevent firing the event if the component is in a record page context.
Anyway it shouldn't matter, since firing FlowNavigationNextEvent event in a record page would have no consequences, so the user would remain on the page.

Answer 2

The only way I can think to do this in one component is have a "canary" input. You check both inputs the one which isn't null determines the type see example below as you can see, I am using the same label but two different underlying fields.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="urn:metadata.tooling.soap.sforce.com" fqn="LWC_NAME">
    <apiVersion>42.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>LWC_NAME</masterLabel>
    <description>LWC_DESC</description>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs> 
        <targetConfig targets="lightning__RecordPage">
            <property name="recordData" type="String" label="Data" required="true"></property>
            <property name="property1" type="String" label="property1" required="true"></property>
            <property name="property2" type="String" label="property1" required="true"></property>
            <property name="property3" type="String" label="property1" required="true"></property>
            <property name="property4" type="String" label="property1" required="true"></property>
        </targetConfig>      
        <targetConfig targets="lightning__FlowScreen">
            <property name="flowData" type="String" label="Data" required="true"></property>
            <property name="property1" type="String" label="property1" required="true"></property>
            <property name="property2" type="String" label="property1" required="true"></property>
            <property name="property3" type="String" label="property1" required="true"></property>
            <property name="property4" type="String" label="property1" required="true"></property>
        </targetConfig>
    </targetConfigs> 
</LightningComponentBundle>

Answer 3

As far as I know, you don't have a straightforward way of doing that with a single component. What you could have, however, is two components that implement your main component. They would be wrappers around your component, each declaring a different UI capability on its metadata file.