Displaying web content
Display external files, such as images, web pages, videos and Google gadgets on a dashboard using gadgets from the Extra category. This category includes the following gadget types:
*HTML
*Image
*Import gadget
*Text
*Video
Displaying HTML content
Display a URL of external web content or embed HTML code on a dashboard using an HTML gadget. When using a URL, the content of the external web site displays in the HTML gadget. If the displayed web page is bigger than the gadget, the user can maximize the gadget to see more of the web page or enable scroll bars in the gadget.
You can also embed HTML, CSS, and JavaScript code directly in the HTML gadget instead of using a URL address.
Displaying content from a URL
You can display a web site or web application on the dashboard using an HTML gadget. For example, using a URL such as http://www.actuate.com loads the Actuate web site into the HTML gadget, as shown in Figure 16‑14.
Figure 16‑14 Adding a URL to display in an HTML gadget
Figure 16‑15 displays the content of the http://www.actuate.com URL in an HTML gadget.
Figure 16‑15 Displaying the HTML gadget on the dashboard
Some web sites and web applications support receiving additional parameters in the URL. If the additional parameters in the URL require special encoding you can encode the URL or consider using JavaScript redirection with the same URL in the HTML gadget.
To use an unencoded URL in an HTML gadget, replace the unencoded characters as shown in Table 16‑1.
Table 16‑1 Encoding URL characters for an HTML gadget
Character
Replacement text
Backslash (\)
Slash (/) or the URL encoding of %5C
Space ( )
The URL encoding %20
Ampersand (&)
The HTML character entity &
For example, the following URL does not work in an HTML gadget:
http://localhost:8700/iportal/iv?__report=\Home\US sales.rptdocument&__page=3
The following rewritten URL works in an HTML gadget:
http://localhost:8700/iportal/iv?__report=%5CHome%5CUS%20sales.rptdocument&__page=3
Similarly, to use a URL inside a JavaScript redirection, replace any backslashes with a slash or the URL encoding of %5C. The following code shows JavaScript redirection used to display a URL:
<script type="text/javascript">
<!--
window.location = "URL"
//-->
</script>
Place this code in the HTML section of the HTML gadget, replacing URL with the URL that retrieves the Actuate document. For example, the URL to a BIRT report document file is:
http://localhost:8700/iportal/iv?__report=\Home\US Sales.rptdocument&__page=3
The following JavaScript redirection script loads the BIRT report document into an HTML gadget:
<script type="text/javascript">
<!--
window.location = "http://localhost:8700/iportal/iv?__report=/Home/US sales.rptdocument&__page=3"
//-->
</script>
Some web sites do not permit embedding their content in another web site or attempt to control the browser display to present their content.
Displaying embedded HTML code
You can display embedded HTML such as HTML, CSS, and JavaScript code on a dashboard. Verify that your JavaScript code does not use "parent" or "top" to access HTML components.
If you need to interact with the HTML content consider embedding it in a Google gadget. Import gadgets can link to data selection gadgets and pass the value to the Google gadgets that they display.
Web applications that require special network ports or protocols, such as a video chat application, require access to those ports from the user’s computer.
Displaying Adobe Flash content
Adobe Flash content often appears above other content such as a gadget menu, when displayed in a web browser. If a dashboard developer has access to the source code of the HTML or Google gadget that displays the Adobe Flash content, the developer can add the wmode parameter to enable other content to appear above the Adobe Flash content. Verify that the wmode parameter is in the object tag that displays the Adobe Flash content and has a value of opaque or transparent. Opaque is less processor‑intensive on the user’s web browser than transparent.
The following code shows an example of setting the wmode parameter to opaque for embedded Adobe Flash content:
<object type="application/x-shockwave-flash" width="100%" height="100%" id="flash" data="/iportal/testing/test.swf">
<param name="movie" value="/iportal/testing/test.swf" />
<param name="quality" value="best" />
<param name="wmode" value="opaque" />
<param name="bgcolor" value="ffffff" />
</object>
If you do not have access to the source code where the Adobe Flash content appears, contact the web site administrator and ask them to set the wmode parameter to transparent in the object tag displaying the Adobe Flash content.
Displaying images
Display images on a web server or from the internet using the image gadget. This location starts with http:// or https:// in the URL address to the image, such as http://www.actuate.com/logo.jpg, where logo.jpg is the name of the image file.
If the image is larger than the gadget, the user can maximize the gadget or enable scroll bars to see more of the image.
The image gadget supports the following image formats:
*GIF
*JPG
*PNG
*ICO
Displaying Google gadgets
Google gadgets display dynamic web content using HTML and JavaScript. Google gadgets can also receive user selections on a dashboard. Display Google gadgets on a dashboard using the import gadget. The Google gadget is stored on a connected network like the internet. This location starts with http:// or https:// in the URL address to the Google gadget, such as http://www.google.com/ig/modules/calculator.xml, where calculator.xml is the name of the Google gadget file, as shown in Figure 16‑16.
Figure 16‑16 Adding a URL to display in an import gadget
Figure 16‑17 displays the content of the http://www.google.com/ig/modules/calculator.xml URL in an import gadget.
Figure 16‑17 Displaying the import gadget on the dashboard
You can create a custom URL with JavaScript and link that to a user selection. With this URL you can request a map, video, or other file when the user makes a selection on the dashboard. For example, a Google gadget uses JavaScript to generate a map of service routes for a company that delivers packages. The Google gadget is displayed on the dashboard using an import gadget. When you link the import gadget to a list displaying customer names, the Google gadget can access the selected customer location, and generates a map using the customer’s address.
For more information about creating and using Google gadgets, see Building Google gadgets.
Displaying text
When you need to display text on a dashboard, use the text gadget. This gadget enables you to add text such as explanations, online help, and hyperlinks anywhere on a dashboard.
When you add a text gadget to a dashboard, an HTML text editor appears, providing text formatting options, as shown in Figure 16‑18.
Figure 16‑18 Adding text to a text gadget
You can type and format text directly in the HTML editor. Along with text formatting options, the HTML editor supports adding HTML links to text and editing the HTML source code of the text.
If you need to add JavaScript, custom HTML code or CSS code, use an HTML gadget.
Displaying video
Display video files from a URL address or embedded HTML code on a dashboard using a video gadget. The video content is stored on a connected network like the internet. This location starts with http:// or https:// in the URL address to the video content, such as http://www.youtube.com/watch?v=kxAMwt0hZDQ, as shown in Figure 16‑19.
Figure 16‑19 Adding a URL to a video gadget
Figure 16‑20 displays the content of the http://www.youtube.com/watch?v=kxAMwt0hZDQ URL in a video gadget.
Figure 16‑20 Displaying a video file in a video gadget
You can also add HTML code and JavaScript code directly in the video gadget. For example, some video web sites embed video with options that display playback controls, a related video list, and video size. You set these options using the HTML code that embeds the video in the gadget.