Flow, Rich Text, HTML and Text Templates Winter ’20 Update

/1 Comment/in /by

This updates the Summer ’19 Update with information about HTML support, rich text, and text template usage.

Background

The Flow Team has been updating internal Flow components and switching from various proprietary code solutions to more standardized Salesforce components. This started with the release of Flow Builder in Spring ’19, continued with the addition of rich text in Summer ’19 and continues now with changes to Text Template in Winter ’20.

In Summer ’19, the ability to create and format rich text via toolbar was added to Flow Builder’s Display Text component and the Help Text and Error Text fields found on most screen fields. However, we didn’t have time to get it done in Text Templates. That was completed in Winter ’20.

Winter ’20 Changes to Text Template

In Winter ’20, the Text Template resource in Flow gains the ability to Edit as Rich Text and defaults to this mode (the other mode is Edit as Plain Text). Salesforce rich text editors generate HTML output, and if a Text Template that has HTML in its Body is passed to a downstream consumer like Post to Chatter Flow Action or Send Email Flow Action that doesn’t handle HTML, the HTML tags will be visible in the plain text version. Therefore, if you are using inputs that do not handle HTML, you’ll want to make sure that your Text Templates do not deliberately or inadvertently add any HTML to the Body. (Note: This unofficial Flow Action sends HTML email and can accept rich text output from a Text Template)

How HTML Tags Can Get Into a Text Template Body Field
Text template are always stored as text in flow metadata but that plain text may have html tags in it. These tags get added in the following ways:
1) if you are viewing the text template in Rich Text mode, any formatting you apply using the toolbar will cause html tags to be added to the underlying text.

In some circumstance HTML tags are automatically added even when you don’t obviously apply a format. Simply clicking on the body of the text while in Rich Text mode will automatically cause the underlying editor to add some <p> tags if they are not already there. And if you hit the return key, the editor will automatically add </br> ad <p> tags.

Preventing HTML Tags From Being Saved in a Text Template Body Field
The only way to be sure that your flow metadata will not contain tags that would become visible if the text template was passed to a plain text consumer like the existing Send Email or Post to Chatter actions is to either:
1) Set the text template to Plain Text before entering any text or
2) Change the text template to Plain Text and hand-remove any resulting tags that become visible.

Removing Unwanted HTML Tags
If you have accidentally created a Text Template set to Rich Text but actually want Plain Text, follow these steps to change it:

1) Select your current Body text and Copy it. Then delete it from the Body field
2) Use the Text Type menu (see image below) to specify Plain Text
3) Paste the text back from the Clipboard into the Body field


Switch between the two Edit modes using this new menu:

image

Adding HTML Directly to a Text Template
The addition of Edit in Rich Text mode to the Text Template resource provides Flow Builder users with a way to add HTML to their flow screens similar to how it has traditionally been done with Cloud Flow Designer.

You can paste or type HTML tags into a Text Template set to Edit in Plain Text mode, and then switch to Rich Text mode to see the effect.

To view the HTML supported in Text Templates, see the bottom of input-rich-text lwc component.

Handling of Older HTML

When a user edits a text template with older html, a conversion takes place that strips out some of it.

Two conversions:
1) quill doesn’t understand some of the tags that CFD was able to handle. These tend to be obsolete tags. We filter these out.

2) quill then does its own conversion to change html to its internal rich text format. Quill ignores some html tags but we don’t currently know which ones.

Basic HTML can be pasted into Text Templates and will render properly when the Flow is run


When you switch the entry menu from Plain Text mode to Rich Text mode, you will see on the Text Template screen the rendered version of any HTML you have typed in. Switching from Plain Text to Rich Text does not result in any actual changes to the underlying text. If you edit the text while it’s in Rich Text mode (even if you just click on it), then any HTML tags are converted to internal rich text representations, and unsupported HTML tags are stripped out. Note that it is not always the case that switching in the other direction from Rich Text to Plain Text does not result in changes, because the Rich Text mode will insert </br> and <p> tags in certain cases.

Some unsupported HTML could be added to Cloud Flow Designer but can not be added to Flow Builder. This includes <style>.Flows with these tags can continue to be used and will run unchanged, but editing the text in Flow Builder will cause these unsupported HTML tags to be stripped out. This is discussed in Flow Rich Text Edit Summer ’19 Update and includes tags like <style>. Flows containing this set of tags can continue to be used. However, the Flow runtime will eventually be updated to use the same modern, standardizes rich text control that Flow Builder uses, which will cause these unsupported HTML tags to stop working. Our recommendation is to begin converting away from these tags. (See “Recommendations”, below)

Some HTML is supported in Flow Builder but not in running flows, and should generally be avoided
There are some HTML tags, like <table>, <td>, <tr>, that have the following characteristics:
If you paste them into Text Template when it’s in Plain Text mode and then switch to Rich Text mode, you will see them rendered in the Screen Builder. However when the flow is run, they currently are ignored.

Rich HTML with full styling can be added via Lightning Components
If you want to use complex or unsupported HTML in Flow Screens, we recommend creating or installing a Lightning Component. Lightning Components can access all standard HTML used by modern browsers.

HTML from Flows created in Cloud Flow Designer will continue to render unchanged if you don’t try to edit it
Older Flows containing templates or display text with unsupported HTML can still be used, to a degree.

If you open an older Flow that uses unsupported HTML in a text template or display text field, you can continue to use it as long as you do not click, while in Rich Text mode, on the body of the text field or otherwise attempt to edit it. (Doing that results in a conversion process that strips unsupported HTML. That’s discussed in more detail here.). Keep in mind that :
1) when the browsers stop supporting Flash, Cloud Flow Designer will no longer work, so if you have important content in HTML forms that are not supported in the ‘Basic HTML’ list above, we recommend that you either reformat using the rich text formatting toolbar or use Lightning Components in your Flow screens..
2) the Flow runtime will eventually stop supporting these unsupported HTML tags


For more information on changes to Rich Text in Flow, see the Flow Rich Text Edit Summer ’19 Update

Recommendations

Salesforce generally discourages the use of direct HTML in Flow screens and recommend that you use the formatting toolbar found in Text Templates and Display Text fields.