Template

The Template component displays a block of content that supports HTML formatting, giving advanced users more control to achieve finely-tuned solutions. Template 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.

Should I use the Template or Rich Text component?

Using the Template Component

Drag and drop the Template onto the page. Then, click the template to edit its properties, in particular the Template property field.

Note

  • Template components only receive context if they are connected to a model.
  • The Template component will generate an instance of its template for each row in its selected model by default. For more information, see the Do Not Run Template on Each Row property.

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

The Template 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 Template 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 use the component without template capabilities.
    • [Specific models]: All models within the page will be listed as options. To utilize context in the Template component—for example, to reference a particular field—select a model.
  • Template: 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 Template entry field to enlarge that field.
    • Want even more space? Click fa-code Resource Editor to open the Edit Inline Code dialog, especially useful when writing HTML code.
  • Allow HTML: If checked, allows HTML markup to be used in the template property (above). If disabled, all HTML will be rendered as text.

  • Do Not Run Template on Each Row: This property determines whether or not Template component contents should be used as a repeated structure for each record in a model.

    • If not checked (default): The Template component generates an instance of the template for each record in the model. Merge variables within each row display data for the corresponding record. (If there is only one record in the model. only one item will display. If there are dozens of records, dozens of rows will display.)
    • If checked: The Template component’s content will only display once, for the first row on the model. Merge variables will only display if context is provided. (If there is no context for the merge syntax, no content will be displayed for the merge variables.) Best used if you are referencing a field that appears only once on the model.
  • Unique Id (optional): Skuid automatically generates an alphanumeric Id for the component; if preferred, give it a practical name.

    Note

    A unique name will make it easier to locate the Page Include for later use.

  • CSS Class (optional): Assign a CSS class to the component’s DOM element.

Display Logic tab [[]]

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