• Data Source
• Detail View
• Fields
• List Events
• List Layout
• List Prop
• Multiple Layouts
• Search Part

Detail View

Description

A Detail View allows you to take the row of a given field displayed in a list control and show information from other fields related to that row. For example, say you had a list of customers displayed a simple list control. Every time you highlighted a given customer in that list, the detail view would display that customers specific data (address, phone number, country, etc..). Here are the Detail View Property Sections displayed in the List Builder:

The Detail View Pane

Creating a Detail View in the List Builder is a fairly simple task. For a video walkthrough using static data or SQL data, watch this video.

Below is simple list control that has a detail view placed inside a container control; in order to achieve the background and border styling. Each box displaying information in the detail view is represented by a control.

A simple List control with a detail view attached

Creating a Simple Detail View.

1. In the UX Builder open the Controls page and add a List Control to the component.

   

2. Click the List properties property, in the List Properties section of the control properties list, to open the List Builder.

   

3. Define the list control's data source in the data source tab. This example uses a SQL Data Source type and the Northwind database.

   

4. In the List Layout tab, use the blue > arrow to move one field from 'Available Fields' to 'Columns in List'.

   

   The Field that will appear in the list.

5. In the List Properties tab click the 'Has Detail View' property.

   

   Has Detail View

6. Go to the Detail View tab on the Grid Builder.

   

   The Detail View Properties

7. Click the Detail View - Quick Setup Genie button in the lower right-hand corner of the Detail View tab.

   

   Detail View quick setup genie button

8. Check "Create controls on the UX to display the List Detail View". Click OK.

   

   Quick Setup Genie

9. Select the list that you want to link to the detail view. Also choose where you want the detail view positioned, Before or After the list, and click OK.

   

10. The "Create new UX Controls" dialog will open. This will display all of the fields that the detail view will contain. Click OK

    

11. The new controls for the Detail View should now appear in the UX component.

    

12. Run in the component Live Preview. Click through the list, the detail view should update.