0

I am trying to put a flow in a lwc using this. However when I put this flow on external website using lightning out the flow works fine for the first two screen but throws This page has an error. You might just need to refresh it. Action failed: flowruntime:flowRuntimeV2$controller$onActionSelected [e is null] Failing descriptor: {flowruntime:flowRuntimeV2$controller$onActionSelected} when the next button is click on the third screen. My code is below.

demo.app

<aura:application access="GLOBAL" extends="ltng:outApp" description="demo" implements="ltng:allowGuestAccess">
    <aura:dependency resource="markup://force:*" type="EVENT"/>
    <aura:dependency resource="testFlow"/>
</aura:application>

lwc html

<!--
 - Created by zachary on 6/2/21.
 -->

<!-- Accrue Account Create -->
<template>
    <lightning-card title="" style="height: 100%;">
        <div class="slds-card__body_inner" style="height: 100%">
            <lightning-layout vertical-align="stretch">
                <lightning-layout-item flexibility="auto">
                    <div class="slds-progress slds-progress_vertical">
                        <ol class="slds-progress__list">
                            <template if:true={hasScreens}>
                                <template for:each={screens} for:item="screen">
                                    <template if:false={screen.active}>
                                        <template if:false={screen.completed}>
                                            <li class="slds-progress__item" key={screen}>
                                                <div class="slds-progress__marker"></div>
                                                <div class="slds-progress__item_content slds-grid slds-grid_align-spread">{screen.name}</div>
                                            </li>
                                        </template>
                                        <template if:true={screen.completed}>
                                            <li class="slds-progress__item slds-is-completed" key={screen}>
                                                <div class="slds-icon slds-icon_xx-small">
                                                    <span class="slds-icon_container slds-icon-utility-success slds-progress__marker slds-progress__marker_icon" title="Complete">
                                                        <lightning-icon icon-name="utility:success"></lightning-icon>
                                                    </span>
                                                </div>
                                                <div class="slds-progress__item_content slds-grid slds-grid_align-spread">{screen.name}</div>
                                            </li>
                                        </template>
                                    </template>
                                    <template if:true={screen.active}>
                                        <li class="slds-progress__item slds-is-active" key={screen}>
                                            <div class="slds-progress__marker"><span class="slds-assistive-text">Active</span></div>
                                            <div class="slds-progress__item_content slds-grid slds-grid_align-spread">{screen.name}</div>
                                        </li>
                                    </template>
                                </template>
                            </template>
                        </ol>
                        <div aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" role="progressbar"><span class="slds-assistive-text">Progress: 0%</span></div>
                    </div>
                </lightning-layout-item>
                <template if:true={hasScreens}>
                    <lightning-layout-item flexibility="auto" size="9" style="margin-left: auto; margin-right: auto; height: 100%">
                        <div style='height: 100%; width: 100%'>
                            <div class="slds-card__body_inner" style='height: 100%; width: 100%; min-height: 500px'>
                                <c-screen-flow onflowstatuschange={handleFlowChange} flow-name='Accrue_CreateAccountInLWC' height="100%" width="100%" flow-params={params} style='height: 100%; width: 100%'></c-screen-flow>
                            </div>
                        </div>
                    </lightning-layout-item>
                </template>
            </lightning-layout>
        </div>
    </lightning-card>
</template>

lwc js

/**
 * Created by zachary on 6/2/21.
 */

import {LightningElement} from 'lwc';
import getScreenName from '@salesforce/apex/Accrue_getScreenNames.returnScreenNames'
export default class AccrueAccountCreate extends LightningElement {
    screens = []
    hasScreens = false
    screenActive
    firstCall = true
    step = 1
    params = ''
    connectedCallback() {
        getScreenName().then(result => {
            result.forEach(screen => {
                this.screens.push({name: screen, active: false, completed: false})
            })
            this.hasScreens = true
            this.updateActive()
        })
    }

    handleFlowChange(event) {
        console.log(JSON.stringify(event.detail))
        // TODO add code to handle progress bar
    }

    updateActive() {
        if(this.firstCall) {
            this.screens[0].active = true
            this.firstCall = false
        } else {
            for(let i = 1; i <= this.step; i++) {
                if(i === this.step) {
                    this.screens[i-1].active = true
                    this.screens[i-1].completed = false
                } else {
                    this.screens[i-1].completed = true
                    this.screens[i-1].active = false
                }
            }
        }
    }
}
4
  • Extrernal website would be using, guest user profile, check if the guest user profile has the desired access. This article might help you Jun 4, 2021 at 19:54
  • @HemantJain I have. It has all objects,apex classes, visualforce, and named creds. This also does not work inside salesforce either. Jun 4, 2021 at 20:12
  • Does it have access to the flow is the flow active too? Jun 4, 2021 at 20:54
  • @SergioAlcocer It does. The flow work for the first two screens in it but fails on when clicking the next button on the third screen. Jun 4, 2021 at 20:57

1 Answer 1

4

I've been dealing with a very similar issue all day, trying to expose a lightning runtime flow embedded in VF through a public site, but finally - finally - discovered that navigation buttons simply will not work if there is a Section component added anywhere on the Screen. Apparently there is absolutely zero information out there about this bug. Took a few hours of brute force to figure this one out.

So, remove any and all Section components from your Screen elements, figure out a workaround using text templates if necessary, and you should be good to go.

2
  • I just confirmed this... Do you have a link to a known issue for this @nllpntr? Dec 21, 2021 at 10:09
  • you saved my evening! Crazy little flows...
    – derroman
    Feb 19, 2023 at 17:12

You must log in to answer this question.

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