Rich Field Labels on Flow Screens

Rich Field Labels on Flow Screens

Screen Flow is the only flow type that supports screens in Salesforce. Screens can be used to display or collect data. In order to build a screen, just drag and drop the screen element to the canvas and add components to it. There are many standard input components that you can put on your screen. These components include text, number, email, checkbox, date, lookup, file upload, etc. They are used for data input, which means that users can enter some data. They look almost same as object fields on a page layout, with field labels and other attributes. For example, here is a screen that is used for data entry in order to create a case record.

flow screen for data entry

You can read this post to learn more about the Screen Flows. Hands on is always the best way for learning, complete this module on Trailhead to learn how to build screens.

All of the screen components have their own configurations. Even though the configurations depend on the field type, almost all of them have one common attribute: Label

Label is the text that the users see above the field. It is the same idea as the field labels in objects. For example, even though the API Name of the text field is CaseSubject, users will see the field as Subject. Unlike the object fields, the label is not mandatory but it is recommended to enter labels.

Label is just a text area, which means that you don’t have a rich text editor to format the field label. However, it supports HTML tags.

Using HTML Tags for Field Labels

You can use HTML tags to format the field labels. For example, to make the field label bold, use <b>Label</b>

Bold field label

To change the font size and add color, you can add more HTML tags to the field label. For example, here is how to make the field label red, bold, and 18px font size.

HTML tag for red field label
No Need to Know How to Write HTML Tags

If you don’t know how to write HTML tags, don’t worry, there is an easy way. Create a new Text Template resource and prepare your field label in the Rich Text mode.

Text template in rich text mode

Then, switch to plain text mode by selecting View as Plain Text.

As you can see, it converts your formatted text to plain text with HTML tags. Copy this text and paste it as your field label.

New field label with html tags

Using Text Template Resource as Field Label

When you click on a field label, it doesn’t let you select a resource to use as the label. However, you can still use the existing resources.

First of all, create a new resource. Text template would be the best option in this case, but you can create other types of resources as well.

Text template for Case subject field label

Then, write the name of your resource to the label of the field. Make sure that you are writing it in the right format like this: {!CaseSubjectLabel}

Case subject label using a resource

Since it is a rich text editor, you can add more stuff like images, hyperlinks, and more text formats. For example, here is a clickable Salesforce Time logo as the label for the subject field. Okay, maybe it is too much, but you got the point.

Using an image as the field label

Dynamic Field Labels

Sometimes you might need to display a different field label according to a criteria. Instead of adding a few fields to the screen and changing their visibility, you can have only one field with a dynamic label. To do so, create a new formula resource with your logic. For example, here is a formula that displays “Subject” or “Topic” according to the account’s industry field.

Dynamic field labels using formula

Here is how it looks like for different industry values.

Dynamic field labels according to account industry

Since it is a formula, you can dynamically display text templates according to your logic. So, instead of just displaying hardcoded text values from the formula, use text template resources as your formula result.

IF(ISPICKVAL({!recordId.Industry}, “Education”), “Topic”, {!CaseSubjectLabel})

Be the first to comment

Leave a Reply

Your email address will not be published.


*