Add a hyperlink to a Data View

Important:

This topic describes using the discontinued SharePoint Designer 2007.
For information on SharePoint Designer 2013 or SharePoint Designer 2010, see:

Updated February 28, 2017

One of the simplest and yet most powerful capabilities of a Web application is the ability to make any piece of information into a hyperlink. Hyperlinks are not just for linking Web pages; they can be a very handy way to provide a user interface for a data-driven Web application.

With Microsoft Office SharePoint Designer 2007, you can easily make any field in a Data View into a hyperlink. Your hyperlink can be simple or complex, depending on the needs of your Web application.

For example, Northwind Traders, a gourmet food distribution company, is building an intranet Web application to view and manage its products. The following sections illustrate a few different ways that you could use hyperlinks as part of this Web application.

What do you want to do?

Create a hyperlink to a form

Create a hyperlink to a page based on multiple field values

Enhance a hyperlink with XSL

Create a hyperlink to a form

Hyperlinks provide a simple and effective mechanism for your customers to navigate among the various Data Views and forms that you use in your Web application. A typical model is to navigate from a multiple-item Data View to a single-item form.

Create a hyperlink to a built-in SharePoint list form

Each SharePoint list is associated with three specific forms that are used to work with list items: a form to create an item (NewForm.aspx), a form to edit an item (EditForm.aspx), and a form to display an item (DispForm.aspx). These forms are linked to from the various list views associated with the list. If the data source for your Data View is a SharePoint list or library, you can create a link to any of these forms from your Data View.

Create or open a Data View of a SharePoint list or library, and then switch to Design view.
Select a field value in the column in which you want to offer the hyperlink, and then right-click it.
Point to Format Item as, then point to Hyperlink to, and then click one of the three forms: New Item Form, Edit Form, or Display Form.
If the Confirm dialog box appears, click Yes.

Create a hyperlink to a Data View form

You can link from your multiple-item Data View to your own custom Data View form. The data source can be a SharePoint list, or another type of writable data source such as a database connection or XML file. See the article Create a Data View for an example creating a Data View of an XML file.

Create or open a Data View, and then switch to Design view.
Select the field value in the column in which you want to offer the hyperlink, and then click the arrow in the upper-right corner to show the Common xsl:value-of Tasks list.
In the Format as drop-down list, click Hyperlink.
If the Confirm dialog box appears, click Yes.
In the Edit Hyperlink dialog box, in the Address box, enter the URL.

For example, if your data source is a SharePoint list, you want to link to the Data View form for the current list item, so you need to add a parameter for the list item ID to the query string of the URL.

http://northwindtraders/editproduct.aspx?ID={@ID}

Click OK.

Return your customer back to your Data View

After your customer links to and then submits the form, they are redirected to the default list view of the SharePoint list. For most scenarios, it makes more sense to have the customer return to the Data View from which they came. In order for this to happen, the URL that you jump to must include the Source=URL name/value pair. You can make the system add this name/value pair for you automatically by adding two attributes to your link.

Create or open a Data View, and then switch to Split or Code view.
Go to the <xsl:template name="dvt_1.rowview"> sub-node of the <WebPartPages:DataFormWebPart> tag.

Locate the <a> tag that formats the field value. For example:

              <td class="ms-vb">
   <a href="http://northwindtraders/Lists/Products/EditForm.aspx?ID={@ID}">
      <xsl:value-of select="@Product_x0020_Name"/>
   </a>
</td>

Add the attributes to the <a> tag that enable the link to return the customer to this Data View. For example:

              <td class="ms-vb">
   <a href="http://northwindtraders/Lists/Products/EditForm.aspx?ID={@ID}"
      onclick="GoToLink(this);return false;"
      target="_self">
      <xsl:value-of select="@Product_x0020_Name" />
   </a>
</td>

Notice in the above example the onclick and target attributes added to the <a> tag.

Add the Navigate to source form action to one or more buttons on the target form. For information on how to add this form action to your form, see the article Add a built-in form action to a Data View.

Top of Page

Create a hyperlink to a page based on multiple field values

A typical use of a hyperlink in a Data View is to format the value of one column as a hyperlink, drawing upon one or more other fields that comprise the URL of the hyperlink and other attributes.

For example, Northwind Traders offers its catalog on a Web site. The URL of each item in the catalog is determined by two values, the Category and the Product Code. For example, the URL to the Curry Sauce page is:

http://www.northwindtraders.com/catalog/Sauces/NWTS-8

You want to modify a Data View in your intranet Web application to link to the catalog.

Create or open a Data View of a SharePoint list, and then switch to Design view.
Select the field value in the column in which you want to offer the hyperlink, and then click the arrow in the upper-right corner to show the Common xsl:value-of Tasks list.
In the Format as drop-down list, click Hyperlink.
If the Confirm dialog box appears, click Yes.
Enter the URL. For example:

http://northwindtraders.com/catalog/{@Category}/{@Product_x0020_Code}

Tip: If you are not sure how to reference a field you need, you can click the fx button Button image , select the field you want to add, and then click OK.

Click OK.

Top of Page

Enhance a hyperlink with XSL

There are many ways to use XSL to enhance both the functionality and presentation of a hyperlink in a Data View. Two examples follow.

Display additional data by using the title attribute

You decide you want to modify the catalog hyperlink to show the value of the Description field when the customer of your Web application moves the mouse over the hyperlink.

Create or open a Data View, and then switch to Split or Code view.
Go to the <xsl:template name="dvt_1.rowview"> sub-node of the <WebPartPages:DataFormWebPart> tag.

Go to the XSL code that renders the hyperlink. For example:

              <td class="ms-vb">
   <a href="http://www.northwindtraders.com/catalog/{@Category}/{@Title}">
      <xsl:value-of select="@Product_x0020_Name" />
   </a>
</td>

Just before the </a> tag, type <xsl:attribute name="title"> and then press ENTER.
On a new line after the previous line, type <xsl:value-of select=".
After you type the opening quotation mark, IntelliSense presents a list of the available fields. Double-click the field that needs to supply the data. In this example you would double-click @Description.
Type "/> and then press ENTER.
Type </xsl:attribute> and then press ENTER.

The final result of the above example follows:

          <td class="ms-vb">
   <a href="http://www.northwindtraders.com/catalog/{@Category}/{@Title}">
      <xsl:attribute name="title">
         <xsl:value-of select="@Description"/>
      </xsl:attribute>
      <xsl:value-of select="@Product_x0020_Name" />
   </a>
</td>

Create a hyperlink with conditional attributes

In your work on the Northwind Traders intranet site, your customers ask you to make the links to the catalog a little smarter. Some products are discontinued, and so do not have catalog pages. You decide to modify the Data View to make the link conditional based on whether or not the product has been discontinued.

Design the conditional logic. For example, you could have the page do three different things based on the value of Discontinued:
- If Discontinued equals 0, then show the link to the catalog.
- If Discontinued equals 1, then show the link to an intranet page (a Data View) that provides information about the discontinued product. You also show the word "Discontinued" after the name of the product.
- If neither of the above are true, then the value might be missing or set incorrectly. In this case, show the link to the intranet page.
Create or open a Data View, and then switch to Split or Code view.
Go to the <xsl:template name="dvt_1.rowview"> sub-node of the <WebPartPages:DataFormWebPart> tag.

Add the conditional logic to the XSL. For example, the code before you make this change might look like the following.

              <xsl:template name="dvt_1.rowview">
   <tr>
      <xsl:if test="position() mod 2 = 1">
         <xsl:attribute name="class">ms-alternating</xsl:attribute>
      </xsl:if>
      <td class="ms-vb"><xsl:value-of select="@Category" /></td>
      <td class="ms-vb">
         <a href="http://www.northwindtraders.com/catalog/{@Category}/{@Title}">
            <xsl:attribute name="title">
               <xsl:value-of select="@Description"/>
            </xsl:attribute>
            <xsl:value-of select="@Product_x0020_Name" />
         </a>
      </td>

You update the code as follows:

              <xsl:template name="dvt_1.rowview">
   <tr>
      <xsl:if test="position() mod 2 = 1">
         <xsl:attribute name="class">ms-alternating</xsl:attribute>
      </xsl:if>
      <td class="ms-vb"><xsl:value-of select="@Category" /></td>
      <td class="ms-vb">
         <a>
            <xsl:choose>
               <!-- Discontinued is False, so this product should have a catalog page for us to link to. -->
               <xsl:when test="Discontinued = 0">
                  <xsl:attribute name="href">http://northwindtraders/displayproduct.aspx?id={@ID}</xsl:attribute>
                     <xsl:value-of select="ProductName" />
                  </xsl:when>
               <!-- Discontinued is not False, so we should not assume this product has a catalog page. -->
               <xsl:otherwise>
                  <xsl:attribute name="href">http://www.northwindtraders.com/catalog/{@Category}/{@Title}</xsl:attribute>
                  <xsl:attribute name="onclick">GoToLink(this);return false;</xsl:attribute>
                  <xsl:attribute name="target">_self</xsl:attribute>
                  <xsl:value-of select="ProductName" />
                  <!-- Discontinued is True, so we append this information after the name of the product -->
                  <xsl:if test="Discontinued=1">
                     <xsl:text> (Discontinued)</xsl:text>
                  </xsl:if>
               </xsl:otherwise>
            </xsl:choose>
         </a>
      </td>

Top of Page

Microsoft Office Tutorials

Wednesday, January 3, 2018