TestComplete provides over 20 built-in controls that you can use in your custom forms. Among them are enhanced editors with embedded buttons. You may have noticed similar controls in many of TestComplete’s dialogs and panels. For example, a text box with the embedded button is often used to specify a file or folder name, and the button click calls the dialog, where the user can visually select the desired file or folder.

Did you know that in TestComplete 5 you can also incorporate this functionality into your custom forms? In this blog, I will explain how to implement this.

Suppose, you need a form that will ask the tester to enter the name of the test data file. Since the tester could misprint the file name, it is a good idea to provide them with the Open file dialog, where they can select the desired file. The solution is to use the TcxButtonEdit control together with TOpenDialog. The former control provides a text box with the ellipsis button; the latter represents the Open file dialog. You will need to adjust the components behavior so that the Open file dialog is displayed when the user clicks the editor’s ellipsis button.

First, we start with a new TestComplete project that contains the User Forms project item and a form. You need to add the following components to the form, and set the property values, as stated below:

1. A TcxLabel control (from the Helpers category) that will hold the helper text. Change the label text (the Caption property) to: “Specify the path to the test data file:” (without quotes).
2. A TcxEditButton control (from the Editors category) that will be used to input the file name. Clear the Text property.
3. A TOpenDialog component (from the Dialogs category), which provides the Open file dialog.
4. A TcxButton control (from the Buttons category), which is the OK button. Specify the following property values:
   

   Caption = “OK” (without quotes),
   ModalResult = mrOk,
   Default = True.

   (I’ve described the meaning of these properties in the previous blog; these values make the button act as the OK button)

5. Another TcxButton control, which is the Cancel button. Specify the following property values:
   

   Caption = “Cancel” (without quotes),
   ModalResult = mrCancel,
   Cancel = True.

After placing and adjusting the components as described, the form should look like:

Now you need a way to display the Open file dialog when the user clicks the editor’s button. This can be done by creating an event handler for the editor’s OnButtonClick event:

• Click the cxButtonEdit1 control on the form.
• In the Properties pane, press the Events button to switch to the list of control’s events.
• Expand the Properties node and select the OnButtonClick event.
• Click the ellipsis button within the event’s cell. This will display a dialog asking you to specify the name of the script routine to be created. Leave the default name and press OK.

TestComplete has now created a new script routine. It has also automatically attached it to the OnButtonClick event of the cxButtonEdit1 control. Now, when you view the list of control’s events, you can see the routine’s name next to the OnButtonClick event.

The sample code for the event handler routine is below. It displays the Open file dialog and after the user selects a file, it writes the file name to the editor’s text.

I’d like to point out the Sender parameter of the routine. In event handlers, this parameter provides access to the form’s control that raised the event. In our case, Sender represents the cxButtonEdit1 control and frees us from having to use the UserForms.UserForm1.cxButtonEdit1 notation.

Also, AButtonIndex specifies the index of the editor’s button that was clicked. Since our control has only one button, we do not need to use this parameter.

The code for the script’s Main routine is below. It displays the form, and if the tester chooses to proceed, runs the test routine. Try this sample to see how the form works: