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:
- Tile Capability
- Style & Behavior Options
- Tile Data Sources
- Prerequisite SharePoint or Office 365 Configurations
- Best Practices
- Developer Notes
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.
Style & Behavior Options
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:
Canvas in which the html code can be added to.
When enabled this embeds the custom html code in an iframe.
Adjusts the width of the tile, in pixels.
Adjusts the height of the tile, in pixels.
Changes the background color of the tile using the color picker.
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
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.
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.
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:
- 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.