CodeCharge Studio

Master/Detail Builder

The simplest and most convenient way of building froms for edit Master/Detail record is to use the Master/Detail Builder located under the Builders tab. Open or create a new page where the Master/Detail forms will be located then with the cursor placed at the location where the form should appear, click on the Master/Detail option under the Builders tab of the Toolbox. After launching the builder you will be provided with the following configurations steps.

Step 1: Selecting a type for Master Record

Select existing Master Record or create new

Parameter Description
Add template panel Insert form inside Template Panel. This option available only on pages with Designs. Read more...

Step 2: Selecting a Data Source for Master Record

Select or create a database connection from where the data to be edited or added using the record form is stored. If you already have a connection configured for the project, you can select to use one of the tables in this connection to create the Master/Detail Forms. Alternatively, you can create a new connection or use one of the sample databases.


The Autoincremented primary keys checkbox should be activated if the records that will be contained in the Record will have autoincrement primary keys that are provided automatically by the database. With this option selected, the Record will not have an editable or submittable control for the primary key since that would result in a database error. Conversely, if primary keys are user provided, then this option should not be selected. In this case, the Record would have a field where the user can enter a value for the primary key.

Click Next to proceed to step 3.

Step 2: Record Builder Fields

Select a data source and the fields to be included in the record form.

Record Builder Field Settings

Parameter Description
Data Source Select the table to use as the data source.
Primary Key Select the primary key field in the table.
Fields for the Record These are the fields to be shown in the record form. They are selected from among the Available Fields.
Refreshes the connection if you make changes to the database while using the builder.
Select a form field then click this button to move it upwards in the order of appearance.
Select a form field then click this button to move it downwards in the order of appearance.
Click this button to add it some fields to the form.
Select a form field then click this button to remove it from the form.
Opens the dialog with advanced properties. To activate the button select a field in the Fields for the Record section.

Note: The following field types have advanced properties: CheckBox List, ListBox, Radio Button, Link and Image Link.

CheckBox List, ListBox or Radio Button - Clicking on the button will open the 'List DataSourse' dialog illustrated below.

Link and Image Link - Clicking on the button will open the dialog with link properties.

Control Type Specify the control type to be used for each of the fields in the form.

Click Next to proceed to step 4.

Step 4: Selecting Record actions

You now have to decide the kind of functionality that will be available in the record form. You can uncheck any of the options if you don't want the form to have the corresponding functionality.

Record Operations

Parameter Description
Allow Insert Specify whether the Record should allow the user to insert new records.
Allow Update Specify whether the Record should allow the user to update existing records.
Allow Delete Specify whether the Record should allow the user to delete existing records.
Allow Cancel Specify whether the Record should have a cancel button which would abort any current operation and return to the page specified in the Return Page property of the form.
Confirmation dialog Prompts the user to confirm the insert, update or delete operations.

Click Next to proceed to step 5.

Step 5: Selecting a type for Detail

Select existing Detail form (based on Record or Editable Grid) or create new

Parameter Description
Add template panel  

Click Next to proceed to step 6.

Step 6: Detail Fields

You now have to select a data source as well as the fields to be included in the detail form.

Editable Grid Field Settings

Parameter Description
Data Source Select the table or query that contains the fields to be used in the EditableGrid.
Build Query Opens the Visual Query Builder where you can construct a join query which retrieves fields from multiple tables. Within the Visual Query Builder window, you can select multiple related tables then select fields from those tables.
Primary Key

Normally, the Primary Key will be automatically set if the database table is defined with a Primary Key field. There may be cases with certain databases, or database connectors, where you may need to define the key. If the table contains a compound primary key that is made up or more than one field you must use the Build Query button described above to specify all the primary keys.

Within the Visual Query Builder dialog, right-click on each of the fields that make up the primary key field and select the Primary Key option. The selected fields should then appear in bold.

Fields for the Grid These are the fields to be shown in the Editable Grid form.
Refreshes the connection if you make changes to the database while using the builder.
Select a form field then click this button to move it upwards in the order of appearance.
Select a form field then click this button to move it downwards in the order of appearance.
Click this button to add it some fields to the form.
Select a form field then click this button to remove it from the form.
Opens the dialog with advanced properties. To activate the button select a field in the Fields for the Grid section.

Note: The following field types have advanced properties: CheckBox List, ListBox, Radio Button, Link and Image Link.

CheckBox List, ListBox or Radio Button - Clicking on the button will open the 'List DataSourse' dialog illustrated below.

Link and Image Link - Clicking on the button will open the dialog with link properties.

Control Type Specify the control type to be used for each of the fields in the form.
Order by Select a field for the records to be ordered by when initially displayed.

After adding fields to the editable grid and setting the optional Order by field, you can click on the Finish button to close the builder and generate the form.

Click Next to proceed to step 7.

Step 7: Sorting the Editable Grid

Parameter Description
Sorting Select the type of sorting controls that you want to have in the grid.

Click Next to proceed to step 8.

Step 8: Customizing the Navigation

Parameter Description
Page Navigator Select the type of Navigation controls that you want to have in the grid.
Modify If you want to have custom navigation controls on the form, click Modify to open the Custom Navigator window. You can customize the controls to suit your needs.
  • First - Text for the link to the first record
  • Previous - Text for the link to the previous record
  • Next - Text for the link to the next record
  • Last - Text for the link to the last record
  • Use images for links - To have images instead of text for the navigation links
  • Disabled links are not visible - Links to pages that cannot logically be browsed are not shown (e.g. if you are on page one, you cannot browse using the first or previous links).
  • Page Numbers - Apart from having the four links mentioned above, specify whether you also want to have links to the individual pages and how they should appear.
  • Number of Pages - Specify how many page links should be displayed.
  • Show total pages - Display the total number of pages that can be browsed.
Add Page Size Selection Select the page size for the grid.

Step: Options the Editable Grid

Editable Grid Field Settings

Parameter Description
Grid layout
  • Tabular layout represents data in an ordinary datasheet view.
  • Columnar layout places each data source field into one row with column caption on its left.
  • Justified layout represents each data source field in two consecutive rows: field name is placed in one row and the data is shown in the second row.
Records per page Specify the default number of records to be shown per page
No records found message Specify the message that will be displayed in the grid form if there are no records to be shown.
Record separator Add ability to specify the record separator.
Display the total number of records Display the total number of records that are retrieved in a form.

Linking the Master and Detail

The last step in configuring the grid is selecting the field to be used to link the records in the master record to the details in the record form. You can select any one of the fields that are already in the master record.


Select layout for Master and Detail (optional)

For Editable Grid:


For Record:


Step 8: Selecting a Style (optional)

Select a style for the editable grid form. This step is optional.

Editable Grid Style Options

Parameter Description
Style This element contains a list of styles to choose from.
After selecting a style, click the Finish button to generate the form to the page.

After selecting a style, click the Finish button to generate the form to the page.


On-line, printable versions and updates