Create a Nested Data Region
- Add a Reviews table for user reviews.
- Create a nested data region that is bound to the Reviews table.
- Format the parent and child data regions to improve the look and feel of the view.
- Modify security settings on the Reviews folder so that anonymous users can add records.
Estimated time to complete: 25 minutes
Skill level: Intermediate
Suppose we want to permit users to post book reviews to the web site. You might try just adding a Review field to the data table, but what happens when more than one user wants to review a book? One answer is to add multiple fields to the Books table -- Review1, Review2, and so on. This is not ideal, however, because you've limited your discussion to the number of fields that you have. Also, it's difficult to search, sort, or filter data that's organized in this manner.
A better solution is to create a second table, Reviews, that's related to the Books table. The Reviews table will keep track of the reviews for each book, and it can contain as many reviews of each book as your users want to add.
Add the Reviews table
First, let's add the Reviews table. The Reviews table will have a lookup field to the Books table, so that when a user writes a review, they can select the book they wish to review. This lookup field will also link the Books and Reviews tables together in a useful way, which we'll address below.
To add the Reviews table:
- Navigate to the root folder of your application.
- On the File menu, choose New, then Data Table, to create a new data table.
- Choose the following predefined field:
- Enter the following custom fields:
- Field Name: Comments; Data Type: Long Text; Caption: Comments
- Field Name: Book; Data Type: Lookup Books; Caption: Book
- Choose Options for the "Lookup Books" field and choose Title from the Display Field box. This will be the field from the Books table that will be displayed in the Reviews Table.
- Click Next.
- Name this table Reviews. Uncheck the option “Add this table to the global navigation bar” to prevent a navigation tab from being automatically added to the application template.
- Click Create Table.
Create a nested data region
Ideally, when we look at a book's record, we'd like to see all of the reviews that have been written about that book. Now that we have a Reviews table with a lookup field to the Books table, it's easy to do.
The default.view file in the Books folder has a data region that displays data from the Books table. Within this data region, we can nest a data region that displays related data from the Reviews table.
* To create a nested data region that displays related data from the Reviews table, follow these steps:
- Navigate to /books/default.view in the Designer.
- Click on the data region's Details tab to display the view in details mode.
- From the Insert menu, choose Data Region.
- Choose Reviews as the table to nest within this data region. Note that it already shows as linked to books.
- Select the Details Mode option for viewing the data in the Reviews table, and click Next.
- In the list of fields to display, uncheck the Book field, since that already appears on the view in the Books data region.
- Verify that the Name and Comments fields are selected and click Finish.
The view now displays related records from the Reviews table for each record in the Books table. Of course, we haven't added any data to the Reviews table yet.
* Add a couple of reviews for each book. To add a review, browse the view, click the Details button to view a record in details mode, and click the Insert button in the Reviews data region.
Add a horizontal line between records
Next, let's add a horizontal line between records in the nested data region, to make them easier to read.
* Follow these steps to add a horizontal rule to the nested data region:
- Select the nested data region.
- Choose Insert > HTML.
- Type <hr noshade size="1" />.
- Choose Finish.
Navigate to details mode
In grid mode, each record displays a Details button for navigating to details mode. Let's delete the Details button and create a link from the book title instead.
* To create a link to details mode from the Title field, follow these steps:
- Display the parent data region in grid mode.
- Select the column containing the Details buttons.
- Click Delete.
- Select the Title field.
- Click the magic wand next to the Link to Page property.
- Type /books/default.view for the path.
- On the Mode tab, select Details Mode.
- On the Filter tab, select Same Record.
- Click OK.
Modify action bars and buttons
Let's make some modifications to the action bars in each data region to make the user interface for our application more intuitive. We'll hide the parent data region's action bar in details mode, and change the caption of the Insert button for the nested data region.
- Display the parent data region in Details mode.
- Select the parent data region's action bar.
- In the Display in These Modes property, uncheck the Details option.
- Select the nested data region.
- Select the Insert button on nested data region's action bar.
- Set the Caption property to Submit Review.
Adjust folder permissions
Anonymous users need to be able to create records in the Reviews table, but should have read-only access to the rest of your application. You can modify security settings for the Reviews folder to achieve this.
- Navigate to the Reviews folder, and click the Security tab.
- Set the Anonymous group’s role to Author. Notice that the Reviews folder is no longer inheriting security settings from its parent folder.
- Click Apply.
Display the date of submission
You can use the Created system field to show the submission date.
- Navigate to /Books/default.view in Design mode.
- Show the Books (parent) data region in Details mode.
- Select the Reviews (child) data region.
- On the Insert menu, choose Existing Field, and select the Created field. Click Finish to add the field to the view.
- On the view, select the newly added Created field.
- In the Properties pane, set the Caption property to Date.
- Set the field's Format property to 04/02/2003.
- Reorder the fields to Name, Date and Comments by drag-and-drop.
Resize the input box
To make it easier for reviewers to add reviews, we can adjust the size of the input box.
Browse the view in preview mode, or try logging off and visiting your site as an anonymous user.
- Display the parent data region in details mode and the nested data region in insert mode.
- Select the Comments field in the nested data region.
- On the properties pane, set the Input Rows property to 20.