UnofficialSF: 8 Recipes for Custom Header Screen Flow Component

During The Big Form Build of 2022, I’ve gotten up close and personal with the offerings of UnofficialSF, an open source treasure trove of Salesforce Flow enhancements and bells/whistles. I wrote more about my experience with USF and #TextAreaPlus here.

This project has also led me to sample the offerings of Custom Header, a component that lets you show banners/section headers with text, background color, icons, images, and more, all in a Screen Flow, Lightning Page, or even Experience Site! The blog post and documentation for the bespoke functionality shows all sorts of exciting examples, some of which I had trouble realizing with my non-developer skill set. So, I strapped on my adventure shoes and gave myself the challenge of executing 8 Custom Headers to match Sharad’s screenshots as closely as possible. This blog post is meant to be a dialogue and expansion of the original post and to help more people use Custom Headers successfully. I note areas where I am unsure – please comment on this post if you know more about this than I do!

Left: Sharad’s Headers from UnofficialSF
Right: My DIY versions

Not too shabby, right?

Instructions to DIY

1. If you haven’t already, install Custom Headers package (ALWAYS IN A SANDBOX FIRST) using the link in this blog post. I am not hard coding the link here, because it may change and UnofficialSF does update documentation from time to time. (The version utilized in this post is v1.0, there is now a more recent version with minimal changes)
   
2. Commit to creating Variables. You will need to create a LOT of them. Commit to a naming convention. Be deliberate and diligent in this process. There is a known issue that you cannot just type values into the Custom Header component. You must first store the value in a variable, and then type the variable name into the relevant Custom Header attribute.
   
3. Reminds me of another known issue: you must retype all of the True and False values in the Custom Header component.
   
4. Draw a picture of your desired outcome. What font/size/colors/etc are you aiming to accomplish? That will help you determine the values you need to save in your variables and assign to your Custom Header instance.

The Attributes

There are many aspects of each Header that you get to customize. Let’s review what each one does. (This is a bit more detailed and low brow than the official documentation – it is MY interpretation – you should consult the official documentation too!).

Attribute Name	Attribute Description
Banner Background Color	The color of the background text. Similar to “cell shading” in a spreadsheet. Use Hex codes or RGB values from a site like this.
Banner Border	I’m not sure of the full capabilities of this attribute, but at the very least, you can have (1) no border; (2) border; (3) dotted border.
Banner Border Radius	This appears to determine the rounded-ness of the corners. 0 is pointy corner, 10 is rounded corner, 20 is curved edges (like a button shape). See demo gif here: https://www.loom.com/share/809c5b8bf3a94946a7d96e7124aac3fe
Banner Height	I am unclear about what this attribute does. The default is 10 and when I changed it, I did not notice much difference.
Banner Margin	This is the amount of space between the Header and the previous/subsequent component. If you want a lot of space, make this a bigger number (like 50px). Default is 5px.
Banner Padding	This is the amount of space between the Banner Text and the Banner Border. Default is 5px. In other words, how much background color do you want around the text?
Banner Text	This is the words that display in your banner.
Banner Text Alignment	Options for this are Left, Center, Right.
Banner Text Color	The color of the text. Similar to “font color” in a spreadsheet. Use Hex codes or RGB values from a site like this.
Banner Text Font Size	Options are xx-small, x-small, small, medium, or large. *I think it would be an enhancement to choose a font size by number so that you can match other design elements in your Flow.
Banner Text Font Style	This is basically the font. According to another commenter, some available fonts include: Arial, Courier, Times-Roman [also using Times New Roman gets you the same], Monospace, Verdana, Tahoma, Trebuchet MS, Georgia, Brush Script MT (this is cursive).
Icon Margin	Controls space between the icon and the text.
Image Name	If you are using an icon from the LDS (Lightning Design System), you can just name the section and the icon like this. (I have only tested the Utility ones, but other icon types do exist). utility:add utility:alert
Lightning Icon Size	Options are xx-small, x-small, small, medium, or large.

Every Custom Header is a combination of these attributes.

Instructions for creating a text variable in Flow

1. In Flow Builder canvas, click “New Resource” (left column). If you don’t see the button, make sure the “Toolbox” is open by clicking the icon in the top, left corner that looks like a sliding door.
2. For Resource Type, select Variable
3. Use a good naming convention for API name. For this project, mine was var_CH1_NameOfAttribute (where CH stands for Custom Header and the number stands for the order of Headers on the page).
4. For Data Type, select Text
5. Default Value is where you will store your Value (see tables below)
6. Do not check off any additional checkboxes
7. Click “Done” button.
8. Repeat for all attributes (except true/false) for all Custom Headers in your Screen Flow.
9. (Variables with the same value, ie “black” can be recycled throughout the Flow. However, I separate them to make sure that I don’t overwrite something in use elsewhere when I change values).

Instructions for populating Custom Header Component

1. (If you haven’t already), create a new Screen Flow. I called mine, “Testing Custom Headers.” You might be working in a Screen Flow that already exists.
2. Drag a Screen onto your Flow Canvas and give the Screen a name.
3. Drag “Custom Header” into the Flow Canvas (you must have this installed in your org already). It will be located under the “Custom Components” section of the drag and drop menu.

For each “Attribute” (aka field on the right-side menu), assign a variable that you made in the previous step. If you are not using that attribute, leave it blank.

Then, make sure to retype each and every True/False attribute (even if not using) because otherwise, your flow will not render properly.

Now, let’s move on to examples for how to style your Headers!

Example 1: Section Header

Attribute Name	Attribute Value
BannerBackgroundColor	rgb(243, 242, 242)
BannerHeight	10
BannerMargin	5px 5px 5px 5px
BannerPadding	5px 5px 5px 5px
BannerText	Section Header
BannerTextAlignment	Left
BannerTextColor	Black
BannerTextFontSize	Medium
BannerTextFontStyle	Arial

True/False values:

• Is header text only? = {!$GlobalConstant.True}

Example 2: Horizontal Line

Caveat – I don’t think I got this to work quite properly. There is an attribute for Display as horizontal line? that did not work for me when I set it to True. So instead, I made a workaround! If you know how to do this the right way, please get in touch with me.

Attribute Name	Attribute Value
BannerBackgroundColor	Black
BannerMargin	1px 1px 1px 1px
BannerPadding	1px 1px 1px 1px

True/False values:

• Is header text only? = {!$GlobalConstant.True}

Example 3: FormattedBanner

Attribute Name	Attribute Value
BannerBackgroundColor	#318CE7
BannerHeight	10
BannerMargin	5px 5px 5px 5px
BannerPadding	5px 5px 5px 5px
BannerText	The website will be down for maintenance on Saturday, October 19, 2020 from 7 pm EST to 9 pm EST.
BannerTextAlignment	Center
BannerTextColor	White
BannerTextFontSize	Small
BannerTextFontStyle	Arial
IconMargin	0px 7px 0px 0px
ImageName	utility:alert
LightningIconSize	Small

True/False values:

• Is header text only? = {!$GlobalConstant.False}
• Header has image and text (with image on left of text) = {!$GlobalConstant.True}

Example 4: Header Text with Background and Border

Attribute Name	Attribute Value
BannerBackgroundColor	rgb(243, 242, 242)
BannerBorder	2px Solid Blue
BannerBorderRadius	10
BannerHeight	10
BannerMargin	5px 5px 5px 5px
BannerPadding	5px 5px 5px 5px
BannerText	Header Text with background and border
BannerTextAlignment	Center
BannerTextColor	Blue
BannerTextFontSize	Medium
BannerTextFontStyle	Arial

True/False values:

• Is header text only? = {!$GlobalConstant.True}

Example 5: Header with Image and No Border

Attribute Name	Attribute Value
BannerBackgroundColor	rgb(243, 242, 242)
BannerHeight	10
BannerMargin	5px 5px 5px 5px
BannerPadding	5px 5px 5px 5px
BannerText	Header with Image and no border
BannerTextAlignment	Left
BannerTextColor	Black
BannerTextFontSize	Large
BannerTextFontStyle	Arial
IconMargin	0px 0px 2px 0px
ImageName	utility:add
LightningIconSize	Medium

True/False values:

• Is header text only? = {!$GlobalConstant.False}
• Header has text (left aligned) and image (right aligned) = {!$GlobalConstant.True}
• Is image a Lightning Icon? = {!$GlobalConstant.True}

Example 6: Simply Text with Custom Font

Attribute Name	Attribute Value
BannerMargin	5px 5px 5px 5px
BannerPadding	5px 5px 5px 5px
BannerText	Simply Text with custom font style
BannerTextAlignment	Center
BannerTextColor	Black
BannerTextFontSize	Large
BannerTextFontStyle	Brush Script MT

True/False values:

• Is header text only? = {!$GlobalConstant.True}

Example 7: Header as Link

Attribute Name	Attribute Value
BannerBackgroundColor	White
BannerBorder	10px Solid Red
BannerBorderRadius	5px
BannerHeight	10
BannerMargin	5px 5px 5px 5px
BannerPadding	5px 5px 5px 5px
BannerText	Header as Link and without any background color
BannerTextAlignment	Center
BannerTextColor	Blue
BannerTextFontSize	Medium
BannerTextFontStyle	Arial
Hyperlink	https://www.TheDataAreAlright.blog
IconMargin	0px 0px 7px 0px
ImageName	utility:alert
LightningIconSize	Small

True/False values:

• Is header text only? = {!$GlobalConstant.False}
• Header has image and text (with image on left of text) = {!$GlobalConstant.True}
• Display text as hyperlink? = {!$GlobalConstant.True}

Example 8: Banner with Custom Border and Text Alignment

Attribute Name	Attribute Value
BannerBackgroundColor	rgb(243, 242, 242)
BannerBorder	2px Dotted Black
BannerBorderRadius	15
BannerHeight	10
BannerMargin	5px 5px 5px 5px
BannerPadding	5px 5px 5px 5px
BannerText	Banner with custom border and text alignment
BannerTextAlignment	Right
BannerTextColor	Black
BannerTextFontSize	Medium
BannerTextFontStyle	Arial

True/False values:

• Is header text only? = {!$GlobalConstant.True}

In conclusion…

It’s not easy – for beginners like us – to set up these complicated Flow Components but with some concentration and practice, we can totally do it! If you end up trying out these recipes, or coming up with new ones, I’d love to hear from you! Leave me a comment (I read every single one) and don’t forget to pat yourself on the back for creating something awesome!

Thank you to Sharad and UnofficialSF for giving me and Admins everywhere access to this awesome tool!