Inserting and defining a basic web control

The basic web controls can be inserted into the report areas listed in Component placement. This document shows how to insert and define values of the web controls separately.

Text field

To insert a text field and define its values:

1. Do one of the following to insert the text field:

   • Drag Text Field from the Toolbox panel to the destination.
   • On the menu bar, click Insert > Web Controls > Text Field, then click the mouse button in the destination.
   • On the Insert toolbar, click the down arrow on the Insert Control Objects button and select Text Field from the drop-down list, then click the mouse button in the destination.
2. Right-click the text field and select Display Type from the shortcut menu. The Display Type dialog appears. See the dialog.

   

3. In the Web Options panel, select the type of the text field: Standard or Password.

   Standard means that the text field is a normal text field. Password means that the text field is a password box in which the typed characters are displayed as asterisks.

4. Enter the name, value for the text field in the Name and Value fields.
5. In the Tool Tip field, enter the tip you want to show for the text field. Then at server runtime or in HTML results, when you hover the mouse over the text field, the tooltip will be displayed.
6. Set the character width in the Display Width field, and the maximum number of characters the user can enter in the Max Length field.
7. Check the Read Only option if you would like to set this text field to be read-only.
8. Check the Disabled checkbox if you want to make the text field disabled.
9. If needed, bind some web actions to the text field in the Web Behaviors box.
10. Upon finishing, click the OK button to close this dialog.

Hidden field

A hidden field is visible only in design mode.

To insert a hidden field and define its values:

1. Do one of the following to insert the hidden field:

   • Drag Hidden Field from the Toolbox panel to the destination.
   • On the menu bar, click Insert > Web Controls > Hidden Field, then click the mouse button in the destination.
   • On the Insert toolbar, click the down arrow on the Insert Control Objects button and select Hidden Field from the drop-down list, then click the mouse button in the destination.
2. Right-click the hidden field and select Display Type from the shortcut menu. The Display Type dialog appears. See the dialog.

   

3. In the Web Options panel, specify the name and value of the hidden field.
4. If needed, bind some web actions to the hidden field in the Web Behaviors box.
5. Upon finishing, click the OK button to close the dialog.

Text area

A text area allows you to input a multi-line string.

To insert a text area and define its values:

1. Do one of the following to insert the text area:

   • Drag Text Area from the Toolbox panel to the destination.
   • On the menu bar, click Insert > Web Controls > Text Area , then click the mouse button in the destination.
   • On the Insert toolbar, click the down arrow on the Insert Control Objects button and select Text Area from the drop-down list, then click the mouse button in the destination.
2. Right-click the text area and select Display Type from the shortcut menu. The Display Type dialog appears. See the dialog.

   

3. In the Web Options panel, enter the name, value of the text area in the Name and Value fields.
4. In the Tool Tip field, enter the tip you want to show for the text area. Then at server runtime or in HTML results, when you hover the mouse over the text area, the tooltip will be displayed.
5. Set the character width in the Display Width field.
6. Specify the number of lines that the text area allows in the Number of Lines field, and choose whether or not to wrap the text by selecting true or false from the Auto Wrap drop-down list.
7. Check the Read Only option if you would like to set this text area to be read-only.
8. Check the Disabled checkbox if you want to make the text area disabled.
9. If needed, bind some web actions to the text area in the Web Behaviors box.
10. Upon finishing, click the OK button to close this dialog.

Checkbox/Radio button

The way to insert and define the values of a checkbox and radio button is the same.

To insert a checkbox/radio button and define its values:

1. Do one of the following to insert the checkbox/radio button:

   • Drag Checkbox/Radio Button from the Toolbox panel to the destination.
   • On the menu bar, click Insert > Web Controls > Checkbox/Radio Button , then click the mouse button in the destination.
   • On the Insert toolbar, click the down arrow on the Insert Control Objects button and select Checkbox/Radio Button from the drop-down list, then click the mouse button in the destination.
2. Right-click the checkbox/radio button and select Display Type from the shortcut menu. The Display Type dialog appears. See the dialog.

   

3. In the Web Options panel, specify the name, value of the checkbox/radio button in the Name and Value fields.
4. In the Tool Tip field, enter the tip you want to show for the checkbox/radio button. Then at server runtime or in HTML results, when you hover the mouse over the checkbox/radio button, the tooltip will be displayed.
5. Set Initially Checked to true if you want the checkbox/radio button to be selected by default.
6. Check the Disabled checkbox if you want to make the checkbox/radio button disabled.
7. If needed, bind some web actions to the checkbox/radio button in the Web Behaviors box.
8. Upon finishing, click OK to close this dialog.

Image button

To insert an image button and define its values:

1. Do one of the following to insert the image button:
   • Drag Image Button from the Toolbox panel to the destination.
   • On the menu bar, click Insert > Web Controls > Image Button, then click the mouse button in the destination.
   • On the Insert toolbar, click the down arrow on the Insert Control Objects button and select Image Button from the drop-down list, then click the mouse button in the destination.
2. Right-click the image button and select Display Type from the shortcut menu. The Display Type dialog appears. See the dialog.

   

3. In the Web Options panel, click the Browse button to specify the image source. For a DBField, formula, or a summary, you can also check the From DBField radio button to make the value of the DBField/formula/summary the image source. If you choose this option, the Decode Type drop-down list is enabled, from which you can specify the type for decoding the image.
4. Enter the name, value of the image button in the Name and Value fields.
5. Type a string in the Alternate Text field to serve as content when the image cannot be rendered.
6. In the Tool Tip field, enter the tip you want to show for the image button. Then at server runtime or in HTML results, when you hover the mouse over the image button, the tooltip will be displayed.
7. Check the Disabled checkbox if you want to make the image button disabled.
8. Specify the scaling mode of the image button from the Scaling Mode drop-down list, and the maximum scaling ratio in the Max Ratio field. By default the scaling ratio of the image button is not limited. If it is set to any value greater than 0, the actual scaling ratio is less than or equal to it.
9. Specify the size of the image button.
   • If you choose to use the original size of the image, check the Original Size option.
   • If you want to use customized image size, uncheck Original Size, and then set the display width and height of the image in the Width and Height fields. Check the Constrain Proportion option if you want to constrain aspect ratio of the image when setting the width and height.
10. If needed, bind some web actions to the image button in the Web Behaviors box.
11. Upon finishing, click the OK button to close the dialog.

Button

A button is for submitting or resetting a form.

To insert a button and define its values:

1. Do one of the following to insert the button:
   • Drag Button from the Toolbox panel to the destination.
   • On the menu bar, click Insert > Web Controls > Button, then click the mouse button in the destination.
   • On the Insert toolbar, click the down arrow on the Insert Control Objects button and select Button from the drop-down list, then click the mouse button in the destination.
2. Right-click the button and select Display Type from the shortcut menu. The Display Type dialog appears. See the dialog.

   

3. In the Web Options panel, enter the name, value of the button in the Name and Value fields.
4. In the Tool Tip field, enter the tip you want to show for the button. Then at server runtime or in HTML results, when you hover the mouse over the button, the tooltip will be displayed.
5. Select the action of the button: None, Submit Form or Reset Form.
6. Check the Disabled checkbox if you want to make the button disabled.
7. If needed, bind some web actions to the button in the Web Behaviors box.
8. Upon finishing, click OK to close this dialog.

List/Drop-down list

List and drop-down list are generally called multivalue containers. A list or drop-down list provides a list of values for users to select from. While, a drop-down list occupies a smaller space than a list box so that a report can be laid out more compactly.

To insert a list/drop-down list and define its values:

1. Do one of the following to insert the list/drop-down list:

   • Drag List/Drop-down List from the Toolbox panel to the destination.
   • On the menu bar, click Insert > Web Controls > List/Drop-down List , then click the mouse button in the destination.
   • On the Insert toolbar, click the down arrow on the Insert Control Objects button and select List/Drop-down List from the drop-down list, then click the mouse button in the destination.
2. Right-click the list/drop-down list and select Display Type from the shortcut menu. The Display Type dialog appears. See the dialog.

   

3. In the Web Options panel, enter a name for the list/drop-down list in the Name field.
4. In the Tool Tip field, enter the tooltip you want to show for the list/drop-down list. Then at server runtime or in HTML results, when you hover the mouse over the list/drop-down list, the tooltip will be displayed.
5. Specify the item labels and the value of each item in the items box by inputting some strings as the labels and values respectively.

   If you want to use a DBField/formula field/parameter field to control the value, click in the Value column to insert one with the Insert Fields dialog, and then select the format for the inserted field from the drop-down list in the Item Label column. Check the All radio button in the Insert Field dialog if you want to add an All value to the list/drop-down list. Then when All is selected as value of the list/drop-down list at runtime, all filter actions defined on the list/drop-down list will not take effect, and if you applied some other web action that needs value from the list/drop-down list, a Null value will be returned.

6. If the display type is defined as List, you can check the Allow Multiple Selections checkbox if you want to allow multiple items to be selected.
7. In the Selected field, specify the selected value for the list/drop-down list.
8. If you want to disable the list/drop-down list, check the Disabled option.
9. If needed, bind some web actions to the list/drop-down list in the Web Behaviors box.
10. When done, click OK to apply the settings.

After a basic web control has been inserted, you can customize its appearance and behavior by setting properties in the Report Inspector, which can be saved as a CSS style for future use (for details, see Creating a CSS style).