HTML Libraries

The HTML Library is used to define HTML based sources, which can be used in the SAI360 Web Application

• as content for the information panel during the Login and Logout Process
• as the source for an iframe widget in any of the SAI360 Dashboards.

HTML Source

This Form allows an Administrative User to Define, Preview and Save HTML Sources.

You can access this form via Admin HTML Libraries HTML Source.

Enter the following Information:

1. Name:
   you must provide a unique Name for your Source
2. Source Type:
   select either HTML, or URL
3. Source Details:
   • HTML: type or paste the HTML code for this Source.
     Since HTML sources will be placed into an iframe, there are limitations of what can be supported.
   • URL: you can enter either URLs to external sites, or a link to a SAI360 URL - for example to a BI Report.
     The system does support the use of Constants as part of the URL.
     The format is: #User_Constant#
     
     One example for use of a Constant is the server address for a BI server when linking to a BI report. E.g.:
     #BI_URL#api/repos/%3Apublic%3ASAI360%3ADashboard%20iframes%3ARiskMap.xanalyzer/viewer
     

     Constants can be used in conditions and filters throughout the system (for sending emails, setting value actions, defaulting dates in forms and report parameters, etc).

     To add a constant

     From the menu, select Designer Constants, Click New.

     Field	Notes
     ID and Name	Must be all upper case, with no spaces (underscores are acceptable); cannot start with SYS_ or PARAM_. ID entered for the constant must be unique. The Name is displayed to users and it can be localized.
     Type	Field/data type, as used in conditions and formulas.
     Date Format	Optional, this setting is only applied for Constants where Type = ‘Date’. Note that when a Date Format is applied, the system will treat the constant as a String. It is recommended to only specify a date format when using the Constant for making API calls (Rest Callouts or Data Imports via API) or including in email content.
     Value	Define the value for the constant. For a constant of type ‘Text’, you can define in a URL or email address, etc. For a constant of type ‘Date’, you can define date related functions. Please refer to examples following.
     Description	Optional, to capture more details about the constant.
     Modifiable	Obsolete.
     Visible	When this checkbox is selected, this constant is visible for use in conditions. This checkbox is selected by default for new constants.

     Types

     Types available for use in conditions and formulas:

     Type	Description
     attrib	Value is an object attribute or a named constant. For example Incident Summary or SYS_TODAY
     boolean	Value is boolean (yes/no, true/false).
     date	Value is a date only.
     datetime	Value is a date and time.
     double	Value is a double. A double is like a float (see below) but it can store larger numbers and more decimal places.
     float	Value is a float (that is, a decimal such as 1.324).
     i18n	Value is an internationalized value.
     int	Value is an integer.
     long	Value is a long. A 'long' is like an integer but is used for very large positive or negative whole numbers, such as billions and trillions.
     object	Value is an object. For example an Incident or an Action.
     raw	Value is a raw file. For example a picture file such as a JPEG.
     text	Value is text.
     time	Value is a time only.

     Examples

     Numeric Value for PI

     An example of a user constant for 'pi' is:

     • ID: PI
     • Name: Pi
     • Type: double
     • Value: 3.142
     • Description: Pi to 3 decimal places
     • Visible: "true" (checkbox is selected)

     Text Constant

     • ID: TEXT_CONSTANT
     • Name: This is a constant for a text field
     • Type: text
     • Value: This is the value for the text constant
       NOTE: the value is entered without any quotes - just the required string.
     • Description:
     • Visible: "true" (checkbox is selected)

     Time Constant

     • ID: NINE_AM
     • Name: Sets a time field to 09:00 AM
     • Type: time
     • Value: 09:00 am
       NOTE: the value is entered without any quotes - just the required string.
     • Description:
     • Visible: "true" (checkbox is selected)

4. Preview your Source BEFORE saving it:
   You can Preview your Source without saving it. Only once:
   • the Source Configuration is correct and complete, AND
   • you want to 'activate' it for immediate use in the web application
5. Save your Source.
   This will update the web application immediately - there is no need to publish the changes.
   Users will see the new content next time they refresh SAI360.

Some Background

All files, or Web Sites which you intend to display in the dashboard will be displayed within an iframe. An iframe is a tool to embed a site in another site.

Iframes have several parameters, one of them being the "src=" parameter. The content of the SAI360 iframe SOURCE field will be used as this parameter.

Using a HTML file as a Source

HTML files can be used to display simple information/messages on the dashboards.

• CONTENT of the HTML file

  You are free to define the content and the layout of the HTML file.

• EXAMPLE HTML File

  To display a message to the users, you could create a HTML file with the following content:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HTML Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

  <body>
<h2 style="text-align:center;font-family:arial;background-color:#468FB8;color:white">OUTAGE NOTIFICATION!</h2>
<p style="text-align:center;font-family:arial"> There will be a <b>4 hour System Outage</b> as of 10pm tonight. </p>
</body>
</html>

  The result will be the following display on the dashboard:

  

• Reference to IMAGES within the HTML File

  To easier reference any images which are used in an HTML file, use the following approach:

  • Store any images under the "custom" folder in the directory under Tomcat
  • In the <HEAD> section of the HTML code, specify the base URL of your web application, e.g.:

    <head>
...
<base href="/MyWebApp/" />
...
</head>

  • You then can refer images as follows:

    <img src="images/sai.png">

• TIP

  If you anticipate that messages on a Message Board are only shown sporadically, rather than constantly, select the option "Hide outside border panel".

  The advantage for doing so is that the panel will completely disappear from the interface when the source file is empty - especially if you place the panel at the very bottom of a dashboard.

Using a URL as Source

When you intend to use a Web Site as the Source,

• use the URL, as retrieved from the browser, and paste it into the URL field.

  https://www.sai360.com/

Embedding Web Site Content

Sometimes it is necessary to embed the content of a site, rather than linking to the site itself. To do this, you will have to retrieve the HTML code necessary to embed the site in an iframe, and then use the src parameter to paste into the field Source.

Some "popular" examples would be YouTube Videos, Google Maps, or Twitter Feeds. Below are sample codes for each of these:

Embed a Google Map

• The process of retrieving an "embed code" for Google Maps can vary from version to version, so please refer to the Google help pages if you need assistance in this process.
• Example:
  • Code retrieved from Google:

    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3386.734653187319!2d115.8186525!3d-31.9138062!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2a32af8f0c65cb6d%3A0xbb98b023d91017e!2s355
    +Scarborough+Beach+Rd%2C+Osborne+Park+WA+6017!5e0!3m2!1sen!2sau!4v1391488211251" width="400" height="300" frameborder="0" style="border:0"></iframe>

  • Paste the following into the field Source:

    https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3386.734653187319!2d115.8186525!3d-31.9138062!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2a32af8f0c65cb6d%3A0xbb98b023d91017e!2s355
+Scarborough+Beach+Rd%2C+Osborne+Park+WA+6017!5e0!3m2!1sen!2sau!4v1391488211251

  • Result
    
    

Embed a Twitter Feed

To embed a Twitter Feed, it is necessary to create an HTML file, which contains all the necessary details to embed a Twitter feed. Once this file is created, you simply use this file as the Source in the iframe widget.

• The first step is to access your Twitter account, and to create a "widget" for the feed. As with the above examples, please refer to Twitter itself for assistance.
  • Paste the COMPLETE code from Twitter into the <BODY> section of an HTML file.
  • Place the HTML file under the Tomcat directory (as described above)
  • Reference this file as the Source, for example

    custom/files/twitter_feed.html

Embed a Facebook Post

To embed a Facebook Post, it is necessary to create an HTML file, which contains all the necessary details to embed a Facebook Post. Once this file is created, you simply use this file as the Source in the iframe widget.

• The first step is to retrieve the code for embedding from the Facebook Post you are interested in. As with the above examples, please refer to Facebook help pages for assistance.
  • Paste the COMPLETE code into the <BODY> section of an HTML file.
  • Place the HTML file under the Tomcat directory (as described above)
  • Reference this file as the Source, for example

    custom/files/facebook_post.html

Clients who upgraded from Version

Clients who upgraded from a previous version to Version 9 will find that the system already has a list of HTML sources.

During the upgrade process, the system identified any URLs which were used iframe Widgets, and automatically converted these to HTML Sources.

At the same time, the Dashboard Designer has been modified, and now will reference the correct HTML Source, rather than having a text value.