1

Right now I was trying to configure a content query web part so that if nothing returned from the query, the web part was hidden (or not returning at all). Title and everything included. Is there an easy way of accomplishing this? Was looking at writing some JavaScript/Jquery to accomplish this, but I'm positive there is something easier.

2

When no results found the template OuterTemplate.Empty is rendered for CQWP by default:

  <xsl:template name="OuterTemplate.Empty">
        <xsl:param name="EditMode" />
            <xsl:if test="$EditMode = 'True' and string-length($cbq_errortext) = 0">
                <div class="wp-content description">
                    <xsl:value-of disable-output-escaping="yes" select="$cbq_viewemptytext" />
                </div>
            </xsl:if>
    </xsl:template>

Solution

  • JavaScript code for hiding web part is placed in that template.
  • To identify CQWP on the client side is used XSL parameter WebPartId

Modified template OuterTemplate.Empty for hiding web part (jQuery):

<xsl:template name="OuterTemplate.Empty">
        <xsl:param name="EditMode" />
            <xsl:if test="$EditMode = 'True' and string-length($cbq_errortext) = 0">
                <div class="wp-content description">
                    <xsl:value-of disable-output-escaping="yes" select="$cbq_viewemptytext" />
                </div>
            </xsl:if>
            <script type="text/javascript">
            var webPartId = '<xsl:value-of select="$WebPartId" disable-output-escaping="yes"/>';
            var webPartContainer = $("div[webPartId='" + webPartId + "']").closest('table');
            webPartContainer.hide();
            </script>
    </xsl:template>
  • You were close enough to be called "answer", had to modify your JQuery so instead of finding the closest table and hiding the whole column, went 2 parent levels up, like this: var webPartContainer = $("div[webPartId='" + webPartId + "']").parent().parent(); – tekiegreg Aug 13 '13 at 16:31
  • Hello Sir. This works fine.But i have 2 CQWP on page.& i want to apply for only one webpart. how to accomplish that... – Harsh Bhavsar Jan 31 '14 at 13:37
  • Hello, in that case i would suggest to leverage OOTB ItemStyle.xsl for one web part and customized ItemStyle.xsl for another one. – Vadim Gremyachev Jan 31 '14 at 13:58
  • Hello sir. It is ContenQueryMain.xsl not ItemStyle.xsl. It is done by your suggestion.But.is there any way by which i can differentiate between 2 web parts like <xsl:when test="@Style='YourStyle'"> but it is not supported in OuterTemplate.Empty .Any Idea. – Harsh Bhavsar Feb 1 '14 at 5:44
  • Harsh, indeed it is ContenQueryMain.xsl. How about to differentiate by webPartId parameter, it is a web part id which is accessible in XSL for CQWP? Surely, it is not the only way.. – Vadim Gremyachev Feb 1 '14 at 20:18
1

Yes you can do it with JavaScript, but you can do it with pure XSLT manipulation too.

When no content returns, if you don't want to show even the title of the webpart, then you can set the ChromeType property of the webpart to "None". This will permanently hide the title of the webpart (even if content is returned).

Now in your XSLT, you can generate the Title of the WebPart as well as render the items only if content is returned.

0

Yes, you can do it with jQuery too. My approach is: add this to your global JS file.

$('.cbq-layout-main:empty').closest('.s4-wpcell-plain').hide();

It will select any Content Query Web Part that has nothing inside it and hide the Web Part Cell related to it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.