Modify User Interface Files

This topic describes how to modify, in general terms, the following user interface files used by the default HTML Step Processors and Launch Step Processors. In all liklihood, you will not need to modify most of the user interface files; in the following sections, an asterisk (*) following the file name indicates a file you are most likely to modify.

Caution You can add new functions or extend the existing function in these files; however, you must not delete or alter the existing functions

Many of the files listed in this topic directly referenced in the step_main.asp or launcher_main.asp files (or the modified versions of those files). Refer to both the HTML Step Processor File Relationships and the HTML Launch Step Processor File Relationships topics for more information on the file dependencies.

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 attachmentTabke.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

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 Images Services or the Content Services id number.

You can modify the dynamically constructed <A HREF> tags and extend the function implemented in the file to change link behavior, or you can add additional attachment information and extend 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 objected selected in the attachmentTable.asp file.

Most of the functions for opening attachments are handled by the .asp modules in the \WF_FileOpen directory. Specifically, the attachments functionality is contained in the FileOpen.js/fileopen.asp and Otherselect.js/OtherSelect.asp files, which are included in this file at runtime. You must know the IDM Web Services Javascript objects thoroughly to extend these modules.

You can extend the existing functions or add additional event checking.


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, like 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 HTML Step Processor and Launch Step Processor.


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 the text.


stepInfo.asp

Called by: step_main.asp and 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")

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


tab.asp*

Called by: step_main.asp and launcher_main.asp

The tab.asp file works with tabContent.asp to implement the default tabs: General tab, Attachment tab, Data Fields tab, Workflow Groups tab, and Milestones tab. The file selects the tabs displayed in the tabContent.asp file.

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 on whether or not you want the new tab to be available to all 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), and a sixth tab must have a value or 32 (100000).
  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: step_main.asp and 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 display, the remaining tabs are selected depending on the existence the required elements, such as attachments, or workgroups, or milestones.

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 changing 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.

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