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?
- Full control over text-color, font, background-color, section border, text alignment, etc.
- Ability to display text (with/without) icon
- Ability to use Lightning-icons or custom image stored as a static resource
- Display hyperlink
- Use as a Line/Page Break
- Ability to use the same component multiple times in a screen to ensure consistency or to get variety
- and more…..
Where can I use it?
The Customizable Header/Banner works with-
- App Page
- Home Page
- Record Page
- Flows
- 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
- To use image from static resource
- After package installation, check to see if there exists a static resource by the name of ‘customHeaderImages’. If yes, Skip the next step.
- Create a static resource by the name- customHeaderImages, set Cache Control to ‘Public’
- Create a zip file with the name as ‘customHeaderImages’ containing your desired images. Upload the zip file to above Static Resource
- 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
- 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.
- 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)’
- Image name accepts static resource as well as Lightning icon. For more information on lightning icons, visit- https://www.lightningdesignsystem.com/icons
- Important When using within a Lightning Flow, remember to create a variable for each value you would like to pass
- 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 Variable | Description | Default | Notes |
|---|---|---|---|
| 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 header | FALSE | If 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 resource | TRUE | |
| Banner Text | Text to display inside of the banner | Banner Text Goes Here | |
| Banner Text Alignment | Use to align the banner text. Valid inputs: left, center, right | center | |
| Display text as hyperlink? | Check when the text is a link to a webpage,article,etc. | FALSE | Once selected, be sure to fill out the URL to redirect field with a valid URL |
| URL to redirect | Enter 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 window | FALSE | |
| Order Number | When 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 Name | When 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. | FALSE | Gets priority over- ‘Is image a static resource’ if both are selected |
| Lightning Icon Size | Valid inputs: xx-small, x-small, small, medium, or large. | medium | |
| Icon Margin | Provide margin to include space between icon and text-useful when the icon is left aligned and text follows the icon | 0px 7px 0px 0px | |
| Is image a static resource? | FALSE | ||
| Banner Height | Use to define banner height in %. Also controls the banner thickness when using as a page break | 10 | |
| Banner Background Color | To define banner background color, use any- #hexcode or RGB(0, 0, 0) or color name | rgb(243, 242, 242) | |
| Banner Text Font Size | Valid inputs: xx-small, x-small, small, medium, or large. | ||
| Banner Border | When wanting to have the banner border radius, include width, style (required) and color, example- 0px 0px 5px 0px dotted red; | ||
| Font Weight | If 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?
- 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)