Paragraph Component

Overview

The Paragraph component allows for text to be set on the page. This component may be used in one or two column sections. You may include HTML in the text and you can merge data from any field into the text.

The “Insert Expression” button

The “Insert Expression” button (labeled “A” in the screenshot, above) allows you to merge into the paragraph text any field from any parent record of a record that you are working with on the page, such as the user’s Contact or Application record. Clicking the button allows you to drill down to any field and insert it into the text:

These values will update in real time if they change in response to any action taken by the user (e.g. if the user enters data into a field that results in an update to the referenced field).

The </> button

The </> button (labeled “B” in the screenshot above) allows you to create a “bubble” in which you can enter html, such as hyperlinks. For example:

Merge Fields in Paragraphs

Example:

The above configuration renders in the Community like this:

The pre CSS tag

When rendered on the browser, paragraph text is nested within a CSS style tag pre. Modify this tag in the header of your template to control the style of text in paragraph components. For example:

(STYLE TAG) pre { background-color: transparent; border: none; word-break: normal; text-align: justify; padding: 0px; margin: 0px; height: 100%; font: 100% / 1.5 "Salesforce Sans", sans-serif; font-size: small; background: white; color: #16325c; } (end STYLE TAG)

Visible paragraphs in PageBuilder

Once you have configured a paragraph, the first line of its text will display in PageBuilder with an icon you can click to expand and see the entire paragraph like this:

And expanded like this: