none
calculated fields for Content Query Web Part "Link" property RRS feed

  • Question

  • Hi there, 

    I'm using content query web part to display the list item data on a page. Let's say the link has got ID, Title, Description and URL column.  In the content query web part, I'd like to use the url in the "URL" column so that when users click the title area in the content query, it should go to the page mentioned in the "URL" column. 

    my URL should looks like "http://mysharepointserver:1234/sites/dummysite/sitepages/anotherpage.aspx?itemID=1" where the parameter of itemID should comes from the ID column of the list item. My idea is to get a Calculated column and simply put the formula ="http://mysharepointserver:1234/sites/dummysite/sitepages/anotherpage.aspx?itemID="&[ID]. and use it on the "Link" property in the Content Query web part.

    creation of the Calculated column was straight forward. I can see the url is formed correctly. But when I try to use it in the Content Query Web Part, the web part won't allow me to use it and raise the following error.

    "URL" is not a valid hyperlink field or URL Path. Leave the field blank to automatically generate a link to the view properties form of the returned items.

    If i create a Hyperlink column and enter the full url, content query web part allow me to use it. But that is very inefficient because at the time of data-entry, the ID is not generated yet. I have to save it first and then edit again to get the ID and put in the URL. 

    Can anyone show me how i can use the calculated field in the Link property. modifying XSLT would be the last resort as I don't have much experience playing around with XSLT. 

    your advice would be much appreciated.

    Thursday, January 12, 2017 7:45 AM

Answers

  • Hi,

     

    As calculated column is not URL field, here is one workaround which use jQuery to rebuild CQWP for your reference.

    I use description to display the URL value.

    Then, add script editor web part and below jQuery to rebuild the render result.

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('div .link-item').each(function () {
                    var link = $(this).find('.description');
                    $(this).find('a').attr('href', link.text());
                    $(link).remove();
                });
            })
        </script>

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Friday, January 13, 2017 3:35 AM

All replies

  • Hi,

     

    As calculated column is not URL field, here is one workaround which use jQuery to rebuild CQWP for your reference.

    I use description to display the URL value.

    Then, add script editor web part and below jQuery to rebuild the render result.

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('div .link-item').each(function () {
                    var link = $(this).find('.description');
                    $(this).find('a').attr('href', link.text());
                    $(link).remove();
                });
            })
        </script>

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Friday, January 13, 2017 3:35 AM
  • this definitely works exactly as I wanted. Thanks a lot. 
    • Edited by NHT81 Monday, January 16, 2017 6:36 AM
    Monday, January 16, 2017 1:55 AM
  • Hi,

     

    As calculated column is not URL field, here is one workaround which use jQuery to rebuild CQWP for your reference.

    I use description to display the URL value.

    Then, add script editor web part and below jQuery to rebuild the render result.

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('div .link-item').each(function () {
                    var link = $(this).find('.description');
                    $(this).find('a').attr('href', link.text());
                    $(link).remove();
                });
            })
        </script>

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    While it works definitely, I don't want all the web parts in the page to be affected by the script. is there any way that I can scoped for the particular web part?
    Monday, January 16, 2017 6:37 AM