From Sharad: Style Your Flow with Headers, Banners, Rules, Formatting and More

This Post was most recently updated on: 10/4/22
Samantha Shain has written a very helpful article on how to use this component.
8 Recipes for Custom Header Screen Flow Component


In need of making your flows looks more like a Salesforce Standard Page Layout? OR Simply want to display customizable headers with icons, text, links, etc. in communities, home/record pages? This Flow extension allows you to display customizable headers in flow screens but also works anywhere on Salesforce platform.

What Features does this component have?

  1. Full control over text-color, font, background-color, section border, text alignment, etc.
  2. Ability to display text (with/without) icon
  3. Ability to use Lightning-icons or custom image stored as a static resource
  4. Display hyperlink
  5. Use as a Line/Page Break
  6. Ability to use the same component multiple times in a screen to ensure consistency or to get variety
  7. and more…..

Where can I use it?
The Customizable Header/Banner works with-

  1. App Page
  2. Home Page
  3. Record Page
  4. Flows
  5. Communities

Usage Examples

1) Insert Section headers

Scenario- Users have always wanted their flow screens to resemble like Standard Salesforce page layouts.

Use Case: Lightning Scheduler has a default review screen with countless fields. Create a custom version with headers. Optionally, add images (either lightning icons or static resources).

2) Insert horizontal rule/line

3) Formatted Banners

In Community

In Record Page

4) Reuse the component with different styling

Considerations

  1. To use image from static resource
    1. After package installation, check to see if there exists a static resource by the name of ‘customHeaderImages’. If yes, Skip the next step.
    2. Create a static resource by the name- customHeaderImages, set Cache Control to ‘Public’
    3. Create a zip file with the name as ‘customHeaderImages’ containing your desired images. Upload the zip file to above Static Resource
    4. When setting up the LWC, enter image name and check ‘is Image a Static Resource?’ to true. Additionally, select either of the options to display image and text
    5. NOTE: Make sure that you are not compressing a folder when zipping the images. Only select the image(s) you want to use and NOT the folder in which that image is.
  2. In terms of preference (if more than one option is selected)- ‘Is header text only?’ > ‘Header has text (left aligned) and image (right aligned)’ > ‘Header has image and text (with image on left of text)’
  3. Image name accepts static resource as well as Lightning icon. For more information on lightning icons, visit- https://www.lightningdesignsystem.com/icons
  4. Important When using within a Lightning Flow, remember to create a variable for each value you would like to pass
  5. Important When using within a Lightning Flow, remember to re-enter values for boolean fields which are supposed to be true, for example- ‘Is header text only?’ will by default be populated as True- ‘{!$GlobalConstant.True}’- clear the field and re-enter ‘{!$GlobalConstant.True}’

Input VariableDescriptionDefaultNotes
Display for Record Id?Only appears on record page. To show the banner for a particular record, update the field value with recordId (from URL). Else, leave it blank to display the banner for all records.
Display as horizontal line?Check to use as a page break or underline a headerFALSEIf selected it gets the highest priority and the header is displayed as a horizontal line. Once selected, control the display using Banner Height and Banner Background-color fields
Is header text only?Use when the text is not accompanied by an image- lightning icon/static resourceTRUE
Banner TextText to display inside of the bannerBanner Text Goes Here
Banner Text AlignmentUse to align the banner text. Valid inputs: left, center, rightcenter
Display text as hyperlink?Check when the text is a link to a webpage,article,etc.FALSEOnce selected, be sure to fill out the URL to redirect field with a valid URL
URL to redirectEnter a valid url for the user to be redirected to when the text is displayed as a hyperlink
Remove text-decoration for the link?Check when displaying the text as URL and you want to remove the text-decoration, ex-underline under the hyperlink.FALSE
Open link in new window?Check when displaying the text as URL and you want the link to open in a new windowFALSE
Order NumberWhen using this component more than once on the same screen, be sure to provide a unique order number to each of the component to ensure that styling(CSS) from one component does not interfere with that of the other. Example, when using the component twice on a screen, give one component an order number of 1 and the other as 2.
Image NameWhen displaying image along with text, use this field to provide the image name. To use a lightning icon, enter name as ‘utility:add’ or ‘custom:custom1’. To use image from static resource, follow step#1 aobe and create a static resource. Once created, simply provide the image name.utility:add
Is image a Lightning Icon?Check when using a lightning icon.FALSEGets priority over- ‘Is image a static resource’ if both are selected
Lightning Icon SizeValid inputs: xx-small, x-small, small, medium, or large.medium
Icon MarginProvide margin to include space between icon and text-useful when the icon is left aligned and text follows the icon0px 7px 0px 0px
Is image a static resource?FALSE
Banner HeightUse to define banner height in %. Also controls the banner thickness when using as a page break10
Banner Background ColorTo define banner background color, use any- #hexcode or RGB(0, 0, 0) or color namergb(243, 242, 242)
Banner Text Font SizeValid inputs: xx-small, x-small, small, medium, or large.
Banner BorderWhen wanting to have the banner border radius, include width, style (required) and color, example- 0px 0px 5px 0px dotted red;
Font WeightIf the Bold checkbox is checked, you can choose a font weight. If a font-weight is not set, the font weight will be set to bold. Anyone using this component and updates won’t break as this is current functionality.
Once you set a weight, you won’t be able to undo a weight. A normal bold is 700. Available in version 1.0.1+
700

Static Resource Setup-

Configuring the Component In a Flow

Problem With Literal Values

Currently there are some problems providing literal values, so at this time you should only pass in variables. This is being investigated. Example- create a text variable ‘bnrBrdrRds’ for Banner Border Radius with value equals to 12px and use {!bnrBrdrRds} instead of simply typing in 12px in the input field- see below image.

Note#2: Remember to re-enter values for boolean fields which are supposed to be true, for example- ‘Is header text only?’ will by default be populated as True- ‘{!$GlobalConstant.True}’- clear the field and re-enter ‘{!$GlobalConstant.True}’

When using within a community, record/home page-

Any limitations that I should be aware of?

  1. At present, header takes up the space of a single column in case of a 2-column flow layout.

Additional Resources

8 Recipes for Custom Header Screen Flow Component


Install

V1.0.2 10/23/22 Production Sandbox – bug fix

Old Versions

V1.0.1 9/18/22 Production Sandbox – Added Font Weight input to allow bolder bolds

Link to download the package (v1.0)

View Source

Source (Updated)