Markup Include Component

Overview

Markup Includes were created so that textual information and imagery can be added to a dashboard. This textual information can be independent of the data that the dashboard is created from. Design elements can be added this way as well.

This Dashboard component can be used to help the page user understand how to interact with the dashboard or interpret it. They are best applied to subsections of the Dashboard needing context or overall dashboard guidance.

Note: Markup Includes can only be used within a Dashboard.

Go to the examples at the bottom of this page to see some of the possible options.

Usage

Markup Includes in the Dashboard Editor are used to add textual, imagery, or design elements into a Dashboard that either references or is independent of the data being input.

Use:

• When a set of text or visuals is required
• To enhance the overall communication of the dashboard

Don't Use:

• As a stand alone page element
• If a Data Bite static or variable image could be used with data

Other Guidance

• Markup Include Title: Good titles are helpful to the page user. However, consider if one is necessary visually or structurally for your dashboard.
• Customization: Keep the style choices for your Markup Include simple. Not all style choices will render exactly the way you created it in the SSI.
• Visual Clutter: Select the cleanest layout possible. If an image or a graphic isn't needed, don't add one.
• Other Modules: It may be better to simply add a row of modules before or after the dashboard to share insight or additional information instead of adding a Markup Include inside the dashboard.

Configuring an SSI driven Markup Include

1. Create a new stand alone "Server Side Include (SSI)" Content Item in your site's WCMS folder structure.
2. Fill that module with the content you'd like to include in your Dashboard. Not all WCMS elements or styling options will render on a DFE page.
3. When you're done, copy the URL for that SSI module.
4. Open the edit screen for your Dashboard.
5. Create a new Markup Include item by dragging it from the available misc. items into your grid.
6. Assign and configure a Data Set for the Markup Include, even if you do not want to make it variable.
7. Click the crossed tools icon to edit the Markup Include.
8. Paste the SSI's URL into a new Markup Include module using the Source URL field found in the Content Editor Panel. The Source URL field will not be visible if the "USE INLINE HTML" box is checked.

Configuring an Inline HTML Markup Include

1. Create a new Markup Include item directly in your Dashboard's editor screen by dragging it from the available misc. items into your grid.
2. Assign and configure a Data Set for the Markup Include, even if you do not want to make it variable.
3. Click the crossed tools icon to edit the Markup Include.
4. In the Content Editor panel, check the "USE INLINE HTML" check box to enable the text entry.
5. Text into the field below will display in the Dashboard. Basic inline markup can be applied to the text.
6. Markup Include now supports tags to input images.
7. If you would like to hide the markup include when any of your values are blank, click the "Hide Section on Null" checkbox. Note that if you have multiple variables in your markup, the entire markup will be hidden if one or more variables have no data.

Using Variable Text in a Markup Include

1. Display information from your Data Set that reacts to your Dashboard filtering by clicking the Create New Variable button in the Content Editor Panel.
2. Assign a Variable Name and select a Column from your Data Set you want to pull from.
3. Make sure to click the Done button to apply the variable.
4. Type your text including basic inline HTML into the entry field.
5. Add the variable text you created by wrapping the Variable Name you assigned in curly brackets "{}". For example, {location}
6. The Variable will display in the preview pane with a yellow highlight and provide the information it is referencing when configured correctly.
7. Remember to apply any Dashboard level filters to the Markup Include item if you want the Dashboard filtering to influence what displays.

Note: Variables can only be added to text and image nodes in Markup Includes. They will not work when applied within other HTML Attributes. Variable images will only work when sourced from a URL that is already in the data set and that column is set as the variable.

Example Markup Include Dashboard

Example Variable Markup Include Dashboard

Sample Data: The built in "United States: State Sample Data" in the COVE Editor "Import Data" Tab.