 | Level: Intermediate Andrew Mirsky (mirskyatibmdevworks@gmail.com), Project Manager, IBM
16 May 2006 IBM Rational Method Composer provides a mechanism for a feedback popup window when content is published. This document describes techniques to create a feedback form that gathers the necessary information on the page that is being viewed.
Overview
IBM Rational Method Composer version 7.0 provides a mechanism for a feedback popup window when content is published. Feedback from users is critical in maintaining and keeping methods current. A website published by IBM® Rational Method Composer (RMC) based on method content provides a link to a feedback form on an external website. This document shows how to create the form to provide the maximum information on what a user is viewing while they are giving feedback. Although creating this "smart" feedback form is not difficult, this document assumes a working knowledge of HTML, specifically forms, and Javascript™, but before we get into the details, we will start with a basic review of a published website.
The user's perspective
Figure 1 shows a screenshot of a website published by Rational Method Composer.
Figure 1. A published Rational Method Composer website
As illustrated in Figure 1, RMC’s websites can be separated into three different panes:
- Top Pane (red) –The basic header information for the website is in this area. This pane stays constant, no matter what is being viewed in the other panes and contains a link to the Glossary, Index, Feedback, About, Search and Print functions.
- Left Navigation Pane (green) – Browse the various phases, iterations and activities in this tree browser. By expanding the tree and selecting an item, the Content pane’s page is altered.
- Content Pane (blue) – The main pane, which displays the item being reviewed.
Specifying the feedback link
By following the instructions in RMC tutorials and the help menu, created content in a given configuration can be published by RMC into a website. Figure 2 shows the Published Method Configuration window.
Figure 2. The Publish Method Configuration dialog box
As shown in Figure 2, the Feedback URL you specify under Published website must be a fully-qualified URL that points to a page that will be hosted in a location outside of the published website. This is in contrast to the About content field, which is a page that gets incorporated into the RMC-generated content.
Create your feedback page
Getting started is as easy as opening your favorite HTML editor or text editor. For the purposes of this document, our goal will be to create a form similar to that shown in Figure 3. More advanced design, content, etc., is left up to the content creator.
Figure 3. A simple feedack form
Creating the feedback form page
At the start, the HTML for the form should look something Code Block 1.
Code block 1. Basic HTML form
<form action="cgi-bin/myscript.pl" method="post" name="entry" id="entry">
<textarea name="feedback" cols="60" rows="6" id="feedback"></textarea>
<input type="submit" name="Submit" value="Submit">
<input type="reset" name="Reset" value="Reset">
</form>
|
Please note that it is up to the content creator to develop the proper CGI (e.g., myscript.pl) script to handle the form’s submission.
Accessing information in the Content pane
The goal is for the feedback form to "understand" which document is being viewed, thereby passing this information along when the user submits feedback. In the case of Figure 3, the document title is also displayed for reference. When the web pages which are displayed in the Content pane were generated, they were encoded with information about where they were generated from. Table 1 shows the various information that is helpful when identifying the page being displayed in the Content pane.
Table 1. Items for identfying the Content pane
| Field | Description | Examples |
|---|
uma.type | Document type | Task descriptor, Phase, Activity, etc. | uma.name | Document name | PhaseA, PhaseB, etc | uma.presentationName | Presentation name. Same as the title of the page being viewed. | PhaseA, PhaseB, etc | | URL | This is the fully qualified filename of the page; the value is a generated name and might not be fully readable. | http://www.demowebsite.com/...Phase%20A,_8f27wMhEEdqWq6XOMWQGVw.html |
Some of the items in Table 1 are stored as "meta-tags" in the HTML and can be retrieved by using the code in Code Block 2.
Code block 2. Function for accessing meta-tags
<script language="javascript">
<!--
var content_tags = new Object;
var mainpage = opener.parent;
var contentpane = mainframe.ory_doc;
var metatags = contentpane.document.getElementsByTagName("meta");
for (index=0; index < metatags.length; index++)
{
var name = metatags[index].getAttribute("name");
var context = metatags[index].getAttribute("content");
content_tags[name] = context;
}
//-->
</script>
|
This should be placed within the <head>…</head> markup in your feedback form which will allow the metatags hash table be accessed by other sections of Javascript™ in the feedback page.
Things to note about Code Block 2:
- The feedback window is a pop-up window from the Top Pane, so opener refers to this frame. The opener.parent gets access to the main page.
- The Content pane’s frame is
ory_doc and can be accessed by mainpage.ory_doc.
Getting Content pane information for display
With the hash table in Code Block 2, it is easy to get information for display to the user. Code Block 3 creates a line in the web page which displays the document type and document name that the user is about to give feedback on.
Code block 3. Displaying Content pane information
<script language="javascript">
<p>Document title:
<strong><script language="JavaScript">
document.write(content_tags["uma.type"] + ":" + content_tags["uma.presentationName"]);
</script></strong>
</p>
|
Getting Content pane information for form submission
Since the HTML is rendered before Content pane information is available, the information needed to identify the Content pane web page needs to be done on form submission. First, we need to create places in the form to store the information. This is done by adding hidden fields to the Code Block 1 form as described in Code Block 4
Code block 4. Hidden fields in HTML form
<input name="url" type="hidden" id="url">
<input name="doctype" type="hidden" id="doctype">
<input name="docname" type="hidden" id="docname">
<input name="docpresname" type="hidden" id="docpresname">
|
Next, Code Block 5 shows the function that needs to be added between the <script>…</script> that already exists in the <head>…</head> described in Code Block 2.
Code block 5. Adding information to HTML form
function formFill()
{
var mainpage = opener.parent;
var contentpane = mainpage.ory_doc;
document.entry.doctype.value = tags["uma.type"];
document.entry.docname.value = tags["uma.name"];
document.entry.docpresname.value = tags["uma.presentationName"];
document.entry.url.value = contentpage.location.href;
if(0)
{
return false;
}
return true;
}
|
Finally, Code Block 6 shows what needs to be added to the input field in Code Block 1 so that formFill() can be triggered before the form is submitted.
Code block 6. Modifying the submit routine
<input type="submit" name="Submit" value="Submit" onClick="return formFill()">
|
Resources Learn
- To learn more, visit the Rational Method Composer and RUP resource area on developerWorks Rational. You'll find technical documentation, how-to articles, education, downloads, product information, and more.
- Learn more about how to benefit from IBM Rational products and technologies in
The Rational Edge e-zine.
- To learn more about IBM Rational products, visit the developerWorks Rational zone. You'll find technical documentation, how-to articles, education, downloads, product information, and more.
- Browse for books on these and other technical topics at the
Safari bookstore.
Get products and technologies
-
To obtain the latest Rational Method Composer plug-ins from IBM Rational and IBM business partners, see the
List of RMC plug-ins on developerWorks Rational.
-
Try out Rational products by visiting the trial downloads area.
Discuss
About the author | | | Andrew Mirsky is an IBM accredited and PMI certified project manager, specializing in Engineering and Technology Services. Additionally, he acts as an advocate of planning and tracking using IBM Rational Method Composer and IBM Rational Portfolio Manager to improve consistency across multiple projects. Prior experience includes microprocessor engineering, web development and graphic design. |
Rate this page
| |
