Views and Forms Working Together on the Web

Views by themselves on the Web are not very attractive. This is where forms and views can be played together for a very sexy outcome. This technique also enables you to use dynamic HTML and JavaScript to create dynamic tables and views. You can break all the rules and even use XML if you so desire . However, for the sake of learning the basic principles here, let's take a closer look at how to do this.

Using Domino Designer, open Chapter20.nsf database. Go to the Forms object and expand it. Click the (ViewGlossary) form, as shown in Figure 20.12.

Figure 20.12. Open the (ViewGlossary) form in the Chapter20.nsf database.

This form uses an embedded view with an embedded selection formula to determine which view to display to the user , as shown in the formula in Figure 20.13. If no letter is selected or it is opened for the first time, the default GlossaryMain Index Glossary view displays.

Figure 20.13. The (ViewGlossary) form's embedded selection formula.

The GlossaryMain Index view is a basic view and is embedded right onto the form using the Create, Embedded Element, View menu command. After it is embedded, an embedded selection formula can be added. One trick to the way this view and form work together is the way it uses a cookie to determine what letter was chosen by the user. If you look at the onClick event of the ViewGlossary form, you'll see the following code that calls the setCookie JavaScript function:

setCookie('GlossViewSelect',document.forms[0].dLtr.value);

This code sets the letter chosen by the user in a cookie. When the browser is refreshed, the view is switched to the view for the chosen letter that contains only documents whose keyword category begins with the chosen letter. The letter selection is accomplished by first setting the letter by running a formula in a hotspot over each letter, as shown in Figure 20.14.

Figure 20.14. The (ViewGlossary) form's hotspots.

When the user clicks a letter in the browser, two events occur simultaneously : The dLtr field is being set as shown in the code for the hotspot in Figure 20.14, and the setCookie() JavaScript function is called from the onClick event. The click also refreshes the browser, and the view is then changed from the Main Glossary view showing all the documents to the view that contains just the glossary documents that begin with the selected letter. Figure 20.15 shows the Main Glossary form as it starts out; Figure 20.16 shows the Glossary form after a letter has been selected.

Figure 20.15. The Glossary view as displayed on the Web showing all glossary documents.

Figure 20.16. The Glossary view as displayed on the Web showing a subset of glossary documents for the selected letter.

This technique can be used as many times in your application as necessary. New to Domino 6, you can even embed more than one view on a form using code. Previous versions of Domino allowed only one embedded element per page. This restriction has been removed. Figure 20.17 shows two embedded views on one form.

Figure 20.17. Domino 6 allows for more than one embedded object on a page.

NOTE

At the time of this writing, the use of multiple embedded views on the same form was not working properly in the Release Candidate of Domino 6. The embedded parameters were also not functioning correctly.

Incorporating Flash into Your Web Pages