Steps to Configure:
Re-use the Siebel Vanilla Web Page
for login based on new custom login page
(HTML/SWT), which is already being used by the current Siebel Application.
Identify
the Siebel Vanilla Login Web Page and SWT File
1. In Siebel tools, select
“Application” in the Object Explorer.
2. Go to the respective Siebel
Application and find the corresponding value of column “Login Web Page/Logoff
Acknowledgment Web page” which is “CC Login Page (Login Only)” in our project.
3. In the Object Explorer select “Web
Page” and query for “CC Login Page (Login Only)”, find the corresponding value
of column “Web Template” which is “Login” in our case.
4. In the Object Explorer, select “Web
Template” and query for “Login”. Expand the Object “Web Template” in Object
Explorer and select the “Web Template File” for Login Page, which is “SWELogin.swt” , this is file that needs
to be modified to custom login page.
5. The above swt file can be found in
the following path:
- Location of swt file used by Siebel Tools locally on your machine: “sea811\tools\WEBTEMPL”.
- Location of the swt file used by Siebel Web Client found on Siebel WebServer:“sea811\client\WEBTEMPL”.
Modifying the above SWT File to Custom Login Page.
The SWT file consists of the HTML code which also utilizes the SWE Tags/Forms and various
classes that is provided by Siebel in building the login page.
- The HTML Content in the SWT File builds the static look and feel of the Web Page.
- The SWE Tags/Forms are used to build the Siebel Objects like Login Button, Fields that accepts the Login ID/Password on the Page that utilizes the Siebel Classes to achieve specific functionality on the Web page.
Modifying the HTML Content of the SWT File for achieving the
Static look and feel of the Web Page
- The SWT file starts with tag <HTML> ……….. and ends with </HTML> as is with HTML file. The overall code is written in between these two tags.
- In HTML the entire element comes in pair of two which acts as start and end tag respectively like the one above like <HTML>..</HTML>, there are some exceptions like <HR> which is single tag and is used to insert horizontal line and we also have <BR> which is used to insert one blank line in between two matter.
- The <Title>..<Title> tags are used to give the title to the Login Page which will be visible in the top bar.
- All the other part like images, controls and button which will form the part of the login page is enclosed between <Body>..</Body> tags.
For proper placement of the controls images and
text , the overall login page is formed into tables. Since how the tables can
be formed is an integral part in the development of the login page. I am
providing a detail explanation on the tables.
The
details of including tables in an SWT files are as follows :
- Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells or columns (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
Example :
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 3</td>
<td>row 2, cell 4</td>
</tr>
</table>
This is how it looks in tools:
|
row 1, cell 1
|
row 1, cell 2
|
|
row 2, cell 3
|
row 2, cell 4
|
- Tables and the Border Attribute:If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.
To display a table with borders, you will have
to use the border attribute:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
( In the login page we did not required any
border so we have set “Border=”0”)
- Here are some of the tags along with the parameters that were used in customizing the login page .
- <table width="100%" cellpadding=5 cellspacing=0 border=0>
i. width : It specifies the horizontal space
occupied by the table, i.e. the total page size horizontally.
ii. Cellpadding : It is used for specifying the
space between the actual contents of the cell and the border of the cell.
iii. Cellspacing : It is used for specifying the the
distance between the two adjacent cells.
iv. Border : It is used to specify the border of the
table, In this case it is set to “0” indicating that no borders are required.
<td colspan=3><img style="LEFT:
2px; TOP: 6px" height=204 src="i-360
Login_files_/lefthand_main_img.jpg" width=185 vspace=5></td>
The above statement is used to inserting an
image in the login page.
<td> : Represents a new column or a Cell
colspan : This represents the number of columns
with in which the image will fit in.
height & width : The height and width
specifies the area in which the image will fit in the login page.
Style : It specifies the alignment( i. e. in
this case LEFT) and the relative position in terms of pixels(px) of the
the images with respect to the previous text or images.
Src : It specifies the location of the images
that need to be referred by the login page.
As we are re-using the Siebel
Internal Classes and Methods meant for login functionality, make sure below
mentioned SWE Tags/Form sections exist in the customized SWT File.
- <swe:form method="post" name="SWEEntryForm" htmlAttr="id='NON_SEBL_ID' target='_top'"> (Includes the target and htmlAttr)
- <swe:pageitem id="1" property="FormattedHtml" />(SWE Tag meant for accepting the contents of Username field on the web page)
- <swe:pageitem id="2" property="FormattedHtml" />(SWE tag meant for accepting the contents of Password field on the web page)
- <swe:pageitem id="4" property="FormattedHtml"/>(SWE tag associated to the login button on Web Page)
- </swe:form> (SWE Closure Tag of the FORM)
- <swe:scripts/>(SWE Tag meant to run the SWE related scripts on the Login Page
- <script language="JavaScript">userfocus()</script>(SWE Tag meant to run the userfocus function on the Login Page)
