Embedding Custom JavaScript to the Web App

You can easily customize your Web App with external functionality, such as YouTube videos, chats, Twitter feeds, Google maps, or Google Analytics. You just need to upload your custom JavaScript to the application's JavaScript library, and your custom dynamic content will run on Web App pages.

To add a custom JavaScript to Web App pages:

1. Create your embeddable JavaScript code and save it as a .js file. The name must start with add_, such as add_[ScriptName].js. For example, add_AlloyYouTube.js.

2. Place your .js file to the js folder under the folder where your Web App files are located: [PhysicalPathToWebApp]\js\.

   INFO: For instructions on how to view [PhysicalPathToWebApp], the physical path of Web App files, see Physical Path to Web App Files.

3. Restart the Web App to apply your changes.

   TIP: You can use the Web Configuration tool to restart the Web App. Right-click the web application to restart and choose Restart Portal from the pop-up menu.

You can add as many JavaScript files as you need. The Web App will run all add_[ScriptName].js files from the js folder in alphabetical order.

Example: Embed YouTube videos to the Dashboard page

When added, custom JavaScript will run on all Web App pages. In order to accommodate your custom content, the Dashboard page layout features header and footer containers:

• customHeaderDashboard — this is the Id of the header container, at the top of the Dashboard page,
• customFooterDashboard — this is the Id of the footer container, at the bottom of the Dashboard page.

You can use these out-of-the-box Ids in your custom JavaScript to display the content on the Dashboard page. For example, you can use the following JavaScript to embed two YouTube videos to the Dashboard page's header.

In this example we will use our own videos from Alloy Software official YouTube channel.

// ========== Preferences ==========

var container = document.getElementById("customHeaderDashboard");

var videos = [

	{ id: "DYCvL8UuTWA" },

	{ id: "VMT6Nlcjo40" },

];

var height = "180px";

if (container) {

	renderVideos(container, videos, height);

}

// ========== Core function ==========

function renderVideos(container, videos, height) {

	var videoContainer = document.createElement("div");

	videoContainer.style.display = "flex";

	videoContainer.style.justifyContent = "space-around";

	videoContainer.style.height = height;

	videoContainer.style.paddingTop = "20px";

	container.prepend(videoContainer);

	for (var i = 0; i < videos.length; i++) {

		var video = videos[i];

		// Placeholder for youtube video

		var youtube = document.createElement("div");

		youtube.setAttribute("id", video.id);

		// Based on the YouTube ID, we can easily find the thumbnail image

		var img = document.createElement("img");

		img.setAttribute("src", "http://i.ytimg.com/vi/" + youtube.id + "/mqdefault.jpg");

		img.style.height = "100%";

		img.style.cursor = "pointer";

		// Overlay the Play icon to make it look like a video player

		var circle = document.createElement("div");

		circle.setAttribute("class", "circle");

		youtube.appendChild(img);

		youtube.appendChild(circle);

		// Attach an onclick event to the YouTube Thumbnail

		youtube.onclick = function () {

			// Create an iFrame with autoplay set to true

			var iframe = document.createElement("iframe");

			iframe.setAttribute("src",

				"https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1&border=0&wmode=opaque&enablejsapi=1");

			// The height and width of the iFrame should be the same as parent

			iframe.style.width = this.style.width;

			iframe.style.height = this.style.height;

			// Replace the YouTube thumbnail with YouTube HTML5 Player

			this.parentNode.replaceChild(iframe, this);

		};

		videoContainer.appendChild(youtube);

	}

}

See the screenshot below to view how the YouTube videos from our example are embedded in the Dashboard page.