SharePoint Designer – When to use the Code Snippet and Custom Tiles

To get the most out of our products you’ll want to use the right tile for the job you’re doing, but with all of the options available, it takes a little product knowledge to be sure which tile to drag and drop into the LiveTiles Design Canvas. There are two important tiles on our canvas that can do many of the same things; we thought we’d take a moment to explain what they are and when to use them. Specifically, we want to point out the differences between the easily adaptable Code Snippet Tile and the jack-of-all-trades Custom Tile. 

SharePoint designer -when to use the Code Snippet Tile and the Custom Tile

The versatile LiveTiles Cloud Snippet Tile makes integration easy

We’ll start with the Code Snippet Tile. Many of our users have experience with this tile. For those who haven’t, the Code Snippet Tile is a customizable tile that can integrate cloud-based applications in seconds. The Code Snippet Tile uses a program’s embed code to integrate it into a tile, and onto your site. For example, if you wanted to show a memorable presentation, you might want to use Prezi. Prezi is a cloud-based application that’s designed to capture an audiences’ attention, whether it’s in the boardroom, a classroom or from a mobile device. In keeping with LiveTiles’ commitment to the mobile experience, Prezi boasts viewers for Android, iPhone, iPad, desktop and a cloud-based online editor. 

To integrate Prezi into O365 using LiveTiles, look for the embed code found underneath the Prezi and copy it. Then go into the LiveTiles Design Canvas. Drag and drop the Code Snippet Tile into the canvas. Open the “Configure” settings by clicking on the gear-shaped symbol. “Code Snippet Tile Settings” will appear with a large box full of code. Remove the old code and paste in the embed code. Save the settings and your live Prezi will appear on your site. No matter which program you’d like, the Code Snippet Tile works the same way, it’s simply a matter of copying the embed code and placing it in the code box. The Code Snippet Tile also supports custom code in CSS, JavaScript and HTML.

Another great use for the Code Snippet Tile would be Microsoft Translator. Covering most languages, the Microsoft Translator is a simple and effective translation tool that saves time and money. There’s no longer any need to have translators on staff as long as the communication is not highly sensitive. For offices that manage a lot of translation, Microsoft Translator would be a helpful program to integrate into the dashboard. 

Maybe you’d also like to post a podcast and playlist to your page with Spotify. With Spotify, you could include something instructional or a general introduction to the company. Spotify music playlists can add something more personal to your site to increase employee engagement. Since it’s so easy to make a new page, each team could customize their playlists. The Code Snippet Tile gives our users tremendous flexibility and ease of use when integrating today’s best cloud-based applications.

SharePoint Designer - When to use the Code Snippet Tile and the Custom Tile

Anything can happen with the new Custom Tile

LiveTiles’ most adaptable creation yet is the Custom Tile. This tile does it all. Instead of the normal code snippet dialog, you are able to create new variables, along with the code actually being separated by code type. Code types include CSS, HTML and Javascript. There is also a tile preview with an Auto Refresh toggle. So when you decide to change the code, you’ll see exactly what you’re doing on the tile. You can run the tile in sandbox mode for an extra layer of security.

While the Custom Tile can accomplish the same things as the Code Snippet Tile, it is generally intended for more complex integrations because it’s been designed to handle much more advanced customization. In fact, a designer who is comfortable using the Custom Tile wouldn’t need to use the Code Snippet Tile, but the Code Snippet Tile makes embedding content easy so that it would be the obvious choice for the regular business user who wants to integrate a video, playlist or social media account. In the words of Chief Architect Erik Ralston, “Once you have more than a small window of code, you‘ll want to use the Custom Tile.” The Code Snippet Tile was designed for fairly simple customizations, not so with the Custom Tile. This time, the developers wanted to provide ultimate flexibility, a blank slate on a single pane of glass. Erik goes on to explain, “The real advantage the Custom Tile gives our users is that they can do more complex customizations. For example, I’ve seen a JavaScript request pulling updates from a public website that took several pages of code.” Erik also points out that the Custom Tile comes with Microsoft IntelliSense, which “autocompletes the code based on what’s available.” This saves users time in the process of customizing the tile. Once you create your Custom Tile, you can give it to your users and they can change it based on the options you choose for them.

LiveTiles puts the emphasis where it matters most

Our Custom Tile helps to build not only an intranet, but a digital platform experience that reaches anyone, on any device. When used on our responsive design canvas, the site automatically adjusts for the screen it’s being viewed on. Your customers and employees are increasingly relying on smartphone and tablet use for global business. That’s why we are working with Microsoft to give our users a “mobile first” approach for SharePoint and UX design, enhancing mobile collaboration. If you have an idea that takes extra code to bring to life, try our Custom Tile and make your site a customized LiveTiles success story. 

 Customize Your Story

Test Drive our Platform

LiveTiles provides the platform to create customized digital workplaces in a single day, where teams can easily access applications, resources and more—from one central place.