This article covers best practices around moving code from the previous version of LiveTiles Page Designer (V4) to the new version 5. This is intended to equip developers dealing with custom styles (CSS) and code (JavaScript) with the know-how to easily maintain these customizations in the new version of LiveTiles.

LiveTiles Page Designer offers three primary means of implementing custom code: Page Settings, Code Snippet Tile, and Custom Tile.

What is Page Settings Custom Code?

Available from the "Custom Code" tab of the "Page Settings" dialog, this places custom code in the <head> and <body> elements of the page.

What is the Code Snippet Tile?

The Code Snippet tile has been in LiveTiles since Version 2. It directly injects HTML into the Document Object Model (DOM) element owned by the tile.

What is the Custom Tile?

The Custom Tile was introduced to LiveTiles in 2017 and is based on HTML, CSS, and JavaScript prototyping tools like Codedrops, JSBin, and Plunkr.

The following are different scenarios of use for each of these tiles and how they may factor into potential migrations paths. The scenarios start with the lowest risk first then get increasingly complex.
_________________________________________________________________

No Risk: Embedded IFrame with Code Snippet

It is common to use the Code Snippet tile to insert embed codes from elsewhere on the internet.
In Version 4: here is a YouTube video embed.

<div>
<iframe width=100% height=200 src='https://www.youtube.com/embed/oKI1qOsPMrk?ecver=2&amp;width=640&amp;height=360&amp;autoPlay=false&amp;showInfo=true' allowfullscreen></iframe>
</div>

This will embed a video with height and width 360.

In Version 5: This code will work exactly the same without alteration.
_________________________________________________________________

No Risk: Embedded Styles from Code Snippet

It is common to use the Code Snippet or Page Settings Custom Code to add unique CSS to the page.

In Version 4: Custom CSS could added to hide the SharePoint action ribbon.

#suiteBarDelta, #s4-ribbonrow  {
    display:none !important;
}          

In Version 5: This example will continue to work unchanged.
_________________________________________________________________

High Risk: Using jQuery in Code Snippet or Page Settings Custom Code
jQuery is a popular library for DOM manipulation and AJAX requests. 

In Version 4: jQuery was loaded in the global scope and available to all code. 

// Page ready event
$(document).ready(function() {
    // DOM Manipulation
    $('.example-static').css('position', 'static');
    // AJAX Request
    $.when($.ajax({type:"POST", url: url, data: data }));
 });

In Version 5: When used in the Page Settings Custom or Code Snippet tile in V5, this library is no longer available, making it very problematic. You must convert this into a custom code tile which will have the jQuery $ object imported to the JavaScript.

_________________________________________________________________

Low Risk: Using jQuery in Custom Tile

jQuery is a popular library for DOM manipulation and AJAX requests. 

In Version 4: jQuery was loaded in the global scope and available to all code. 

// DOM Manipulation
$('.example-static').css('position', 'static');
// Import a script to do work
$.getScript('example/url').done(function() {   });

In Version 5: When used in the Custom tile in V5, the $ is imported via polyfill, enabling you to call jQuery functions normally.
_________________________________________________________________

High Risk: Global Require from Code Snippet & Page Settings

A lot of developers import dependencies using require JS, a popular asynchronous loading library for JavaScript. This library takes in a list of locations of libraries, then asynchronously loads and returns the library to a function via parameters. 

require(['//ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.2.js'], function (ko) {
    // Code consuming knockout
});

In Version 5: This code will stop working and throw a "require is undefined" error in the console. The Require function will be gone from the global scope.

In this case, it is necessary to convert the Code Snippet tile or Custom Page Settings code to a Custom Tile. Custom tile is equipped with a polyfill (described below) to allow for use of the Require function.
_________________________________________________________________

Low Risk: Global Require from Custom Tile

A lot of developers import dependencies using require JS, a popular asynchronous loading library for JavaScript. This library takes in a list of locations of libraries, then asynchronously loads and returns the library to a function via parameters. 

For Example:

require(['//ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.2.js',
        siteUrl + '/siteassets/edison/common/scripts/edison-default.js',
        'https://c64.assets-yammer.com/assets/platform_js_sdk.js'], function (ko, vel) {
    // Code consuming the knockout and yammer SDK libraries
});

This pattern is so common in the Custom Tile we provide a polyfill to custom tiles, enabling them to use the "require" function unchanged from previous versions.

Did this answer your question?