Portalizing Domino content with Javascript
This article is a quick how-to on using some javascript functions to combine multiple design elements (pages, forms, views) on to one web page. A common use for the concept is to provide a view of several things simultaneously in a portal.
The approach I've taken is to make a function that loads some content into a div element. The content is either html (form/page/agent output) or a view (xml that gets converted to a table). So I create a div on a form or page and assign a unique id to it. Then call the function that loads the data into the div. It's the way that I load the two collapsible sections on the home page of this site
There are three steps
- Add pass-thru html to position and define the div
- Call a function to create the portal
addPortal( "AdminPane", "vw",
"/portaldata/adminDocs.nsf/(portal)?ReadViewEntries&Preformat&Count=5",
"_blank", "Administration", "b0b0b0", [1,2]);
- Call a function to load the portal.
if ( window.isAdmin ) {
loadPortalDiv( "AdminPane" );
}
The addPortal function
This function takes 7 parameters. They are
div – the element into which the portal should be loaded
type – vw or htm. vw is for loading views. htm is for loading pages or other
elements.
url – the url of the resource. I added a server-side proxy for resources on other servers
target - the target into which the link opens
title - text content that displays in the title of the portal
title background color - background color of portal title
columns to display - array of integers representing the columns to display and the
order in which to display them.
The loadPortalDiv function. This function loads the data into the div.
It takes the name of the target div as a parameter.
Examples
To load 50 docs in a div from the 'My Docs' view, you'd use:
addPortal( "MyDocsDiv", "vw",
"/portaldata/adminDocs.nsf/MyDocs?ReadViewEntries&Preformat&Count=50",
"_blank", "My Documents", "990000", [1,2]);
That will show the 2nd and 3rd columns of the view in a portal with a red title stating
"My documents". The div will be loaded in the "MyDocsDiv" element. And the links will
open in new windows.
To show a page called PersonalData in a div called myinfo, you'd use:
addPortal( "myinfo", "htm",
window.dbUrl + "/PersonalData?OpenPage", "",
"My Personal Info", "af4402", null
);
That’s it!. To see a simple example of it in action, check out the homepage of this site.
You can download the files here.