Modifying the HTML Step Processor Toolkit User Interface Files

This topic describes how to modify the user interface ASP files supplied with the HTML Step Processor Toolkit for the FileNet Web Services web application. These shared files, that provide the user interface for both the default HTML Step Processor and Launch Step Processor, reside in the ...\Program Files\FileNet\IDM\Web\IDMWS\Redist\WF_Html_Toolkit\UI directory on the FileNet Web Services server (if a default installation has been used). Each of these user interface ASPs is described in terms of the tab/frameset/file/script that calls it, its functions, sample code and other useful information, where relevant.

Many of the files listed in this topic are directly referenced in by the default HTML Step Processor (step_main.asp) or Launch Step Processor (launcher_main.asp) files (or the modified versions of those files). For information on these file dependencies, see the HTML Step Processor File Relationships and the HTML Launch Step Processor File Relationships topics.

Depending upon your application requirements, you may modify any of the following user interface ASP pages (click on the link for details):

Note In this list and the descriptions which follow, an asterisk (*) following the file name denotes a file that developers are typically more likely to want to modify.

Caution You may add new functions or extend the existing functions in these files; however, you should not delete or alter any of the existing functions or your application may not work.


arrayEdit.asp

Called by: dataField.asp file (only for data fields that are arrays)

The arrayEdit.asp file provides JavaScript functions for loading an array, displaying the array name, checking the field type (integer, string, boolean, float, and time), adding and inserting array elements, among other functions. The embedded form uses a table to display the field information and post the information to the dataField.asp file.


attachment.asp

Called by: Attachments tab (which is implemented in the tabContent.asp file)

The attachment.asp file acts as a parent container for the attToolbar.asp and attachmentTable.asp files. The file implements the following frameset:

<frameset rows="35,*" border="0" framespacing="0" frameborder="NO">
  <frame name="AttToolbar" src="Redist/WF_Html_Toolkit/UI/attToolbar.asp" scrolling="no" noresize >
  <frame name="AttTable" src="Redist/WF_Html_Toolkit/UI/attachmentTable.asp?colorOpt=<%=TabColor%>" frameborder=1 scrolling="auto">
</frameset>

The tab display variable colorOpt passes the value of the VBScript variable <%TabColor%>. If no color is specified, the default highlight color is blue. The color of the highlighted tab can be selected by the following query string statement:

TabColor = Request.QueryString("tabColor")

The tabColor variable value is used to set distinguishing colors for both the HTML Step and Launch Step Processors.


attachmentTable.asp*

Called by: the frameset implemented in the attachment.asp file (above)

The attachmentTable.asp file implements JavaScript functions for dynamically determining attachment properties and constructing a HTML-formatted table, using JavaScript, to display the properties.

The functions test for the attachment type and construct a table which includes and displays the attachment name, attachment item description, the library where the attachment resides, and the attachment document ID, which is the FileNet Images Services or the Content Services ID number.

Changes you can make typically include modifying the dynamically constructed <A HREF> tags, extend the function implemented in the file to change link behavior, adding additional attachment information, and extending the number of columns or rows constructed for each attachment.


attToolbar.asp

Called by: the frameset implemented in the attachment.asp file

The attToolbar.asp includes the ToolbarButton.asp file and implements functions that allow a user to select an attachments (like documents, folders, or stored searches) in the attachmentTable.asp file to view, checkout, cancel checkouts, and view version information.  The toolbar images and functionality changes depending on the object selected in the attachmentTable.asp file.

Most of the functions for opening attachments are handled by the .asp modules in the \WF_FileOpen directory. You can extend the existing functions or add additional event checking. The attachments functionality is contained in the FileOpen.js/fileopen.asp and Otherselect.js/OtherSelect.asp files, which are included in this attToolbar.asp file at runtime. You will need to use the FileNet Web Services JavaScript objects (IDMWSC_Document, IDMWSC_Folder, IDMWSC_Library, and IDMWSC_StoredSearch) to extend these modules. For information and example code on using these JavaScript objects, see FileNet Web Services Files Referenced By Process Applications.


dataField.asp*

Called by: Data Fields tab (which is implemented in the tabContent.asp file)

The dataField.asp file constructs a table row by row, using JavaScript, to display Step element parameter information. You can change the table creation, or you can extend the function for editing the array.

For parameters that are arrays, the HTML includes an image-based link in the table. When an end user clicks the image, the link invokes the arrayEdit.asp file, as a new window instance.  


milestone.asp

Called by: tab.asp, milestone.asp, and open_milestone.js

The milestone.asp file constructs a table to display the milestone information, such as the milestone name, the associated message, and the time the milestone was reached.


generalInfo.asp

Called by: tab.asp and tabContent.asp

The generalInfo.asp file provides JavaScript functions for selecting and displaying the tab-related information used in the default HTML Step Processor (step_main.asp) and Launch Step Processor (launcher_main.asp).


reassign.asp*

Called by: toolbar.asp (if the step can be reassigned)

The reassign.asp file provides a JavaScript pull-down list for reassigning a workflow step to a different participant. The file implements functions for reading participant arrays, sorting the elements alphabetically, and creating an <Option> tag (for the <Select> pull-down list) for each array element. You can modify the way the participant information is selected or displayed.


resource.asp*

Called by: stepElementInit.asp, toolbarHelper.asp, arrayEdit.asp, attachment.asp, attachmentTable.asp, attToolbar.asp, dataField.asp, generalInfo.asp, milestone.asp, reassign.asp, stepInfo.asp, tab.asp, workGroup.asp, workGroupEdit.asp

The resource.asp file provides variables associated with the strings of displayed text for the user interface components listed above; the varibles are assigned string values in this file. Alter the strings to localize or modify the text.


stepInfo.asp

Called by: the default HTML Step Processor (step_main.asp) and Launch Step Processor (launcher_main.asp)

The stepInfo.asp page constructs a table for displaying instructions. The following query string statement controls the background color of the instruction label:

ColorOpt=Request.QueryString("colorOpt")

For the colorOpt variable, which is passed from the step_main.asp file, the specified value is "#657FD2". If no value exists, the color defaults to "Blue".


tab.asp*

Called by: the default HTML Step Processor (step_main.asp) and Launch Step Processor (launcher_main.asp)

The tab.asp file works with tabContent.asp to implement the default tabs; i.e.: General tab, Attachment tab, Data Fields tab, Workflow Groups tab, and Milestones tab. The file selects the tabs displayed in the tabContent.asp file and if you want to add a tab, you must modify both this file and the tabContent.asp.

The tabs are evaluated in a bit-wise (binary) fashion; each default tab is assigned the following bit value:

You can modify how the tabs display by using bit masking. For example, a value of 1 (0001) displays the General and Attachment tabs, and a value of 2 (0010) displays the General and Data Fields tabs. However, a value of 6 (0110) displays the General, Data Fields and Work Group tabs. A value of 15 (1111) displays all tabs. Regardless of the tab being displayed, all of the tabs display left-aligned.

If you want to add a tab, perform the following general steps:

  1. Modify the tab.asp file, or copy the file to a local directory, depending upon whether or not you want the new tab to be available to all Step Processors or only the one you are modifying.
  2. Associate a bit value to represent the new tab. For example, a fifth tab must have a value of 16 (10000), a sixth tab must have a value or 32 (100000), and so on.
  3. Modify the local tabContent.asp to handle the new tab. The new tab must be able to reference all other tabs.

The current default function is similar to the following:

function onTabClick(sel)
{
if (parent.TabContent.updateStep() == false)
return;
var htmlString = null;
if (sel == 0)
{
htmlString = "generalInfo.asp?tabColor=<%=colorOpt%>";
}
else if (sel == 1)
{
htmlString = "attachment.asp?tabColor=<%=colorOpt%>";
}
else if (sel == 2)
{
htmlString = "dataField.asp?tabColor=<%=colorOpt%>";
}
else if (sel == 3)
{
htmlString = "workGroup.asp?tabColor=<%=colorOpt%>";
}
else if (sel == 4)
{
htmlString = "milestone.asp?tabColor=<%=colorOpt%>";
}
if (htmlString != null)
{
parent.TabContent.location = htmlString;
}
parent.TabHeader.location = "tab.asp?colorOpt=<%=colorOpt%>&tabSel=" + sel;
}

tabContent.asp*

Called by: the default HTML Step Processor (step_main.asp) and Launch Step Processor (launcher_main.asp)

With the tab.asp file, the tabContent.asp file implements functionality for bitwise comparison of the tabs for the step. The General tab always displays, the remaining tabs are selected depending on the existence of the required elements, such as attachments, or workgroups, or milestones (see tab.asp).

If you want to add a tab, you must modify this file along with the tab.asp file.


toolbar.asp

Called by: step_main.asp - or modified versions of the file. The launcher_main.asp file uses a different version of the file, which is located in the \WF_Launcher\HTML directory.

Modifying this file will allow you to rearrange, replace, remove, and add buttons. All button event handlers are implemented and defined in the toolbarHelper.asp file.  


workGroup.asp*

Called by: Workflow Groups tab (which is implemented in the tabContent.asp file)

The workGroup.asp file creates a table automatically, using JavaScript, to display the work group name and participant information for each workgroup defined for the workflow.

Each dynamically-constructed row includes an includes an image-based link that allows the JavaScript onClick event to invoke the workGroupEdit.asp file. When an end user clicks the image, the link invokes the workGroupEdit.asp file, as a new window instance.

You can modify how the work group information displays by modifying the HTML-formatted tables.


workGroupEdit.asp

Called by: workGroup.asp

The workGroupEdit.asp file implements functions for determining and dynamically creating a HTML-formatted table to edit the work group participants for the work groups.

This file implements functions for reading work group participant arrays, sorting the elements alphabetically, and creating a check box interface for selecting specific array elements.