Chapter 5 Customizing User Interface Features in Mail

This chapter describes how to customize user interface features in Mail.

This chapter contains the following sections:

• The Mailbox Tool Bar

• Message Listing

• Customizing The Message Display Window

• The Message Tool Bar

• The Message Composition Window

• Aligning the User Interface from Right to Left (For Arabic only)

The Mailbox Tool Bar

This section describes how to modify the mailbox tool bar shown in Figure 5–1.

Figure 5–1 Mailbox Tool Bar

You can modify the following on the mailbox tool bar:

• Change the layout of the mailbox tool bar relative to the rest of the page

• Rearrange the order of tools

• Change the tools text

Customizing the Mailbox Tool Bar

To modify the mailbox tool bar, edit the appropriate files as follows:

• To customize the layout within the tool bar and the associated graphics, edit the getToolbar() function in the <uwc-deployed-path>/webmail/mbox_fs_lr.jsp file

• To customize the text associated with the graphics in the Tool Bar, edit the i18n[ ] values for get mail, compose, search, new search, file selected message, delete, undelete, and expunge in the <uwc-deployed-dir>/webmail/<locale>/i18n.js file

The function getToolbar() in mbox_fs_lr.jsp handles tool clicks and performs the following tasks:

• Get Mail: main.refreshMbox()

• Compose: main.compose(”new”)

• Search: srch()

Example: Mailbox Tool Bar Modifications

Example 5–1 shows the necessary edits to be made in the file mbox_fs_lr.jsp to :

• Display “Search” as the first tool

• Change the text of “Get Mail” tool to “Get Messages.

Example 5–1 Altered Tool Bar Layout ( mbox_fs_lr.jsp )

function getToolbar() {
.....
.....
.....
+ '" onclick="Reset()"></span>'+
        nWMtoolbar(i18n['search'], 'srch()',
          'search','imx/LrlSearchMsg_wo_1.gif')+
        nWMtoolbar(i18n['compose'], 'main.compose(\'new\')',
          'compose', 'imx/LrlNewMsg_wo_1.gif') +
        nWMtoolbar(i18n['get mail'], SpecialMboxURL('INBOX'),
          'getmail', 'imx/LrlGetMail_wo_1.gif')+
        nWMtoolbar(i18n["collect long"], 'main.collect()',
          'collect', 'imx/LrlColExtMail_wo_1.gif')
}

Functionally, the getToolbar() function links the “Collect External Mail” hyperlink to collect() in main.js. Example 5–2 shows how such linking is done.

Example 5–2 shows the necessary changes to be made in file en/i18n.js (text)

Example 5–2 Altering Tool Bar Text (en/i18n.js)

i18n[’get mail’] = ’Get Messages’


            

Message Listing

This section describes how to modify the Message List window shown in Figure 5–2.

Figure 5–2 Message List Window

You can modify the following in the Message List window:

• Change the default sorting order

• Change the text of the default column heading

• Change the text on “Collect External Mail” button

Modifying Message List Window

To modify the Message List window, edit the appropriate files as follows:

• To customize how the message list appears, edit the listFrameHTML() function in the mbox_fs_lr.jsp file.

• To change the text of default column heading, edit the i18n[] values for search results, date, from, to, size, and subject in the <lang>/i18n.js file.

• To change the text on the “Collect External Mail” button, edit i18n[’collect long] in the <lang>/i18n.js file.

Functionally, the getToolbar() function links the “Collect External Mail” hyperlink to collect() in main.js. Example 5–2 shows how such linking is done.

Example: Message Listing Modifications

To change the text on “Collect External Mail” button to “Get Messages From Another Server”, follow the code example provided in Example 5–3. This shows the necessary changes to be made in en/i18n.jsfile.

Example 5–3 Altering List Window Text (en/i18n.js)

// POP3 Collection
....
i18n[’collect long’] = ’Get Messages From Another Server’
       

Customizing The Message Display Window

This section describes how to modify the Message Display window shown in Figure 5–3.

Figure 5–3 Message Display Window

You can modify the following in the Message Display window:

• Change the message display

• Alter the layout of the window

• Change the text of the fields

• Display user-defined header fields

Modifying Message Display Window

To modify the Message Display window, edit the appropriate files as follows:

• To customize how the message appears, edit the listFrameHTML(doc)() function in the msg_fs_lr.jsp file.

• To customize the default text, edit the i18n[] values under Message Headers and Message in the <lang>/i18n.js file.

Modifying the Message Display Window to Display User Defined Header Fields

This section describes how to add and display user-defined header fields in the Message Display window.

Displaying User Defined Header Fields

Example 5–4 shows how to edit the listFrameHTML(doc)() function in the msg_fs_lr.jsp file.

Example: Customizing the Message Display Window to Display User Defined Header Fields

This example shows how to display the user defined field X-document-id in the Message Display Window.

Example 5–4 shows the edits made to the function listFrameHTML() in the msg_fs_lr.jsp file.

Example 5–4 Changes made to the msg_fs_lr.jsp file

function listFrameHTML(ftime) {
...
var notifyto
//add this line here.
var hdrstr = main.getHeaderStr(main.msgFrame.hdr[0], 'X-document-id')
....
....
   document.getElementById('POP_UP_DIV').style.display = 'inline'
  }
//and add here user defined X-document-id header.
if(hdrstr != '') {
  s += '<tr><td nowrap align=right valign=top width=5%' + main.base_line +
' bgcolor=' + main.chrome2 + '>' + main.font() + html('X-document-id') +
nbsp + '</td>\\n<td ' + main.cellBgString + '>' +
 main.font() + hdrstr + '</td></tr>\\n'
}
....
...
}

The Message Tool Bar

This section describes how to customize the message tool bar.

Figure 5–4 Message Tool Bar

You can modify the following in the message tool bar:

• Change the layout of the toolbar relative to the rest of the page

• Alter the layout within the tool bar

• Change the text associated with the graphics

Modifying the Message Tool Bar

To modify the message tool bar, edit the appropriate files as follows:

• To customize the layout within the tool bar, edit the actionBar() function in the msg_fs_lr.jsp file.

• To customize the texts associated with the graphics in the Tool Bar, edit the i18n[] values for compose, reply, reply all, forward, delete, undelete, previous, and next in the <lang>//i18n.js file.

Example 5–5 shows the necessary changes to be made in the en/i18n.js. file.

Example 5–5 Altering Message Tool Bar Text (en/i18n.js)

// Tool Bars
....
i18n[’previous’] = ’ Prev ’

The Message Composition Window

This section describes how to modify the Compose window.

Figure 5–5 Compose Window

You can modify the following in the Compose window:

• Change the location of the tools in the window

• Alternative text associated with the tools

• Enable and disable emoticons

• Create your own dictionary

Modifying the Message Composition Window

To modify the Message Composition window, edit the rtfeditor.html file.

• To customize the text, edit the values under Message Composition and Tool Bars in the <lang>/i18n.js file.

• To enable and disable the emoticons, edit the variable iconHREF in the main.js file. By default, the emoticon files are located in <uwc-deployed-path>/webmail/imx directory.

Functionally, rtfeditor.html is called by comp_fs_lr.html. This function assembles the code and assigns the functions to the graphics by calling WMtoolbar() in main.js that also handles colors and text-only versions. The rtfeditor.html file generates the “To”, “Cc”, and “Bcc” control area by calling the i18n_compose_controls() in <lang>/i18n.js.

Example 5–6 shows the necessary changes to be made in the file en/i18n.js for changing the text “Recipients” to “Send to”.

Example 5–6 Altering Composition Window Text (en/i18n.js)

// Message Composition
....
i18n[’recipient’] = ’ Send To ’ 

Aligning the User Interface from Right to Left (For Arabic only)

By default, the Menu tabs are aligned from left to right. If you have selected Arabic as the preferred language, then you need to customize Communications Express to align the Menu tabs from right to left.

To Align the User Interface From Right to Left

1. To align the User Interface from right to left you need to remove a line from the ar/i18n.js file.

   Example 5–7 shows the line that needs to be added to the ar/i18n.js.

Example 5–7 Aligning the User Interface from Right to Left

....

    i18n['dir'] = 'rtl'
                  
...