mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-30 03:09:50 +08:00
3.2 KiB
3.2 KiB
flexipage:richText — Rich Text
Purpose
Displays HTML-formatted rich text content on a page. Supports text formatting, headings, lists, links, and inline styles. Content is static (not data-bound).
Supported Page Types
- RecordPage
- AppPage
- HomePage
Property Table
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| richTextValue | String (HTML-encoded) | Yes | — | HTML content, entity-encoded for XML |
| decorate | Boolean | No | true | Show card-style border/decoration around the content |
Property Inference Rules
| User Intent | Inferred Properties |
|---|---|
| "add rich text with {content}" | richTextValue = HTML-encoded version of content |
| "add a heading {text}" | richTextValue = <p><b style="font-size: 16px;">{text}</b></p> |
| "add a link to {url}" | richTextValue = <p><a href="{url}" rel="noopener noreferrer" target="_blank">{text}</a></p> |
| "no border" or "borderless" | decorate = false |
| "with card border" or "in a card" | decorate = true |
HTML Encoding Rules
CRITICAL: The richTextValue must be double-encoded for XML:
- Write the desired HTML content
- Entity-encode ALL HTML characters:
&->&(encode FIRST)<-><>->>"->"
Example: To display <b>Hello</b>, the value must be <b>Hello</b>
Supported HTML tags:
<p>— paragraphs (required wrapper for all content)<b>— bold<u>— underline<i>— italic<a href="..." rel="noopener noreferrer" target="_blank">— links<span style="...">— inline styling<br>or<br />— line breaks
Supported inline styles:
font-size: Npx(e.g.,12px,14px,16px,18px)color: #hexorcolor: colornametext-align: left|center|rightbackground-color: #hex
XML Example
<itemInstances>
<componentInstance>
<componentInstanceProperties>
<name>richTextValue</name>
<value><p style="text-align: center;"><b style="font-size: 16px;">Welcome to the Account Page</b></p><p>Use this page to manage account details and related records.</p></value>
</componentInstanceProperties>
<componentInstanceProperties>
<name>decorate</name>
<value>true</value>
</componentInstanceProperties>
<componentName>flexipage:richText</componentName>
<identifier>flexipage_richText</identifier>
</componentInstance>
</itemInstances>
Edge Cases
- Never put raw HTML in
<value>tags — always entity-encode - Encode
&FIRST before encoding<and>to avoid double-encoding&lt; - Multiple rich text components on same page: increment identifier (
flexipage_richText,flexipage_richText2) - Empty content is invalid — always include at least one
<p>element - Links must include
rel="noopener noreferrer" target="_blank"for security - Can be placed in any region
- Keep content concise — rich text is for static labels/instructions, not data display