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:
-
Delete the table row (shown commented here) for the Tab bar in the
FnStepProcessor.aspx file:
<!--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-->
-
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
...
|