Workbench: Get HTML Code to Embed

From TechWiki

Jump to: navigation, search

Contents

Introduction

This article explains how to generate the HTML code to put in a Web page in order to run a persistent Dashboard view that had been previously saved from the Workbench. A complementary document explains how to create a persistent Dashboard view.

Prerequisites

To be able to run a persistent Dashboard view, you will need to have already installed the Portable Control Application on your Web site. This application should then reside on a Web server where it is accessible from the Web.

The example screen shots below are illustrative. They are based on a specific conStruct installation. Your own installation likely has a much different style for its user interface and a different placement of various options. Further, some of these options may require system administrator privileges, and therefore may not be viewable by standard users.

Generate HTML Code

Once a Dashboard session gets saved on a server from a Workbench session -- which creates the named and persistent Dashboard view -- it is then possible to generate HTML code that can be embedded into a Web page to display that Dashboard view.

To generate the HTML code, you have to click on the "Dashboard -> Get HTML Code to Embed" under the top menu items on the Workbench. A "Get HTML Code to Embed" window will appear in the workbench.

W get code1.png

You have to provide two pieces of information before you can generate the HTML code:

  1. Base URL of the Portable Control Application (leave blank if new file is placed in PCA folder)
  2. Schema for the data used (see below)

The Base URL is the URL where the Portable Control Application is located on your Web server. However, you can leave this field empty if the HTML page you want to generate is in the same folder as the PortableControlApplication.swf file.

The Schema is (one or multiple) URLs where the irXML schema that are used by the Portable Control Application are located on the Web. See further the irON specification on how to create these schema.

W get code2.png

Once these fields are completed, can click the "Generate HTML Code" button to generate the HTML code to embed in your HTML page.

Using the Generated HTML Code

The HTML code generation tool will generate code in two places within this popup up window:

  1. The "Copy then paste this <header> GENERATED CODE </header> into Header section", and
  2. The "Copy then paste <body> GENERATED CODE </body> into Body section"

The HTML code that appears in the first section has to be copied and pasted into the <header></header> section of your HTML file.

The HTML code that appears in the second section has to be copied and pasted into the <body></body> section of your HTML file.

W get code3.png

Once you copied and pasted these codes into the two sections of your HTML page, save it, and then load the resulting Web page into your browser. If you have properly filled in all fields above, you will then see the persistent Dashboard view embedded in the page.

Some HTML Page Tweaks

The Dashboard view is displayed within an HTML <div> </div> container. This container defines the size of the actual Dashboard display within in the Web page (as well as other HTML code or styling you care to insert). We suggest that what is generated in the second text area above be added within such a <div> </div> tag. Then, you may place the <div> </div> anywhere you want in your Web page layout. It is this <div> </div> container that determines the size of the Dashboard that will be displayed to the user (plus any other instructions you care to include). Here is an example of such a <div> </div> container: 

  <div style="width: 800px; height: 800px">
     <script language="JavaScript" type="text/javascript">     
     </script>
     <noscript>
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
          id="PortableControlApplication" width="100%" height="100%"
          codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
          <param name="movie" value="PortableControlApplication.swf" />
          <param name="quality" value="high" />
          <param name="bgcolor" value="#869ca7" />
          <param name="allowScriptAccess" value="sameDomain" />
          <param name="allowFulllScreen" value="true" />
          <embed src="PortableControlApplication.swf" quality="high" bgcolor="#869ca7"
            width="100%" height="100%" name="PortableControlApplication" align="middle"
            play="true"
            loop="false"
            quality="high"
            allowScriptAccess="sameDomain"
            allowFullScreen="true"
            type="application/x-shockwave-flash"
            pluginspage="http://www.adobe.com/go/getflashplayer">
          </embed>
      </object>
     </noscript>
  </div>

Using conStruct's Dashboard View Content Type

If you are using conStruct, and if the Dashboard View content type has been defined, you will be able to add persistent Dashboard views within Drupal.

Here are the steps to perform, in Drupal, to add these persistent Dashboard views into Drupal content pages. This document assumes that you know how to save a Dashboard view, and how to generate the HTML code to embed in these Drupal pages (see above).

  1. Create a "Dashboard View" content type page
    1. Go to the Admin section of the Drupal site
    2. Click on the "Create content" link
    3. Click on the "Dashboard View Page" link
  2. Under the body section, click on the "Disable rich text" link
  3. Under the body section, click on the "Input Format" link. It will expend a new section
    1. In this extended section, select the "PHP Code" radio button
  4. Copy/paste the generated code in the second text area (see above) into the body section of the page
  5. Optionally add a <div /> container as explained above
  6. Finally click on the "Save" button at the bottom to save the new page.
Retrieved from "http://techwiki.openstructs.org/index.php/Workbench:_Get_HTML_Code_to_Embed"
Personal tools