Increase Salesforce Overlays With The Lightning:backgroundUtilityItem Interface

Mmm… Should I blog this? Ok, let’s go for it. I should probably put a large “at your own risk” disclaimer. Recently I fooled around while developing a Flow, launched as tradition Quick action. Goal was to increase the width of the Quick action its overlay. Recently I already managed to use a CSS-hack to increase the width for Lightning Component Quick Action, so I thought – let’s give it a spin for a Flow as well. 

Basically, what I managed to do is create a static CSS resource, and use the <ltng:require/> tag to load it. 

<ltng:require styles="{!$Resource.popupCSS}"/>

The popupCSS static resource contains the CSS-hack (yeah, using !important which is against the book…). 

.slds-modal__container{
     max-width: 70% !important;
     width: 70% !important;
 }

In this case, the CSS-hack increases the width of the modal window identified by the class ‘slds-model__container’ to 70% of the available screen’s real-estate. 

Now, this works fine for any custom Lightning Quick Action Lightning Component. And it’s locker-safe as well, as it will download the popupCSS resource only within the DOM of the Lightning component in which it’s specified. Cool.

But now back to the Modal dialog for the Flow Quick Action. I just wrapped the <ltng:require/> tag within another Lightning component. 

<aura:component implements="lightning:availableForFlowScreens" description="Flow component to embed a named CSS static resource">
    <ltng:require styles="{!$Resource.popupCSS}"/>
</aura:component>

Using the Flow-specific interface “lightning:availableForFlowScreens” to enable it within Flows. And guess what, the moment I embedded this component on the first screen of the flow, it effectively applied the CSS-hack. 

So mmm… this works. But with a “side-effect” that the CSS-hack would apply  everywhere in the app once it got loaded. Every Dialog (Edit record, new record, …) would take the 70% width.

That brought me to the next ‘experiment’ is to by-default have the CSS-hack to take effect. And guess what? The Winter ’19 “lightning:backgroundUtilityItem” Lightning component interface does just that. The lightning:backgroundUtilityItem interface allows:

“… a component to be used as an app-level component that is created when the app loads, and runs code without rendering itself in the app UI.”

<aura:component implements="lightning:backgroundUtilityItem" description="Popup Width Background Utility Component">
    <c:PopupCssResourceComp/>
</aura:component>

Once done, just add it to the Lightning’s App list of Utility Items. It will load, as soon as the App is loaded. 

Again, beware of the disclaimer. I have not tested this under ‘production’ circumstances, and it will have an App-wide effect! Nevertheless, experimentation means learning, right?

Enjoy!