Skip navigation FileNet logo
  Open Client Developer's Guide
  Search  |  Index  |  Glossary   |  
Return to Previous Menu
Close menu Custom Step Processors
  Step Processor Data Flow
  What to Customize and How
  Customizing the OOTB Step Processor
  Close menu Customizing the User Interface
    ASPX Main Page User Controls
    Step Processor User Controls
    Changing Basic Look and Feel
    Modifying the ASPX Page
  Customizing Content Integration
  Building a Processor from Scratch
   

Modifying the ASPX Page (Complex UI Customization)

More complex customization of the OOTB HTML Step Processor user interface involves making changes to the basic layout and structure of the ASPX page, adding new User Controls, and hiding existing User Controls.

Subtopics include:

These changes are primarily made in the ASPX page (FnStepProcessor.aspx), its code-behind file (FnStepProcessor.aspx.vb), and the appropriate User Control. The examples which follow illustrate these types of customization.

Customizing the ASPX Page Layout and Structure

If you need to customize the layout of the OOTB HTML Step Processor, the best approach is to copy and deploy the OOTB Step Processor, then modify the ASPX page layout and structure, its code-behind file, and the appropriate User Controls.

For example, restructuring the page by placing the Toolbar above the Banner, as illustrated by the HTML modified in the following example FnStepProcessor.aspx page code fragment:

<form id="Main" enctype="multipart/form-data" method="post" runat="server">
   <table cellspacing="0" cellpadding="0" border="0" width="100%">
      <tr>
         <td>
            <table cellSpacing="0" cellPadding="4" width="100%" border="0">
               <tr vAlign="top">
                  <td id="ToolBarPane" noWrap align="left" width="*"
                     runat="server" NAME="ToolBarPane" Visible="false">
                  </td>
               </tr>
            </table>
         </td>
      </tr>
      <tr valign="top">
         <td>
            <OpenClient:FnBannerUC Id="aFnBannerUC" runat="server" NAME="aFnBannerUC" />
         </td>
      </tr>

Adding New User Controls

To add a new Step Processor User Control, you will need to create the new User Control (for example, using Visual Studio), then modify your custom ASPX page (copied from FnStepProcessor.aspx and deployed) and its custom code-behind file (modified from FnStepProcessor.aspx.vb).

Note: When creating a User Control, it is recommended that you transfer XML data.

Guidelines to add a new User Control (for example, for a "Special Attachments" control) are as follows:

  • Create the new User Control as a .ascx file and its associated .ascx.vb file. If you use Visual Studio, select the Create Web Control icon and follow the dialogs. For example, for a "Special Attachments" User Control, you may create the following User Control:

    FnStepProcSpecialAttachmentsUC.ascx

  • <%@ Control Language="vb" AutoEventWireup="false" Codebehind="FnStepProcSpecialAttachmentsUC.ascx.vb" Inherits="IdmWSX.FnStepProcAttachmentsUC" %>
    <!--
    ' ------------------------------------------------------------
    ' FnStepProcAttachmentsUC.aspx
    ' ------------------------------------------------------------
    ' VCS INFO:
    '
    ' $Revision: 1.1 $
    ' $Date: Jul 13 2006 23:50:22 $
    ' $Workfile: process_custom_step_UI_05.htm $
    ' ------------------------------------------------------------
    '
    -->
    <table cellspacing="0" cellpadding="0" border="0" width="100%">
       <tr>
          <td id="SpecialAttachmentsTab" runat="server">
          </td>
       </tr>
    </table>

    FnStepProcSpecialAttachmentsUC.ascx.vb

    Define the class, SetData, etc. for this User Control. Some of these are indicated by the following code fragments:

    Public MustInherit Class FnStepProcSpecialAttachmentsUC
    'Inherits System.Web.UI.UserControl
    Inherits FnStepProcBaseUC
    Implements IFnStepProcUIModel

    Protected WithEvents AttachmentsTab As System.Web.UI.HtmlControls.HtmlTableCell
    Private m_colParameters As New FnEpParameterList()
    Private m_colModifiedParameters As New FnEpParameterList()

    where you set the data for XML strings, and so on:

    ' ----------------------------------------------------------------------------[-
    ' Sub SetData()
    '
    ' Purpose: Set the data for FnStepProcSpecialAttachmentsUC model
    ' Parameters:
    ' ByVal strXML As String
    ' Throws:
    ' ----------------------------------------------------------------------------]-
    Public Sub SetData(ByVal aFnEpStepElement As Object) Implements IFnStepProcUIModel.SetData
       m_colParameters = aFnEpStepElement.Parameters
    End Sub

  • Specify the new User Control in the FnStepProcessor.ascx.vb (or your new code-behind page) where appropriate. For example (see bolded statements):

    Private m_aFnStepProcGeneralInfoUC As FnStepProcGeneralInfoUC
    Private m_aFnStepProcAttachmentsUC As FnStepProcAttachmentsUC
    Private m_aFnStepProcSpecialAttachmentsUC As FnStepProcSpecialAttachmentsUC
    Private m_aFnStepProcDataFieldsUC As FnStepProcDataFieldsUC
    Private m_aFnStepProcWorkGroupsUC As FnStepProcWorkGroupsUC
    Private m_aFnStepProcMilestonesUC As FnStepProcMilestonesUC
    Private m_nTabId As Integer = FnStepProcBaseUC.TAB_GENERALINFO_ID
    Private m_bRestoredState As Boolean = False
    Private m_aFnPageStateMgr As FnPageStateManager
    ...

    Private Sub SavePageData()
       If m_currentTab Is Nothing Then
          Return
       End If

       Dim nId As Integer = m_currentTab.GetId
       If nId = FnStepProcBaseUC.TAB_GENERALINFO_ID Then
          SaveGeneralInfo()
       ElseIf nId = FnStepProcBaseUC.TAB_ATTACHMENTS_ID Then
          SaveAttachments()
       ElseIf nId = FnStepProcBaseUC.TAB_SPECIALATTACHMENTS_ID Then
          SaveAttachments()
       ElseIf nId = FnStepProcBaseUC.TAB_DATAFIELDS_ID Then
          SaveDataFields()
       ElseIf nId = FnStepProcBaseUC.TAB_WORKGROUPS_ID Then
          SaveWorkGroups()
       End If
       m_currentTab.SetVisible(False)
    End Sub
    ...

    'Set the new Special Attachments tab in the main tab bar
    aTabBarDataUtil.AddItem("Attachments", m_rm.GetResourceString("Special Attachments"), FnStepProcBaseUC.TAB_SPECIALATTACHMENTS_ID)

    ...

Hide Existing User Controls

To hide an existing Step Processor User Control, you will need to either delete (preferred) or comment out the control in your custom ASPX page (copied from FnStepProcessor.aspx and deployed) and its custom code-behind file (modified from FnStepProcessor.aspx.vb). For example, to hide the Tab bar control:

  1. Delete the table row (shown commented here) for the Tab bar in the FnStepProcessor.aspx file:

  2. <!--tr>
       <td>
          <table cellSpacing="0" cellPadding="4" width="100%" border="0">
             <tr vAlign="top">
                <td id="TabBarPane" align="left" width="*"
                   runat="server" NAME="TabBarPane" Visible="false">
                </td>
             </tr>
          </table>
       </td>
    </tr-->

  3. Delete the appropriate related lines for the Tab bar control (some of which are shown commented here) in the FnStepProcessor.aspx.vb code-behind file. For example:

'Protected WithEvents TabBarPane As System.Web.UI.HtmlControls.HtmlTableCell
...
'Private m_aTabBar As FnTabBarUC
...
'Private Const CURRENT_TAB_ID As String = "CurrentTabID"
'Private Const EP_SP_PAGEKEY As String = "EP_StepProcessorPageKey"
'Private Const EP_SP_TABIDKEY As String = "EP_StepProcessorTabIdKey"
...
'Private m_nTabId As Integer = FnStepProcBaseUC.TAB_GENERALINFO_ID
...