Customizing the Detail View

This topic continues to describe the process of creating a grid component.

If you checked Grid contains a 'Detail View' part in Creating a Grid Component.

  1. Select Detail View > Fields.

  2. Select whether the Detail View will be Editable.

  3. Select a field from the Hyperlink field list to uniquely identify each record in the grid. This field must be included in the Selected Fields list of the detail view.

  4. Select one or more fields from the Available Fields list and click to move them to the Selected Fields list.

  5. Optionally, use the , , and buttons to reorganize the sequence of selected fields.

  6. Set the properties of the fields on the detail view form (see below).

  7. Click to preserve your work.

  8. Click Browser to see the grid running in your browser.

Adding New Records

To add new records to a grid through the Detail View, you need either:

  1. select Updateable when you create the grid

  2. follow these steps:

    1. Display the Detail View > Field page.

    2. Select one or more fields in the Selected list.

    3. Select the editable? checkbox.

    4. Select one or more fields in the Notice dialog and click OK. [Picture]

Title

  1. Optionally, enable the title of the detail view form in the Title > Has title field.

  2. If the previous field is enabled, define the form title in the Title > Title field.

  3. Specify whether to show row labels in the Title > Show row labels field.

Category

Options and Description

Has title

Enables or disables the title above the Detail View part.

tmpl.DetailView.HasTitle as L

Title

The title of the Detail View part.

tmpl.DetailView.Title as C

Show row labels

Indicates whether to show or hide row labels.

tmpl.DetailView.show_row_labels as L

Permissions

  1. If you want to prevent the user from deleting records, uncheck Permissions > Allow delete.

  2. If you want to prevent the user from editing records, uncheck Permissions > Allow update.

  3. If you want to prevent the user from inserting records, uncheck Permissions > Allow insert.

  4. If you want to allow the user to delete records, optionally change the Permissions > Delete security level *. Users with a delete security level less than or equal to this number will be allowed to delete records.

  5. If you want to allow the user to update records, optionally change the Permissions > Update security level *. Users with a update security level less than or equal to this number will be allowed to edit records.

  6. If you want to allow the user to insert records, optionally change the Permissions > Insert security level *. Users with a insert security level less than or equal to this number will be allowed to insert records.

Category

 

Options and Description

Allow delete

V6

Determines whether the user can delete records.

tmpl.DetailView.edit.allow_delete as L

Allow update

V6

Determines whether the user can make changes to existing records.

tmpl.DetailView.edit.allow_update as L

Allow insert

V6

Determines whether the user can insert new records.

tmpl.DetailView.edit.allow_insert as L

Delete security level

V7

Sets the user's minimum security level required to delete records.

tmpl.DetailView.edit.DeleteSecurityLevel as N

Update security level

V7

Sets the user's minimum security level required to edit records.

tmpl.DetailView.edit.UpdateSecurityLevel as N

Insert security level

V7

Sets the user's minimum security level required to insert records.

tmpl.DetailView.edit.InsertSecurityLevel as N

Display Options

When you build a new grid component and add a detail view form, you have several options for the display of these components.

  • The Display Options > Populate Detail View using Javascript selection has several consequences:

    1. Optionally, specify whether to hide the detail view form until you select to edit a record in the Display Options > Only show Detail view on request field. Selecting this field enables the next four fields.

    2. Specify whether to hide the detail view after a submit in the Display Options > Close Detail view after submit property.

    3. Specify whether to hide the grid when the detail view form is visible in the Display Options > Hide Grid part when Detail View is visible property.

    4. Specify whether the detail view form has a close link in the Display Options > Detail View has a 'Close' link property.

    5. Optionally, change the label of the close link in the Display Options > Close Detail View link label property.

    6. To open the Detail View in its own window, simply set the Link Properties > Target Frame or Window property of the Detail View Link control (in the Grid part) to "New window" or some other window name.

    Note : If you open the Detail View in a new window, you must also set the Display Options > Hide Grid part when Detail View is visible property to "True".

    Category

     

    Options and Description

    Pre-fetch data for Detail View

    V7

    If you choose this option, it will take a little longer for the page to display initially, but then the Detail View will display immediately (without a server round trip). Your browser will use JavaScript to populate the Detail View from the pre-fetched data.

    Note : This feature does not support link and image type controls in the Detail View.

    tmpl.DetailView.PopulateUsingJavaScript as L

    Only show Detail View on request

    V6

    Specifies whether to hide the detail view form until you select to edit a record.

    tmpl.DetailView.OnlyShowOnRequest as L

    Close Detail View after submit

    V6

    Specifies whether to hide the detail view after a submit.

    tmpl.DetailView.CloseAfterSubmit as  L

    Hide Grid part when Detail View is visible

    V6

    Specify whether to hide the grid when the detail view form is visible.

    tmpl.DetailView.HideGridIfDetailViewIsVisible as L

    Detail View has a 'Close' link

    V6

    Specifies whether the detail view form has a close link.

    tmpl.DetailView.HasCloseLink as L

    Close Detail View link label

    V6

    Specifies the label of the close link.

    tmpl.DetailView.CloseDetailViewLinkLabel as C

    Validation

    1. Optionally, uncheck Validation > Only validate edited fields. Unchecking this field will speed the processing of your page.

    2. Optionally, change the way errors will be reported in the Validation > Template for reporting errors field. The following placeholders are available.

    1. Optionally, change the instruction message that appears in the Validation > Instruction message field when an error occurs.

    2. Optionally, change the error page row heading in the Validation > Error page 'Row' heading field.

    3. Optionally, change the error page error heading in the Validation > Error page 'Error' heading field.

    Category

     

    Options and Description

    Only validate edited fields

    V7

    Define whether to validate all fields or only edited fields.

    Template for reporting errors

    V7

    Define the template for reporting errors.

    Instruction message

    V7

    Display this message if an error occurs.

    Error page 'Row' heading

    V7

    Specifies the column title for the "Row Number" column.

    Error page 'Error' heading

    V7

    Specifies the column title for the "Error" column.

    Customization

    1. Optionally, change the label of the Delete button in the Customization > 'Delete' record button label field.

    2. Optionally, change the label of the Save button in the Customization > 'Save' record button label field.

    3. Optionally, change the label of the Add button in the Customization > 'Add' record button label field.

    4. Optionally, change the text of the add new records link in the Customization > Add new records link label field.

    5. Specify whether the form has a cancel button in the Customization > Has 'Cancel' button field.

    6. If the previous field was selected, optionally change the text of the cancel button in the Customization > 'Cancel' button label field.

    7. Specify whether the form displays a confirm before submit message for record adds in the Customization > Confirm before submit - Add field.

    8. If the previous field was selected, optionally change the text of the message in the Customization > Confirmation message - Add field.

    9. Specify whether the form displays a confirm before submit message for record updates in the Customization > Confirm before submit - Update field.

    10. If the previous field was selected, optionally change the text of the message in the Customization > Confirmation message - Update field.

    11. Specify whether the form displays a confirm before submit message for record deletes in the Customization > Confirm before submit - Delete field.

    12. If the previous field was selected, optionally change the text of the message in the Customization > Confirmation message - Delete field.

    13. Optionally, change the page to display after a record deletion in the Customization > 'Delete' button target page field.

    14. Optionally, change the page to display after a record edit in the Customization > 'Save' button target page field.

    15. Optionally, change the page to display after a record insertion in the Customization > 'Add' button target page field.

    Category

     

    Options and Description

    Delete record button label

    V6

    The label of the Delete button (default: "Submit").

    tmpl.DetailView.DeleteRecordButtonLabel as C

    Save record button label

    V6

    The label of the Save button.

    tmpl.DetailView.SaveRecordButtonLabel as C

    Add record button label

    V6

    The label of the Add button.

    tmpl.DetailView.AddRecordButtonLabel as C

    Add new records link label

    V6

    The label of the New Record button.

    tmpl.DetailView.AddNewLinkLabel as C

    Has Cancel button

    V6

    Specifies whether there is a Cancel button.

    tmpl.DetailView.edit.has_Cancel_button as L

    Cancel button label

    V6

    The label of the Cancel button (default: "Cancel").

    tmpl.DetailView.edit.cancel_button_text as C

    Confirm before submit - Add

    V6

    Specifies whether to display a confirmation dialog to the user before adding a record to the database.

    tmpl.DetailView.edit.add_confirm_before_submit as L

    Confirmation message - Add

    V6

    The default add record confirmation message.

    tmpl.DetailView.edit.add_confirm_before_submit_message as C

    Confirm before submit - Update

    V6

    Specifies whether to display a confirmation dialog to the user before changing a record in the database.

    tmpl.DetailView.edit.save_confirm_before_submit as L

    Confirmation message - Update

    V6

    The default update confirmation message.

    tmpl.DetailView.edit.save_confirm_before_submit_message as C

    Confirm before submit - Delete

    V6

    Specifies whether to display a confirmation dialog to the user before deleting a record in the database.

    tmpl.DetailView.edit.delete_confirm_before_submit as L

    Confirmation message - Delete

    V6

    The default delete confirmation message.

    tmpl.DetailView.edit.delete_confirm_before_submit_message as C

    'Delete' button target page

    V6

    The page to display after deleting a record. Specify "<Self>" for the current page.

    'Save' button target page

    V6

    The page to display after updating a record. Specify "<Self>" for the current page.

    'Add' button target page

    V6

    The page to display after adding a record. Specify "<Self>" for the current page.

    Conflict Checking

    1. Optionally, select "False" (clear the check box) in the Conflict Checking > Check for write conflicts list. When selected, before the record changes are applied the Application Server makes sure that no other user has saved changes to this record.

    2. If you are checking for write conflicts, specify the type of checking to perform in the Conflict Checking > Write conflict check type field.

    Category

     

    Options and Description

    Check for write conflicts

    V6

    Specifies whether, before saving changes to a record, Alpha Five should make sure that no other user has saved changes to the same record.

    Write conflict check type

    V6

    Specifies the write conflict check type. The options are:

    1 - Check all fields on the form for write conflicts

    2 - Check only dirty fields (i.e. fields with changes) for write conflicts.

    Debugging

    1. Optionally, select the Debugging > Show update commands field.

    2. If the prior option was selected, optionally select the Debugging > Execute update commands field.

    Category

     

    Options and Description

    Show update commands

    V6

    Specifies whether to show the SQL or Xbasic statements that are generated to perform INSERT, UPDATE, or DELETE commands.

    Execute update commands

    V6

    A useful debugging technique. Sets a mode whether to show the update commands, but not actually execute them.

    Freeform Edit Regions

    1. Optionally, add HTML text above, below, to the left, and to the right of the search form in the Freeform Edit Regions fields.

    Category

     

    Options and Description

    Above detail view part

    V6

    HTML text to place above the detail view.

    tmpl.EditRegion.DetailView.Top as C

    Below detail view part

    V6

    HTML text to place below the detail view.

    tmpl.EditRegion.DetailView.Bottom as C

    Left of detail view part

    V6

    HTML text to place to the left of the detail view.

    tmpl.EditRegion.DetailView.Left as C

    Right of detail view part

    V6

    HTML text to place to the right of the detail view.

    tmpl.EditRegion.DetailView.Right as C

    Grid Properties

    Category

     

    Options and Description

    Style Sheet

    V6

    The name of the CSS style sheet to use.

    tmpl.style_name as C

    Detail View

    V6

    Indicates whether there is a detail view.

    tmpl.DetailView.Has_DetailView as L

    Detail View Linking Field

    V6

    The field that provides the selects the record to display in the detail view.

    tmpl.DetailView.linkfield as C

    Is the detail view editable

    V6

    Specifies whether the records displayed in the detail view are editable.

    tmpl.DetailView.editable as L

    This reference is for the Web Component Builder procedure for building the detail part of a grid component.

    Display Settings

    Category

     

    Options and Description

    Control type

    V6

    Sets the type of the control.

    • AdvancedButton

    • CheckBox

    • DropDownBox

    • Image

    • Label

    • Link

    • RadioButton

    • TextArea

    • TextBox

    tmpl.DetailField_Info[N]

    .controltype as C

    Display Format

    V6

    This expression formats the data after it has been entered into the field. Click to display the Display Format dialog box. This property should be set to one of the following values:

    • Null

    • An Xbasic expression that returns a character value. The expression should use <value> as Placeholder for the field value, as in the following example: f_upper(<value>).  Optionally, click Select Pre-Defined Format to select a format from the Pre-Defined Formats dialog box.

    tmpl.DetailField_Info[N]

    . DisplayFormat as C

    Display unformat

    V6

    If you set a Display Format, you may also place a character expression in the this field. This expression reformats the data before it is stored in the database.

    tmpl.DetailField_Info[N]

    . DisplayUnFormat as C

    CheckBox Properties

    Category

     

    Options and Description

    Choices

    V6

    Click to define the true and false choices set by the check box. Refer to the Define Choices for details.

    Orientation

    V6

    The orientation of the label. The choices are:

    • "Horizontal"

    • "Vertical"

    In – line style

    V6

    Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

    Style control if error

    V6

    Specifies whether to apply a second style to the field if a validation error occurs.

    In – line style for errors

    V6

    Specifies style attributes that are used when a validation error occurs. Click to define the In-line style. Refer to the Style Editor for details.

    Not in list rule

    V6

    Specifies the value to set if the user input does not match a specified choice. The options are:

    • "First Entry" - use the first entry in the list

    • "Null" - set the field to NULL

    • "Do Nothing" - accept the user input

    DropDownBox Properties

    Category

     

    Options and Description

    Choices

    V6

    Defines the choices the appear in the control. Click to define the true and false Choices set by the check box. Refer to the Define Choices for details.

    Height

    V6

    Set the height of the label in lines. The default is 1, which produces a combo box. Values larger than 1 produce a list box.

    In – line style

    V6

    Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

    Style control if error

    V6

    Specifies whether to apply a second style to the field if a validation error occurs (V6 only).

    In – line style for errors

    V6

    Specifies style attributes that are used when a validation error occurs. Click to define the In-line style. Refer to the Style Editor for details (V6 only).

    Not in list rule

    V6

    Specifies the value to set if the user input does not match a specified choice. The options are:

    • "First Entry" - use the first entry in the list

    • "Null" - set the field to NULL

    • "Do Nothing" - accept the user input

    Image Properties

    Category

     

    Options and Description

    Image name

    V6

    The name of the image to display.

    tmpl.DetailField_Info[N]

    . Image.Imagename as C

    In – line style

    V6

    Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

    tmpl.DetailField_Info[N]

    . Image.InLineStyle as C

    Text description

    V6

    The text description of the image.

    tmpl.DetailField_Info[N]

    . Image.Alt as C

    Is Hyperlink

    V6

    Is the image a hyperlink?

    tmpl.DetailField_Info[N]

    . Image.IsHyperLink as L

    Hyperlink target

    V6

    The page to display when the link is clicked.

    tmpl.DetailField_Info[N]

    . Image.hyperlinkTarget as C

    Target frame

    V6

    The name of the window that will display the new page.

    tmpl.DetailField_Info[N]

    . Image.hyperlinkTargetFrame as C

    Label Properties

    Category

     

    Options and Description

    In – line style

    V6

    Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

    tmpl.DetailField_Info[N]

    . Label.InLineStyle as C

    Link Properties

    Category

     

    Options and Description

    Link type

    V6

    The options are:

    • "Explicit" - data in field is the Link URL (e.g. http://www.asc.com)

    • "Computed" - link is constructed from data in the field (e.g. data in field is "BOLID", and the constructed link becomes form.a5w?customer_id=BOLID)

    tmpl.DetailField_Info[N]

    . Link.Type as C

    Display value

    V6

    The default is Null. The options are:

    • Null - the field displays the actual value in the field.

    • "{Fieldname}" - displays value in the selected field for the current record.

    • "explicit string" - displays the "explicit string"

    tmpl.DetailField_Info[N]

    . Link.DisplayValue as C

    Target window

    V6

    The default is "Explicit". Defines where to display the linked page. The default is Null. The options are:

    • Blank (opens in a new window)

    • "Explicit"

    • "WindowName" (e.g. "Window2")

    • "_blank"

    • "_parent"

    • "_self"

    • "_search"

    • "_top"

    tmpl.DetailField_Info[N]

    . Link.TargetWindow as C

    Target page

    V6

    The default is Null. Defines the page to open. The options are:

    • "Computed"

    • "Blank"

    • Null - the current .A5W page

    • an explicit .A5W page

    tmpl.DetailField_Info[N]

    . Link.TargetPage as C

    Clear Parameters

    V6

    The default is .F. . Specifies whether the target URL preserves existing parameters.

    tmpl.DetailField_Info[N]

    . Link.ClearParameters as L

    RadioButton Properties

    Category

     

    Options and Description

    Choices

    V6

    Click to define the true and false choices set by the check box. Refer to the Define Choices for details.

    In – line style

    V6

    Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

    Orientation

    V6

    The orientation of the label. The choices are:

    • "Horizontal"

    • "Vertical"

    Type

    V6

    Select the Type of radio buttons you will have. The options are:

    • "Static" - Predefined

    • "Dynamic" - Computed (for example, by looking up information in a table)

    Maximum choices

    V6

    If you specified "Dynamic" radio buttons, enter the maximum number of choices to show.

    Style control if error

    V6

    Specifies whether to apply a second style to the field if a validation error occurs.

    In – line style for errors

    V6

    Specifies style attributes that are used when a validation error occurs. Click to define the In-line style. Refer to the Style Editor for details.

    Row Properties

    Category

     

    Options and Description

    Hide row

    V6

    Hides the column or row that would contain this field. You might choose to hide the field if it was displayed in a free-form layout.

    tmpl.DetailField_Info[N]

    . Column.Hide as L

    Row heading

    V6

    The label that identifies the column.

    tmpl.DetailField_Info[N]

    . Column.Heading as C

    Row label in-line style

    V6

    Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

    tmpl.DetailField_Info[N]

    . Column.LabelInLineStyle as C

    Row label position

    V6

    The position of the label in relationship to the control. The options are:

    • "Left"

    • "Right"

    • "Above"

    • "Below"

    tmpl.DetailField_Info[N]

    .Column.LabelPosition as C

    Label prefix

    V6

    Specify HTML text or the path to and name of an image to be displayed to the left of the column heading.

    tmpl.DetailField_Info[N]

    . Column.Heading_Left as C

    Can sort

    V6

    Specifies whether the grid will be sorted when the user clicks on the column heading.

    Sort field

    V6

    Specify the field(s) to sort on when user clicks on the column title. Put commas between field names.

    Freeform layout

    V6

    Specify if this column or row should display just this field, or allow a free-form layout. The options are:

    • "Freeform"

    tmpl.DetailField_Info[N]

    .Column.Type as C

    Freeform template

    V6

    Click to display the Freeform Column Layout dialog box to define the fields and formats to display in this grid cell.

    tmpl.DetailField_Info[N]

    .Column.FreeFormTemplate = <<%html%

    ' code here

    %html%

    Cell in-line style

    V6

    Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

    tmpl.DetailField_Info[N]

    . Column.InLineStyle as C

    Bubble Help Text

    V8

    Optionally, set an initial value for the control to display.

    tmpl.Variable_Info[N]

    .BubbleHelp as C

    Label Bubble Help Text

    V8

    Optionally, set an initial value for the control to display.

    tmpl.Variable_Info[N]

    .BubbleHelpLabel as C

    Break Type

    V8

    When the number of layout columns is greater than 1, this command can be used to position controls. The options are:

    • "None"

    • "Break before"

    • "Break after"

    • "Break before and after"

    tmpl.Variable_Info[N]

    .Breaktype as C

    Column Span

    V8

    When the number of layout columns is greater than 1, this specifies the number of columns to group together..

    tmpl.Variable_Info[N]

    .nCols as N

    Security groups

    V8

    The names of the groups permitted or denied access to this field.

    tmpl.Variable_Info[N]

    .Column.SecurityGroups as C

    TextArea Properties

    Category

     

    Options and Description

    Rows

    V6

    Sets the height of the control by specifying the number of rows.

    tmpl.DetailField_Info[N]

    . TextArea.Rows as N

    Columns

    V6

    Set the width of the control by specifying the number of columns.

    tmpl.DetailField_Info[N]

    . TextArea.Cols as N

    In – line style

    V6

    Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

    tmpl.DetailField_Info[N]

    . TextArea.InLineStyle as C

    TextBox Properties

    Category

     

    Options and Description

    Size

    V6

    Sets the width of the field in characters.

    tmpl.DetailField_Info[N]

    . Textbox.Size as N

    MaxLength

    V6

    Sets the maximum length of the user's input in characters.

    tmpl.DetailField_Info[N]

    . Textbox.MaxLength as N

    In – line style

    V6

    Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

    tmpl.DetailField_Info[N]

    . Textbox.InLineStyle as C

    Style control if error

    V6

    Specifies whether to apply a second style to the field if a validation error occurs (V6 only).

    tmpl.DetailField_Info[N]

    . Textbox.StyleFieldIfError as L

    In – line style for errors

    V6

    Specifies style attributes that are used when a validation error occurs. Click to define the In-line style. Refer to the Style Editor for details (V6 only).

    tmpl.DetailField_Info[N]

    . Textbox.ErrorInlineStyle as C

    Update Settings

    Category

     

    Options and Description

    Updateable

    V6

    Enables or disables the ability to edit the value of the field.

    tmpl.DetailField_Info[N]

    . Updateable as L

    TableAlias

    V6

    The alias of the table providing the data.

    tmpl.DetailField_Info[N]

    . Table_Alias as C

    Table

    V6

    Path and name of the table providing the data.

    FieldToUpdate

    V6

    The name of the table field that is bound to the control.

    tmpl.DetailField_Info[N]

    . FieldToUpdate as C

    Validate Events

    Category

     

    Options and Description

    Server

    V6

    Click to define the specify the Xbasic to run to when the form is submitted.

    events.server.validate = <<%code%

    ' code here

    %code%

    See Next

    Using Grid Events

    See Also

    Application Server, Creating Dialog Components, Building A5W Web Pages, Setting Default Property Values

    Supported By

    Alpha Five Version 6 and Above

    Limitations

    Web publishing applications only.