Formatted Text

December 17, 2019, Updated: June 15, 2022

The formatted text control displays HTML text. You can format the text using HTML tags or embed formatted text.

Example

When to Use

Use the formatted text control to:

Embed formatted HTML text.
Display longer texts, such as descriptions, legal texts, or manuals.
Display simple lists with bullet points or numbers.
Display code.

Do not use the formatted text control to:

Display In-app help or explanations on how to use your app.
Display a simple and short text. Use the text control instead.
Display a semantically-colored text or a status. Use the object status instead
Display an object name with or brief additional information. Use the object identifier instead.
Display a number or sum. Use the object number instead.
Display a currency. Use the currency control instead.
Display a label. Use the label control instead.
Display a single headline. Use the title control instead.
Let the user to type in longer texts and format them. Use the rich text editor instead.

Components

By default, the control uses the standard font and headlines. It supports the following HTML tags:

Text Styling

HTML Tag	Effect
a	Link or anchor
abbr	Abbreviation
bdi	Bidirectional isolation of a certain text
blockquote	Quote
cite	Short quote
code	Code style
dir	Explicit text direction of a certain text
em	Italic text
pre	Preformatted text
strong	Bold text

List

HTML Tag	Effect
dl	Description list
dt	Description term (of a description list)
ul	Unordered list
ol	Ordered list
li	List item (of an unordered or ordered list)

Structure

HTML Tag	Effect
br	New line
h1-h6	Headlines 1-6
p	Paragraph
span	Generic inline container

Behavior and Interaction

The formatted text control itself is not interactive. However, it can contain interactive elements, such as links and anchors.

Responsiveness

The text automatically adapts to the screen size unless you set a fixed width and/or height.

Examples

Here are some examples that use the various HTML tags.

Formatted text - Numbered List

Formatted text - Bulleted list

Formatted text with code

Formatted text - Quote

Top Tips

Use the different styling options carefully and not for decoration only.
Consider accessibility, such as color contrast.
SAP Fiori uses theming. Be aware that if you make custom changes to the HTML (such as changing colors), you need to take care of the theming part as well.
The text direction is inherited by default. If you want to use a different text direction for part of the formatted text, make use of the bdi and dir HTML tags to set the direction explicitly.

Month: December 2019