May 11, 2012

SharePoint: Append link to bottom of CQWP using jQuery

Task

Append link to the bottom of Content Query Web Parts that show articles from News subsite so that users can click the link to view more news articles of the specific category.
The picture below is in Finnish, but link at the bottom called “Lisää…” is the one added using jQuery. Also the CQWP style is quite heavily modified, but I’m sure you get the point.
morenews

Solution

Not being a fan of custom CQWP implementations for this purpose nor modifying the out-of-the-box XSL Style Sheets using SharePoint Designer, I decided to solve this using jQuery.
Add the following code to CEWP inside <script> tags:
$("#" + $('td[title^="WEBPARTTITLE"]').attr("id").replace("Title", "") + " ul").append("<li class='moreNews'><a href='/news/Pages/Forms/Article.aspx?TreeField=METADATACATEGORY&TreeValue=METADATAGUID'>More news...</a></li>");

Where WEBPARTTITLE is the title of CQWP. Note that you need to use the starts with selector (^=), as the actual HTML node title attribute contains also other text after the actual title you define in web part properties. For the style moreNews, you can define what you see best, I just added some padding around the link. For the link I redirect the user to a site pages library view that has metadata filtering enabled and visible on the left: this is done using the TreeField and TreeValue parameters.


UPDATE:
For SharePoint Online, use code such as this:

<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"></script>
<script>
$("span[title='YOURWEBPARTITLE']").closest(".ms-webpart-chrome").find("ul").append("<a href='/Lists/YOURLIST/Forms/AllItems.aspx'>All items...</a>")
</script>

1 comment:

  1. Great stuff! I couldn't get this to work on my CQWP, so I removed the UL and that did the trick. I also changed the LI to a DIV.

    ReplyDelete