Developing custom tiles for LiveTiles v4

For organizations using SharePoint, LiveTiles offers an attractive solution to let people design their own pages. LiveTiles Design allows them to combine predefined tiles in a drag-and-drop application. Despite the wide variety of available tiles, you will probably find that not all your business needs are met with out-of-the-box components. This is where the Code Snippet Tile comes in.

Creating your own tile

The Code Snippet Tile is a block of html that is inserted into the page.

You can include your own content, but also CSS and JavaScript. Once you are satisfied with your own tile, you can click the heart icon to save it as a new tile and make it available to other page designers.

By default, the Code Snippet Tile contains some code that prints out ‘Hello, World!’ in an animation. It combines HTML elements, style and script and is a great example to set you on your way.

This approach is quick to build simple tiles, but it isn’t without drawbacks:

  • All logic is saved in the tile itself. This makes development and deployment more difficult.
  • No easy way to handle dependencies (e.g. 3rd party JavaScript libraries).
  • If you update your tile, LiveTiles offers a way to push your changes to other pages that may have added your tile.

Enter Angular

A more professional approach is required for serious development. We should start by moving the code out of the tile and into files in document libraries. LiveTiles uses RequireJS for dependency handling and we can make use of this to load our own JavaScript libraries. We like to use AngularJS but any framework of your choice will do of course. The actual code that remains in the tile will look something like this:

As you can see, the tile itself only holds references to files stored in a document library. The great thing about this is that you can save your tile and you never really need to touch it again. Any modification in the future is done by updating the files. This also lets you take advantage of SharePoint features such as version control, draft versions and audit information. At this stage, you can move your development to Visual Studio. You could use TypeScript for code quality. Deployment can be automated via the SPMeta2 framework.

Building with React

There is still one issue that can be improved upon: each tile requires loading 3 extra files (one for the stylesheet, one for the JavaScript and one for the HTML). If you have a lot of tiles on your page, this can introduce a noticeable increase in loading times. If necessary, this can be further alleviated by putting the stylesheet in your html file, or by moving to another framework like React.

In React, your content and styling is also declared in code. This already lets us reduce our tile to a single JavaScript file. Another neat feature of React is the Virtual DOM: this means that React stores the html of the tile in memory. Whenever the html changes, React compares the new state of the tile with the old state to avoid unnecessary changes to the page. Because changing the html is an intensive process, this makes React an interesting framework to use for tiles that have many state changes.

To develop with React, you will need to get used to the JSX syntax. React files also need to be compiled to JavaScript. We have found that this does slow down the development process somewhat. As a result, we still use Angular for most tiles.

Putting it all together

LiveTiles already offers plenty of choices to customize your pages. If you want a more personalized experience, or you need to meet some very specific criteria, the Code Snippet tile is the way to go. The best part? It uses good old JavaScript. So the learning curve isn’t steep and you can leverage the SharePoint object model, the REST services, or any existing framework/library you might prefer.

Kenneth Van Coppenolle