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:

Name
Description
Table Properties

Properties available for a table.

Client-side Events

These are the Client-side events used with the UX component's List control's Detail View.

Server-side Events

The List control Detail View's server-side events can be used to add additional logic for during synchronization and validation.

Customization

When certain events are triggered, Alpha Anywhere provides a number of default warning and error messages to go along with the event. For example, if you have a list control with a detail view that has an 'Reset' button that you click after making an edit, you will get a warning message. The Customization section of the Detail View is where you can alter the CSS and text of these various messages to your liking.

Media and Other Linked Files

Define settings for uploading and downloading media files (pictures, videos, recordings and other linked files) for a PhoneGap application.

Other Properties

Configure submission location info, what to do if there are no records in the List, the default value policy for new records, timestamp data, and more for a List's Detail View.

Other

Here

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.