This article provides information for using JavaScript™ to create, view, edit, and remove documents in an IBM® Lotus® Domino® application. It also provides a general introduction to JavaScript in XPages and shows you where and how to attach JavaScript in the XPages user interface.

Share:

Robert Perron, Technical Writer, IBM Corporation

Robert Perron is a technical writer with IBM Lotus in Littleton, Massachusetts. He has developed documentation for Lotus Notes and Domino since the early 1990s with a primary concentration on programmability. He developed the documentation for the LotusScript and Java Domino Objects and co-authored the book 60 Minute Guide to LotusScript 3 - Programming for Notes 4. He has authored several articles for LDD Today (developerWorks) and The View. He has currently turned his attention to XPages.



12 January 2010

Also available in Chinese Russian Japanese Portuguese

Editor's note: Know a lot about this topic? Want to share your expertise? Participate in the IBM Lotus software wiki program today.

Introduction

XPages development generally relies on two legacy design elements: forms to define data and views to report data. They, however, are not an absolute requirement. You can use JavaScript to move data between controls and the Lotus Domino data store. The JavaScript is not difficult.

You might not want to take the JavaScript approach for these reasons:

  • Forms and views allow you to visually define complex structures.
  • After the necessary forms and views are put together, development proceeds quite nicely. For example, binding a field on a form to a control on an XPage is simply a matter of dragging the field into the control.
  • If you are putting XPages into an existing IBM Lotus Domino Designer application, you might want to leverage the existing forms and views.

But if you are new to Lotus Domino Designer, form and view design poses a learning curve. Even if you know Lotus Domino Designer, forms and views require that you to go outside the XML paradigm. You find yourself dealing with @functions and LotusScript®.

This article provides information for using JavaScript to create, view, edit, and remove documents in an IBM Lotus Domino application. It shows you how to tie the data from these documents to controls on the XPage.

This article also provides a general introduction to JavaScript in XPages. What empowers JavaScript in XPages is access to an extensive library for easy manipulation of the user environment and the back-end data store. If you are familiar with LotusScript, you know about NotesSession, NotesDatabase, NotesDocument, and the many other Domino Objects. These same objects are available to JavaScript, but their employment in the source code is simpler.

Finally, this article shows you where and how to attach JavaScript in the XPages user interface (UI). You can use JavaScript to return a value, for example, for a computed field. You can attach JavaScript to an event, for example, the onclick event of a button. You can use JavaScript to define a property, for example, true or false for the Visual property of a control.


Hello world

Launch Lotus Domino Designer and create an application. Under the application's name on the left (the navigator), right-click XPages and select New XPage. Name the XPage main and click OK. This action displays an editor in the middle of the page and a set of controls on the right. If the controls are not there or for some reason you close that tab, you can get the controls back by selecting Window - Show Eclipse Views - Controls.

For the first design operation on this new page, drag a Computed Field from Controls (you might have to scroll down) to the center palette. Alternatively, you can double-click Computed Field, and it displays in the editor. With focus on the computed field and the Properties tab selected, your window should look something like figure 1.

Figure 1. XPage with Computed Field control
XPage with Computed Field control

Click to see larger image

Figure 1. XPage with Computed Field control

XPage with Computed Field control

Now let's set a value for this computed field. Select Value (under Properties) and select JavaScript. It is possible to type a script directly into the window that displays, but let's click the Open Script Dialog button to the right of the window as shown in figure 2.

Figure 2. Selecting JavaScript to set a value
Selecting JavaScript to set a value

Notice the global objects on the left side of the script editor as shown in figure 3. (If Reference is not selected, select that tab. If Global Objects is not selected, select it from the drop-down menu under Libraries.) Scroll down the list and double-click session. It displays in the editor. Type a period and wait a second. A list of methods displays Scroll down and double-click getCommonUserName(): string.

Figure 3. Content assist for session global object
Content assist for session global object

The global objects are entry points to the object hierarchy available to XPages JavaScript on a Lotus Domino server. The session object gives access to the Lotus Domino session and its underlying objects. Open session under Reference on the left as shown in figure 4. You see the same methods that you saw in the editor when you typed the period after session.

Figure 4. Expansion of session object in Reference pane
Expansion of session object in Reference pane

Click to see larger image

Figure 4. Expansion of session object in Reference pane

Expansion of session object in Reference pane

Now from the drop-down list under Libraries, select Domino. Scroll down and open NotesSession. Again, you see the same list as shown in figure 5. The session global object is, in fact, a Lotus Domino NotesSession object for the current user.

Figure 5. Expansion of Domino NotesSession object in Reference pane
Expansion of Domino NotesSession object in Reference pane

Click to see larger image

Figure 5. Expansion of Domino NotesSession object in Reference pane

Expansion of Domino NotesSession object in Reference pane

Make adjustments to the code so that it looks like this:

return "Hello " + session.getCommonUserName()

The return keyword is implicit so the code can also be written as follows:

"Hello " + session.getCommonUserName()

Close the script editor and save your edits by clicking OK.

You can preview your handiwork by selecting Design - Preview in Web Browser (or the Preview in Web Browser shortcut) and selecting a browser. (You must first add Anonymous to the application's ACL with at least author privileges.) For preview, Lotus Domino starts a miniserver on your computer.

The URL of the page being previewed is of the form http://localhost/foo.nsf/main.xsp. You can type this URL directly into a browser if you have previously previewed and if Lotus Domino Designer is still running because the miniserver has to be running. If your application is on a Lotus Domino server, use the server name, not localhost.

As of Lotus Domino Designer 8.5.1, you can also select Design - Preview in Notes (or the Preview in Notes shortcut).

To set up your application to launch in Lotus Notes® with an XPage, select Application Properties at the bottom of the navigator. When the application properties display, select the Launch tab. Set the Launch option to Open designated XPage (Standard client) and specify the XPage.

You will see later how to go from one XPage to another after the application is launched. If you are in a non-XPage design element, you can apply a Lotus Notes URL of the form shown in the following formula (this sample is an action in a view).

@URLOpen("notes:///foo.nsf/main.xsp?OpenXPage")

On a server, insert the server's name like this:

@URLOpen("notes://myserver/foo.nsf/main.xsp?OpenXPage")

There is one more item of interest before you dive into the data. At the bottom of the editor, select Source as shown in figure 6. The XML that defines your XPage### displays. You can edit the XML directly, instead of working in the visual editor. Select Design to go back to the visual editor.

Figure 6. Source XML for an XPage
Source XML for an XPage

Hello data

Let's put another computed field on the XPage below the first one. Press Enter, and then double-click or drag over another Computed Field control. Click Value under Properties, click JavaScript, and click the Open Script Dialog button.

Once again, you are in the script editor. You do not have to open the script editor. As previously mentioned, you can edit a script in the window under the JavaScript button as shown in figure 2. You can also edit the script in the XML by using the Source tab. The script editor, though, provides more room and has Reference and Outline tabs on the left.

Scroll down under Global Objects on the Reference tab and double-click database as shown in figure 7. When it displays in the editor, type a period after it and wait for the list of methods to display. Here is another very useful global variable. It creates a NotesDatabase object for the current database, that is, the application containing this XPage.

Figure 7. Content assist for database global object
Content assist for database global object

Double-click getAllDocuments(): NotesDocumentCollection. Typing another period displays the list of methods that belong to the NotesDocumentCollection object, one of which is getCount(): int. Double-click that method and type another period. This time, the list of methods is for the String class, which is in the Standard library. Double-click toFixed(): string. At this point your script reads:

database.getAllDocuments().getCount().toFixed()

This script gets a count of all the documents in the current database as a string. Modify the script so that it looks like this:

return "Number of documents in database: " + database.getAllDocuments().getCount().toFixed()

Click OK, save, and preview. For a new application, the preview shows zero documents in the database.

For your information (not part of the sample application), here is the code that gets the number of documents in a specified database. The first parameter to session.getDatabase is the name of a server where null means the local system. The second parameter is the name of the application relative to the Lotus Notes data directory.

return session.getDatabase(null, "fooA.nsf").getAllDocuments().getCount().toFixed()

And listing 1 shows the code that gets the names of all the NSF applications in the local Lotus Notes directory. The object returned by session.getDbDirectory is of type NotesDbDirectory. Its getFirstDatabase and getNextDatabase methods return objects of type NotesDatabase.

Listing 1. Code to get the names of all NSF applications
	var list = "";
	var dir = session.getDbDirectory(null);
	var db = dir.getFirstDatabase(1247); // 1247 = type DATABASE
	while (db != null) {
		if (!list.isEmpty()) list = list + ", ";
		list = list + db.getFileName();
		db = dir.getNextDatabase();
	}
	return list

Creating a document

The first task in creating a document is getting the user data from the XPage. Let's create two fields for that purpose, one a string and one numeric.

  1. Create a 2-by-2 table. Look for the Table control under Container Controls.
  2. In the first column, put Label controls whose labels say subject and number.
  3. In the second column put Edit Box controls.

The visual editor should look something like the one shown in figure 8.

Figure 8. Edit boxes for subject and number
Edit boxes for subject and number

The idea of an edit box, of course, is to allow users to type something in. But how do you access this data? If you were backing up the XPage with a Lotus Domino form, you would bind each edit box to a field on the form. This approach is covered briefly at the end of the article. For programmatic purposes, you will bind each field to a global variable.

Put focus on the first edit box, then select Data under Properties. Select Advanced. From the drop-down list, select Scoped Variable. In the Parameter field, select Request Scope from the list. Finally, invent a variable name. Let's call this variable subject. See figure 9.

Figure 9. Binding a field to a scoped variable
Binding a field to a scoped variable

This variable is available to the page when the server processes the page upon URL request. It loses scope and releases memory when the server finishes processing the URL request. From the drop-down list you can see that there are four types of scoped variable. In decreasing order of scope they are Application Scope, Session Scope, View Scope, and Request Scope.

In a similar manner, bind the second edit box to a Request Scope variable named number. You must make one additional specification here. It is crucial that you change the display type to Number because you want to treat this input as numerical data. See figure 10.

Figure 10. Binding a field to a scoped variable of type Number
Binding a field to a scoped variable of type Number

Click to see larger image

Figure 10. Binding a field to a scoped variable of type Number

Binding a field to a scoped variable of type Number

Now let's get down to the business of creating a document. It is not difficult!

Place a Button control below the edit boxes. Change the label to Create document.

Select the Events tab. On the left are the events that can be used with this control. You want onclick, which is highlighted by default. Then select Script Editor and make sure that the Server tab is selected (it is by default). See figure 11.

Figure 11. Specifying an event for a button
Specifying an event for a button

You can enter the script directly in the window or click the Open Script Dialog button on the right. That action brings up the modal script editor with the reference tab on the left.

Listing 2 shows the script.

Listing 2. JavaScript for creating a document
	var doc = database.createDocument();
	doc.replaceItemValue("subject", requestScope.subject);
	doc.replaceItemValue("number", requestScope.number)
	doc.save();
	requestScope.subject = null;
	requestScope.number = null

The first line creates a NotesDocument object. The next two lines populate the object with item values based on the global variables bound to the edit box controls. Notice that the specification is the scope followed by a period followed by the name of the variable. The expectation is that users have entered values in those boxes. Notice also that subject and number are in quotes. These are your invention and provide names for the items in the document. Nothing happens in the data store until the save method executes. Finally, the scoped variables are cleared so that the old values do not show up in the UI and do not interfere with future events.

Save and preview the page. Enter a subject and number, and then click Create document. Clicking the button causes a URL with the page information to be sent to the Lotus Domino server (or the miniserver in the case of preview). The server processes the event code and sends a revised page back to the browser (or the Lotus Notes client). As you try it a few times, you can see the document count increment.


Viewing documents

Seeing the document count increment, you know something is going on there. Getting some detail would be helpful. The common method for viewing data in legacy Lotus Domino is with the View design element. XPages has a view control that incorporates a view design element. You, though, are going to use the data table control and a little JavaScript.

Place focus under the button. From Container Controls double-click or drag over a Data Table control. Under Properties select JavaScript and enter a script that returns a collection of documents. A second important specification in this example is the collection name, rowdoc, that you provide. See figure 12.

Figure 12. Specifying a Data Table control
Specifying a Data Table control

Click to see larger image

Figure 12. Specifying a Data Table control

Specifying a Data Table control

The data table acts on the specified collection. This example returns a collection of all documents in the database. There are many ways to modify the collection programmatically, including full-text search, to return a subset of documents.

Right-click inside the data table, and then select Insert Column or Append Column. Notice that the column that displays has three rows. The top and bottom rows are static in nature and contain one copy of whatever you put there. Use the top row for a header; insert a Label control whose label is subject.

The middle row is essentially a Repeat control. Repeat controls are valuable. In the case of a data table, the Repeat control provides a variable number of rows depending on the number of objects in the base collection. Each row acts on one member of the collection. This example uses a NotesDocumentCollection of all the documents in the current database. Each member of the collection is an object of type NotesDocument. Remember the collection name rowdoc? This name points to the NotesDocument object associated with the current row, that is, the row that the user is on.

Place focus in the middle row. From Core Controls, double-click or drag over a Computed Field control. Under Properties select Value. For the value, select JavaScript and enter a script. The script uses the getItemValueString method of rowdoc (a NotesDocument object as mentioned before) to get the value of the subject item. See figure 13.

Figure 13. Specifying a value for a repeating row
Specifying a value for a repeating row

An aside here on content assist: Unfortunately, typing a period after rowdoc does not bring up a list of methods because the editor does not know the type of rowdoc. You must take care to enter the method names precisely using the reference pane or the documentation. In the reference pane, you can double-click to make a method display in the editor. Alternatively, you can apply a hack to force content assist to work by first entering a benign line of code that identifies the type. In the code below, content assist knows rowdoc is of type NotesDocument and brings up its methods.

rowdoc:NotesDocument == null;
return rowdoc.

A preview shows a table with one column, subject as the column head, and a row containing the subject value for each document in the current database.

Place focus in the data table (not the column), right-click, and select Append Column. Follow the same process as previously to create a column for the number item. This time the script for the computed field is as follows:

return rowdoc.getItemValueDouble("number")

Finally, add a third column to display the modification date. The script here is:

return rowdoc.getLastModified()

A preview now shows three columns with subject, number, and last modification date.


Editing and deleting

Let's provide a way to edit existing documents.

Append another column to the data table. Double-click or drag over a Button control to the middle row, and make its label edit. Select the Events tab, make sure onclick and the Server tab are selected, and select Script Editor. Enter the following script:

sessionScope.docUnid = rowdoc.getUniversalID();
requestScope.subject = rowdoc.getItemValueString("subject");
requestScope.number = rowdoc.getItemValueDouble("number")

This code sets global variables to the value of the universal ID of the document plus the values of the two items. A sessionScope variable is needed for the universal ID because its use spans two requests.

The last two variables are bound to the edit boxes. When users click the edit button, a URL goes to the Lotus Domino server. The server sends back a page with the two edit boxes populated with the values from that row of the data table. Users can edit this data. In figure 14, the user has just clicked the edit button for the second row.

Figure 14. Getting a row of data for editing
Getting a row of data for editing

Click to see larger image

Figure 14. Getting a row of data for editing

Getting a row of data for editing

You now need a button to do the replacement. Place this button next to the Create document button, and label it Replace document. You can copy and paste the Create document button to get started. For its onclick event, use the JavaScript code in listing 3. This code is the same as for the Create document button except for the first line, which gets an existing document using its universal ID rather than creating a document.

Listing 3. JavaScript for replacing values in a document
	var doc = database.getDocumentByUNID(sessionScope.docUnid);
	doc.replaceItemValue("subject", requestScope.subject);
	doc.replaceItemValue("number", requestScope.number)
	doc.save();
	requestScope.subject = null;
	requestScope.number = null

You also want to supply a Cancel button with code as follows. It blanks the edit boxes without making any changes in the database.

requestScope.subject = null;
requestScope.number = null

Optionally, for better usability, add the following line of code to the onclick event for the edit button.

sessionScope.editMode = true

And add the following line of code to the onclick event for the Replace document and Cancel buttons.

sessionScope.editMode = false

This addition makes the editMode global variable true only when users are editing. Otherwise, it is uninitialized or false. Now go to the properties for the three buttons above the table. Go down to the Visible property. Click the diamond, and then select Compute value. For the Create document button, use the following script:

sessionScope.editMode != true

For the Replace document and Cancel buttons, use this script:

sessionScope.editMode == true

Now when users go into the document only the Create document button is visible. When users click the edit button, the Create document button disappears and the other two buttons display.

Removing a document is simple. Append another column, and place a button in the middle row. Label the button remove. For its onclick event, use the following code:

rowdoc.remove(true)

The code that you've looked at so far is all server-side. The code executes after the browser or Lotus Notes client passes the page to the server. The JavaScript is standard with few exceptions, but it does have access to additional libraries, in particular, the library of Domino Objects.

You can also provide client-side JavaScript. This code executes on the browser or Lotus Notes client before the page goes to the server. The JavaScript is standard for the client that you are using and has access to the standard Web DOM.

You can provide both server-side and client-side scripts for the same event. The client-side script can prevent execution of the server-side operation by returning false.

In this sample application, you can use a client-side script to confirm the removal of a document. Once again, go to the onclick event for the remove button. You already have server code there. As shown in figure 15, select the Client tab, select Script Editor, and enter this code:

return window.confirm(“Do you really want to delete this document?”)

Figure 15. Client-side code for an event
Client-side code for an event

When users click the button, the client-side script displays a confirmation window. Clicking OK returns true, and the server-side script executes. Clicking Cancel returns false, and the server-side code does not execute.


Using multiple pages

Let's address the more typical scenario in which users submit data from separate pages. Before you start, you might want to make a copy of the main XPage.

Create an XPage named create. Cut the 4-by-4 table with the edit boxes from the main XPage, and paste it into the create XPage. Copy (don't cut) the Create document and Cancel buttons from main, and paste them into the create XPage. On the create XPage, put focus on the Create document button and change its label to Submit. For both buttons, change the Visible property so that they are always visible. See figure 16.

Figure 16. XPage for creating a document
XPage for creating a document

The edit boxes are correct as they are, but the button code must be adjusted. Open the script editor for the onclick event for the Submit button. The first four lines, which create the document, work the same. The two lines that blank out the edit boxes are not needed because you are going to leave this page. Finally, a line has to be added to take users back to the main page. The code looks like listing 4.

Listing 4. JavaScript for creating a document and opening another page
	var doc = database.createDocument();
	doc.replaceItemValue("subject", requestScope.subject);
	doc.replaceItemValue("number", requestScope.number)
	doc.save();
	context.redirectToPage("main")

The context global object is of type XSPContext in the XSP library.

For the Cancel button, you want to remove the existing code and replace it with the last line from the Submit script. That is, you want to take users to the main page. But another way to do this task is with a simple action. Go to the onclick event for the button. Select Simple Actions (click OK if you get a warning) and then Add Action. In the window that displays, make sure that the Action is Open Page; select it from the drop-down menu if necessary. For the name of the page to open, select main on the drop-down menu. Then click OK. See figure 17.

Figure 17. Simple action for opening another page
Simple action for opening another page

For your information, there is a third way to go back to main. Set the button to be of type Cancel and remove any event code. Select the Properties tab for the page and set Next page (if update fails) to main.

Now go back to the main XPage and put focus on the Create document button. Remove the code for the onclick event. (Be sure to remove the code before proceeding.) With this button you want to go to the create XPage. You can use JavaScript with this code.

context.redirectToPage("create")

Or you can use a simple action.

Preview the page. Click Create document. Type some data. Try the Submit button. Try the Cancel button.

Next, create an XPage called replace. Copy everything from the create XPage, and paste it into replace. For this page, you must change the binding for the edit boxes to sessionScope variables because the data is passed across requests.

The Submit button must be tweaked. Rather than creating a document, you want to get an existing document using a universal ID set on the main XPage. And the global variables must be changed to sessionScope. After using the sessionScope variables, null them out as shown in listing 5.

Listing 5. JavaScript for replacing values in a document and opening another page
	var doc = database.getDocumentByUNID(sessionScope.docUnid);
	doc.replaceItemValue("subject", sessionScope.subject);
	doc.replaceItemValue("number", sessionScope.number);
	doc.save();
	sessionScope.subject = null;
	sessionScope.number = null;
	context.redirectToPage("main")

Back on the main XPage, change the edit button to use sessionScope variables to set the current item values and open the replace XPage as shown in listing 6.

Listing 6. JavaScript for opening a page to edit an existing document
	sessionScope.docUnid = rowdoc.getUniversalID();
	sessionScope.subject = rowdoc.getItemValueString("subject");
	sessionScope.number = rowdoc.getItemValueDouble("number");
	context.redirectToPage("replace")

You now have three pages: main, create, and replace. Users open the application to main. Clicking the Create document button sends them to the create page with blank edit boxes. A submit or cancel action sends them back to main. Clicking the edit button sends them to the replace page with filled-in edit boxes. Again, a submit or cancel action sends them back to main.


Rich text

Rich text requires special attention. You cannot simply set and get variables. If you do not immediately understand the code in this section, you can use it as a recipe.

On the create form, drag over or double-click a Rich Text control below the edit boxes and above the buttons. Adjust its size as desired. Select the Data tab under properties, select Advanced, and bind the control to a Request Scope variable named body.

Go to the onclick event for the Submit button. Adjust the script to read as shown in listing 7. The new code starts on line 4 with the creation of a NotesStream object and ends on line 8 with the closing of that object. The requestScope.body global variable, bound to the rich text control, is of type com.ibm.xsp.http.MimeMultipart. Its getHTML method gets the content of the rich-text control as XML. You then create a rich-text item in the back end as a NotesMIMEEntity object and use the XML content from the control to set its value. The NotesStream object is needed as an intermediary.

Listing 7. JavaScript for creating a document with rich text
	var doc = database.createDocument();
	doc.replaceItemValue("subject", requestScope.subject);
	doc.replaceItemValue("number", requestScope.number)
	var stream = session.createStream();
	stream.writeText(requestScope.body.getHTML());
	var entity = doc.createMIMEEntity("body");
	entity.setContentFromText(stream,"text/html;charset=UTF-8", 1725);
	stream.close()
	doc.save();
	context.redirectToPage("main")

To get data from the back end to a rich-text control, you can use the getContentAsText method of NotesMIMEEntity. On the replace page, add a Rich Text control below the edit boxes as on the create page, but bind it to a sessionScope variable named body, not a requestScope variable. On the main page, go to the onclick event for the edit button. Adjust the code so that it reads as shown in listing 8. The new code is on lines 4 through 6. You get the rich-text document from the back end as a NotesMIMEEntity object, then use its getContentAsText method to set the value of the rich-text control. The copy on line 6 is needed later on the replace page for a comparison.

Listing 8. JavaScript for opening a page to edit an existing document containing rich text
	sessionScope.docUnid = rowdoc.getUniversalID();
	sessionScope.subject = rowdoc.getItemValueString("subject");
	sessionScope.number = rowdoc.getItemValueDouble("number");
	var entity = rowdoc.getMIMEEntity("body");
	sessionScope.body = entity.getContentAsText();
	sessionScope.bodyCopy = sessionScope.body;
	context.redirectToPage("replace")

On the replace page, the Submit button must be amended to write the value of the rich-text control but only if the value of the control has changed. You can copy and paste code from the create XPage, but take care to make the necessary changes. See listing 9.

Listing 9. JavaScript for replacing values in a document with rich text
	var doc = database.getDocumentByUNID(sessionScope.docUnid);
	doc.replaceItemValue("subject", sessionScope.subject);
	doc.replaceItemValue("number", sessionScope.number)
	if(!sessionScope.body.toString().equals(sessionScope.bodyCopy.toString())) {
		var stream = session.createStream();
		stream.writeText(sessionScope.body.getHTML());
		var entity = doc.getMIMEEntity("body");
		entity.setContentFromText(stream,"text/html;charset=UTF-8", 1725);
		stream.close();
	}
	doc.save();
	sessionScope.subject = null;
	sessionScope.number = null;
	sessionScope.body = null;
	context.redirectToPage("main")

Doing it with a form

For completeness and comparison, let's redesign the create and replace pages by binding the data to a form and using no JavaScript. If you want to save your existing design, make copies of the XPages.

Right-click Forms in the navigator and select New Form. Name the new form main and click OK. Use Create - Field to create three fields of name subject and type Text; name number and type Number; name body and type Rich Text. See figure 18.

Figure 18. Form with three fields
Form with three fields

You can place the fields anywhere on the form. In this example, appearance does not matter. Save the form.

Open the create XPage. With focus on the XPage itself, select XPage under Properties and specify Next page (success or cancel) as main. This selection means that the main page is sent to the browser (or the Lotus Notes client) after a Submit or Cancel button (explained later) executes. See figure 19.

Figure 19. Specifying next page to open
Specifying next page to open

Select Data and add a Lotus Domino Document data source. Specify the current application, the main form, and Create document for the default action. The name document1 can be left as is. This approach makes the form a source of data definitions for the XPage. See figure 20.

Figure 20. Specifying a form as a data source for an Xpage
Specifying a form as a data source for an Xpage

Click to see larger image

Figure 20. Specifying a form as a data source for an Xpage

Specifying a form as a data source for an Xpage

Now put focus on the first edit box. Select Simple data binding. Specify the data source as document1, and bind the control to subject. This reference is to the subject field on the main form. Do the same for the second edit box but bind it to number. See figure 21.You can also do this binding by dragging the field from the data palette on the right to the control.

Figure 21. Binding a control to a field on a form
Binding a control to a field on a form

Put focus on the rich-text control. Bind it to body. Your XPage controls are now bound to the data defined on the form.

Change the first button to be of type Submit. Under Events, make sure that any event code is removed. No code is needed for a button of this type. See figure 22.

Figure 22. Specifying a button of type Submit
Specifying a button of type Submit

Click to see larger image

Figure 22. Specifying a button of type Submit

Specifying a button of type Submit

Change the second button to be of type Cancel. Similarly, make sure that any event code or simple action is deleted.

That process takes care of the create page. It replaces the JavaScript with form bindings and special button types.

The replace page is redefined in a similar manner. The data bindings for the controls are the same as on the create page. The buttons are the same. The only difference is that the default action for XPage data is Edit document.

Now go to the main page. Delete the code of the onclick event for the edit button and respecify it as an Open Page simple action. You want to open the replace page in Edit document mode. Compute the document to be edited using the rowdoc variable (from the data table) to get the UNID of the document that you want to edit. (So you need a little JavaScript.) See figure 23.

Figure 23. Simple action for opening a page to edit a document
Simple action for opening a page to edit a document

The Create document button, which opens the create page, can be left as is. You can delete the Replace document and Cancel buttons.

You are ready to go. The JavaScript code for creating and replacing documents is eliminated. These functions are now implemented by designing and binding the data to a form, using buttons of type Submit and Cancel, and setting up the next page after a submit or cancel action. The remove button is left as is because the JavaScript solution is the simplest.

You can also create a View design element and use it as the base for a View control in place of the data table. The functions of the edit and remove buttons can be worked into the view.


Conclusion

Lotus Domino Designer maintains its back-end data as document notes in the Lotus Domino application (the NSF file) using Lotus Notes protocols. Traditional access is through the design elements called forms and views, where forms both define the data and how a document displays, and where views are the means of displaying and acting on collections of documents.

The XPages design element now encapsulates the total user interface. To define data, you can choose to bind XPages controls to fields on forms. Alternatively, you can access the data through JavaScript and the Domino Objects. Similarly, you can use a view to display and access aggregates of documents, but you can also do this design with data tables and JavaScript.

Resources

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into IBM collaboration and social software on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Lotus
ArticleID=460977
ArticleTitle=XPages straight up
publish-date=01122010