React Content Query WebPart

The React Content Query WebPart is a modern version of the good old Content by Query WebPart that was introduced in SharePoint 2007. Built for SharePoint 2016 and Office 365, this modern version is built against the new SharePoint Framework (SPFx) and uses the latest Web Stack practices. While the original WebPart was based on a XSLT templating engine, this React WebPart is based on the well known Handlebars templating engine, which empowers users to create simple, yet powerfull HTML templates for rendering the queried content. This new version also lets the user query any site collections which resides on the same domain url, add unlimited filters, query DateTime fields to the nearest minute rather than being limited to a day, and much more.

Features

Custom tool pane

A custom tool pane helps the user to easily configure his query in the same fashion he used to do with the original WebPart.

Handlebars templating engine

Provide a link to your handlebars .html template and decide how you want to render the queried results.

Handlebars template :

<h1>Results : </h1>
<ul id="items">
  {{ #each items }}
  <li>
    <span>{{ Title.textVaue }}</span>
    {{ FileRef.htmlValue }}
  </li>
  {{ /each }}
</ul>

Output :

<h1>Results : </h1>
<ul id="items">
  <li>
    <span>My Item #1</span>
    <a href="...">..</a>
  </li>
  <li>
    <span>My Item #2</span>
    <a href="...">..</a>
  </li>
  ...
</ul>

Query any site collection within the same domain

The WebParts uses the search in order to get all sites under the current domain, which makes it possible to query not only subsites but other site collections and their subsites as well.

Add unlimited filters

The user isn't limited to 3 filters anymore, an unlimited amount of filters can be added.

Include time in date filters if needed

It is now possible to include time validation when querying date fields, giving the user more possibilities when it comes to filtering events etc...

Built in page context available within the template

The SPFx PageContext object is exposed directly within the handlebars template context, which allows the user to interact with many usefull dynamic properties such as the current language for instance.

<h1>Current language : {{ pageContext.web.language }} </h1>
<h1>Current web title : {{ pageContext.web.title }} </h1>
<h1>Current user display name : {{ pageContext.user.displayName }} </h1>
<h1>Current user login name : {{ pageContext.user.loginName }} </h1>
<h1>Current user email : {{ pageContext.user.email }} </h1>
...

Three predefined type of values for any field

For every view field returned by the query, three predefined types of values are available for an easier integration by the user who designs the handlebars template.

Handlebars template :

<h1>Text Value : {{ MyUserField.textValue }}</h1>
<h1>Html Value : {{ MyUserField.htmlValue }}</h1>
<h1>Raw Value : {{ MyUserField.rawValue }}</h1>

Output :

<h1>Text Value : Simon-Pierre Plante</h1>
<h1>Html Value : <a href="..." onclick="...">Simon-Pierre Plante</a></h1>
<h1>Raw Value : { ID: 18 }</h1>

Building the code

git clone the repo
npm i
npm i -g gulp
gulp

This package produces the following:

• lib/* - intermediate-stage commonjs build artifacts
• dist/* - the bundled script, along with other resources
• deploy/* - all resources which should be uploaded to a CDN.