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.
The following code adds a callout to the text field in this sample form. The callout itself contains a FormattedTextView.
*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.