Form Elements in Layout Builder Tiles

Use elements in global tiles to create a form-based experience for content editors. Like components, use these tiles to create layout pages (LCFs) that prompt editors for information and add the information to complex design elements.

Add an element to a global tile, as follows:

  1. When you create or edit a global tile, click Insert Element in the HTML or JavaScript toolbar.
  2. In the Choose Element Type box, select a type.
    Short Text

    Creates a one-line text field for content.

         Can also be used for HTML attributes.

    Long Text
    Creates a multi-line text field for content.
    Provides a list of choices from which multiple options can be selected.
    Provides a dropdown list from which multiple options can be selected.
    Dynamic Dropdown

    Link to a publicly-available data file that will define the dropdown options available to the content editor.

    Format your data file, as follows (remove comments to make valid JSON):

      "items": [ // array
        ...other items
          "displayName": "visible for user selection",
          "value": "actual value being set"
        ...other items

    You can also copy the following examples:

    Radio Boxes
    Provides a list of choices from which one option can be selected.
    Provides two choices from which one option can be selected.
    Provides a list of choices from which multiple options can be selected using Ctrl+Click.
    File Chooser

    Content editors can select a path to a file or page. They can also paste in an external URL.

    Image Chooser
    Content editors can select an image.
  3. In the New Element box, enter information in the form fields.
  4. Click Save.

Next, create the source code to display the form content on the page. Then Launch the tile to make it available for use in layouts and pages.

All content in the tile will use the form-based, rather than inline, editing experience. Be sure to add elements for any content you'd like to make editable.

You can add the same element to a tile multiple times. To edit, click the element pill in the editor.

Elements on PagesLink to this section

LCFs that use elements will open a panel where editors can change the editable information.

Editing an element tile on an LCF

  1. Create or edit an LCF that uses an element tile.
  2. Click anywhere in the tile.
  3. In the editing panel, type to change the information in the form fields.
  4. Save to close the editing panel.

Editing and Deleting ElementsLink to this section

If you make changes to element tiles that are in use on pages, update the layout(s) that use the tile. Edits will appear automatically in pages on the staging server that use the tile.

If you delete an element from a tile that is in use on pages, we will store any previously-saved data that was entered in the form. Editors will see this as inactive form data in the editing panel on the page.

By continuing to use this site, you agree to the storing of first- and third-party cookies on your device to enhance site navigation; analyze site, product, and service usage; and assist in our marketing and promotional efforts. Cookie Policy