In this article we will use our bundle on an actual page. We will add more JavaScript and styles to the bundle. We will also use a very usefull windows command line utility called robocopy, it is much more advanced than xcopy and can simplify lots of your every-day development&deployment tasks. The good thing about Office 365 sites, is that they can be mapped as network drives, so we can use robocopy or any other console utility to interact with files and folder on a site in an old way, just like we did with SharePoint on-prem. Unfortunately some of the system lists are not availiable when using WebDav, for example Web Part Gallery. In this case you will have to fallback to powershell or CSOM. Also, it is possible to use SharePont Online REST interface to interact with different server-side objects. It is a more advanced topic, that I won't cover in this article.


In this article we will create a bundle with a signle line of JavaScript. In these days anyone who works with JavaScript have to familiar with Node.js. Node.js is an open-source, cross-platform runtime environment for developing server-side Web applications. Although Node.js is not a JavaScript framework, many of its basic modules are written in JavaScript, and developers can write new modules in JavaScript. The runtime environment interprets JavaScript using Google's V8 JavaScript engine. We won't use Node.js as a web-server, webpack needs node to do its job.


In this article we will modify XSLT Style Sheets to get a list of available item-properties.

XSLT stands for Extensible Stylesheet Language Transformations, it is a language for transforming XML documents into other XML documents, or other formats such as HTML for web pages, plain text or XSL Formatting Objects, which may subsequently be converted to other formats, such as PDF, PostScript and PNG. The original document is not changed; rather, a new document is created based on the content of an existing one.[3] Typically, input documents are XML files, but anything from which the processor can build an XQuery and XPath Data Model can be used, such as relational database tables or geographical information systems.

If you are not familiar with XSLT, please refer to this tutorial XSLT Tutorial


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