CodeCharge Studio

Data Dictionary Example

This example shows you a simple case where you may use the Data Dictionary to configure the default properties of the forms and controls generated by the builders.

Changing Captions and Defining a Link Parameter

This example is just a simple demonstration of configuring the Data Dictionary to change the default controls, captions and titles of forms. We will use the 'departments' and 'employees' table of the 'intranet' sample database to display a list of departments and the employees that belong to each department. We will configure our changes in the data dictionary first, then run the Grid builder to create two forms like the ones shown below. The page should display a list of department names. When we click on one of the departments, the second grid will display a list of all the employees within the department.

CodeCharge Studio comes with two sample Access databases, plus corresponding ODBC DSN definitions that are installed automatically when you install CodeCharge Studio. The sample database files are located in the installation folder. There are also several SQL scripts to create the databases in other formats. See Connecting to Databases. For this example, create a connection to the 'Intranet' sample database called 'intranet'. Which type of connection (e.g. OLEDB, ODBC, SQL Server, MySQL, etc.) should not matter as long as the database definition is the same.

Click on the 'Data Dictionary' tab and select 'Open Connection', then the connection for 'intranet'.

Double click on the 'departments' table.

Click on 'department_name' in the middle part of the Property Editor. This changes the current database field and updates the list of properties accessible in the Data Dictonary Property Editor . You can also change the selected database field, by clicking on the column in the Database Explorer.

At the top of the Property Editor, change the 'Form Title (Display)' property to: 'Department List'

Click on the 'display' tab in the Property Editor and select 'Link' for the default control when this database item is used for display. We want to use the department name as a link parameter for submission to other forms.

Although we won't use the other properties in this example, some other properties we might want to change for now are: 'Display Caption', 'Input Caption', and 'Form Title (Input)'.

The Data Dictionary at this point should look like this:

When users click on the department name, we want to submit an URL parameter, so click on the Href Source and the ellipsis (...) in this field, and define a parameter like this:

The 'Static address' for the web page is just a placeholder. You want to redirect the browser to the page containing the form you want to pass the parameter to (e.g. the current page in this example), but since you have not created the page yet, it is not possible to select this value. In your own applications, if you know the page you want to direct the browser to, select it for the address.

Ordinarily, you would select a database field for the source of the parameter, however since this control is not part of a form yet (e.g. a Grid), there is no datasource, so set the 'Source Type' to an expression. Once you have added this database field to a form, you will need to change the 'Source Type' to a 'datasource column'.

Next, we want to change the default title that will appear on the 'employee' list. Click on the 'employees' table and for this example, change the 'Form Title (Display)' to 'Employee List'.

The employee list is displayed in a grid with captions running across the top of the grid. We want to change the captions of each column to be more expressive than the defaults so change the captions as shown below. For each caption, select the column of the employees table, then click on the 'Display' tab at the bottom of the Property Editor and then change the 'Caption' property in the grid. For this example, we'll change the captions to:

From: Emp Id To: Id
From: Emp Login To: Login
From: Emp Password To:Password
From: Emp Name To: Employee Name
From: Emp Title To: Title
From: Phone Home To: Home Phone
From: Phone Work To: Work Phone
From: Phone Cell To: Cell Phone

Instead of 'group_id' and the 'department_id' values, we want to display 'group' and 'department' names, so we will join the 'departments', 'groups', and 'employees' tables when we build the grid for the Employee List and include these fields from the other tables in the grid form.

Run the Grid Builder and for the datasource, select the 'departments' table, and build a query that returns both the 'department_name' and the 'department_id'. Use 'build query' to create the query. Remove the 'department_id' from the grid form. That is, include 'department_id' in the query (datasource) but do not display it in the grid.

Do not include a 'search' form for this grid. The other options are unimportant for this example, but we included the 'sorter control' so the list could be arranged alphabetically. Remember, we changed the default title for the 'departments' table to 'Department List', so this should be the default title as it appears on the form. Also, we defined the default control for 'department_name' as a Link control, so the the web page at this point should look like the one below.

The field caption is optional.

When we configured the data dictionary, we could not set the specific page associated with the Link paramter, nor determine the source for the parameter value. In Design mode, click on the 'department_name' control, and change the properties of the Link. Open 'Href source' and change the 'Static address' by selecting the current page. Change the 'Source Type' for the parameter to 'DataSource Column' and verify that the 'Parameter Source' is 'department_id' (the name of the database column). If you don't make these changes your application is likely to fail (e.g. with compilation errors since the generated code is incorrect).

When the user clicks on a department name, the form will submit an URL parameter like so: 'dept_id=<the 'department_id' value>'

Run the Grid Builder again to add another grid for the Employee list. For the datasource, build a query in Design mode that looks something like this by joining the Employee, Department, and Group tables, and adding a SQL WHERE clause that returns the fields desired from the Employee table, including 'department_name' and 'group_name' from the 'department' and 'group' tables.

SELECT <all of the selected fields of the employees>, department_name, group_name
FROM employees
WHERE department_id = {dept_id}

where '{dept_id} is an URL parameter that will be submitted from the Department grid. The 'default value if parameter is missing' should be -1. i.e. display the employees only when a department has been selected.

Rearrange the fields selected in the builder until the order and number of fields matches the 'Employee List' form at the top of this section: department_name, group_name, emp_name, emp_login, emp_password, title, email, phone_home, phone_work, phone_cell. Change the captions for 'department_name' and 'group_name' to 'Department' and 'Group'.

Notice that the control generated for 'department_name' is a Link control. This is because we configured it this way in the data dictionary so the control type would be correct in the 'Department List' form. In Design mode, select this control and change the control type to Label. It is not necessary to change any properties but this change is very important; without it, your application will likely fail (e.g. compilation error) because, as you may recall, we did not fully define the Link control properties in the data dictionary (e.g. parameter source type).

Because we joined multiple tables, the Grid Builder combined all of the default form titles into one heading. Modify the title in the builder to 'Employee List'.

The other options in the Grid Builder are unimportant for this example. The final web page should look something like the picture at the top of this section.

See also

On-line, printable versions and updates