Displaying Multiple Views of a Page with Different Forms

You use Jot forms to define properties to structure your data, but they are also used to control what data within a page is displayed. A form can define a mask that only allows selected properties to show through. For example, you might create different forms to display different subsets of the data for different types of users or a special view for printing.

To define a different view, you simply create a new form that contains the fields that correspond to the properties you want to display. The form page can also include whatever additional page content you want to include in that particular view.

To display a page with a particular form, you can add the form query string parameter to the page's URL, `?form="formname"'.

Let's take a closer look at how this works. This tutorial creates multiple forms for a stew recipe and demonstrates how they can be used to display different variations of the recipe.

First, we need a form to create the recipe page. This main StewForm defines properties for all of the possible stew ingredients.

!!Recipe for Yummy Stew
<jot:form name="StewForm">
| Chef | <jot:field name="chef" /> |
| Carrots | <jot:field name="carrots" /> |
| Celery | <jot:field name="celery" /> |
| Beets | <jot:field name="beets" /> |
| Tomatoes | <jot:field name="tomatoes" /> |
| Beef | <jot:field name="beef" /> |
| Chicken | <jot:field name="chicken" /> |
| Clams | <jot:field name="clams" /> |
| How much water? | <jot:field name="cupsOfWater" selectOptions="1,2,3,4,5,6,7,8" /> |
!Spices
<jot:field name="spices" type="wiki" />

!Instructions:
<jot:field name="instructions" type="wiki" />
</jot:form>

We can use this form to create a recipe page, ScottsStew:

To display a different view of this recipe we can create and apply a form that references properties defined in the main StewForm. This is done by adding fields with names that match the fields in the StewForm.

For example, we could use declareForm to define a VegetableStewForm that only displays the vegetarian ingredients. In this new form, the name for each ingredient we want to include from the StewForm is prefixed with StewForm so we're referencing the properties defined by that form rather than defining new properties:

!!Recipe for Yummy VEGETABLE Stew
<img src="vegetables.jpg" style="float:right;" />
<jot:declareForm">
| Chef | <jot:field name="StewForm/chef" /> |
| Carrots | <jot:field name="StewForm/carrots" /> |
| Celery | <jot:field name="StewForm/celery" /> |
| Beets | <jot:field name="StewForm/beets" /> |
| Tomatoes | <jot:field name="StewForm/tomatoes" /> |
| How much water? | <jot:field name="StewForm/cupsOfWater" selectOptions="1,2,3,4,5,6,7,8" /> cups |
!Spices
<jot:field name="StewForm/spices" type="wiki" />

!Instructions:
<jot:field name="StewForm/instructions" type="wiki" />
</jot:form>

When you view ScottsStew with the VegetableStewForm (ScottsStew?form=VegetableStewForm), it looks like this:

We haven't changed the contents of the ScottsStew page--the other properties are still part of the page, they just aren't included in the view defined by the VegetableStewForm.

You could accomplish the same thing with the form tag by giving both forms the same name, and dropping the prefix from the field names. However, using declareForm eliminates confusion that might arise from having multiple form pages that define forms with the same name.

The VegetableStewForm just creates a slightly different view of ScottsStew, but a form can define a view that is completely different. Forms can be used to both edit and display a page, so you can add properties to a page by editing it with a different form.