Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It only takes a minute to sign up.
Sign up to join this community
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.
IMAGE: 2.
IMAGE: 3 - button properties.
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>
