0

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.

3
  • 1
    You could have an instance property @api availableActions = []; then check this.availableActions.includes('NEXT') before firing the event. I didn't try, but I think that firing FlowNavigationNextEvent event in a record page would have no consequences, so the user would remain on the page.
    – RubenDG
    Jul 28, 2023 at 18:18
  • 2
    @RubenDG make this an answer... I can confirm the event is ignored when fired outside a flow.
    – Phil W
    Jul 28, 2023 at 20:34
  • @PhilW thanks for confirming it
    – RubenDG
    Jul 29, 2023 at 7:08

3 Answers 3

4

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.

3

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>
1
  • Nice. Even better to assign a default value so there is no need to explicitly set the value.
    – Phil W
    Jul 28, 2023 at 20:31
0

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.

You must log in to answer this question.

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