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 4)?

Welcome to the last part of my series “So, you got your Web application’s Home Page done, what about the Lotus Notes Client”. It has been a while since my last post and I apologize for that. It took some time to get settled with the new job and apartment.

Without further ado, lets finish the Notes Client home page:

In part 3, we created the outline we were going to use as well as adding the logo and title to the form. In this part, we’ll add the outline, some info text for the user and create the frameset to display the form.

Lets start with finishing up the form:


Select the second cell in the fourth row of the table. You could call it the left-hand navigation column. Create a new table within that cell: one row, one column and as the table width, select “Fit with margins”

Image 31

Select the newly created cell, open the table properties and remove the border:

Image 32

Next we are going to set the background color for this row, like we did with the header in part 3:

Select the third tab in the table properties and as the first color, select the dark blue (or which colors you use) as the cell background. Then click the second “Style” button and select the lighter blue as the second color:

Image 33

Note: You can use these colors anyway you like or however it fits your companies branding. Just be consistent and don’t use too many different colors. I usually don’t use more than between 3 – 4.

Next we add some descriptive text to the cell, so, switch to the text properties:

Image 35

On the first tab, select a smaller font-size (I usually use 8), select “Bold” as the style and white as the text color:

Image 34

On the second tab, set the alignment to middle:

Image 36

Now type some text. I usually describe what a user can do here (view something, do something etc.), so, in this case I use “Actions…”. After all this, your form should now look something like this:

Image 37

Now we are going to add the outline to the form. Position the cursor below the cell we just created, hit the enter button once and then select “Create – Embedded Element – Outline” from the menu:

Image 38

From the dialog box, select the outline we had created in part 3 and click “OK”:

image 39

Now, the embedded outline doesn’t look very nice, so, we need to format it. Make sure the outline is selected and open the embedded outline properties. Do the following changes to the settings:

First Tab:

Image 40

Second Tab (text color for “Selected” and “Moused” is the color we added in part 2):

Image 41

Third Tab (background color for “Selected” and “Moused” is the dark-blue color we added in part 2):

Image 42

Fourth Tab:

Image 43

Sixth Tab:

Image 44

Save your changes and do a preview in Notes. Your form should look something like this now:

Image 45

When you hover over the outline entries with your mouse, you’ll see that the background changes, as well as the text color and the image. Looks nice, doesn’t it?

We are almost done with the form. The only thing left is to add some info text. I usually add a computed text for the title, a horizontal rule with the theme colors and the text I want to display to the user within a one row, one column, fit-to-margin table. I set the minimum height of the row to about 4″, so, things won’t look too squeezed together:

Image 46

Save your changes and preview the finished form in your Notes client. Mine usually looks something like this:

Image 47


Next, lets create the frameset. Go to the Frameset section in the designer and click on “New Framset”. Give your frameset a name (I name mine SYS.MainUI and as the alias I use frsSYSMainUI), select 2 for the number of frames. We don’t worry about the arrangement of the frames. Once you are done, click “OK”

Image 48

In the frame design window, select one of the two frames and delete it:

Image 49

Open the properties for the remaining frame. As the content type, select “Named Element” and “Form”, then click on the button with the folder icon:

Image 50

In the dialog box, select the form we just created:

Image 51

Save and close the frameset.

Database Settings:

The last step is to adjust the start-up settings of your database. Locate the tile of your application, click on it with your right mouse button and then select “Application – Properties” (or “Database – Properties” in Notes versions older than Notes 8):

Image 52

Click on the properties tab “Launch” (fifth tab) and select the following options for “When opened in the Notes client”:

Image 53


And that is it. Now your users have a nice menu at hand, that informs them that the application is (now) a web application and they are also able to launch it in the browser right away.





2 responses to “So, you got your Web application’s Home Page done, what about the Lotus Notes Client (Part 4)?

  1. Patrick Kwinten April 9, 2014 at 12:23 pm

    I created a while ago a project on OpenNTF for a starter template to quickly have a Notes app up and running:


    I tried to follow the User experience guidelines for IBM Lotus rich client applications and plug-ins as much as possible for Notes 7 clients…

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: