XPages and Me

My Journey into XPages Development

So, you got your Web application’s Home Page done, what about the Lotus Notes Client (Part 1)?

I came across many Lotus Notes applications that had been developed to be accessed thru the browser only, which is perfectly fine, until a user opens the application in the Notes Client. What they usually see is the default view of your app (I hope you have one, otherwise you might run into some issues with certain things) and a list of views on the left-hand side.

The user might be confused by what he / she sees, not knowing that the application is actually a web application. Therefore, I think it is good practice to have a home page available that:

  • Informs the user that the application is a web application
  • Provides a link / button to the user to open the application in the browser

even if the possibility of a user opening the application in the Notes Client might be small.

For my web applications, I use the following ingredients, if they are supposed to be accessed thru the browser only (this UI was inspired by Chris Blatnik’s blog Interface | matters):

  • 1 Form
  • 1 Outline with 2 entries
  • 1 Frameset
  • 3 Image Resources (1 Logo and 2 Icons for the Outline)

1. Form:

Open your application in the designer and create an empty form. In my example here, I name the form SA.Menu (frmSAMenu for the alias), SA being the abbreviation for “Sample Application”, the name of the database.

Image 1

Insert a table with 5 columns and 5 rows, select “Fit to window”:

Image 2

Your form should look now something like this:

Image 3

Next, we need to hide the empty spaces above and below the table. Select each, open the Text Properties, click on the “Paragraph Hide When” tab and check the boxes for “Notes R4.6 or later”, “Web browser” and “Mobile”:

Image 4

As we don’t want the user to accidentally save empty documents with this form, we need to add the field “SaveOptions”. Click on the empty space above the table and add a field and name it “SaveOptions”. Select “Computed when composed” and enter “0” as the value:

Image 5

Also, we don’t want the form to be displayed in the “Create” menu. Open the form properties and deselect the options “Include in menu” and “Include in Search Builder”:

Image 6

Now we need to format the table we created. We’ll separate it into three distinct sections: Header, Left Hand column and Content. Select all of the first row, display the table properties and set the border as follows:

Image 7

Next, select the whole left column:

Image 8

Bottom row:

Image 9

Right column:

Image 10

Your form should now look like this:

Image 11

Just a few more border settings and we are done with them. Select the middle cell in the second row and set the borders of the cell like this:

Image 12

Select the middle cell of the fourth row, setting the border like this:

Image 13

Lastly select the 2nd, 3rd and 4th cell of the center row and change the border settings as follows:

Image 13

After all that, your table should now look like this:

Image 14

Now would be a good time to save your progress. Next up, we will set the width of the columns. Select each column, open the table properties and set the width according to the table below:

Image 15

Column: Width (cm): Width (inches):
 1  0.318  0.125
 2  6.5 2.559
 3  0.318  0.125
 5  0.318  0.125

Save the changes and if you do a preview in Notes, you’ll see three distinct frames separated by white spaces:

Image 16

In the next part we will create the icons for the outline and format the form some more.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: