Creating Custom SiteKiosk and Windows Control Elements for the Start Screen

The HTML Widget of the SiteKiosk Start Screen allows you to create custom buttons with your own HTML code. This helps you to create a vast amount of individual features that you can add to your Start Screen.

To demonstrate some of the functionalities you can add, we will create elements that will enable the user to initiate a SiteKiosk restart and logout as well as a Windows logout, shutdown and restart.

Because the design of the SiteKiosk Start Screen is Chrome-based, it uses the new SiteKiosk Object Model for Chrome. This Object Model is still in the making, the most current state of the preliminary documentation can be obtained through our support department. Interested developers can just send us a short email.

To create an HTML Widget, go to the Start Screen Editor in the SiteKiosk configuration (Start Page & Browser -> Select the Start Screen -> Click on Customize -> Start Screen Editor -> Open Editor). Select the blank by default Template 3 and choose to add a new element. Select HTML Widget.

After the new widget has been created, use the edit button to open the properties dialog. On the HTML page you can overwrite the default example code with the custom HTML code.

Let us start with an element that does a SiteKiosk Logout. This is the code needed for it:

<script type="text/javascript">
    function DoSiteKioskLogout() {
        parent.siteKiosk.logout();
    }
</script>
<div style="background-color:FF235A;height:100%;padding:10px;font-family:Arial;cursor:pointer;" onclick="DoSiteKioskLogout();">
	<div style="height:100%;width:100%;font-size:30px;text-align:center;margin-top:42%;">SiteKiosk<br/>Logout</div>
</div>

You can copy and paste it into the HTML editor of the widget. The div tags are used to design the element. Clicking on the main div will call the DoSiteKioskLogout method. This method calls the siteKiosk.logout() method from the SiteKiosk Object Model. Note the leading parent, this is required to access the SiteKiosk Object Model that has already been initialized by the Start Screen, which is the parent of the HTML Widget element.

Next is a SiteKiosk Restart:

<script type="text/javascript">
    function DoSiteKioskRestart() {
        parent.siteKiosk.restart();
    }
</script>
<div style="background-color:1EFF47;height:100%;padding:10px;font-family:Arial;cursor:pointer;" onclick="DoSiteKioskRestart();">
	<div style="height:100%;width:100%;font-size:30px;text-align:center;margin-top:3%;">SiteKiosk<br/>Restart</div>
</div>

You will note that most of the code is the same as before. This is true for all of the five elements we will create in this example. Besides some changes in the CSS to give the element a different look, it calls the DoSiteKioskRestart method which calls siteKiosk.restart() from the SiteKiosk Object Model to execute the restart of the SiteKiosk application.

The last three elements will perform Windows tasks. The code for a Windows Logoff looks like this:

<script type="text/javascript">
    function DoWindowsLogoff() {
        parent.siteKiosk.system.logoff();
    }
</script>
<div style="background-color:FFEC21;height:100%;padding:10px;font-family:Arial;cursor:pointer;" onclick="DoWindowsLogoff();">
	<div style="height:100%;width:100%;font-size:30px;text-align:center;margin-top:3%;">Windows<br/>Logoff</div>
</div>

Clicking this element will logoff the current Windows user and present the Windows login screen. It uses the siteKiosk.system.logoff() mehtod.

A Windows Shutdown will be executed with this code added to an HTML Widget element:

<script type="text/javascript">
    function DoWindowsShutdown() {
        parent.siteKiosk.system.shutdown();
    }
</script>
<div style="background-color:DB28FF;height:100%;padding:10px;font-family:Arial;cursor:pointer;" onclick="DoWindowsShutdown();">
	<div style="height:100%;width:100%;font-size:30px;text-align:center;margin-top:42%;">Windows<br/>Shutdown</div>
</div>

The siteKiosk.system.shutdown() from the SiteKiosk Object Model is used here.

The final example will do a Windows Restart with the help of these lines:

<script type="text/javascript">
    function DoWindowsRestart() {
        parent.siteKiosk.system.restart();
    }
</script>
<div style="background-color:2DA7FF;height:100%;padding:10px;font-family:Arial;cursor:pointer;" onclick="DoWindowsRestart();">
	<div style="height:100%;width:100%;font-size:30px;text-align:center;margin-top:3%;">Windows<br/>Restart</div>
</div>

siteKiosk.system.restart() is the method of the SiteKiosk Object Model that comes into play for this task.

If you add all five examples to the Template 3 and save the configuration, you will get this colorful result when starting SiteKiosk.