Supporters of End User
Web

Data View Web Part, The Basics - Add a Hyperlink

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories:SharePoint Designer; Data View Web Part; Data View Web Part Basics; Document Library; Libraries and Lists; Web Parts; Site Manager/Power User; MOSS; WSS; 2007; 2010
A note from Mark Miller: Laura Rogers is leading a live online workshop this Friday: Getting Started with the Data View Web Part. This article is a warm up to that presentation.

Solution Overview

When a Data View Web Part is added to a page in SharePoint Designer, it is sometimes useful to include links to the content of the list.  In a regular view of a list on your site in the browser, the list's Title field is a link to open the item.  In a data view web part, this functionality is not automatically included.  Following is a step-by-step process for using SharePoint Designer to add a hyperlink to a field in a Data View Web Part.

Document library:

I've already added the document library to the page as a data view web part.

DVWP Links

Notice that all of the names of the documents are just plain text.  We want each of these to be a hyperlink to open that document.  Here's how to accomplish that:

  1.  Click to select the name of one of the documents in the "Name" column.  Click the little chevron button next to the field.

    DVWP Links

  2. Notice that the field is formatted as "Text".  Click the drop-down box to change this format to "Hyperlink".  Click <Yes> to the message.

    DVWP Links

  3. On the "Edit Hyperlink" screen, clear out the Address field at the bottom.  You'll notice that this automatically clears out the "Text to Display" field at the same time.
  4. Click the Function button to the right of the Address box.  This screen lets us pick which field should be used for the hyperlink's address. 

    DVWP Links

  5. Click on the URL Path field, and click <OK>
  6. Clear out the "Text to Display" box at the top, and click the function button next to the box.  Pick the "Name (for use in forms)" field, and click <OK>
  7. The Edit Hyperlink screen now looks like this.  Click <OK>

    DVWP Links

  8. Now, when you save the page, and hit the F12 key to preview this page in the browser, each document's name will have a link to open that document.

For a LIST, as opposed to a library, the only difference is what is entered in the Address box on the Edit Hyperlink screen.  Here's how to configure the link to a list item:

  1. Clear out the Address box, and type a backslash. /
  2. Click the function button to the right of the box, choose the Path field, and click OK. 
  3. Type the following after the field you just inserted:
    /Dispform.axpx?ID=
  4. Click the function button again to pick a field.  Select the ID field and click OK.
  5. In the Text to Display box, don't forget to use the function key to pick which field you would like displayed.  I'll pick the Title field in this example.  Here's the result:

    DVWP Links

  6. Click <OK>.  Save the page and preview it in the browser to see how it works.

Now, whether you're working with a library or a list, you can confidently create hyperlink fields.

If you found this helpful, I'd like to see you at my live online workshop this Friday: Getting Started with the Data View Web Part.

Comments

6 Minute Screencast: Data View Web Part - Add a Hyperlink to a Field | End User SharePoint

Data View Web Part, The Basics – Add a Hyperlink

[...] Data View Web Part, The Basics - Add a Hyperlink [...]

Posted 14-May-2009 by 6 Minute Screencast: Data View Web Part - Add a Hyperlink to a Field | End User SharePoint
Laura Rogers » Blog Archive » Data View Web Part - Add a Hyperlink

Data View Web Part, The Basics – Add a Hyperlink

[...] Data View Web Part, The Basics - Add a Hyperlink (Article) Original Publication Date: Thursday, May 14, 2009 SharePoint User Level: Power User When a Data View Web Part is added to a page in SharePoint Designer, it is sometimes useful to include links to the content of the list. In a regular view of a list on your site in the browser, the list’s Title field is a link to open the item. 6 Minute Screencast: Data View Web Part - Add a Hyperlink to a Field Original Publication Date: Thursday, May 14, 2009 SharePoint User Level: Power User This screencast is a supplement to Laura Roger’s article, Data View Web Part, The Basics - Add a Hyperlink.  Yeah, I don’t know why my face was green.  Cheap camera? [...]

Posted 19-May-2009 by Laura Rogers » Blog Archive » Data View Web Part - Add a Hyperlink
Tom Hallstrom

Data View Web Part, The Basics – Add a Hyperlink

Thanks so much for a clear solution to a frustratingly widespread issue that I've been trying to solve.

Quick Typo Fix: The added line in Step 3 for lists should be changed to:

/Dispform.aspx?ID=

It currently reads ".axpx".

Posted 20-May-2009 by Tom Hallstrom
Ryan Scott

Data View Web Part, The Basics – Add a Hyperlink

Great series of tutorials Laura, thanks for sharing. It has just opened up my eyes as to what can be done with the Data View Web part (I have been battling trying to get content query web parts to read document libraries with pagination).

I'm off now to learn how to really style it with xsl... Thanks from a SP n00b!

Posted 25-May-2009 by Ryan Scott
Harry Le

Data View Web Part, The Basics – Add a Hyperlink

Thanks so much for these helpful tips. However, I noticed the link break when I tried to add a hyperlink to a list item inside a folder. Any help with this issue would much appreciate. Thanks again for sharing your expertise!

Posted 17-Jun-2009 by Harry Le
Nancy

Data View Web Part, The Basics – Add a Hyperlink

This is great!

Will it work for email addresses? I have a list in a DVWP with a column of email addresses.

I displayed them as hyperlinks, which appears to format correctly ("link-style") in the data view. BUT - when a user clicks the link to send an email, it doesn't "behave" right- they get an error page instead of an email interface.

Is this doable?

Posted 17-Jun-2009 by Nancy
Jim Parker

Data View Web Part, The Basics – Add a Hyperlink

Another great, quick, and easy tip--thanks Laura.

Posted 18-Jun-2009 by Jim Parker
MLB

Data View Web Part, The Basics – Add a Hyperlink

I am using a forms library as the data source for my dataview web part. I want the form to open in a web browser as it does from the forms library. It opens in the InfoPath client from a data view web part. Is there a way to configure the data view web part to set the properties of the form to open in a web browser? Thanks

Posted 24-Jun-2009 by MLB
Steve Schultz

Data View Web Part, The Basics – Add a Hyperlink

SharePoint newbie here, struggling for days to create a Title column that links to the fixed Name (document filename) column when told by my internal company expert that it can't be done. Well, Laura, your post here has saved the day for all my process document owners and our migration to Sharepoint. Our users can now click on the Title to access a document rather than the obscure filenames we use.

Thanks,
Steve

Posted 13-Nov-2009 by Steve Schultz
EndUserSharePoint

Data View Web Part, The Basics – Add a Hyperlink

Steve - Another way to do it is to create a calculated column that points to the file name and does an HTML href wrapper around it to create a clickable title. You'll have to use Christophe Humbert's TextToHTML CEWP web part, but that's just a cut and paste job into a Content Editor Web Part. -- Mark

Posted 14-Nov-2009 by EndUserSharePoint
rogueveggie

Data View Web Part, The Basics – Add a Hyperlink

Great article. However, I'm trying to link to the "Related Documents" (more than one) in a knowledge base without success. Any recommendations? I'm at a stopping point because of this issue.

Posted 02-Aug-2010 by rogueveggie
elfigha

Data View Web Part, The Basics – Add a Hyperlink

for wich version this article apply ?

Posted 03-Aug-2010 by elfigha
Robin Witcher

Data View Web Part, The Basics – Add a Hyperlink

Laura,

Have you considered making an E-book of this series?

I am just learning my way around Data Web Parts and having a ready reference to go to do would be helpful. Your Articles and screencasts are very informative and helpful. It'd be nice to have 'em bundled together.

-Robin

Posted 05-Aug-2010 by Robin Witcher
Steve

Data View Web Part, The Basics – Add a Hyperlink

Really enjoying the series - very clear explanations and very relevant to real world user requests - thanks!

Posted 08-Aug-2010 by Steve
Lynn

Data View Web Part, The Basics – Add a Hyperlink

Laura - what modifications need to be made when using a Posts list (on a blog site)? the link ends up with extra characters - e.g., https://sitename/Lists/Posts/5_.000/Dispform.axpx?ID=5 instead of https://sitename/Lists/Posts/Dispform.axpx?ID=5 - and I can't figure out how to get rid of the extra "/5_.000"

Posted 31-Aug-2010 by Lynn
Lynn

Data View Web Part, The Basics – Add a Hyperlink

Actually, Laura - I just used an idea from another of your blog posts - http://sharepoint911.com/blogs/laura/Lists/Posts/Post.aspx?ID=46 - to help me figure out a way to modify the hyperlink. In that post you discussed using "concat" to truncate a string. I ended up using {concat('/',substring-before(@FileRef,Posts),'Posts/Post.aspx?ID=',@ID)} (substituting "before" for "after" as you used it) and it worked perfectly! Made my day for sure... thanks!

Posted 31-Aug-2010 by Lynn
Dave P

Data View Web Part, The Basics – Add a Hyperlink

Hi,

I was wondering how I could get the dataview web part title itself to be a link to the datasource, as oppossed to linking each individual item. Is that possible?

Thanks,
Dave

Posted 15-Sep-2010 by Dave P
CeCe

Data View Web Part, The Basics – Add a Hyperlink

I can not tell you how insanely thankful I am that you've made this so easy to understand. I work in a place where the blind is leading the blind so its completely uplifting to know there are pros like you willing to share with those of us who seek liberation from our SharePoint conundrums. lol
This site is my new mecca.

Posted 21-Sep-2010 by CeCe
Dave

Data View Web Part, The Basics – Add a Hyperlink

Thank you Laura. In valuable! To work or my discussion board needs, I successfully modified the Address as follows: /{@FileDirRef}/Flat.aspx?RootFolder={@FileRef}

Posted 22-Jun-2011 by Dave
R2C3

Data View Web Part, The Basics – Add a Hyperlink

Thank you for the great post...it saves my falling hair today. Im also thinking, how can we wire up the link to editform.aspx as popup web form. I tried the javascript:PopUpPage() but it doesnt let me.

Posted 03-May-2012 by R2C3
ssvv

Add a hyperlink to document library dvwp

Laura,
 
I have created a DVWP to display information from multiple document libraries. I am trying to display the link to the document on the dvwp, so that users can click the link on the dvwp and access the attachment.
 
I have gotten to the point where I the dvwp displays all facility name and document name: "Document1.docx" in the text format (based on '@ows_LinkFileName" field).
 
Then I changed the "Document1.docx" to a hyperlink using the instructions listed in this post: I changed the cell type to 'hyperlink', changed the Address to "@ows_FileRef" and Text to Display to "@ows_FileLeafRef".
 
Now the vlaues in the field are changed to a hyperlink and display "1;#Document1.docx". And when I open the browser the link is clickable but returns a browser page "the webpage could not be found".
 
I would appreciate any help. Thanks.

Posted 30-May-2012 by ssvv
ssvv

Add a hyperlink to document library dvwp

Some extra information related to my question above:
 
My code reads: <a href="{@ows_FileRef}"> <xsl:value-of select="@ows_FileLeafRef" />
 
As I mentioned earlier when I go to the browser and click the hyperlink I get a error stating the page could not be found. The browser address reads:
 
It should read:

Posted 30-May-2012 by ssvv
Laura Rogers

FileLeafRef

Hello most recent commenter,
As stated in my article, please use {FileRef} and not {ows_FileRef}, then your link will work correctly.
 
 

Posted 31-May-2012 by Laura Rogers
i:0e.t|liveid|00011c2849badc5d@live.com

Add a hyperlink to document library dvwp

Hello,
 
Laura, all my titles start with "ows" so my row title is 'ows_FileRef'. Therefore when I click the function icon to define the source of the hyperlink. I only have the option of selecting the field as 'ows_FileRef'. 
 
 
(I am using SharePoint Foundation 2010).
 
Thank you.

firoz

javascript error

hi i am getting the below javascript error after changing the column as hyperlink in sharepoint2010 document library Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; InfoPath.3) Timestamp: Mon, 5 Nov 2012 13:11:10 UTC Message: Sys.InvalidOperationException: Type SP.EnumerableArray has already been registered. The type may be defined multiple times or the script file that defines it may have already been loaded. A possible cause is a change of settings during a partial update. Line: 1717 Char: 42 Code: 0 URI: http://servername/ScriptResource.axd?d=MmQ0xNaBPJTl1px0lNo32tZmceRol1iikrbL1XWn7prWbWKfaVAtpzKq8TN_udcZ3QGViK-MliRfXgyuiFOyld7DXSTWaPeEUcOiqAUmDe4W7BD6zk_fmjrxo09wR4qGDqp1jqNhF241FPIglRCnbQ2kPWoz7KHG4cBFvLUrP7HuNIg20&t=ffffffffb868b5f4 Message: Sys.InvalidOperationException: Type SP.UI.DialogResult has already been registered. The type may be defined multiple times or the script file that defines it may have already been loaded. A possible cause is a change of settings during a partial update. Line: 2315 Char: 38 Code: 0 URI: http://servername/ScriptResource.axd?d=MmQ0xNaBPJTl1px0lNo32tZmceRol1iikrbL1XWn7prWbWKfaVAtpzKq8TN_udcZ3QGViK-MliRfXgyuiFOyld7DXSTWaPeEUcOiqAUmDe4W7BD6zk_fmjrxo09wR4qGDqp1jqNhF241FPIglRCnbQ2kPWoz7KHG4cBFvLUrP7HuNIg20&t=ffffffffb868b5f4 Message: Sys.InvalidOperationException: Type SP.DateTimeKind has already been registered. The type may be defined multiple times or the script file that defines it may have already been loaded. A possible cause is a change of settings during a partial update. Line: 2315 Char: 38 Code: 0 URI: http://servername/ScriptResource.axd?d=MmQ0xNaBPJTl1px0lNo32tZmceRol1iikrbL1XWn7prWbWKfaVAtpzKq8TN_udcZ3QGViK-MliRfXgyuiFOyld7DXSTWaPeEUcOiqAUmDe4W7BD6zk_fmjrxo09wR4qGDqp1jqNhF241FPIglRCnbQ2kPWoz7KHG4cBFvLUrP7HuNIg20&t=ffffffffb868b5f4 Message: Sys.InvalidOperationException: Type SP.PermissionKind has already been registered. The type may be defined multiple times or the script file that defines it may have already been loaded. A possible cause is a change of settings during a partial update. Line: 2315 Char: 38 Code: 0 URI: http://servername/ScriptResource.axd?d=MmQ0xNaBPJTl1px0lNo32tZmceRol1iikrbL1XWn7prWbWKfaVAtpzKq8TN_udcZ3QGViK-MliRfXgyuiFOyld7DXSTWaPeEUcOiqAUmDe4W7BD6zk_fmjrxo09wR4qGDqp1jqNhF241FPIglRCnbQ2kPWoz7KHG4cBFvLUrP7HuNIg20&t=ffffffffb868b5f4

Posted 05-Nov-2012 by firoz
Manu

Good One

Hi Laura, Thanks for the great write up. Just a thought, I believe for a list while setting up "Address" field backslash is not required to start with because Path field already has a backslash.

Posted 05-Jun-2013 by Manu
suhithra

Hyperlink not workinf for form library

hi, i have changed the list item id has hyper link in dataview of formlibrary. but the infopath form is not opening in browser when i click hyperlink.it is taking me to .xml link and it is prompting for open or save. Please let me know how can i make it work like name link in form library.

Posted 28-Aug-2013 by suhithra
Karen Parent

Create hyperlink from column URL

I'm trying to create a hyperlink using a URL in another list column using the Edit Hyperlink dialog. I click on the function button and select the column ("FileLoc") containing the URL I want associated in the link. The address ends up like this: {substring-before($thisNode/@FileLoc, ', ')}. However, in the browser, the link ends up pointing to a document library and not the specific document in the FileLoc column. Any ideas how to fix this? Thanks in advance

Posted 20-Sep-2013 by Karen Parent
yitoyitoytyo

yitoyitoytyo

Finalmente, la línea de Relojes Especiales day-Date Aqua Terra también ofrece un modelo en carcasa de acero inoxidable montado Replica Rolex sobre una cinta del mismo metal o cuero. Este reloj está disponible con un dial negro o azul (nuestro favorito) Patek Philippe replica acompañado por las agujas y el índice de rodio, o con un dial de plata con índice.

Posted 17-Apr-2014 by yitoyitoytyo

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: