How to Control the CSS of Screen Flows

Screen Flow in Salesforce is a powerful automation tool that enables users to create dynamic experiences with its intuitive drag-and-drop interface. Users can easily build screens using standard components, with the option to employ custom ones for specific use cases. While screen flow offers endless possibilities, as an automation tool, it prioritizes functionality over visually appealing screens. It is possible to employ CSS in order to enhance the UI of screen flows.

What is CSS?

Cascading Style Sheets (CSS) is a fundamental web technology that defines the presentation and layout of HTML documents. It allows developers to control the appearance of web pages by styling elements such as fonts, colors, and spacing.

Although it is not a standard option, it is possible to use custom solutions to control the CSS of screen flows.

In this post, you can find a custom component that lets you control the CSS of screen flows.

How to Use the Component

1- Install the component using the installation links below.

2- Add the "Style Overwrite" component to your screen element.

3- This component has only one input parameter: CSS String.

Style Overwrite Component to Control the CSS of Screen Flow

You have to enter a CSS to this parameter. It is possible to enter the CSS or use a text template. For instance, here is the Style Overwrite component with a text template called {!CSS}.

Style Overwrite Component

Here is the {!CSS} text template used in the component. It adds a background image to the flow screen.

This specific CSS code will apply a background image only to screen flows opened from a quick action - in a modal.

CSS for Background Image

Here is the final result using this CSS code.

Screen with Custom CSS

What can you do using CSS?

There are endless things that you can achieve using CSS. For instance, you can change the size of the screen, remove the close button (X), change the size/color of the fields, etc.

On the other hand, it is possible to use this component on Lightning pages as well. For instance, here is a case record page. This component makes the priority field bold, colorful, and bigger.

CSS on Lightning Page

Here is the CSS used for this. You can replace the object name and field name in order to use it with other objects/fields.

div[data-target-selection-name="sfdc:RecordField.Case.Priority"] .slds-form-element__label {
    font-weight: bold;
    color: red;
    font-size: 14px;
}

Considerations

This component has access to the CSS styling of the entire page. So, when used on a screen flow, If there are multiple screen flows on the page, it uniformly applies the CSS. However, when launching a screen flow via an action (and the screen flow opens in a modal), the CSS is exclusive to that particular flow. It is because the screen flow opens in a modal and only one screen flow can be opened at a time.

If you want to apply the CSS only for modal, you have to add a specific text to the CSS. Make sure that you add .uiModal to the beginning. You can see examples below (for instance, background image CSS code).

This component may require CSS knowledge. However, you can utilize the sample CSS codes provided in this post. Additionally, tools like ChatGPT can generate new ones for your specific use case.

Sample CSS Codes for Screen Flow

Increase the Modal Height

.uiModal flowruntime-flow {
    max-height: 100% !important;
}

Set the Modal Width

.uiModal--medium .modal-container {
    max-width: 400px !important;
}

Hide the Close Button

button.slds-modal__close.closeIcon {
    display: none;
}

Increase the Text Area Fields' Height

textarea {
    min-height: 300px !important;
}

Change the Color of Text Area Fields

textarea {
    color: green !important;
    font-weight: 800;
    min-height: 200px !important;
}

Change the Navigation Bar's Color

.uiModal flowruntime-navigation-bar {
    background-color: lightblue !important;
    border-width: 0 !important;
}

Add a Background Image

.uiModal flowruntime-flow {
    background-image: url("https://salesforcetime.com/wp-content/uploads/2021/04/sfba3.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center;
    background-size: cover;
}

.slds-modal__header {
    margin-bottom: 0 !important;
}

Remove the Borders of the Flow

article.flowRuntimeForFlexipage {
 border: none;
}

Change the Height of a Data Table

flowruntime-datatable .restrict-scroll {
    max-height: 200px !important;
}

As mentioned above, if you want to apply the CSS to screen flows on the Lightning page, you can remove .uiModal from these CSS codes.

It is possible to apply multiple CSS codes at once. For instance, here is a flow screen with a background image and a grey navigation bar.

Screen with Multiple CSS

Here is the text template used for the CSS of this screen.

.uiModal flowruntime-flow {
    background-image: url("https://salesforcetime.com/wp-content/uploads/2021/04/sfba3.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center;
    background-size: cover;
}

.slds-modal__header {
    margin-bottom: 0 !important;
}
.uiModal flowruntime-navigation-bar {
    background-color: grey !important;
    border-width: 0 !important;
}

You can even use gif as a background image. For instance, here is a screen flow that creates a contact record from account.

Flow Action with CSS

Installation Links

Use this link to install in production or developer edition environments.

Use this link to install in sandbox environments.

21 Comments

  1. Hello,

    Thanks for this. Any idea what should do if the CCS is not working? I installed the package, added it to my screen flow, created the text template variable and I cannot see the background.

    Any help will be appreciated.

    • How are you launching the flow? Are you using a quick action (so that it opens in modal)?
      Can you send me the CSS code that you are using?

      • Hi Yumi.

        I removed the modal code because I don“t launch the flow using quick action. I have this flow in an experience site, but still, the background is not showing.
        This is the code:

        flowruntime-flow {
        background-image: url("https://kalazanature-dev-ed.develop.file.force.com/servlet/servlet.FileDownload?file=015Hu000004yZxC") !important;
        background-repeat: no-repeat !important;
        background-position: center;
        background-size: cover;
        }
        .slds-modal__header {
        margin-bottom: 0 !important;
        }
        flowruntime-navigation-bar {
        background-color: grey !important;
        border-width: 0 !important;
        }

  2. Hi Yumi,

    I'm experiencing the same problem. I can launch the screen flow from an object or in a list view through an action. I've followed along and use the code in this post. However, when launching the flow, the code doesn't show.

      • Hi Yumi,

        I've used this code:

        .uiModal flowruntime-flow {
        background-image: url("https://salesforcetime.com/wp-content/uploads/2021/04/sfba3.jpg") !important;
        background-repeat: no-repeat !important;
        background-position: center;
        background-size: cover;
        }

        .slds-modal__header {
        margin-bottom: 0 !important;
        }
        .uiModal flowruntime-navigation-bar {
        background-color: grey !important;
        border-width: 0 !important;
        }

  3. How would I make this work for a screen flow that is displayed directly on a record detail page of an experience cloud site? There is no action to call the flow.

  4. Hello Yumi, thanks for sharing this is really helpful! However, it worked for me without modal option. But when I am trying the same with modal it did not.

    Code:

    uiModal flowruntime-flow {
    background-image: url("https://salesforcetime.com/wp-content/uploads/2021/04/sfba3.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center;
    background-size: cover;
    }

    uiModal flowruntime-navigation-bar {
    background-color: grey !important;
    border-width: 0 !important;
    }

  5. Thanks for sharing this, Yumi. This is a very valuable tip.
    It worked for me after making sure that the text template (for CSS) is in plain text mode (Rich Text by default). And also stating the obvious, the new version of the flow needs to be activated.

  6. Hi Yumi - should this work for a flow that is automatically launched when a page is open? I am testing this in a community

    What is the code for non-modal? Should the following work?

    .flowruntime-flow {
    background-color: yellow;
    }

Leave a Reply

Your email address will not be published.


*