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

In part 1 and part 2 I showed you how to prepare our form and create the custom colors and icons for the outline. In part 3, we will talk about the logo, create the outline and further modify the form.


If you want to use background colors for your header / banner, you want to make sure that the background of your logo is transparent. I used paint.net to modify the logo I use in my applications. If you have graphic designers working for your company, you could also ask them to provide you with the logo. As for the size of the logo, 210×50 pixels works great, smaller is fine, but it shouldn’t be larger than that.

Note: If you use a transparent background, you have to save your logo as a .gif file in paint.net.

Import your logo file into the database as described in part 2. You don’t have to change the “Image across” setting. For demonstration purposes, I created a logo with the word Logo and transparent background as I’ll be using the two blue custom colors as a background color for the banner. Next up the outline.


Create a new outline, giving it a name (I am naming mine “SYS.ExitApplication”, alias “olSYSExitApplication”) and add two outline entries. Select the first one, label it something like “Open in Web Browser” and select “Action” as Content Type. Click on the @-button to open the “Edit Formula” dialog box, then enter the following @-Formula:

url := “http://” + @Name([CN];@ServerName) + “.xyzcompany.com/” +@WebDbName;


Or, if you have your URL stored in a profile document keyword, your @-Formula could look something like this:

url := @GetProfileField(“Keyword”;”.URL”);


Hint: @Command([Execute];”IExplore”;url) will open the URL in Internet Explorer. If you use Firefox or Chrome, you’d replace IExplore with either firefox or chrome.

Close the “Edit Formula” dialog box and select the icon we had created in part 2 as the image for the outline entry. Your entry should then look something like this:

Image 29

Select the second outline entry and label it “Exit Application”, then follow the steps above. In the “Edit Formula” dialog box, enter the following @-Formula:


Close the dialog box and select the second icon we had created in part 2 as the image for this outline entry. This entry should then look something like this:

Image 30

Save your changes and close the Outline. Now we’ll further modify the form.


Open the form we had created in part 1 and select the second, third and fourth cells in the second row:

Image 22

Open the table properties and select the tab “Table/Cell Background”. As mentioned before, I’ll use the two blue custom colors as the cell background, starting with the darker blue fading into the lighter blue. Select the darker blue as the color for the cell, then click on the button in the middle of “Style” and select the lighter blue in “To”:

Image 23

If you save your changes and do a preview in Notes, your table should now look like this:

Image 24

Next, we’ll add the logo. Switch back to the designer and select the second cell in the second row. Open the table properties and again, select the tab “Table/Cell Background”. Change the “Cell Image” settings by selecting your logo image resource as the source and “Center” as the repeat:

Image 25

As you can see, we need to adjust the height of the row to display the logo properly. As we can’t do that with the Table Property “Minimum Height” (because that would apply to all rows) we do it with the title.

Select the fourth cell of the second row, open the Text Properties and align the text to the right:

Image 26

Now I add a “Computed Text” control to the cell and make the following changes:

Font: Verdana
Size: 16
Style: Bold
Color: White
Spacing Above: 1 1/2
Spacing Below: 1 1/2

By utilizing Spacing Above and Spacing Below, you don’t have to make the font size huge and the title appears to be centered.

As the value for the computed text, I usually use “@DbTitle” plus some additional text like Menu. Saving the changes and doing a preview in Notes, you form should now look something like this:

Image 27

Hint: If you like, you can play around with the paragraph margins, so, that the title won’t be so close to the right side. I usually use “Relative (%)” and 1 for left and 99 for right in all of my tables:

Image 28

That concludes part 3. In part 4 we will finalize the form by adding the outline we created and adding info text for the users.

Happy coding and have a nice weekend.


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: