Workbench: Get HTML Code to Embed
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.
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.
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.
You have to provide two pieces of information before you can generate the HTML code:
- Base URL of the Portable Control Application (leave blank if new file is placed in PCA folder)
- 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.
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:
- The "Copy then paste this <header> GENERATED CODE </header> into Header section", and
- 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.
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:
Using OSF-Drupal's Dashboard View Content Type
If you are using OSF-Drupal, 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).
- Create a "Dashboard View" content type page
- Go to the Admin section of the Drupal site
- Click on the "Create content" link
- Click on the "Dashboard View Page" link
- Under the body section, click on the "Disable rich text" link
- Under the body section, click on the "Input Format" link. It will expend a new section
- In this extended section, select the "PHP Code" radio button
- Copy/paste the generated code in the second text area (see above) into the body section of the page
- Optionally add a
<div />container as explained above
- Finally click on the "Save" button at the bottom to save the new page.