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.
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.
- If you update your tile, LiveTiles offers a way to push your changes to other pages that may have added your tile.
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
Putting it all together
Kenneth Van Coppenolle