FormattedTextView

Introduction

The FormattedTextView is designed to make mixed formatting of text within one control possible. There is a limited set of tags and attributes which is allowed for usage inside this control.

Predefined CSS classes exist for bold, italic, underlined and monospace text as well as for semantic coloring. You may use one of these, which is especially useful because they also take part in theming, but you can also use your own style classes within span and div tags.

Please see the list at the bottom of this page for details about which tags and attributes can be used.

Be aware that all tags which are not explicitly allowed by the control will be removed from the FormattedTextView. It has a sanitizing functionality in place that will take care of "illegal" tags and potentially malicious scripts. It will remove such tags along with the content that may go between the opening and closing tag.

Certain other controls can be merged into the FormattedTextView (currently these are sap.ui.commons.Link and sap.ui.commons.Image). Thus, you can also easily attach events to these elements.
The controls you want to include have to be added to the controls aggregation.
To define where these "inner controls" should be placed, you simply put placeholder tags into the html string that goes into the htmlText attribute, following this pattern:
yourFormattedTextView.setHtmlText("Some placeholder goes here <embed data-index="n">);
, n is the index of the desired control in the controls aggregation.

This means the placeholder with n=0 will be replaced by the first control in the aggregation

Placeholders without a matching control will be removed.

The FormattedTextView can be used standalone as well as within other controls, such as e.g. a Callout.

Standalone Usage Example

Usage within a Callout

The following code adds a callout to the text field in this sample form. The callout itself contains a FormattedTextView.

Supported tags

*1: Header tags must be on the top level.

*2: With these tags , the attributes class and id can be used. For all other tags, no attributes are supported.

Tag Description
abbr Abbreviation
acronym Acronym
address Format as address
blockquote Blockquote
br Line break
cite Cite
ode Inline Code
dfn Definition
div Div *2
em Emphasis
h1 Header Level 1 *1
h2 Header Level 2 *1
h3 Header Level 3 *1
h4 Header Level 4 *1
h5 Header Level 5 *1 (not supported)
h6 Header Level 6 *1 (not supported)
kbd Text to be entered via Keyboard
p Section symbol
pre Pre formatted text
q Quotation
samp Sample (block)
span Span *2
strong Strong
var text that is a variable
dl Definition list
dt Definition topic
dd Definition item
ol Ordered list (numbered list)
ul Unordered list (bullet list)
li List item for "ol" and "ul"

<b> , <u> and <i> tags are not supported because they are deprecated and lack any additional semantic value. If styled accordingly in your chosen theme, you can either use <em> for italic font and <strong> for bold font or use a span tag along with a class carrying the desired styling.

API Documentation

API documentation