none
Data View Web Part adding a custom hyperlink

    Question

  • Hello

    I have a requirement to add a custom link to the bottom of the Data View Web Part in SharePoint Designer. Unfortunately this is proving to be a little difficult for me and I was wondering if anyone out there can show me the way forward.

    Thank you for any suggestions.

    Yoshi.

    • Moved by Mike Walsh FIN Monday, February 13, 2012 9:37 AM SPD questions go to Design / Customization not programming (From:SharePoint - Development and Programming (pre-SharePoint 2010))
    Sunday, February 12, 2012 11:16 PM

Answers

  • Hi,

    We can achieve this via JavaScript. Please follow the steps:

    1. Add “pageview=shared&toolpaneview=2” to the DispForm page url to open edit mode.
    2. Add a Content Editor Web Part and copy the code below into Source Editor.
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    
    <script type="text/javascript">
    
    function test(){
    
    var url=window.location.href;
    
    url=url.substring(0,url.indexOf('&'));
    
    var array=[];
    
    $('td.ms-vb').each(function(i){
    
       array[i]=$(this).text();
    
    });
    
    printURL="http://www.bing.com";
    
    var finURL=printURL+"?"+url+"&Project Name="+array[3];
    
    return finURL;
    
    }
    
    function testOpen()
    
    {
    
    window.location.href=test();
    
    }
    
    </script>
    
    <a onclick="javascript:testOpen()" href="#" >PrintPreview</a>

    Note:
    url above contains the item’s URL and ID.
    printURL is the PrintPreview.aspx address.
    array[3] is Project Name.

    If anything unclear, please feel free to ask.

    Thanks.


    Emir Liu

    TechNet Community Support

    Tuesday, February 14, 2012 11:24 AM

All replies

  • Hi Yoshi,

    In SharePoint Designer, Right-click the last row of the Data View Web Part > select Insert > Row Below, then you can add custom link in the new row, so that the link will always at the bottom of the DVWP.

    Refer to this for information about adding hyperlink: http://office.microsoft.com/en-us/sharepoint-designer-help/add-a-hyperlink-to-a-data-view-HA010240364.aspx

    Thanks.


    Emir Liu

    TechNet Community Support

    • Proposed as answer by Shekhar R Monday, February 13, 2012 10:44 AM
    • Unproposed as answer by Mike Walsh FIN Monday, February 13, 2012 1:29 PM
    Monday, February 13, 2012 5:49 AM
  • Hi Emir

    Thanks again for your quick response. I didn't quite explain myself before so here goes...

    I need to add a Data View Web Part to the DispForm.aspx page in order to pass values along with the querystring to a custom aspx page which opens in a new window. The querystring will consist of 2 parameters (ID and URL) and one parameter (Project Name which exists in a Table in the Database).

    So, this is what i've done so far:

    1. Check out the DispForm.aspx page for editing;
    2. Add a Data View Web Part;
    3. In Data Sources, connect to the Database table and click the Show Data button;
    4. Then select 2 fields and add as single item view;
    5. Now this is where I have trouble, I need to add a hyperlink to the Data View Web Part, for example "Print" which when clicked will open a custom PrintPreview.aspx page with it's own unique formatting, header, footer etc, the address bar will contain the ID, URL and Project name fields in the querystring which will displayed in the custom page.

    Any ideas?

    Thanks.

    Yoshi

    Monday, February 13, 2012 10:54 AM
  • Hi,

    We can achieve this via JavaScript. Please follow the steps:

    1. Add “pageview=shared&toolpaneview=2” to the DispForm page url to open edit mode.
    2. Add a Content Editor Web Part and copy the code below into Source Editor.
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    
    <script type="text/javascript">
    
    function test(){
    
    var url=window.location.href;
    
    url=url.substring(0,url.indexOf('&'));
    
    var array=[];
    
    $('td.ms-vb').each(function(i){
    
       array[i]=$(this).text();
    
    });
    
    printURL="http://www.bing.com";
    
    var finURL=printURL+"?"+url+"&Project Name="+array[3];
    
    return finURL;
    
    }
    
    function testOpen()
    
    {
    
    window.location.href=test();
    
    }
    
    </script>
    
    <a onclick="javascript:testOpen()" href="#" >PrintPreview</a>

    Note:
    url above contains the item’s URL and ID.
    printURL is the PrintPreview.aspx address.
    array[3] is Project Name.

    If anything unclear, please feel free to ask.

    Thanks.


    Emir Liu

    TechNet Community Support

    Tuesday, February 14, 2012 11:24 AM