Objectives:

• Learn about the different elements of a view and their properties
• Set an automatic sort order for the view
• Create a simple calculated field
• Reposition fields on the view

Estimated time to complete: 15 minutes

Skill level: Beginner

The beauty of a view file is that you can use it to display your data however you want to on the page. Since views are built from HTML and XML, anything you can do with HTML, you can do with a view.

Let's take a look at some of the elements of a view now. The following picture points out different parts of the default view in the Books folder.

You can select an element of a view by clicking on that element. You can also use the selection indicator at the bottom of the view to select the element you want.

The Page Region
The page region of your view represents the page around the data region. By setting its properties, you can change the template that the page uses, or set the page's title.

* Select the page region of your view by choosing from the selection indicator at the bottom of the view, or by clicking on the area of the page outside of the dataregion, and set the Page Title property to Fremont Book Club.

Data region
The data region displays data from a table in your view. As we discussed in the previous section, a data region can display data in grid, details, insert, or update mode. Sorting and filtering are built into the data region for you.

* Select the data region, and set the Caption property to Current Schedule.

Jump bar
The jump bar makes it easy to navigate pages of records in your view. You can set the Rows Per Page property of the jump bar to specify how many records can appear on a page.

* Select the jump bar element, and set the Position property to Bottom.




Action bar
The action bar includes action buttons for inserting new data, editing existing data, deleting data, and viewing data as a grid. You can also add your own custom action buttons to the action bar.

* Select the action bar element, and set the Position property to Top. Then select the Insert action button, and set the Display Type property to Button.

Field Box
The fieldbox groups a set of fields for easy formatting. The associated XML tag is ws:fieldbox.

Fieldbox Properties

Field
The field element represents a field in your table, or a calculated field. You can set properties for a field to specify its style or caption, to show or hide the field, and so on.

* Make sure that you're still looking at the view in Details mode. Select the Title field and enter the following value for the CSS style property: font-style:italic.

Sort data automatically
You can specify a default sort order for your data region by setting the data region's Sort Preset property. You can sort on one or two fields.

* Sort your view on the DiscussionDate field, so that dates are ordered beginning with the most recent. Follow these steps:

1. Select the data region.
2. On the properties pane, click the magic wand next to the Sort Preset property.
   
   

   Click magic wand for wizard

   
   
3. Select DiscussionDate as the primary sort field.
4. Select descending.
5. Click Finish.

Some property settings affect the view only in certain modes. For example, when you change the style of a field box element, the change is visible only in details, insert, and update modes.

Create a Calculated Field
A calculated field combines one or more fields or performs a calculation to yield a new value. A good example of a simple calculated field is one that concatenates two separate fields, FirstName and LastName, into a single field.

* Follow these steps to create a calculated field in your view:

1. Verify that you’re in /books/default.view in design mode.
2. Click on the Grid tab to display the view in grid mode in the Designer.
3. Select the data region of your view.
4. On the Insert menu, click Calculated Field.
5. In the Calculated Field editor, type [lastname] + ", " + [firstname]. (Make sure there is a space between the quotation marks). Click the OK button. A new field New Calculated Field appears at the end of the row, and the Calculated Field Properties pane shows the properties of the new field.
6. Select the new calculated field and set its Caption property to Author.
7. Set the Display In These Modes property for the calculated field to Grid and Details only. The calculated field will appear only in these modes.
8. Select the FirstName field and set its Display In These Modes property to Insert and Update.
9. Select the LastName field and set its Display In These Modes property to Insert and Update.

Now preview the data region to see the view in grid, details, insert, and update modes. Note that the calculated field appears in grid and details modes, and the FirstName and LastName fields appear in insert and update modes.

Instead of creating the calculated field, you could create one field to contain both first and last names. It is still possible to sort by last name. But the system can only sort the data by what is typed first, so user input must consistently provide the last name first, such as Smith, John.

It's easy to move elements of a view. To move an element, simply drag and drop it to its new position.

Adjust field order
You can move elements of your view by simply dragging and dropping.

* To rearrange the fields in your data region, follow these steps: 

1. Make sure you're viewing the data region in grid mode. 
2. Click on a field so that the entire column is selected.
3. Click and hold a field and drag it to the position where you’d like it to appear. Your changes are saved as soon as you release the field. Undo is available in case you make a mistake.
4. Arrange the fields so they appear in the following order: Discussion Date, Title, Author.

To change the position of a field, simply drag and drop the field column to its new destination