Text

The Text component displays a block of content that supports HTML formatting. The component’s content may include basic text, complex HTML elements, or formatted information about a model record in context.

Using the Text Component

To get started: add a Text component to the page. Next, set properties:

  • In the General tab, decide whether to attach the component to a model

Note

Text components only receive context if they are connected to a model.

  • Make any margin/spacing adjustments in the Styles tab

Then, add some content. There are two ways to do this:

  • Click on the text area within the component to open a text editor with standard options (including styling, bullets, numbering, links, and more), and begin composing and formatting text.
  • Need to use HTML or merge syntax? In the Advanced tab, enter the content in the Template property field.

Whether you use the first or second method to enter the text content, it will display in both places: the text area on the component and the Template property field.

Note

Text components only display data for a single row, based on context. If there are multiple rows in the model, the component will not render a new instance for each row, in contrast to Skuid’s v1 Template component. If you wish to display information about multiple rows, consider using a Deck component to iterate over rows and nesting this component within it.

Skuid uses Salesforce’s Rich Text Editor in Lightning

When deployed in Lightning, Skuid uses Salesforce’s own Lightning Rich Text component in lieu of Skuid’s Text component to remain Locker Service compliant. For more information about this component’s features, see Salesforce’s documentation.

There are some behavior differences which may affect your build and runtime experiences. See the sections below more information.

Styling limitations

Skuid cannot apply Text component stylings to the Salesforce Rich Text Editor. Because of this, Text component style variants won’t apply in the Lightning runtime.

Model changes don’t signal until users click outside the component

While Skuid can tell when its own Text component has caused model changes (enabling save/cancel buttons as changes are made), the Salesforce Rich Text Editor doesn’t signal model changes the same way. End users won’t see save/cancel buttons enable until they have clicked outside of the component.

Clicking outside the component does not activate read mode

In contrast to Skuid’s Text component, the Salesforce Rich Text Editor will not return to read mode when the end user clicks away from it. Instead, the field remains in edit mode.

Cannot have an empty value

The Salesforce Rich Text component raises this error when a field is left blank on the page at runtime:

Error Message: Uncaught Action failed: skuid:teleporter$controller$eventHandler [Unable to get value from Rich Text component.]

A potential workaround involves setting an empty space default value for the field.

Properties

(Just need to look up a property? Try going directly to the Property Library.)

Component properties

General tab [[]]

  • Model:
    • None: Select this to add text to the component without referencing context or using merge syntax.
    • [Specific models]: All models within the page will be listed as options. To utilize context in the Text component—for example, to reference a particular field—select a model.

Advanced tab [[]]

  • Unique ID (optional): Skuid automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

  • Allow HTML: Determines HTML rendering behavior for Template contents. When enabled, any HTML syntax will be rendered. When disabled, HTML syntax is displayed as plain text. For example:

    Enabled:

    This text is important

    Disabled:

    <strong>This text is important</strong>

  • Template: The text to display in the component. Can contain merge syntax or (if HTML is allowed) HTML.

    Note

    Need more space?

    • Click and drag the slash marks at the bottom of the entry field to enlarge that field.
    • Want even more space? Click code-block Resource Editor to open the Edit Inline Code dialog, especially useful when writing HTML code.

Styles tab [[]]

Global styles for this component are set in the Design System Studio. The following Style properties can be adjusted for an individual page.

  • Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component’s style. Also, Skuid builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.

    Note

    To refresh available style variant options, click refresh Refresh style variants.

    This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

  • Margin: Sets a component’s margin (the space around it) relative to other components on the page.

    • To set margins for all sides, click border-all All.
    • To set margins for each side individually, click border-separate Separate.

    Margin values can be set to any configured spacing variable for the page’s design system. Margin cannot be set an arbitrary value; it must use a design system variable.

Display logic tab [[]]

Standard display logic options are available to display or hide the component or feature.