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}’

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)

Flow Datetime Methods

Created by Carl Vescovi

This Post was most recently updated on: 9/1/23
Updated package links
Current Version: 1.0

At the moment Datetime and Business Hours are not particularly well supported in Salesforce Flows. The intent of this code is to be a gap filler until such time as Salesforce delivers more functionality. The way this code works is simple – Salesforce provides much more support in Apex for Datetime manipulation and Business Hours calcs, so the class included here simply serves to provide access to a subset of those Apex Datetime, Date and Business Hour class methods. 48 in total so there is something there for everyone. While some of these functions are probably possible using formulas, in a lot of cases here you can manipulate the result into different timezones and formats – not something I’d personally want to be doing with formulas if there is a ready built capability to be found on the platform.

Datetime support

The Datetime capabilities available to Salesforce Developers can be found here.

The following subset of capabilities or ‘methods’ provided by Salesforce are enabled in Flow through this simple class. To call Datetime specific methods prefix the method with ‘Datetime.‘. For example, to use the Datetime addDays method use the methodname attribute ‘Datetime.addDays’.

• addDays
• addHours
• addMinutes
• addMonths
• addSeconds
• addYears
• day
• dayGmt
• format
• formatGmt
• formatLong
• getTime
• hour
• hourGmt
• millisecond
• millisecondGmt
• minute
• minuteGmt
• month
• monthGmt
• now (exists in Flow however I included this to enable formatting and timezone controls)
• second
• secondGmt
• time
• timeGmt
• year
• yearGmt

Business Hour support

In addition it made sense to extend this class to also provide five methods for Business Hours calculations.

The Business Hours capabilities enabled are described in more detail here.

To access these methods from the action, prefix the method you want to use with ‘BusinessHours.‘. For example, to use the diff method you’d populate the action attribute ‘methodName’ with ‘BusinessHours.diff’.

• add (add business hours time to a starting datetime)
• addGmt (add business hours time to a starting datetime and return in Gmt)
• diff (return difference in milliseconds between two datetimes, only considering business hours)
• isWithin (confirm if a datetime is within business hours)
• nextStartDate (confirm next closest date that is within business hours)

Date support

Was on a role by this stage so figured best to expose the Date Class methods as well.

More information on Date Class methods can be found here.

To access the following Date Class methods, prefix the method you want to use with ‘Date.‘. For example, to use the dayOfWeek method you’d populate the action attribute ‘methodName’ with ‘Date.dayOfWeek’.

• addDays
• addMonths
• addYears
• day
• dayOfYear
• daysBetween
• daysInMonth
• format
• isLeapYear
• isSameDay
• month
• monthsBetween
• today
• toStartOfMonth
• toStartOfWeek
• year

Using the classes from within Flow

Once installed just reference the DatetimeUtility or DateUtility class from within Flow Builder Action to access Datetime and BusinessHours methods, or DateUtility class from a Flow Action to access the Date methods.

Once selected, you’ll want to configure some attributes. There are 3 to 4 attributes to populate depending on which method you wish to call. If its not intuitive enough let me know and I’ll expand the documentation.

Utility Method attributes

The following attributes can be configured once you’ve created the action using either of the DatetimeUtility or DateUtility Classes

• methodName. This is mandatory and if not valid the logic will error out with an invalid method name error at runtime. The method names used in the class are exactly as they’re documented in the formal Salesforce documentation, just without the brackets. So where Salesforce calls a method ‘addDays()’ you’d just use ‘addDays’.
• dateTimeString. This is mandatory and is the Flow datetime variable you want to manipulate. Typically from a datetime input field for example. The format of a Flow datetime string is like this ‘1/1/2021, 3:47 pm’ or the pattern ‘dd/mm/yyyy, hh:mm:ss a’.
• increment. This is populated with a number when using the addSeconds, addDays etc. Any method where you’re needing to pass in a numerical value.
• returnFormat. This is optional on all method calls, allowing you to manipulate the format of the returned result. The expectation is that you’re passing in a string describing a java simple date format pattern. See more on this here.
• timeZone. This is optional on all methods and assuming you provide a valid timezone code you can have the resulting datetime value returned to you in the timezone provided.
• secondDateString. This is only used when performing a BusinessHours.diff calculation. The method will thrown a runtime error if this second datetime is not provided.

Response attributes

The Utility returns a response that has a number of attributes you can use as you wish

• errorOccured. This is a boolean that if true means something went wrong during processing.
• errorMessage. If errorOccured is true, then there is likely a message provided in this attribute to describe what it was that went wrong.
• result. This is a string containing the result of the method call. Its worth noting that to keep this consistent ALL results are in string format, including what would normally be expected as an integer or long datatype i.e. the result from ‘day’ or ‘time’ method calls. Sorry about that but I figured trying to accommodate different data types in the result might confuse more than it’d help. Can extend the result class easily enough if you’d prefer more result attributes.

Installation

Production or Developer Version 1.0

Sandbox Version 1.0

Release Notes

3/22/21 – Carl Vescovi – v1.0

Initial Release

Previous Versions

View Source

Source Code

Copy to Clipboard Button

Created by Eric Smith

This Post was most recently updated on: 3/27/23
Current Version: 1.1.1

This Flow Screen Component lets you add a button to your flow screens to copy any provided content into the system clipboard. It provides an easy way to allow a user to copy and then paste the provided data elsewhere on their computer.

Usage

To use this component, add it to a Flow Screen and provide the content you want to make available to be copied to the clipboard.

In this example I’ve created a Flow that shows the contents of 4 different fields from a Contact record. Once activated, I can place it on the Contact record page.

In this example, I’m adding some text to the button and I’m clearing the clipboard display once it has been selected.

Attributes

Installation

Step 1

This component requires that you first install the Flow Base Packs

• FlowActionsBasePack Version 3.14.0 or later
• FlowScreenComponentsBasePack Version 3.0.19 or later

Step 2

Production or Developer Version 1.1.1

Sandbox Version 1.1.1

Release Notes

3/27/23 – Eric Smith – v1.1.1

Updated to use the latest versions of the Base Packs

Note:

You can check the current version of your component by looking at the bottom of the Custom Property Editor.

Previous Versions

3/26/21 – Eric Smith – v1.0

Initial Release

Production or Developer Version 1.0

Sandbox Version 1.0

View Source

Source Code

The Flow Carousel allows you display a set of slides in a continuously running carousel within a screen flow it’s useful if you want to put a flow on a lighting record page or run something cast to a screen at an event and allow a remote user to update specific information. There are 4 text collection properties that will build the slides in your carousel. You are limited to max 6 slides (this is a lightning design limitation).

Input

The component only has a handful of properties

1. Image URL’s: This is a text collection holding the image urls for your slides.
2. Headers: This is text collection containing the Headers for each slide.
3. Descriptions: This a text collection of short paragraphs/descriptions for each slide.
4. Alternate Text: This a text collection the alternate text behind each image this also needs to be unique for each slide as the component uses this to differentiate each slide”
5. Slide Style: Use this string property to control the slide styling i.e. slds-text-align_center slds-size_x-large this uses standard Lightning Design System attributes. Without styling the default will be aligned left and it will scale all slides to the largest image you have so keep in mind if you use this or not.
6. Carousel Title: This string property adds a title to your component.
7. Hyperlink URL’s: This is a text collection holding the hyperlink url’s for your slides.
8. Slide Duration: Integer that controls how long each slide stays on the screen default is “5”.

Install

Version 1.2 unlocked 4/5/2022

Previous Versions

Version 1.1 unlocked 4/15/2021

Version 1.0.0 unlocked 3/25/2021

Source Code

View Source