by Richard Gebhardt
The following article will show you how to create a custom control wrapper for an embedded YouTube player. Many of these steps are identical to those found in my previous article: Creating your own UI Control using Dojo so check it out for more details.
Create the control and component registry declarations for the new control
The main registries are located in (all paths are relative to the installation directory/application server deployment location):
We'll declare our new control in a registry extension in order to keep the main registries clear. Registry extensions are placed in the following location:
Find the complete Control and Component registry files in Tables 1 & 2.
Create JavaServer Page (JSP) wrapper
The JSP file name is defined in the component registry xml; 'video' below corresponds to video.jsp:
All component JSP files are placed in the following location:
Find the complete video.jsp file in Table 3 below.
Find the YouTube video you want to embed and retrieve the associated metadata
a. I'll use the following video as an example: navigate to YouTube by clicking the link:
b. Click on 'Share' then click on 'Embed'
c. Note the width, height and src attributes, they will be used in step #4.
width="560" height="315" src="//www.youtube.com/embed/5KLnuaSJxG8"
Add the control to an existing application
Finally, we add the control element to an existing application. For example, if you wanted to add a quick tutorial video to the incident application for new service desk agents:
a. Go To → System Configuration → Platform Configuration → Application Designer
b. Search for application 'INCIDENT'
c. Export application XML
d. Find an appropriate place for the video (such as a new tab) and add the following element (by default the example below will render a SmartCloud Control Desk video
NOTE: According to the component description, the element must be enclosed in one of the following element containers:section, sectioncol, sectionrow, tab, page
<video id="gsvid" height="315" width="560" src="//www.youtube.com/embed/5KLnuaSJxG8"/>
f. Save and import the XML file.
Table 1: control-registry_video.xml
Table 2: component-registry_video.xml
Table 3: video.jsp
<%@ include file="../common/componentfooter.jsp" %>