Content Query web part Group by Column in Office 365

Here we will discuss how to use the Content Query web part to display list items with UI branding. I came across a requirement where we had to display Question with a respective answer based on some category. This seems to be quite easy with SharePoint default view group by option but we had some accordion or expand / collapse UI.

The below solution is applicable in Office 365, SharePoint 2013 and SharePoint 2010 as well. Content Query webpart , CSS and jQuery was the quick solution.
Content Query web part Group by Column in Office 365
Content Query web part Group by Column in Office 365




XSLT Code:
<xsl:template name=”Custom” match=”Row[@Style=’HelpTip’]” mode=”itemstyle”>
        <xsl:variable name=”SafeLinkUrl”>
            <xsl:call-template name=”OuterTemplate.GetSafeLink”>
                <xsl:with-param name=”UrlColumnName” select=”‘LinkUrl'”/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name=”SafeImageUrl”>
            <xsl:call-template name=”OuterTemplate.GetSafeStaticUrl”>
                <xsl:with-param name=”UrlColumnName” select=”‘ImageUrl'”/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name=”DisplayTitle”>
            <xsl:call-template name=”OuterTemplate.GetTitle”>
                <xsl:with-param name=”Title” select=”@Title”/>
                <xsl:with-param name=”UrlColumnName” select=”‘LinkUrl'”/>
            </xsl:call-template>
        </xsl:variable>
<xsl:variable name=”CurPosition” select=”count(./preceding-sibling::*)” />
<xsl:if test=”count(preceding-sibling::*)=0″>
</xsl:if>
        <table cellpadding=”4″ cellspacing=”0″ border=”0″  >
            <tr>
                 <td class=”CustomTit”>
                  <xsl:if test=”$ItemsHaveStreams = ‘True'”>
                    <xsl:attribute name=”onclick”>
                      <xsl:value-of select=”@OnClickForWebRendering”/>
                    </xsl:attribute>
                  </xsl:if>
                  <xsl:if test=”$ItemsHaveStreams != ‘True’ and @OpenInNewWindow = ‘True'”>
                    <xsl:attribute name=”onclick”>
                      <xsl:value-of disable-output-escaping=”yes” select=”$OnClickTargetAttribute”/>
                    </xsl:attribute>
                  </xsl:if>
                  <xsl:value-of select=”$DisplayTitle”/>
                <div class=”helpDes”>
                                <xsl:value-of select=”@HelpDescription” disable-output-escaping=”yes” />
                </div>
                 </td>
               </tr>
            </table>
    </xsl:template>



Jquery:
$(document).ready(function ()
    {
    $(‘td.CustomTit> td’).hide();
    $(‘td.CustomTit’).click(function () {
        $(this).siblings(‘.opened’).removeClass(‘opened’).end()
            .toggleClass(‘opened’).next(‘td’).slideToggle(‘normal’)
            .siblings(‘td:visible’)
            .slideUp(‘normal’);
        return false;
    });
         $(‘. CustomTit’).on(‘click’, function(){
         $(this).children().toggle();
        });
    $(‘td span’).each(function(){
    //alert(‘ss’);
    var $span = $(this);
    //var divId = $span.closest(‘a’).hide();
    // do something with the above
});
    HideHeaders();
});
function HideHeaders() {
            var elements = getElementsByClassName(document, “td”, “ms-gb”);
            var elem;
            for (var i = 0; i < elements.length; i++) {
                elem = elements[i];
                elem.childNodes[0].childNodes[1].nodeValue = “”;
                elem.childNodes[1].nodeValue = elem.childNodes[1].nodeValue.replace(‘:’, ”);
            }
            elements = getElementsByClassName(document, “td”, “ms-gb2”);
            for (var i = 0; i < elements.length; i++) {
                elem = elements[i];
                elem.childNodes[1].childNodes[1].nodeValue = “”;
elem.childNodes[2].nodeValue = elem.childNodes[2].nodeValue.replace(‘:’, ”);
            }
        }
        function getElementsByClassName(oElm, strTagName, strClassName) {
            var arrElements = (strTagName == “*” && oElm.all) ? oElm.all : oElm.getElementsByTagName(strTagName);
            var arrReturnElements = new Array();
            strClassName = strClassName.replace(/\-/g, “\\-“);
            var oRegExp = new RegExp(“(^|\\s)” + strClassName + “(\\s|$)”);
            var oElement;
            for (var i = 0; i < arrElements.length; i++) {
                oElement = arrElements[i];
                if (oRegExp.test(oElement.className)) {
                    arrReturnElements.push(oElement);
                }
            }
            return (arrReturnElements)
        }
Hope this will help.

You May Also like the Following SharePoint Online Tutorials:

About Sambita Rath

I have 9 years of exprience into SharePoint implementation, architecture, Administrator, development and Training.Designing Information Architecture in SharePoint 2007, 2010,2013 and Office 365.

View all posts by Sambita Rath →

Leave a Reply