0

In my Screen Flow, I need buttons that are not available in the Flow Builder, so I developed a custom lwc component - a footer with the buttons that I need. I placed this custom footer under a data table on the screen.

The issue I'm facing is that the data table has many rows and doesn't fit entirely on the screen, making the screen scrollable. As a result, users have to scroll down to reach the footer to click the buttons.

I want to place this custom footer in the same fixed position where the standard footer typically appears, so that it remains visible at the bottom of the screen regardless of scrolling. Additionally, I have a few screens of different sizes, so the footer should stick to the bottom of any screen.

I would greatly appreciate any help! Below are screenshots of my screen flow, the footer component, and my attempt to resolve it with CSS.

Thank you in advance!

  • This is what I have now. A user needs to scroll to see footer. enter image description here

  • This is how it should look like. Footer is always visible. enter image description here

- This is html of my component.

<template>
    <div class="footer-container slds-clearfix">
        <template for:each={buttons} for:item="button">
            <lightning-button
                key={button.label}
                label={button.label}
                onclick={handleClick}
                variant={button.variant}
                class={button.class}
                >
            </lightning-button>
        </template>
    </div>
</template>
  • This is the CSS with which I tried to resovle the issue:

.footer-container { position: fixed; bottom: 2.54rem; z-index: 1000; width: 100%; left: 0; }

It works well for the screen with big data table (see the second screenshot above). But does not work for smaller screens: enter image description here

So I am looking for a solution that would work for any flow screen sizes.

5
  • Have you considered wrapping the body of the screen in a scrollable?
    – Phil W
    Commented May 31 at 21:11
  • Thank you for the response! Sorry, I am not sure I know what you mean. How can I wrap the screen? It's the standard screen of the flow. Can I make any changes on it? Commented May 31 at 21:16
  • I mean, put your datatable in a fixed height scrollable div.
    – Phil W
    Commented May 31 at 21:30
  • The data table is also a standard element of the flow I can't manipulate it. At least I don't know how to do it. The only custom element here is my footer, to which code I have access. Commented May 31 at 21:35
  • Ah, OK, I get you. It isn't a custom component.
    – Phil W
    Commented Jun 1 at 7:05

1 Answer 1

1

I found a workaround. Post for those who encountered the same issue. I added this CSS to my custom footer component:

position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 10;

It makes the footer to be always in the bottom of the flow screen. However, the footer may cover over a part of a data table. So, in Flow Builder I added the Display Text element with a couple of blank lines. It creates a gap between the footer and data table.

3
  • Glad you found a way. I suspect this would be rejected by Salesforce Security review if you needed to go through one, but otherwise glad it is working.
    – Phil W
    Commented Jun 1 at 13:13
  • I would say call your datatable flow in LWC directly. This way you can easily control the css. Commented Jun 3 at 5:14
  • @sanketkumar This is a brilliant idea! Thank you. Commented Jun 5 at 7:44

You must log in to answer this question.

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