iNotes 8.5. full mode introduces an advanced sidebar, located on the right of the application, which attempts to mimic the sidebar experience of the 'thick' Notes client. The right sidebar is a customized Dojo widget and it is commonly used to display the Day At A Glance, Help, and Sametime panels.
Administrators can customize the Forms85.nsf database to insert their own custom sidebar panels. This article describes how to insert sidebar panels into the Dojo sidebar.
iNotes 8.5. does not currently offer a customization point to insert sidebar panels. However, this customization point is being considered for future releases. For this customization, administrators must edit the Forms85.nsf database (typically located in the data\iNotes directory) to insert and leverage custom code provided below. A working knowledge of JavaScript(TM) and CSS is highly recommended in order to perform and understand this customization.
Note: At this time, we cannot 'close' custom sidebar panels, which means that any panels injected will remain in the sidebar throughout a user's iNotes session.
The following example will insert the 'Contacts' portlet into the sidebar.
Step 1. In Domino Designer, open the Forms85.nsf file
.
Step 2. Open the
Shared Resources > Subforms section.
Step 3. Open the "Custom_JS_Lite" subform.
Step 4. Navigate to the "Scene_Postload_Lite" function.
Step 5. Replace the Scene_Postload_Lite function with the code below. This code listens for the sidebar widget to be invoked. Afterwards, it calls a custom JavaScript method named
invokeCustomSidebar.
function Scene_PostLoad_Lite( s_SceneName, bInEditMode ){
if (s_SceneName.indexOf('e-sidebar-list:FPP')!=-1)
invokeCustomSidebar();
}
Step 6. Navigate to the bottom of the 'Custom_JS_Lite' subform and copy and paste the following code.
This code creates the wrapper function
addDojoPanel which leverages the obfuscated insert sidebar panel method in iNotes.
Note: The various parameters are explained in the <NotesComment> tag.
<NotesComment>
// Allows a user to add a panel to the iNotes side bar
//
// Parameters:
// sID - A unique id for this panel
// sPanelTitle - The title of the panel
// sCoords - The coordinates of the image to be used from basicicons.gif
// oHtmlElement - A handle to the HTML element that
// contains the content you wish to display in the panel
// nPos - The numerical order where the panel will be injected.
// Zero (0) will insert the panel at the top of all other panels.
//
</NotesComment>
function addDojoPanel(sId,sPanelTitle,sCoords,oHtmlElement,nPos){
var oWidgets = EKc;
var oSidebar = oWidgets==null? null : oWidgets.prototype.EYl['e-sidebar-list:FPP'];
var oSidebarIcons = oSidebar ? oSidebar.FOJ : null;
//If no icon is defined, use a default icon
if (oSidebarIcons && !oSidebarIcons[sId])
oSidebarIcons[sId]= sCoords == null ? "-100px -40px" : sCoords;
if (oSidebar && oSidebar.sr)
oSidebar.sr(sId,sPanelTitle, oHtmlElement,{},nPos);
}
Step 7. After inserting the
addDojoPanel method, insert the
invokeCustomSidebar method directly below it in the same subform. This method will invoke another custom method named
addContactsPanel. If you need to load multiple panels, each method call should be placed inside of this function.
For this example, the method is executed 5 seconds after the sidebar has loaded. However, you can remove this timeout and invoke
addContactsPanel directly.
function invokeCustomSidebar(){
//Invoke after 5 seconds
setTimeout("addContactsPanel()",5000);
}
Step 8. Next, insert the
addContactsPanel method below the
invokeCustomSidebar method.
function addContactsPanel(){
//Handle To Sidebar Widget
var oSidebar = EKc.prototype.EYl['e-sidebar-list:FPP'];
var oSidebarIcons = oSidebar ? oSidebar.FOJ : null;
//Handle to Document
var oMainDoc = AAA.EcK;
if (oSidebar && oMainDoc){
var oDiv = oMainDoc.createElement('div');
oDiv.style.position="relative";
oDiv.style.width="100%";
oDiv.style.height="100%";
var oIFrame = oMainDoc.createElement('iframe');
oIFrame.style.height="100%";
oIFrame.style.width="100%";
oIFrame.setAttribute("frameborder",0);
oIFrame.setAttribute("scrolling","auto");
oIFrame.style.overflow="hidden";
oDiv.appendChild(oIFrame);
var sId="ContactsPanel";
//Use the contacts icon from basicicons.gif
var sCoords = "-60px -40px";
//Invoke the wrapper
addDojoPanel(sId,"Contacts",sCoords,oDiv,0);
//Set the iFrame Source, this iniates the http transaction
var sNSFPath = AAA.MO;
oIFrame.src=sNSFPath+"/iNotes/Contacts/?OpenDocument&PresetFields=h_SkinTypeOverride;h_Blank&ui=classic";
}
}
What is this method doing?
The
addContactsPanel method is specific to this customization and can be interchanged with an administrator's custom method. However, all custom javascript should be remain inside the Custom_JS_Lite subform.
The
addContactsPanel method creates a container <div> and then inserts an <iframe> into the container. The iframe is the content of the panel and contains the URL to the contacts portlet. The iframe element can be replaced with any standard HTML element and that element will become the content of the sidebar panel.
Afterwards, this method inserts the container <div> into the sidebar as the 'panel' using the
addDojoPanel method.
Important Notes: It is recommended that you wrap the content element in a container <div> to prevent a user's resizeable content from affecting other sidebar panels. Also, the container <div> must have the CSS position attribute set to relative in order for it to display correctly.
The sidebar panel also displays an icon beside the title of the panel. This icon is generated by using the coordinates of an image located in the consolidated image basicicons.gif. For this example, the contacts panel uses the icon located at x-y coordinate -60px -40px as shown below by the blue rectangle.
The
addDojoPanel method is then invoked with the unique id of the panel, the title of the panel, the coordinates of the icon from basicons.gif, the container <div> and the position of the panel.
addDojoPanel(sId,"Contacts",sCoords,oDiv,0);
The iframe's source is set last because the frame will begin to load once the "src" attribute has been assigned.
Step 9. Save the Forms85.nsf file and update the server by using one of these methods:
1. Flush iNotes Forms Cache (
tell http inotes flushforms)
2. Copy and paste the Forms85.nsf into the data\iNotes directory
3. Refresh the browser (No http reload necessary)
or
1. Stop the http server (
tell http quit)
2. Flush the forms cache (
dbc flush)
3. Copy and paste the Forms85.nsf into the data\iNotes directory
4. Load the http process (
load http)
Step 10. Log in as a user on the server and click the
Show 
button in the upper right to show the sidebar.
Once the sidebar is loaded, approximately 5 seconds later, the contacts panel should appear.