CodeCharge Studio

AJAX Autofill Builder

The Autofill Builder simplifies the process of adding an Autofill feature to your forms.

To invoke the Autofill Builder, select the Builders tab at the top of the Toolbox ribbon bar.

Step 1: Choose a database connection and builder options

Option Description
Use an existing database connection Select a previously configured database connection.
Create... Create a new database connection.
or select a sample database (Internet/Intranet) Use one of the example databases provided with CodeCharge Studio as an alternative to selecting an existing database connection. If this option is selected, the database connection will be created automatically.
Internationalized Use translation resources in place of text.
Save builder options Preserve the options selected in the Builder for each step. The options will be automatically pre-selected the next time you use the Builder.

Step 2: Configure Feature Data Source

The following options are available when configuring the Autofill feature.

Option Description
Target Control The control to which the Autofill feature will be assigned to. After the Autofill feature is defined, an icon for the feature will appear under the control in the Project Explorer pane. The Autofill may be activated after the value of this control changes, but you also control the activation of the Autofill feature using the Start Event described below. See Autofill Properties for more details on changing properties.
Data Source The table to be used to create an AJAX service that will be used at runtime to retrieve the matching record. This is the source of the data used to fill in the other controls of the form.
A query can be created in place of a table by clicking the "Build Query" button which opens the Visual Query Builder.
Search Field

The database field to be searched for the value entered in the Target control. e.g. if the Target control is 'employee name', the value entered in this field is compared against the Search database field to find the database record used to fill in the othercontrols of the form. This field is usually the same as the control source of the "Target Control" field. The fields must be consistent otherwise the Autofill will fail. e.g. comparing 'employee name' against a database field for e-mail addresses will likely fail.

Note, by default, the control 'value' is used as the source data for matching against the Search field. However, after you finish defining the feature with the builder you can change the 'value' property on the Autofill feature. The 'value' property defines the source of the value to be used, which could be 'value', 'innerHTML', or some other property of the control.

Filled Controls This is a list of the controls to be filled in when the Autofill feature is activated. This is described in more detail below.

Adding Controls to be filled-in

When you define the Autofill feature, you have to specify the controls on the form that will be filled in when the Autofill feature is activated. A table is provided in the builder to define these controls. When you click on one of the fields of the table, a drop down list is displayed showing the possible controls, database fields, or Targets that can be defined.


The Control name is the name of the control on the form. Unless you have renamed the control, the name is usually the same as the database field.

Not all controls are displayed in the drop down list. If the control name doesn't appear in the list, you must enter the name manually. For example, you can use the datasource from one form on your web page to update the fields of another form on the same page. If you want to update a control that exists on a different form of the same page, you must use the decorated name that CodeCharge Studio selects for the control. Normally, the name of the control is the form name, followed by the control name, without spaces. e.g. store_productsprice where 'store_products' is the name of the form. When a web page is requested (e.g. from browser), all CodeCharge Studio controls are rendered as HTML controls. The name generated must match the name of the HTML control generated by CodeCharge Studio, so you may need to examine the rendered web page source first to determine the name (e.g. store_products_ctl00_image_url). Also, if the control you want to update is a Label control, you will need to add a <span> tag in order to uniquely identify the control.

e.g. {item_name}<span id="my_formitem_name"> </span>

The Field name is the name of the database field which depends on the datasource you have defined in the Builder.


The Target is the HTML property of the Control you specified. When the web page is requested (e.g. in the browser), all CodeCharge Studio controls are rendered as HTML controls. When Autofill is activated, this is the property of the associated HTML control that is updated. You must select a target property that is consistent with the type of HTML control that is rendered. e.g. for a Label, you would typically select 'innerHTML'. For a textbox, you would normally select 'value'. For an image control, you would normally select 'src'. Not all of the possible properties are listed here. If you need to specify a different property, then just enter the name of the property in the table. However, the name you enter must be exactly the name of an HTML property, and the property you select must be consistent with the HTML control.

See also


On-line, printable versions and updates