Content Query web part Group by Column in Office 365

InfoPath alternatives for form designing SharePoint

Here we will discuss how to use Content Query web part to display list items with UI branding. I came across a requirement where we had to display Question with 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.
Also check out:
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.

Similar SharePoint 2013 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