HTML Status Board Help Guide

Introduction

Some prior knowledge of HTML/CSS will be a plus. Currently there are 2 ways to access the HTML Board Edit section

To Access the HTML Board via Web Application

1. You must be logged in as an admin user in order to access this webpage. Please login to https://cloud.savanceworkplace.com/ or your web server address
2. Once you are logged in, go to
   [YourServerAddressOrIP]/Administration/HTMLStatusBoardDesigner.aspx
   https://cloud.savanceworkplace.com/Administration/HTMLStatusBoardDesigner.aspx

To Access the HTML Board via Kiosk Application

1. Log into the kiosk with the Admin password and navigate to the Views tab.
2. Create a new View and give it a name.
3. Select the HTML Board (Advanced) radio button.
4. Select the HTML Board tab and tap or click the Open HTML Designer button.
5. The Board Designer may take a moment to load.

Uploading Your Board to EIOBoard

The Boards are saved in an HSB file format. If you’ve been provided a .hsb file, you can upload it and set your board to it.

1. Login into the HTML Board Editor on the Web
2. Click Import: If no file is chosen, click the Choose File button and you can select an existing board design that was saved previously, using the Open File dialog to locate the file
3. Then to switch it in the kiosk, first you enter the kiosk settings
4. Then go to the Views Tab of the Kiosk to create or edit your Status Board view
5. When editing the Status Board View, make sure HTML Board is selected then choose the HSB file you just uploaded for the board

How do I configure the Kiosk Status Board view?

Board Designer Layout

The Board Designer Menu Bar

At the top of the Board Designer there is a menu bar with various items. The options available change depending on if this is a new board design or if you are editing an existing design. If this is a new design the options are from left to right:

New Board:

• Import: If no file is chosen, click the Choose File button and you can select an existing board design that was saved previously, using the Open File dialog to locate the file.
• Save: For a brand new board, you must enter a Board Name before saving. This button will also save any changes to the board allowing you to see new changes.
• Cancel: Will undo any changes to the board.
• Preview Fullscreen: This will show what the board looks like in full screen. Click anywhere on the screen to go back to the designer.
• Load Template: For a new board you can load a pre-built template. Select the desired template from the Available Templates drop down. For your first board, it is recommended to use the MiniBoard Template.

When editing an existing board your options change to:

Existing Board:

• Active HTML Status Board: You can change the Active HTML Status Board. This is useful if you have multiple board designs you would like to save and edit.
• Delete: Deletes the currently selected Status Board. Cannot be undone!
• Clone: Opens up a new board that is a copy of the currently selected board.
• Export: Allows you to save the currently selected board as a file with the extension *.hsb. We recommend creating a Backup after editing your board
• Import: If no file is chosen, click the Choose File button and you can select an existing board design that was saved previously, using the Open File dialog to locate the file.
• Save: Saves any changes to the currently selected board.
• New: Opens a new board for editing.
• Preview Fullscreen: This will show what the board looks like in full screen. Click anywhere on the screen to go back to the designer.

The HTML Editor

The HTML editor is located at the bottom-center of the screen. It has two modes, Board Layout and Content Block. Content Block is where you define what appears for each user status. Board Layout defines the overall structure of the board, such as background color and margins. Board Layout should generally be left alone unless you want to use your own custom style sheets and javascript. Be sure to leave the [onclick=”onBackgroundClick()”] since that is used by the system. The Content Block is where you can declare which fields will be shown for each status. You can click and drag fields from the lower right Fields area into the HTML editor. You can also reference fields directly by typing them in as {$FieldName}. If you selected the MiniBoard template you’ll see an example of this.

This will display the user’s Last Name, First Name and set the background to the color of their current status. The fields should be placed in a <span> tag as above. This will allow you to order them how you would like, change the spacing between them, and add special characters like commas. You can also declare a CSS by setting class=”[class name].” In the example above the <span> has been given the class “name.” The CSS section below will explain how to use the CSS class to further customize the fields. You can use other html tags as well. For example if you want to display the user’s picture next to their status you can add an <img> tag. You can use the Pic field as the image source. This will appear like so in the code:

Note that the img tag was given the class “pic.”

• In order to expand the HTML Editor past 1 line, please click and drag the grey line up or down slightly (See picture)
  

The CSS Editor

The CSS editor lets you change the look and style of the status board. Continuing with the Mini-Board Template as an example, the first CSS style we’ll look at is the “body.” The body field will set the style for the <body> tag that is in the Board Layout. The main thing to note here is that the background-color can be changed. With CSS, a color is most often specified by:

• a HEX value – like “#ff0000”
• an RGB value – like “rgb(255,0,0)”
• a valid color name – like “red”

You can also set an image as the background by setting the CSS property

background-image: url(“[image location]”)

You can save images for use in the status board. Before opening the Board Designer there is a button labeled Open Resources. This will open the resources folder that EIOBoard has access to. You can save images you’d like to use in the images folder and access them by using the url “images/[file name]” like in the following example:

The next elements we can edit are the CSS classes we defined earlier. In CSS, a class is referenced with a period, such as .name. You can customize the HTML tags you specified in the HTML designer by giving them class names and styling them with CSS. By putting the fields you want to customize in a span, and then giving each span its own class, you can change how different fields are presented. For example, if you wanted to display each user’s extension underneath their name, but with a smaller font size, you could create a new <span> tag underneath the one containing name. Give the new <span> it’s own class and define a style for that class in the CSS editor. By editing the CSS you can change the size, font, and color of your fields.

Some common CSS settings are shown in the example. Take note of the .pic class. That is where you can define the height and width of the user pictures used in the <img> tag in the example below.

The JavaScript Editor

Advanced users may want to add their own JavaScript but the relevant settings here in the BoardSettings declaration. By editing these settings you enable or disable the refresh counter, set how often the Kiosk refreshes, disable status updates and change options for sorting and filtering. Advanced users can make use of the Chrome debugger tool by clicking the Open Debugger button in the lower right corner. This opens the same Chrome debugger tool available in the Chrome browser and allows you to inspect the HTML, CSS, and JavaScript as it is rendered to a browser

.