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
   

Changing the Basic "Look and Feel"

Basic customization of the OOTB HTML Step Processor involves making basic changes to the user interface, such as modifications to the banner, colors and images in the OOTB Step Processor.

These changes are primarily made in the ASPX page (FnStepProcessor.aspx) — see the following Note text, its code-behind file (FnStepProcessor.aspx.vb), and the relevant User Control. To make global changes, edit the Cascading Style Sheet, FnStyleSheet.css, in the FNOpenClient directory.

Note:The public class FnStepProcessor implements the top level HTML Step Processor page; the class inherits System.Web.UI.Page.

The examples which follow illustrate these types of customization.

Note: A number of these modules implement the IFnStepUIModel interface, which you can use for the OOTB modules, or for your own custom UI modules. The IFnStepUIModel interface is as follows:

Public Interface IFnStepProcUIModel
' --------------------------------------------------------------------------
' Sub SetData()
'
' Purpose: Set the data for UC model
' Parameters:
' ByVal strXML As String
' Throws:
' --------------------------------------------------------------------------
Sub SetData(ByVal aFnEpStepElement As Object)
' -----------------------------------------------------------------------------
' Function GetData()
'
' Purpose: Get the serializable .NET class as output of the UC model
' Parameters:
' Returns: serializable .NET class
' Throws:
' ---------------------------------------------------------------------------
Function GetData() As Object
' -----------------------------------------------------------------------------
' Function IsModified()
'
' Purpose: Return the state of the user control
' Parameters:
' Returns: Boolean
' Throws:
' ---------------------------------------------------------------------------
Function IsModified() As Boolean
' -----------------------------------------------------------------------------
' Function GetId()
'
' Purpose: Get the User Control id
' Parameters:
' Returns: serializable .NET class
' Throws:
' ----------------------------------------------------------------------------
Function GetId() As Integer
' ------------------------------------------------------------------------------
' Function SetVisible()
'
' Purpose: Get the User Control id
' Parameters:
' Returns: serializable .NET class
' Throws:
' ----------------------------------------------------------------------------
Sub SetVisible(ByVal bVisible As Boolean)
End Interface ' *** Public Interface IFnStepProcUIModel ***

Changing the Banner of the OOTB Step Processor

The banner of the OOTB Open Client Step Processor is specified by the following code in the FnStepProcessor.aspx.vb file:

Private Sub SetBannerBar()
   aFnBannerUC.TitleBarText = GetLabel()

   Dim aFnBannerDataUtil As New FnBannerDataUtil()

   ' Set the headline for the banner
   aFnBannerDataUtil.AddTopLinks("Process", m_aFnQueryString.LibraryName)
   aFnBannerUC.DataSource = aFnBannerDataUtil.LinkArrayList()

End Sub

To modify the banner, modify the code in the FnBannerUC.ascx User Control. For example, modify the following table cell code to change the Banner navigation link:

<table cellSpacing="0" cellPadding="0" width="100%" border="0">
   <tr>;
      <td width="40%">;
         <img src="<%=m_aFnUIBlock.SpacerImage> "width="10" height="1" border="0">
         <img src="<%=m_aFnUIBlock.LogoImage%>" width="112" height="49" alt="FileNet Logo" border="0">
         
</td>
      <td>
         <table cellSpacing="0" cellPadding="0" width="100%" border="0">
            <tr>
               <td height="31" width="1%">&nbsp;</td>
               <td align="right" width="99%">
                  <asp:datalist id="dlGlobalNavigation" runat="server"
                        repeatdirection="horizontal" EnableViewState="False">
                     <ItemTemplate>
                     <asp:HyperLink id="HyperLink1" runat="server"
                        NavigateUrl='<%# GetHRef(CType(Container.DataItem, FnBannerNavigationItem))%>'
                        target='<%# (CType(Container.DataItem, FnBannerNavigationItem).Target)%>'
                        Enabled='<%# (CType(Container.DataItem, FnBannerNavigationItem).IsEnabled)%>' >
                        <%# (CType(Container.DataItem, FnBannerNavigationItem).Label) %>
                     </asp:HyperLink>
                     &nbsp;&nbsp;|&nbsp;&nbsp;
                  </ItemTemplate>
                  </asp:datalist>
               </td>
            </tr>

Changing the Colors of the OOTB Step Processor

You can change the colors of the OOTB Step Processor by modifying the appropriate User Control, depending on the item color you want to change. For example, to change the background color of the banner, modify the tag argument bgcolor in the FnBannerUC.ascx User Control file:

<tr>
   <td class="BaseDarkColor" valign="top">
      <table cellSpacing="0" cellPadding="0" width="100%" height="100%" border="0" class="BaseDarkColor">
         <tr height="1%" valign="top">
            <td bgcolor="#FFFFFF"><img src="<%=m_aFnUIBlock.TabCornerLeftImage%>" border="0"></td>
         </tr>
         ...

Changing the Images in the OOTB Step Processor

Change the image of an item in the OOTB Step Processor (for example, to change a banner image, an icon image, a logo, etc.) by using your own image in its place as referenced by that User Control. For example, to modify the image used for the banner, modify the following table cell in the FnBannerUC.ascx User Control file, specifying the image you want to use as the src= value:

<td class="BaseDarkColor" align="right" valign="top">
   <asp:datalist id="dlMainTabs" runat="server" repeatdirection="horizontal" EnableViewState="False">
      <ItemTemplate>
         <asp:HyperLink class="tasksNav" id="TabRef" runat="server"
            NavigateUrl='<%# GetHRef(CType(Container.DataItem, FnBannerNavigationItem)) %>'
            Enabled='<%# (CType(Container.DataItem, FnBannerNavigationItem).IsEnabled) %>'>
            <asp:Image id="Image1"
               src='<%# (CType(Container.DataItem, FnBannerNavigationItem).ImageURL) %>'
               runat="server" border="0" align="absmiddle" />
            <asp:Label id="Label1" runat="server" valign="top">
               <%# (CType(Container.DataItem, FnBannerNavigationItem).Label) %>
            </asp:Label>
            <img src="<%=m_aFnUIBlock.SpacerImage%>" width="10" height="1" border="0">
         </asp:HyperLink>
      </ItemTemplate>
   </asp:datalist>
</td>