1

I have an LWC component inside of an Opportunity tab. Running the flow works flawless. However, when pressing any button inside the flow, it positions the viewport to have that button at the top of the viewport. Like so: on load of next screen in flow, user viewport positions itself with the button at the top of the viewport

The issue being, whenever a user want's to go through a flow, they have to scroll back up, to read the next/previous/finish screen.

Template:

            [...]<template if:true={displayFlow}>
           
            <lightning-layout-item size="4" class="flow-container">
                <template for:each={flows} for:item="flow">
                    <template if:true={flow.display}>
                        <div key={flow}  class="flow-iteration">
                            
                                <lightning-flow
                                    flow-api-name={flow.name}
                                    flow-input-variables={flow.inputVariables}
                                    onstatuschange={handleFlowStatusChange}
                                    >
                                </lightning-flow>

                        </div>
                    </template>  
                </template> [...]

Js:

             [...]this.flows.push(
            {
                "display" : true,
                "name" : "Bestall_nya_produkter",   // THIS IS FLOW API NAME
                "inputVariables": [ {
                    "name": "recordId",             // API INPUT VARIABLE NAME
                    "type": "String",               // VARIABLE TYPE
                    "value": data[0].Id             // ID of RECORD (OrderId)
                    },
                ]
            },
            {
                "display" : data[0].Status != "Draft" ? false : true,
                "name" : "ReadyForBilling",
                "inputVariables": [ {
                    "name": "GetOrderId",             // API INPUT VARIABLE NAME
                    "type": "String",               // VARIABLE TYPE
                    "value": data[0].Id             // ID of RECORD (OrderId)
                    },
                ]
            },
        )
        this.displayFlow = true;[...]

Things I've tried are

  • disable the scrolling of the page - gives me a "NoErrorObject" modal
  • position the window back to the element - gives me a "window" is not defined error

Any tips is most welcome, and do tell me if I need to be clearer with my question. Much obliged.

1 Answer 1

0

So here's the things I based my solution on: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView https://www.levelupsalesforce.com/lwc-scroll-to-element

And here's the solution that worked for me:

This is the eventListener to only react if the flow has initilialized and if a button in the flow was pressed:

renderedCallback(){
    try {
        window.addEventListener('scroll', event => {
            if (this.initialized && this.pressedFlowButton) {
                const topDiv = this.template.querySelector('.flow-iteration');
                topDiv.scrollIntoView({behavior: "auto", block: "center", inline: "nearest"});
                this.pressedFlowButton = false; // to let user scroll freely after the return-scroll initiated by this
            }
        });
    } catch (error) {
        console.log('this is error: ',error);
    }
}

Heres the event handler for pressing a button in the flow:

    handleFlowStatusChange(event){
    console.log(event.detail.status);

    if (this.initialized) {
        this.pressedFlowButton = true;
    } else {
        this.initialized = true; // when the flow starts, is triggers a flowStatusChange and sets initialized to true
    }
    
    if (event.detail.status === 'FINISHED') {
        const event = new ShowToastEvent({
            title: 'Bra jobbat!',
            message: 'Nu har du gått igenom flowet',
            variant: 'success',
        });

    }

}

You must log in to answer this question.

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