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)
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.
Insert a table with 5 columns and 5 rows, select “Fit to window”:
Your form should look now something like this:
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”:
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:
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”:
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:
Next, select the whole left column:
Your form should now look like this:
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:
Select the middle cell of the fourth row, setting the border like this:
Lastly select the 2nd, 3rd and 4th cell of the center row and change the border settings as follows:
After all that, your table should now look like this:
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:
Save the changes and if you do a preview in Notes, you’ll see three distinct frames separated by white spaces:
In the next part we will create the icons for the outline and format the form some more.