---
schema_version: "1"
id: 68858ab546a64e39d6f7bd0b1ffffc8ee68e96b100098f3e55cace66583cfe7c
title: Display Data or Content Using Data Elements
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/siteforce_data_repeater_element.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.siteforce_data_repeater_element.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: ebfe918b8e2a6ced8f69a31002e6767bd3ccad89f2dd2d22f0ffaf153d63c38b
description: You can use a data element to display the data retrieved by a page data connection or a data repeater. The data element binds to a field in the object and acts as a placeholder that's replaced with the field's data when the page loads.
products:
  - Salesforce Platform
  - Security
release: "264"
---
# Display Data or Content Using Data Elements

You can use a data element to display the data retrieved by a page data connection or a data repeater. The data element binds to a field in the object and acts as a placeholder that's replaced with the field's data when the page loads.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition">
        <colgroup>
          <col>
        </colgroup>
        <tbody>
          <tr class="">
            <td class="slds-cell-wrap" style="vertical-align:top;">Available in: Salesforce Classic</td>

          </tr>
          <tr class="">
            <td class="slds-cell-wrap" style="vertical-align:top;">
              <p>Available for purchase in: <strong>Enterprise</strong>, <strong>Performance</strong>,
                and <strong>Unlimited</strong> Editions</p>
              <p style="margin-bottom:0;">Available (with limitations) in:
                <strong>Developer</strong> Edition
              </p>
            </td>

          </tr>
        </tbody>
      </table> <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d175871e74">User
              Permissions Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d175871e74 ">To build, edit, and manage Site.com sites:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d175871e74 ">
              <p><samp class="parmname">Site.com Publisher User</samp> field enabled on the
                user detail page</p>
              <p>AND</p>
              <p style="margin-bottom:0;">Site administrator or designer role
                assigned at the site level</p>
            </td>

          </tr>
        </tbody>
      </table>

When combined with a data repeater, data elements result in a “repeating template” that displays one or more records on the page. When used with a page data connection, data elements display data from a single record.

You can use data elements to display plain text, formatted text (for dates and numbers), or images. You can also add hyperlinks to data elements to allow site visitors to navigate to another page, such as a detailed description, or to refresh the data displayed on the page or the data repeater based on their selection. See [Data Filtering Examples](https://help.salesforce.com/s/articleView?id=platform.siteforce_data_repeater_examples.htm&release=264.0.0&type=5 "When working with data repeaters, data tables, and data functions, you can filter the data you retrieve in many ways. In this topic, we explore two options— fixed values and URL query strings—to illustrate some common filtering techniques.").

When the page is open:

1. Drag a **Data Element** from the Page Elements pane onto the data repeater. Alternatively, if the page has a page data connection, drag the **Data Element** page element directly onto the page canvas.
2. Select the field to display. To [customize how the field's data is displayed](https://help.salesforce.com/s/articleView?id=platform.siteforce_data_merge_fields.htm&release=264.0.0&type=5 "Site.com uses expression language to display data dynamically. Expressions serve as placeholders for data that is replaced with information when the page loads. When working with data-bound page elements or custom widget properties, you can use expressions to customize how data is displayed on the page."), click **Customize**.
    
    ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/images/icon_note.png)
    
    Note The object's fields are listed first, followed by the fields of all [parent objects](https://help.salesforce.com/s/articleView?id=platform.siteforce_data_nested_overview.htm&release=264.0.0&type=5 "Standard and custom objects have relationships that define how records in one object relate to records in another. For example, the Accounts object has a one-to-many relationship with the Contacts object—that is, each account can have one or more contacts associated with it. This relationship is also known as a parent-to-child or a master-detail relationship."), which use the format parent\_object\_name.field\_name.
3. Select the display type.
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col style="width:50%">
              <col style="width:50%">
            </colgroup>
            <thead class="slds-text-title_caps ">
              <tr class="">
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d175871e184">Option</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d175871e187">Description</th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d175871e184 ">
                  <strong class="uicontrol">Text</strong>
                </td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d175871e187 ">Lets you display the field's data as plain text.</td>

              </tr>
              <tr class="">
                <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d175871e184 ">
                  <strong class="uicontrol">Formatted text</strong>
                </td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d175871e187 ">If you're working with dates, times, or currency, lets
                  you choose from several text display formats.</td>

              </tr>
              <tr class="">
                <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d175871e184 ">
                  <strong class="uicontrol">Image</strong>
                </td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d175871e187 ">
                  <p>If the field contains an image URL, lets you display the
                    field's data as an image. The URL can be absolute or <a href="https://help.salesforce.com/s/articleView?id=platform.siteforce_data_assets_storage.htm&amp;release=264.0.0&amp;type=5" title="Because websites built with Site.com are publicly available, site visitors don't have the security privileges required to view images and documents stored in your Salesforce objects, which are available to authenticated users only.">relative to the site</a>.</p>
                  <p style="margin-bottom:0;">You
                    can also select a field to use for the alternative text
                    or enter custom text.</p>
                </td>

              </tr>

            </tbody>
          </table>
4. To create a hyperlink, select Add a hyperlink. Otherwise, go to step 8.
5. Select the link type.
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col style="width:50%">
              <col style="width:50%">
            </colgroup>
            <thead class="slds-text-title_caps ">
              <tr class="">
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d175871e272">Option</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d175871e275">Description</th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d175871e272 ">
                  <strong class="uicontrol">A URL</strong>
                </td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d175871e275 ">
                  <p>Lets you link to a Web page by:</p>
                  <ul>
                    <li>Choosing a field that you want to reference, such as
                      a field that stores the relative URLs of PDFs you
                      uploaded to your site.</li>
                    <li>Choosing a field that you want to reference and
                      clicking <strong class="uicontrol">Customize</strong> to add an
                      absolute URL or to <a href="https://help.salesforce.com/s/articleView?id=platform.siteforce_data_merge_fields.htm&amp;release=264.0.0&amp;type=5" title="Site.com uses expression language to display data dynamically. Expressions serve as placeholders for data that is replaced with information when the page loads. When working with data-bound page elements or custom widget properties, you can use expressions to customize how data is displayed on the page.">create a custom
                        link</a>, such as a URL query string.</li>
                  </ul>
                </td>

              </tr>
              <tr class="">
                <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d175871e272 ">
                  <strong class="uicontrol">An item in your site</strong>
                </td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d175871e275 ">
                  <p>Lets you link to a page, image, or file in the site by
                    selecting the item type and then selecting the item. (If you
                    can't see the list of items, place your cursor in the
                    <samp class="parmname">URL</samp> field and press the DOWN key on
                    your keyboard.)
                  </p>
                  <p style="margin-bottom:0;">You can also <a href="https://help.salesforce.com/s/articleView?id=platform.siteforce_data_merge_fields.htm&amp;release=264.0.0&amp;type=5" title="Site.com uses expression language to display data dynamically. Expressions serve as placeholders for data that is replaced with information when the page loads. When working with data-bound page elements or custom widget properties, you can use expressions to customize how data is displayed on the page.">customize the
                      URL</a>—for example, by creating a URL
                    query string.</p>
                </td>

              </tr>
              <tr class="">
                <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d175871e272 ">
                  <strong class="uicontrol">An email</strong>
                </td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d175871e275 ">
                  <p>Lets you link to an email message by entering the
                    recipient's address, and the message subject and body.</p>
                  <p>You
                    can use merge fields to access the object's fields. For
                    example, if an object has an <samp class="parmname">Email</samp>
                    field, enter the merge field, such as
                    <samp class="parmname">{!email}</samp>, in the Email address
                    text box.
                  </p>
                  <p style="margin-bottom:0;">When the link is clicked, it opens a new
                    message window in the user's email client and adds the
                    appropriate email address to the To: field.</p>
                </td>

              </tr>
            </tbody>
          </table>
6. Optionally, enter a tooltip by selecting the required field or clicking Customize to add custom text.
    
    The tooltip displays as a pop-up when the user hovers over the link.
7. If you're linking to a URL or an item in your site, specify where the item must open.
    
     
    | Option | Description |
    | --- | --- |
    | **Popup window** | Loads the item into a window. When you select this option, you can set the title for the popup and control its appearance and size with the options that appear. |
    | **New window (\_blank)** | Loads the item into a new, unnamed browser window. |
    | **Same window (\_self)** | Loads the item into the same frame or window as the link. This setting is the default setting. |
    | **Topmost window (\_top)** | Loads the item into the topmost parent frameset or window of the frame that contains the link. |
    | **Parent window (\_parent)** | Loads the item into the parent frameset or window of the frame that contains the link. |
8. Click **Save**.

The data element is displayed on the page as a merge field. To test the output, [preview the page](https://help.salesforce.com/s/articleView?id=platform.siteforce_preview.htm&release=264.0.0&type=5 "Contributors, designers, and site administrators can preview site pages to see how they look when rendered in a browser window. It's always a good idea to make sure your changes are displayed correctly, as this preview is how the pages appear on the live site.").

#### See Also

- [Dynamically Retrieve Data with Data Repeaters](https://help.salesforce.com/s/articleView?id=platform.siteforce_data_repeater.htm&release=264.0.0&type=5 "Use a data repeater to connect to a standard or custom Salesforce object and retrieve a dataset based on the filter criteria that you specify.")
- [Retrieving Data with Page Data Connections](https://help.salesforce.com/s/articleView?id=platform.siteforce_data_page_connection.htm&release=264.0.0&type=5 "Use a page data connection to create a detail page for a single record when working with Salesforce objects.")
- [Displaying Data or Content Using Custom Code](https://help.salesforce.com/s/articleView?id=platform.siteforce_data_code.htm&release=264.0.0&type=5 "In addition to data elements and content blocks, you can also use custom code as an alternative way to display data in a data repeater or in a page data connection. It's particularly useful for displaying field data that's inline with text.")
- [Displaying Data Using Content Blocks](https://help.salesforce.com/s/articleView?id=platform.siteforce_data_content_block.htm&release=264.0.0&type=5 "In addition to data elements and custom code, you can also use content blocks as an alternative way to display data in a data repeater or in a page data connection. It's particularly useful for displaying field data that's inline with text.")