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 records within a model. This content can then be displayed for rows within a model.

Using the Text Component

To get started with the Text component:

  • Drag and drop the Text component onto the page.

  • Set properties:

    • In the Basic 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 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 HTML property field.

Note

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 HTML property field.

Heads Up: Working with HTML and iframes [[]]

The Text component allows you to use custom HTML within Skuid pages, but that extensibility can also come with complexity. This is especially true for iframes—which allow the insertion of completely separate HTML pages.

While using iframes within Skuid pages may be a solution to some specific issues—such as using multiple Chatter components within one Skuid page—it is typically recommended only for advanced users and is not considered a best practice.

Introducing completely separate HTML pages into a Skuid page can present unexpected challenges, such as complex security concerns, an inconsistent user experience between a Skuid page and iframed pages, out-of-sync data behaviors, and more. These issues should be addressed by a user that understands the risks and challenges, especially since the solutions typically exist outside of Skuid and could require extensive debugging.

If you are attempting to iframe a web page into a Skuid page for its functionality, consider ways you can replicate that functionality within the Skuid page itself. If you must use iframes—or any other extensive HTML markup within a Text component—be wary of the issues that may arise and test pages thoroughly.

For more information on iframes in general, see the MDN web docs topic.

Properties

Basic 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.

  • HTML: The template—text, HTML, or merge syntax—to use for this page. Use the picker to insert fields from the component’s chosen model as merge syntax. (Fields must be included in the model to be selectable.)

    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.

  • Spacing: Sets the spacing of the Header relative to other components on the page. Spacing can be managed for Top Margin, Bottom Margin, Left Margin, Right Margin. All margins can be set to one of the following:

    • None
    • Extra Small
    • Small
    • Reduced
    • Regular
    • Increased
    • Large
    • Extra Large
    • Huge

    Note

    These sizes are relative to one another; the baseline is determined by Design System settings.

Rendering tab [[]]

Conditional rendering allows you to display or hide the Text component, based on defined data conditions.