Introduction

This article introduces you to the basic techniques of how to customize of Lotus iNotes. This information applies to Lotus iNotes 8.5 and later releases.

The first thing you need to know is that Lotus iNotes is not a traditional Domino Web application. A traditional Domino Web application is a Notes database, which is based on a Notes template. The Notes template file contains the forms and views and other design elements. Those design elements govern how the database behaves in the Notes client. The Domino web server translates those same design elements to HTML so that they can be viewed in a browser. In addition, URL commands are used for tasks such as displaying a view and opening a document.

However, in Lotus iNotes, almost all of the design elements are in a separate database called the Forms file. This is a single database, which is referred to by all mail databases. The Domino web server has special code that recognizes that you're using iNotes and uses the iNotes elements instead of the usual mail database design elements. The iNotes design elements use a tag-based language that is similar to JSP. The web server processes the tags and translates them to markup before sending the page to the web browser. For Notes mail databases, there are a couple of design elements added to the mail template that are only used by iNotes. But the majority of the design elements used by iNotes are in Forms file. Here's a diagram that shows how it all works together:


The mechanism that makes Lotus iNotes work is a couple of special items in the icon note of the mail template. These items tell the Domino server to do the special iNotes processing and also tells the server where to find the Forms file. The following table shows the icon note items:

$HaikuFlags	"1"	Enable Quickplace page generation logic
$WebHybridDb	"1"	Enable Lotus iNotes variations within Quickplace page generation
$FormsTemplateFile	"iNotes/Forms85.nsf"	DB which houses common design elements

Only a hard coded list of Forms Template File values are presently supported on the server. The following NOTES.INI setting provides a means to override:

iNotes_WA_FormsFiles=iNotes/Custom85.nsf,iNotes/Forms85.nsf,iNotes/Forms8.nsf,iNotes/Forms7.nsf,iNotes/Forms6.nsf

Ways to customize Lotus iNotes

There are several ways you can customize Lotus iNotes.

Policies

Starting in 8.5, support was added for Policies. Use the Admin client to add/update policies, the same way you would for the Notes client. In the Admin client, there is a separate iNotes tab in the Mail Policy Settings document that contains all the settings that you can use to control iNotes via policies. You can control the following with policies:

	iNotes Mail Policies	Shared mail policies	Shared Desktop policies
8.5	User UI mode Functional areas Functional area at login Maximum attachment size Mail threads Remote image display Browser cache management Logout scrubbing Allowing attachments Instant messaging features Default spell check dictionary iNotes ActiveX Enabling feeds Widget enablement Lotus Quickr™ integration Calendar subscriptions Offline settings	Mail basics Follow up Attention indicators Message recall Calendar basics Calendar display Notices Scheduling Automatic processing Rooms and resources Mail & Calendar delegation	Right double-click to close Mark documents read on preview Save sent mail Sign sent mail Encrypt sent mail Mail notification Internet mail format
Added in 8.5.1	Refresh inbox automatically Enable unread count Auto update unread count Enable scroll hints Disable warning on opening attachments Filter out images from emails Proxy servlet name/URL pairs Show sidebar on startup Show preferences Allow archiving on the server Allow local archiving	Disclaimer text Disclaimer position	Prefix each line with a char Wrap lines at a certain length

For information about policies in Lotus iNotes, see this developerWorks article.

Enable or disable components or functional areas

Starting in 8.5.1, you can use the &layout URL argument. It enables you to enable or disable components of the Lotus iNotes page and control how they are placed on the page. For more information on how to do that, see this article.

In earlier releases, there was a NOTES.INI setting called iNotes_WA_Areas, which you could use to selectively turn off the functional areas in Lotus iNotes. That will still work in 8.5 and later, but you'll probably want to take advantage of policies or the &layout argument to do that instead.

Special Forms

Lotus iNotes also provides some built-in customization points, which are in some special subforms, The subforms have names starting with "Custom_...". You can use these customization points to do things like add or remove menu items from the action bar, change view columns, add a masthead, change the logo from the Lotus iNotes logo to your own logo, and add additional fonts to the rich text editor that is used for editing mail messages and other entries. We'll go into more detail on this later.

Edit Skins and Stylesheets

To change the look of the pages in Lotus iNotes, you edit the skins and stylesheets.

Modify Forms

If you want to modify the behavior of Lotus iNotes, and the built-in customization points don't provide what you need, you can modify the main Lotus iNotes code. We'll provide a brief introduction in this article, but it's covered in more detail in other articles. See the links at the end of this article.

New Code Architecture

Before going any further, you should understand about the code infrastructure. Starting in 8.0.1, Lotus iNotes introduced a new Lite mode for low bandwidth installations. Lite mode was implemented using a completely new code architecture that uses a lot more Web 2.0 concepts like AJAX and widgets. It also included a new tabbed UI. In 8.5, Lotus iNotes started using the new "lite" code architecture for Full mode as well. Although not everything has been converted yet. All the views in Full and Lite mode use the new code architecture. But some forms, such as the document forms in Full mode are still using the older "classic" architecture. Here's a list of the forms that still use the "classic" architecture. Everything not on this list uses the new architecture.

• Full mode Calendar, Contact, To Do, Notebook entry forms
• Full mode Mail read form (for 8.5 and earlier. Starting in 8.5.1, the Mail read form uses the new "lite" architecture)
• Full mode Mail edit form (for 8.5.1 and earlier. Starting in 8.5.2, the Mail edit form uses the new "lite" architecture)
• Lite mode Calendar and Contact entry forms
• Home page
• Preferences

The thing to keep in mind when you see things in the Forms file with "Lite" in the name is that it doesn't necessarily mean that it's only used for Lite mode. It means that it's used in the new "lite" code architecture, which can be either Full or Lite mode.

Customization Subforms

As mentioned earlier, there are several customization subforms that you can use to customize Lotus iNotes. Up until 8.5.1, these subforms were in the Lotus iNotes forms file (Forms8,nsf, Forms85,nsf, etc.). Starting in 8.5.1, they have been moved to a separate file called the Extension Forms File (Forms85_x.nsf). The Extension Forms File is an optional file. If it exists on the Domino server, Lotus iNotes will read the customization forms and subforms contained in it. The Extension Forms File is not installed by default, however. You create it yourself from a provided template. That way, when you install a hotfix or newer release, your customizations are not overwritten by the new release.

Instructions on creating the Extension Forms File are in the Lotus iNotes Administrator documentation. The topic can be found in Domino and Notes info center here.

Custom_JS_Lite

The main customization form in the Extension Forms file is Custom_JS_Lite. Again, since it has Lite in the name, that means that it's used in the new code architecture. That is, for all views and some document forms. The customization form used for the "classic" architecture is called Custom_JS and it is still there. The only difference is that in earlier releases it was a form and now both Custom_JS and Custom_JS_Lite are subforms. Both subforms have more or less the same functions in them. You just need to keep in mind that if you want to customize a new architecture view or form, you use Cutom_JS_Lite and if you want to customize a "classic" form, you use Custom_JS.

The Custom_JS_Lite subform form contains JavaScript which is available with every new architecture view and form. It contains some functions you can use to do some of the things mentioned earlier, like modifying the action bar. And it's a place for you to put your own JavaScript that you want to be available on every page. Note, however, that if you need per user or per mail file formula computations, you should add that to the l_SessionInfo, f_SessionInfo, or s_SessionInfo forms instead, to avoid browser caching issues.

There are two types of functions in Custom_JS_Lite. The first type is callbacks, which are stub functions in which you can add your own code . These functions are called when certain events happen, such as when a page is submitted to the server. The other type is helper functions, which are functions that you can call from your customization code. Starting in 8.5.1, most of the helper function code has been removed from Custom_JS and Custom_JS_Lite. But they can still be called from your code. And there are comments on how to use them in Custom_JS and Custom_JS_Lite.

Here are the main callback functions and how they are used:

Custom_Scene_Actions_Lite gets called when the action bar is being built. This is where you add functions to modify action bar items. There are helper functions that you can use to add, remove, and reposition action bar items. See below for more details.

Custom_Scene_PostLoad_Lite gets called after each widget on the page gets loaded. Note that that's different from the "classic" version of Custom_Scene_Postload, which only gets called only once for each page, after the page is loaded.

Custom_Scene_PreSubmit_Lite gets called just before a page gets submitted. For example, sending a mail message.

The following are helper functions that you can call to modify the action bar. You would call them inside the Custom_Scene_Actions_Lite callback. Note that to use them, you need to un-comment this line in Custom_JS_Lite:

<InsertNotesSubForm Name=API_ActionsHelper_Subform_Lite>

addActionsLite - Add new menus or submenus to action bar

removeActionsLite - Remove menus or submenus from action bar

repositionActionsLite - Change position of menus or submenus

checkActionIDs - Display menu IDs. Call this function to display the ID that you will need to use in the calls to addActionsLite, removeActionsLite, and repositionActionsLite. Don't forget to remove it before your customizations go live.

checkActionPositions - Display menu position numbers - "classic" forms

The comments included in Custom_JS and Custom_JS_Lite subforms provide additional information on how to use the the callback and helper functions.

Other Customizaton Subforms

Custom_Welcome - Add additional web sites for Web page panel choices

Custom_JS_Edit - Add new fonts in the rich text editor

Custom_Masthead - Add a masthead at the top of the page

Custom_CSS - Add additional or override existing CSS styles

Custom_Banner_Lite - Modify the displayed logo

Editing Design Elements and Customization Subforms

You modify the above customization subforms or any other Lotus iNotes design element by editing the Forms file or Extension Forms file in Domino Designer, just as you would with any other Notes application. The forms and subforms are where you would expect them to be, in the list of forms and subforms. And images and skin elements are stored as files under Resources.

If you want to add your own HTML or image files to the Forms file or Extension Forms file, you can add them in the Resources / Files section. Then, refer to them like this in your customization code:

src="/iNotes/formsfile/image.png"

formsfile = Forms85.nsf or Forms85_x.nsf

background-image:url(@{formsfile}/imagefile.gif?OpenFileResource&MX);

formsfile = s_FF for main Forms file and s_EFF for Extension Forms file

You can also place your own files on the file system of the Domino server. Put them in this directory:

<Domino data directory>\\domino\\html directory

And refer to them like this:

src="/file.html"

Example

Here's a simple example of using the Custom_Scene_PreSubmit callback. In this example, code has been added to check the number of recipients in an email that is being sent. If there are more than four, a message pops up asking the user to confirm. If the user says no, the email is not sent.

Note that this is example customizes the "classic" mail message form. So the changes are made in Custom_JS.



In the example, you can see that if Custom_Scene_PreSubmit returns false, the submit action is interrupted. If you want normal submit processing to continue, your code should return s_SubmitAction.

You can also see that the s_SceneName parameter is used to check which form is being used. Here are some other values of s_SceneName that you may find useful:

Mail message	s_MailMemo
Mail message - Lite mode	Memo
Calendar entry	s_Appointment
To Do item	s_ToDo
Contact entry	s_Contact
Notebook entry	s_NotebookPage

The s_SubmitAction parameter is used to check which submit action is being performed. Some other values of s_SubmitAction:

h_Exit	Cancel
h_ShimmerSend	Send message
h_ShimmerSendAndFile	Send and file message
h_Jump	Save
h_TempSave	Save (without closing window)
h_SpellCheck	Spell check
h_Link	Insert link
h_Image	Insert image

Here's the same example using the Custom_Scene_PreSubmit_Lite callback in Custom_JS_Lite. You need to do it this way if you are using 8.5.2 or later, since the mail edit form is now using the new "lite" code architecture.



In the example, if Custom_Scene_PreSubmit_Lite returns true, the message is sent. If it returns false, the submit is interrupted.

For examples of modifying action bar items, see the sample code in the Custom_Scene_Actions() and Custom_Scene_Actions_Lite() callback functions. If you uncomment the code, you can see it actually working. Make sure to also enable the actions helper subforms in Custom_JS and Custom_JS_Lite. Do it by removing the NotesComment tags around the InsertNotesSubForm tags near the top of Custom_JS and Custom_JS_Lite:

<InsertNotesSubForm Name=API_ActionsHelper_Subform>

<InsertNotesSubForm Name=API_ActionsHelper_Subform_Lite>

Customizing the look of iNotes

Skins and skin groups

The iNotes page layout is defined by skins. The skins are grouped together in skin groups. Skin groups have layout files, which contain HTML that describe the page, and stylesheets, which contain CSS style definitions. Before 8.5.1, there was a separate skin group for each browser (IE, Mozilla, Safari, etc.). For 8.5.1 and later, there is only one group, with a mechanism to conditionally include sections of the stylesheet. For more information about that, see this article.

The skin files are in the main forms file (Forms85.nsf) in the Resources / Files section. The naming of the skin files is as follows: the first part is the skin group and the second part is the skin name. Example: f_ShimmerSkin-h_ListFolder

Skin group naming conventions:

l_ShimmerSkin...	Lite mode
f_ShimmerSkin...	Full mode
h_ShimmerSkin...	- "classic" forms - 8.0.x Full mode - 7.x and earlier releases

Example skin groups:

f_ShimmerSkin	For IE
f_ShimmerSkin_Gecko	For Firefox
f_ShimmerSkin_Safari	For Safari
f_ShimmerSkin_UB	Unsupported browser
f_ShimmerSkin_ACC	No longer used

And these are the stylesheets that are used:

h_StylesheetView	Used for views
h_StylesheetDocuments	Used for documents -- mail and meeting notice in Lite mode only
h_StylesheetOverride	Used for "classic" forms
h_Stylesheet	Used for things not specific to view or documents
h_StylesheetPortal	Used for WebSphere Portal

Example: f_ShimmerSkin_Gecko-h_StyleSheetDocuments

Which skin is used?

Before you modify the layout of an iNotes page, you need to know which skin file to modify. Here are the skin layout files that are used:

h_ListFolder is used for all views, unless h_SkinTypeOverride is set – by URL arg or NotesVar.

h_MailPage is used for "lite" architecture document forms.

"Classic" forms have 2 vars defined on the page to identify skin:

• h_CurrentSkinName var identifies skin group
• h_CurrentSkinType var identifies skin type:
• h_MailPage: Mail Message, Contact, Notebook Page
• h_ApptPage: Meeting, Appointment, To Do

Skin details

As mentioned, a skin file contains HTML that describes the iNotes page. Each skin contains various skin components. This makes it fairly easy to add or remove various components on the page.

Here's a sample HTML segment of a skin, showing some skin components:



You'll notice that the skin components, like Modepanel_SkinComponent_Lite, are inserted using the InsertNotesSubForm tag. This is one of the special iNotes tags that was mentioned earlier. You'll also see some skin components inserted using the QuickPlaceSkinComponent tag. In addition, you may see some elements with the "com_ibm_dwa_ui_widget_class" attribute. These are iNotes widgets, and will be discussed more later.

Finally, you'll see <v:fill> (IE) or <canvas> (Mozilla) tags in some skin files. These define gradient fills. All of the gradient fill color specifications are in one file, called dwa.properties.

One other thing to note is that iNotes uses a lot of CSS styles to position items on the page. Those styles are in classes with names like s-stack, s-basicpanel, s_toppanel. For more information about these styles, see this article.

Modifying skins

To modify the layout of an iNotes page, you edit one or more of the skin layout files that is located in the main forms file, in the Resources / Files section. If you want to modify styles or colors, you can add override styles to the subform Custom_CSS, which is located in the Extension Forms file. Look at the stylesheets in the main forms file, or use a DOM inspector to see which styles are used. To override gradient fill colors, create a dwa.properties file in the Files section of the Extension Forms file and add override color specifications there. Look at the dwa.properites file in the main forms file for the colors that you can override, and information about how to specify the colors.

Example

Here's an example of modifying the look of the iNotes page. In this example, we'll change the top area to have some slightly lighter colors and modify the iNotes logo. To do that we'll make the following changes in the Extension Forms file:

1. Update styles in the stylesheet(s). In this case, we only need to change the background color of the top-right button area. We'll override the class "s-modepanel" by adding it to the Custom_CSS subform and making the desired color change.



2. Update grad fill colors. The remaining colors in the top area are gradient fills. We'll override them by creating a dwa.properties file in the Resources / Files section, and adding the override color specifications. Note that the gradient fills are specified by sets of 4 integers: [P1, R1, G1, B1, P2, R2, G2, B2, ...] where:

Pn = percent of rectangle (0 = top. 100 = bottom)
Rn = red value
Gn = green value
Bn = blue value

See the comments in the dwa.properties in the main Forms file for more information about how to specify colors.



3. Change the logo. We'll insert a new logo by adding a "newlogo.gif" file to the Resources / Files section. And then edit the Custom_Banner_Lite subform to specify the new logo file. Note that we also need to remove the NotesComment tags around the following block of code and delete the xoffset and yoffset attributes of the IMG tag.



This example updates the look of iNotes on Firefox. To update the look for IE and/or Safari, you would make similar changes. Here's the result:

Before:



After:

Customizing Ultra-light mode

Ultra-light mode does not have a lot of customization capability like Full mode and Lite mode. But here is some basic information.

Ultra-light does not use skins. Prior to 8.5, all of the styles were in two stylesheets:

iphone.css - used for mobile devices.
standard.css - used for desktop browser (only Firefox is supported).

For 8.5 and later, the styles have been moved to forms that begin with the prefix 'm_StyleSheet'. There is one stylesheet for each type of device. Examples:

m_StyleSheet_Andriod
m_StyleSheet_Gecko
m_StyleSheet_iDevice


The layout and code are combined in subforms named m_xxx. And the images are in files named mxxx.

iNotes Web Page Construction

That covers the basic types of customization you can do using the built-in customization points of iNotes. To do more complex customization, such as altering the behavior of iNotes, you need to know a little bit more about the code architecture and how pages are constructed. The following is just an introduction. More detailed information can be found in the other wiki articles in this section.

The first thing to know is that all forms and subforms are pass-thru HTML. Special iNotes tags are used to insert skins and subforms. iNotes also uses couple of the standard Domino Web commands like OpenDocument.

Once again, remember that in 8.5, we're now using the new code architecture that was introduced for Lite mode in 8.0.1. But some forms still use the "classic" code. So for customizations, you need to figure out whether the page you want to customize uses the new architecture or still uses the "classic" architecture, so you can make your changes in the appropriate place.

Much of the code used by iNotes is in subforms. Multiple subforms are loaded as needed for each view or document. The naming convention for the subforms is as follows:

xxxCode	for IE
xxxCode_Gecko	for Firefox
xxxCode_Safari	for Safari

f_xxx	used by Full mode only
l_xxx	used by Full and Lite mode

To see the names of subforms as they are loaded, you can use the following NOTES.INI setting. The subform names will be displayed in the server console.

iNotes_WA_Debug_SubForms=1

You can also use a JavaScript debugger such as Firebug or Visual Studio to see currently loaded forms and subforms.

For "classic" forms, such as the Mail memo, Appointment, Contact, ToDo, and Notebook forms in Full mode, some standard subforms are used. "Classic" forms are loaded into an iframe, and they still work pretty much the same as they did in pre-8.5 releases. Here are the standard subforms:

<prefix>+Dictionary	Defines schema, which are all the stored fields in the form.
<prefix>+Read_Init	Contents go into the <head> portion of the HTML. Used for when document is in read mode.
<prefix>+Read	Contents go into the <body> portion of the HTML. Used for when document is in read mode.
<prefix>+Edit_Init	Contents go into the <head> portion of the HTML. Used for when document is in edit mode.
<prefix>+Edit	Contents go into the <body> portion of the HTML. Used for when document is in edit mode.

The <prefix> depends on the type of document:

• s_MailMemo
• s_MeetingNotice
• s_Appointment
• s_Contact
• s_ToDo
• s_Notebook

Example subform name:

s_AppointmentEdit_Init

Special Server-side tags

As mentioned earlier, iNotes uses several special server-side tags to construct its web pages. These use an internally developed tag language that is similar to JSP. Here is a description of some of the more important tags.

<InsertNotesSubForm Name=SubFormName>	Used to insert a subform. The name may be a computed value. Example: Name=@{...} Conditional insertion by using @If and specifying an empty string. Starting in 8.5.1, you can add your own subforms to the Extension Forms File. For subforms in the Extension Forms File, specify the "optional" attribute: <InsertNotesSubForm optional="yes" name=your_custom_subform>
<QuickPlaceSkin>	Inserts contents of skin type for current skin group.
<QuickPlaceSkinComponent Name=xxx>	Inserts contents of subform named xxx_SkinComponent. There are optional "Format" and "Argument" attributes (used by some skin components). It translates to JavaScript arg which is accessible by skin component. The "Format" attribute supports special <Item> tag to allow means of excluding some markup if tag is determined at runtime to be not displayed. Real tag contents are emitted there. Example: <QuickPlaceSkinComponent Name="Logout" Argument="0" Format={<td class="s-toptoolbar-text s-toptoolbar-bg-middle" nowrap><Item></td>}>
<NotesField Name=ItemName>	Defines a persisted field. Attributes: - Type=Text|TextList|RichText|Mime|Number|NumberList| Time|TimeList - InitialValue=xxx (Evaluated if item doesn’t exist within document) - Value=xxx (Evaluated as page is generated and as page is saved) - includeif={@formula} (For conditional inclusion)
<NotesVar Name=ItemName>	Defines a computed for display only item. Same attributes as NotesField.
<NotesDictionary>…</NotesDictionary>	NotesField and NotesVar tags must go into a NotesDictionary block
<NotesComment>…</NotesComment>	Block that contains content that should not be emitted back to the client with any responses
@{….}	Computed text. Domino Web-based formula may be specified within this tag. May also run output through special filters: - jsdata: JavaScript String data (apostrophes are escaped) - html: valid html data - xml: valid xml data Example: haiku.CalendarProfileOwnerName = '@{{@Name([Canonicalize]; @GetProfileField("calendarprofile";"Owner"))};jsData}';

In addition to the @ block, there is also the special iNotes @DBCommand. This is used to invoke various iNotes-specific server commands:

@DbCommand("Haiku";"<command name>" [;"Arg1";"Arg2";…])

Some key commands:

h_Vars

Emits all non-system items in document as JavaScript vars with values. Optional Args: - Arg1: UNID of document in current DB being processed (Current document if not specified) - Arg2: prefix string (string to prepend to each item…useful if desire to put items as properties of another JavaScript object) (default: "var ") - Arg 3: "1" = emit all items on current note (default). "0" = emit only if specified in a NotesDictionary block

h_RunAgent

Runs specified agent (which can contribute to page output) Required Args: Arg 1: Name of agent Optional Args: Arg 2: Common agent -- "0" = agent is in current DB being processed (default). "1" = in Forms file; "2" = in Extension Forms file (available starting in 8.5.2) Arg 3: Empty context – "1": run agent in empty context; "0": in context of note specified by url (default)

Some examples of defining NotesFields and NotesVars:

Create a persisted field	< NotesField Name=“Subject” Type=Text>
Create a field with an initial value	< NotesField Name="From" Authorfield="Yes" Initialvalue={@UserName(0)}>
Create a display field with a value from a profile doc	< NotesVar Name=EnableSignature Type=Text Value={@GetProfileField("calendarprofile"; "EnableSignature")}>
Create a display field with a value from an @DBCommand	<NotesVar Name=NotesAgentIsEnabled Type=Text Initialvalue={@DbCommand("haiku"; "s_IsAgentEnabled"; "OutOfOffice")}>

Starting in 7.0, many of the @DBCommands that call formulas were migrated into "dwa" tags. They call the required function on the server directly, without invoking the formula evaluator. They are specified in standard XML. The definitions are in the dwa_tags form in the main Forms file.

Example definition:

<tagdefinition name="getvars" outputformat="jscript">
<description>Provide access to the h_Vars functionality. </description>
<argument type="text" optional="yes" name="unidstring" />
<argument type="text" optional="yes" name="prefixstring" />
<argument type="text" optional="yes" name="includeall" value="1" />
<bodyfunction namespace="haiku" builtin="h_Vars" />
</tagdefinition>

Example usage:

<dwa:getvars includeall="0" />
<dwa:getvars unidstring="{ComputedItemContainingUnid}" />

QueryOpen/QuerySave Agents

Similar to other Domino applications, iNotes supports QueryOpen and QuerySave Agents. They are enabled by setting the following NOTES.INI setting:

iNotes_WA_QueryAgents=1

To enable them, set one or both of the following NotesVars on the page:

$$QueryOpenAgent
$$QuerySaveAgent

For more information about using these agents, see this developerWorks article.

iNotes Widgets

With the new code architecture in 8.5, iNotes uses a lot more widgets. Some are Dojo widgets, such as those that are displayed in the right sidebar. But there are a lot of internally developed widgets, called iNotes widgets. So, in addition to skin components, some elements that you see on the page are iNotes widgets. Widgets are different from skin components in that the content is generated by the client code, as opposed to sever side for skin components. They also can be lazy loaded, which helps with performance.

You can customize existing iNotes widgets, or you can create your own. For more detailed information about iNotes widgets syntax, check this article.

Briefly, there are UI and non-UI widgets. UI widgets have a root element (usually <div>) and have the attribute "com_ibm_dwa_ui_widget_class". The widget code is in the l_JSBase subform or subforms included by l_JSRead and l_StdPageOperations forms.

To customize a widget, add code to Custom_Scene_PostLoad_Lite callback function. Example:

Debugging Tools

There are some tools available that you can use to examine the elements on the iNotes page and to view and debug the iNotes JavaScript code. Here's a list of some DOM inspectors and JavaScript debuggers:

Firefox	Venkman Firebug
IE	Visual InterDev Visual Studio Developer Toolbar
Safari	Web Inspector

One thing to note when you're looking at code in a debugger is that the JavaScript is obfuscated. That means that many of the functions and variables have short 2 or 3 letter names and white space has been removed. That's to reduce the number of bytes that have to be sent over the network to the browser.

Unfortunately, that makes it hard for you to read the code. To make it a little easier, the obfuscation table that is used to translate the original function names into the short names is available in the Forms file. It is called ObfuscationList.txt and is located in the Resources / Files section.

More information

For more information about the new "lite" architecture, see this article.

For an in-depth example of manipulating data with the "classic" architecture see this article.

For an similar example of manipulating data using the "lite" architecture, see this article.

Also check out the other articles in this section of the Lotus Notes and Domino wiki.

For questions on customization of iNotes in 8.5, you can use the Notes/Domino 8.5 Forum on developerWorks.  Post questions in the iNotes / Customization section.

Finally, please note that IBM does not formally support customized Lotus iNotes forms files. See here for the IBM Support policy for customization of Lotus iNotes.