Exercise: Configure a Tab with a Data List
In this exercise, we use the shell designer to configure our Food Items tab. We will display our new data list in this tab.
Here is a link to the Food Bank Source Code.
Step 1 - Navigate to the Administration functional area and click Application.
Step 2 - Click the Shell design task to open the Shell Design page, and select the Pages tab. Locate the page we created in the previous exercise, and click the Edit action to configure the page.
Step 3 - Open the Sections dialog window.
Click the ellipsis button within the Tabs property to open the Tabs dialog window. Select Food Items in the member list on the right hand side of the Tabs property window (yellow highlight). Next, click the ellipsis button within the Sections property (green highlight and red circle) to open the Sections dialog window.
Click the ellipsis button within the Tabs property to open the Tabs dialog window. Select Food Items in the member list (yellow highlight), and click Edit to open the Tab dialog window. Next, click the ellipsis button within the Sections property (yellow highlight and red circle) to open the Sections dialog window.
Figure: Configure sections within the Food Items tab
Step 4 - Add a new section with a data list.
Click the Add button on the Sections dialog window to add a new section within our Food Items tab. This section will include the Food Items data list we created in the previous exercise. Add the following properties for the new Food Item List section:
| Property | Value | Description/Instructions |
|---|---|---|
| Caption | Food Item list | The caption for the page section or an expression to evaluate. |
| SectionType | DataList | Defines the type of information being displayed in the section. |
| DataList | Food Item List | The data list to display in the section. You will have to search for the data list. In the Data List Search window, enter ‘Food Item List’ and select the Search button to find the data list. |
| ContextType | PageContext | The section context type |
| Style | StandardGridView | Indicates how the data list is to be rendered. |
Click OK to save the section's properties and tabs, then click Save to save the page.
Step 5 - Test the page.
Click the Test Page button and enter a dummy Food Bank ID for the context. After the page appears, select the Food Items tab to display the food items. Go ahead and test the filter for the data list, too.
Step 6 - Behind the scenes of your new page.
Navigate back to the Shell Design page, and select the Pages tab. Select our new My First Food Bank Page from the data list, and click the View XML action.
Figure: Our new page with the tabs, a new section, and the Food Items data list
Here is a link to the Food Bank Source Code.