0

I have created a new List View button(image 1). This button triggers a flow with Screen (image 2).

The Screen (image 2) fills the entire page. I want the Screen to be smaller and not take up the whole page - is this possible?

IMAGE: 1. List View button "New Staff"

IMAGE: 2. Flow Screen

IMAGE: 3 - button properties. Button

1
  • 1
    One of the approaches could be to create not a Button but Action with Flow OR Action with LWC component that renders a flow
    – kurunve
    Commented Aug 30, 2022 at 11:12

1 Answer 1

1

As you are trying to call the flow from List View page, Your best option is to create a VisualForce page and embed the flow. In the VF Page you can use slds-grid and adjust the width of the flow.

You can find the details here in the Salesforce documentation.

Here is an example on how to use slds-grid to adjust the width of the flow. As the flow takes some time to load, I have used onstatuschange event to handle that.

<apex:page standardController="<ObjectName>" extensions="<YourCustomController>" recordSetVar="records" lightningStylesheets="true" docType="html-5.0">
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
        <head>
            <style>
                body{ 
                    background-color:#FFFFFF;
                }
                #spinner {
                    font-size: 1.5rem;
                }
            </style>
            <meta charset="utf-8" />
            <meta http-equiv="x-ua-compatible" content="ie=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />            
            <apex:includeLightning />
        </head>
        <body>
            <div id="spinner" style="display:block">
                Loading.............
            </div>            
            <!-- REQUIRED SLDS WRAPPER -->
            <div class="slds-scope" id="vfcontainer" style="display:none">
                <!-- PRIMARY CONTENT WRAPPER -->
                <!-- RESPONSIVE GRID EXAMPLE -->
                <div class="myapp">
                    <div class="slds-grid slds-wrap">
                        <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--1-of-4">
                            <!--<div class="slds-box slds-box_x-small slds-text-align_center slds-m-around--x-small">Left Column</div>-->
                        </div>
                        <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--2-of-4">
                            <div class="slds-box slds-box_x-small slds-m-around--x-small">
                                <div class="slds-grid slds-wrap slds-border_bottom">
                                    <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-1 slds-medium-size--1-of-1">
                                        <div class="slds-text-align_center slds-m-around--x-small slds-text-heading--medium">Screen Title</div>
                                    </div>                                
                                </div>
                                <div id="flowContainer" />
                            </div>
                        </div>
                        <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--1-of-4">
                            <!--<div class="slds-box slds-box_x-small slds-text-align_center slds-m-around--x-small">Right Column</div>-->
                        </div>                        
                    </div>
                </div>
                <!-- / RESPONSIVE GRID EXAMPLE -->
            </div>
            <script>
                var statusChange = function(event) {
                    if (event.getParam("status") === "STARTED") {
                        document.getElementById("spinner").style.display = "none";
                        document.getElementById("vfcontainer").style.display = "block";
                    }
                    if (event.getParam("status") === "FINISHED") {
                        // Control what happens when the interview finishes
                        var outputVariables = event.getParam("outputVariables");
                        var key;
                        for (key in outputVariables) {
                            if (outputVariables[key].name === "myOutput") {
                                // Do something with an output variable
                            }
                        }
                    }
                };
                $Lightning.use("c:<LightningApp>", function() {
                    // Create the flow component and set the onstatuschange attribute
                    $Lightning.createComponent("lightning:flow", {
                            "onstatuschange": statusChange
                        }, "flowContainer",
                        function(component) {
                            // Set the input variables
                            var inputVariables = [{
                                name: "recordId",
                                type: "String",
                                value: '{!JSENCODE($CurrentPage.parameters.Id)}'
                            }];
                            // Start an interview in the flowContainer div, and 
                            // initializes the input variables.
                            component.startFlow("<Flow API Name>", inputVariables);
                        }
                    );
                });               
            </script>
        </body>
    </html>
</apex:page>
2
  • Thanks! - is it necessary to create a custom controller?
    – h3110
    Commented Aug 30, 2022 at 14:05
  • 1
    No, it is not necessary.
    – Saroj Bera
    Commented Aug 30, 2022 at 14:19

You must log in to answer this question.

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