CQWP FAQ Open in New Tab

Question

I'm new to SharePoint website creation, so be bare with me. I have a CQWP that is linked to a master faq list. This webpart is configured to display the top 10 questions. Currently, when a user clicks on the question, the question/answer page opens. I would like to configure it so that when a user clicks on a question, the question/answer page opens in a new tab/window/dialog box (which ever can be implemented most efficiently).

I followed the instructions in the link below, but it did not work for me. http://techtrainingnotes.blogspot.com/2009/07/sharepoint-adding-popups-to-link-lists.html

Any help or suggestions would be appreciated. Thanks!

Answer 1

There are two methods:

Method 1: You can override ItemStyle.xsl to insert target="_blank" for the hyperlink to open the link in new window.

ItemStyle.xsl contains templates that define how to display an item in Content Query Webpart. It is located in site collection Style Library (\Style Library\XSL Style Sheets\ItemStyle.xsl).

If the Style Library is missing, check if the publishing features are activated:

1. On the Site Collection Features page, activate SharePoint Server Publishing Infrastructure.
2. On the Site Features page, activate SharePoint Server Publishing.

Here are the detail steps:

1. Navigate to Site contents –> Style Library –> XSL Style Sheets.
2. It is not recommended to modify the OOB ItemStyle.xsl. Download the OOB ItemStyle.xsl and rename the file to CustomItemStyle.xsl.
3. Open the CustomItemStyle.xsl.

4. Modify the following anchor tag to open the links in a new window:

      <a href="{$SafeLinkUrl}" title="{@LinkToolTip}">
   

   to

   <a href="{$SafeLinkUrl}" title="{@LinkToolTip}" target="_blank">
   

5. Save the CustomItemStyle.xsl and upload it to the Style Library –> XSL Style Sheets.

6. Publish the CustomItemStyle.xsl.
7. Open the page that contains the Content Query web part. Export the Content Query web part and save it as “Custom Content Query.webpart”.
8. Open “Custom Content Query.webpart” in notepad.
9. modify the following:

a. Set the title property to "Custom Content Query"

<property name="Title" type="string">Custom Content Query</property> 

b. Set the XSLItemLink to the uploaded XSL style sheet file:

<property name="ItemXslLink" type="string">/sites/<your site>/Style%20Library/XSL%20Style%20Sheets/CustomItemStyle.xsl</property>

10. Upload the Custom Content Query Web Part to web part gallery.
11. Add the Custom Content Query Web Part to the web part page.
12. Edit the query for this Custom Content Query Web Part to show the results as you want.
13. Click on a link to verify that it opens in a new window.

Demo: How to Open Content Query Web Part links in a new window.

Method 2: Use jQuery to set the link open in new tab.

Edit the page and insert a Script Editor web part or a Content Editor web part, put the following script in it.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function() {
        var $t = $("div.link-item>a");
        $t.each(function(){
              $(this).attr("target", "_blank");
         });
});
</script>