Set Content

Block Information

Available in: Page Flow

Toolbox Category: Page Content

Block Type: Regular

Set Content is a regular block that allows you to set the content of any element on the page or form.

Refer to the Set Content in Data Design block for dynamically generated content.

The block comes in two modes which are discussed below.

Mode 1

Set Content (Mode 1)

The Mode 1 version of the Set Content block consists of (from left to right):

• Behavior: Dropdown configuration setting that allows you to choose from three options:

  1. Set Content of: Overwrite the contents of the chosen Element with Content provided.

  2. Append to: Add the Content provided to the existing content of the chosen Element.

  3. Prepend to: Add the Content provided before any existing content of the chosen Element.

• Element: Selectable Input to choose the element you want to change the content of.

• Content: Value Parameter that accepts a text value containing the content you want to set.

Mode 2

Set Content (Mode 2)

The Mode 2 version of the Set Content block consists of (from left to right):

• Behavior: Dropdown configuration setting that allows you to choose from three options:

  1. Set Content of: Overwrite the contents of the chosen Element with Content provided.

  2. Append to: Add the Content provided to the existing content of the chosen Element.

  3. Prepend to: Add the Content provided before any existing content of the chosen Element.

• Element: Value Parameter that accepts either a text value in the form of a CSS Selector or an element value. The Element block comes pre-attached for your convenience but can be removed and customized.

• Content: Value Parameter that accepts a text value containing the content you want to set.

---

Usage Examples

The image below shows an example of the Mode 1 version where the Content value parameter attached to a Text block containing "Hello World!".

Example of Set Content Mode 1

In the next example we see a Mode 2 version where the Element value parameter is attached to an Element block.

Example of Set Content Mode 2

The next example also shows a Mode 2 version but this time the Element value parameter is attached to a Text block containing a CSS Selector that selects the same element.

Example of Set Content Mode 2

NOTE: Using a CSS selector, you can operate on multiple elements that match the criteria specified by the selector. See the references below for more information:

• Wikipedia article on CSS

• Mozilla Developer Network article on CSS selectors

The last example shows the Content value parameter attached to a Variable Value block.

Example of Set Content using a Variable Value block