There are over 20 controls you can add to an H2O Form (at the time this was written). I will explain a few of them here in detail. Some of the more advanced controls like the Form Styling and H2O Logic controls have their own articles.
To add a new control to your form, click the Add New Control link at the bottom of the Controls Editor. Then select the control type. After you select the control type, the Control Script options on the right site of the editor will show you the available H2O Scripting options for the selected control. The next step is to name your control by typing a name into the Name field and then click the Update Control Info link. This is all that is requires for the simple controls, like the Textbox and Label controls.
Control Properties:
- Control Color: As shown in the image above, hovering over the Select Color link will display the H2O Control Background Color selection panel. You can use this panel by clicking on the color of choice, or type the color code directly into the Control Color field.
- Tool Tip: The Tool-tip property will display additional information to your user when they mouse the mouse cursor over the control. The Tool-Tip is rendered using a custom format to give your forms a professional look, as seen in this image.
- CSS Class: The CSS (cascading style sheet) Class allows you to control the style of your controls. For details on this, go to http://www.w3.org/Style/CSS/
- Validation: The Validation property allows you to control the format of the data entered into the control by using REGEX. If you don't understand REGEX, you can go to www.regexlib.com for almost all expressions you would need.
- The Is Primary Key checkbox is to be used with forms that are associated with a table in your DotNetNuke (or another database within your server) database. Check this option if the control should be associated with the primary key of the table the form is associated with.
- The Field Name property associates the control with a field in the table your form is associated with. If your form is not associated with a table, then leave this field empty.
- The Width and Height properties define the width and the height the control should be rendered to when your form is displayed.
- The Required checkbox will force the user to enter a value for this control before the form is saved.
- The Security Roles (click the + to expand the list of DotNetNuke Roles in your portal) will disable the control if the user is not in one of the roles you have selected.
- The Create Label To Match option has no effect on the current control, but if it is checked when you update the control, H2O will automatically create a new Label control to match the current control you are editing.
| The File Upload control will look like the image to the right when it is rendered on your form. This control allows your users to upload files to your web site through the form. Once the form is saved, the file will become available for download (as shown in this image). You can also upload files form the Related Files tab. |
 |
 |
The Radio List (SQL) control will display a list of values provided from an SQL Statement (as shown to the left). The SQL Statement should be entered into the Control Script field when creating the control. If your SQL Statement returns a single field, it is used for both the value and the text displayed in the control. If your SQL Statement returns two fields, the first field is used as the value to store in your database and the second is used for display on the form as text. |
| The Radio List control will display a fixed list of values you specify by entering the values into the Text property of the control as shown to the right. These values must be separated by a comma. |
 |
 |
The Calendar and Date Time controls provide an easy to use interface with drop down calendars to make date selection easy. The difference between the Calendar and the Date Time controls is that the Date Time control includes an additional drop down for time selection as show in this link.
There are two HTML controls you can use in your forms. The HTML control allows you to enter HTML in the controls editor for display when the form is rendered. The HTML Input control allows your users to enter HTML to be saved with your form. The HTML Input control is a great way to give your users content management features or for building a Classifieds module for DotNetNuke using the Custom Views in projects to render the HTML in the items list. The HTML Input control is shown in the image to the left.
|
The Data Grid control displays the data returned from the SQL Statement you enter into the Control Script property of the control, as shown in this image.
For the External List, enter your SQL Statement into the Control Script field. If your SQL Statement only returns a single column, that column will be used as the value and displayed text. If your SQL Statement returns more than one column, the first column is used as the value and the second column is used as the displayed text. The External List displays as a drop down list box.
For more information on using custom parameters in your SQL Statements to build dynamic SQL Statement when your form is displayed, take a look at this link.
Download the Data Controls form in the Downloads to get hands on experience using all of controls and how to use them.