Intro

Office 365 is the brand name Microsoft uses for a group of software and services subscriptions, which together provide productivity software and related services to subscribers. Office 365 offers plans providing e-mail and social networking services through hosted versions of Exchange Server, Skype for Business Server, SharePoint and Office Online, integration with Yammer, as well as access to the Microsoft Office software. There most customizable part of Office 365 is SharePoint. Many of you probably worked with SharePoint in one or another way.

SharePoint is an awesome platform, it has a lot of useful OOB features, it is usually a good idea to use Content Query Web Part or Content Search Web Part to aggregate content for end users. Both of these webparts have it is own limitations

We will use Content Query Web Part because we only need to display articles with given content type from a single site collection. Also, it provides a better user experience, because users don't need to wait until next search crawl finish.

Content Query Web Part is a part of the Enterprise Content Management (ECM) functionality in Microsoft Office SharePoint Server. It aggregates and displays list items within a site hierarchy. In addition to hierarchical query capabilities, the Content Query Web Part provides caching and query optimization for the SPSiteDataQuery object that it contains. These optimizations have better performance than if you directly call methods of the SPSiteDataQuery object. Also, this webpart is highly customizable, but you have to know how it works and how to work with XSLT. So we will use this web part to generate a required HTML and them we will make it awesome with JavaScript and CSS.

Webpack is a bundler for javascript and friends. Packs many modules into a few bundled assets. Through "loaders," modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, etc. We will use webpack to isolate our code from other customizations from other vendors that can be present on a target site collection. Previously, I used RequireJS for several different project, but now I use webpack. In my opinion, it is a better option than RequireJS. Anyways, RequireJS is still a very good solution for more complex web applications, but sometimes it is very hard to do everything right with AMD.

I don't plan to use Visual Studio or write any C# code, everything will be done using Visual Studio Code, NodeJs, JavaScript

Creating content

First of all we need to create a content that will be consumed by CQWP.

  1. Make sure you have admin access to your Office365 site collection

  2. Go to "Site Settings" -> "Site Collection Features".

  3. Find "SharePoint Server Publishing Infrastructure" and make sure it is activated

  4. Go to "Site Settings" -> "Manage site features".

  5. Find "SharePoint Server Publishing" and make sure it is activated

  6. Go to "Site Contents" -> "Pages" and create 5 new articles:

    https://raw.githubusercontent.com/boades/boades-blog-content/master/05-sharepoint/01-seria-office365-cqwp/01-office365-content-query-wp-vs-code-webpack-nodejs-cmd/01-create-article-page.png

  7. Select 'Body Only', we don't need anything fancy for our simple tutorial:

    https://raw.githubusercontent.com/boades/boades-blog-content/master/05-sharepoint/01-seria-office365-cqwp/01-office365-content-query-wp-vs-code-webpack-nodejs-cmd/02-create-article-6.png

  8. Don't forget to set 'Rollup Image' for an article, we will use it latter

    https://raw.githubusercontent.com/boades/boades-blog-content/master/05-sharepoint/01-seria-office365-cqwp/01-office365-content-query-wp-vs-code-webpack-nodejs-cmd/03-set-rollup-image.png

  9. Repeat this 5 times, we need to have some content before we can start!

Creating custom CQWP

  1. Create a new Blank Web Part page somewhere.

  2. Add a new Content Query Web Part to the page

    https://raw.githubusercontent.com/boades/boades-blog-content/master/05-sharepoint/01-seria-office365-cqwp/01-office365-content-query-wp-vs-code-webpack-nodejs-cmd/04-add-cqwp.png

  3. Set CQWP query to the following

    https://raw.githubusercontent.com/boades/boades-blog-content/master/05-sharepoint/01-seria-office365-cqwp/01-office365-content-query-wp-vs-code-webpack-nodejs-cmd/05-set-cqwp-query.png

  4. You will get something simmilar to

    https://raw.githubusercontent.com/boades/boades-blog-content/master/05-sharepoint/01-seria-office365-cqwp/01-office365-content-query-wp-vs-code-webpack-nodejs-cmd/06-cqwp-content.png

  5. Now we need to modify CQWP markup to meet our needs:

    https://raw.githubusercontent.com/boades/boades-blog-content/master/05-sharepoint/01-seria-office365-cqwp/01-office365-content-query-wp-vs-code-webpack-nodejs-cmd/07-markup-before.png

  6. By default CQWP use XSL style sheets from Style Library -> XSL Style Sheets

    https://raw.githubusercontent.com/boades/boades-blog-content/master/05-sharepoint/01-seria-office365-cqwp/01-office365-content-query-wp-vs-code-webpack-nodejs-cmd/08-stylesheets.png

  7. We don't want to break all other CQWP web parts on a target site collection, so we will copy this folder and update CQWP web part to use custom stylesheets. So create a copy of XSL Style Sheets and move it to Style Library/Custom/Demo/XSL Style Sheets.

  8. Now we need to make CQWP Web Part use our custom style sheets instead of standard. Export CQWP webpart and change the following properties:

    <property name="Title" type="string">Custom Content Query</property>
    <property name="MainXslLink" type="string">/Style Library/Custom/Demo/XSL Style Sheets/ContentQueryMain.xsl</property>
    <property name="ItemXslLink" type="string">/Style Library/Custom/Demo/XSL Style Sheets/ItemStyle.xsl</property>
    <property name="HeaderXslLink" type="string">/Style Library/Custom/Demo/XSL Style Sheets/Header.xsl</property>

Make sure you work on a root site collection, otherwise you will have to adjust your xsl-links accordingly.

  1. Upload the changed web part to Web Part gallery (Site Settings -> Web Parts):

    https://raw.githubusercontent.com/boades/boades-blog-content/master/05-sharepoint/01-seria-office365-cqwp/01-office365-content-query-wp-vs-code-webpack-nodejs-cmd/09-upload-wp.png

  2. Replace the old CQWP webpart with our new one

Summary

CQWP is an awesome way to aggregate content using OOB features of SharePoint, it can provide an awesome user experience, but it may be slower that Content Search Web Part when you have lots of content.


;