In order to use the Code Snippet Tile, you will need to understand the nature of the tile. To help you achieve a deeper understanding, this article will address the following:

  1. Tile Capability
  2. Style & Behavior Options
  3. Tile Data Sources
  4. Prerequisite SharePoint or Office 365 Configurations
  5. Best Practices
  6. Developer Notes

Tile Capability

Summary: A Code Snippet Tile allows you to display custom content by incorporating custom code into a page. The Code Snippet Tile is essentially a blank tile, where users can easily display a wide variety of content with custom code. 

Why the Code Snippet Tile? The Code Snippet Tile is an easy way for users to incorporate their own custom code into a page. 

What the Code Snippet Tile has to offer: The Code Snippet Tile allows high flexibility in terms of displayable content. The Tile makes it easy for users to insert their own custom code into a page, or within the tile space (can be configured). When you click and drag the Code Snippet Tile, the tile is already pre-populated with some content. The Code Snippet Tile app works on CSS, JavaScript and HTML.

Video: How to use the Code Snippet Tile

Style & Behavior Options 

Summary: Once the code snippet tile has been placed onto the page, you will be able to open up the code snippet tile and start placing custom code into the snippet tile. In order for tile to be able to read in Javascript and CSS, you will need to be place in the <script> and <style> tags for Javascript and CSS respectively.

Settings: The Code Snippet Tile Settings has three tabs: General, Tile Behavior (or Layout if in Responsive) and Advanced. This section will only describe the General Tab. This is because the Tile Behavior (or Layout) Tabs are consistent across all tiles. For more information about the Tile Behavior (or Layout) Tab and the Advanced Tab, refer to their respective section below:


The General Tab gives users the ability to implement custom code onto their LiveTiles page. The Code Snippet Tile works on CSS, JavaScript and HTML.

Code
Canvas in which the html code can be added to.

Sandbox Mode
When enabled this embeds the custom html code in an iframe.

Width
Adjusts the width of the tile, in pixels.

Height
Adjusts the height of the tile, in pixels.

Background Color
Changes the background color of the tile using the color picker.

Advanced Styles
For more information on Advanced Styles (A.S.), refer to the article that discusses the features of A.S.. Advanced Styles will almost always be under the General Tab.

This tab can either be Tile Behavior or Layout. Both of which depends on the type of canvas that is selected. For more information, refer to the following article: Layout & Tile Behavior tabs (Includes Best Practices).

The Advanced tab allows for more direct control of the tile through administrative settings and custom code. Users can control tile visibility to specific groups of people, disallow other users to modify the tile,  and implement custom CSS classes. For more information, refer to the following article: Advanced tab (Includes Best Practices)

Tile Data Sources

Summary: The Code Snippet Tile is essentially a blank canvas with an easy way to insert custom code. Whether the tile is configured to display a photo gallery or a moving image, the tile is retrieving its displayable content from within the code.

The Code Snippet Tile is already pre-populated with some code that displays the message "Hello World!" If you navigate through the code, you will see that everything that appears on the tile is defined and styled in the code. 

There is no true data source for this tile.  Everything is self contained in the tile and so there is no real data source. The content at which users display can be considered the data source, but that depends on where the code is referencing and retrieving the information from.

Prerequisite SharePoint Configurations

Summary: The Code Snippet Tile is entirely dependent on a users knowledge of CSS, JavaScript, and HTML. There are not any prerequisites for it. It does not connect out to any Microsoft systems or third parties. The Code Snippet Tile is configured entirely by the user. 

Best Practices

Make the tile unique. It is important to make sure the Code Snippet Tile is unique when using it for multiple instances on a single site page. You may get unintended effects when there are multiple instances of the same tile on the page. It is also important to ensure that your element names are unique. 

Comment your code. It is important to annotate your code. The Code Snippet Tile, unlike the Custom Tile, contains a single code canvas that supports HTML, JavaScript and CSS. The Code Snippet Tile declares variables, whereas the Custom Tile creates variables within settings. Although it may seem simpler, it is easy to lose track of some of the functionalities of your code, especially if everything is within a single canvas. Below is a screen shot of the default code (includes CSS, JavaScript and HTML on single canvas) with comments on functionalities:

Keep your code in one source. The purpose of having the Code Snippet Tile is to allow advanced customization with a simpler approach. When using the Code Snippet Tile, it is not recommended to modify the code with third party resources/software. If a third party resource or software is being used, consider using the custom tile which allows for more behavior and display customization.

Developer Notes

Summary: As long as the tile is loaded with "Sandbox Mode" unchecked, it is possible to access the various libraries loaded on the page. This include jQuery via the $ variable. Through this means, it's possible for developer to implement solutions that use DOM manipulation, animation, and even AJAX calls. LiveTiles is not responsible for any modifications made via Code Snippet Tiles and encourage the following best practices:

  • Do NOT modify any DOM elements not contain within HTML in the code snippets tile itself with either CSS or JavaScript
  • If you choose to modify outside DOM elements, especially via custom CSS, keep in mind that LiveTiles may change the HTML structure of other elements in the future as part of the natural evolution of the product and this may break your customization
  • Consider the gallery of Code Snippet examples that are available on the LiveTiles GitHub page, offering a free resource for learning more about what is possible with the Code Snippet Tile.
Did this answer your question?