Form Builder‎ > ‎

Form Fields

Action Form configures the Title text fields using the General, UI Settings and Validations options, highlighted on Figure 1.1. The options include field properties for configuring and customizing the title text fields.

Figure 1: Identifies Form Field Settings


Title Field

The Title field, identified on Figure 1.1, is for specifying the title name for the text field on the action form.

Figure 1.1 : Identifies Title Field



Enter a Title
  1. To enter a Title name, click in the Title text box identified with the green arrow on Figure 1.1.

  2. Then enter an appropriate title name for the text field.

  3. In Type drop down menu, specify a field type for the Title name.

General

General field properties, highlighted on Figure 2, include Name, auto, Short Desc. and Value/Default Value. They allow you to customize the title name, enter a short description and insert default values for the title. You are also able to automate the title name using the auto check box. 

Figure 2: Identifies General Properties



  1. To open the General window, click on the General link or the right arrow next the General link.

    • The General link, identified on Figure 2, is located below the Title name.

  2. The General settings window will open with the field properties specified in the following bullet list.

    • Name
    • Short Desc.
    • auto
    • Value/Default Value

Name and Auto Fields

The Name field property is the first field in the General settings window, identified with the yellow highlight on Figure 3.  It is responsible for storing the Title name. You can assign a new name for the Title or keep the assigned name in the field. The assigned name is auto-generated based on the text entered for the Title. 

Name and Auto Example


  1. In Figure 3, Last Name is entered for the Title to specify that the user should enter a last name.

  2. Then Small Text is selected from the Type drop down menu to specify the Last Name text field is a small text type.

  3. Then the auto check box is selected to keep LastName for the title name. This is the auto-generated title name.
    Notice that the names are similar. The only difference is the space.

Figure 3: Identifies Name and Auto Fields



Rename Title Field
  1. To rename the Title field, deselect the auto check box, identified with the blue arrow on Figure 4. Notice the auto check box is deselected.

  2. Then remove the current name in the Name field and enter your own. 
Rename Title Field Example
  1. In Figure 4, LastName is entered for the Title to specify that the user should enter a last name.

  2. Then Small Text is selected from the Type drop down menu to specify the Last Name text field is a small text type.

  3. Then the auto check box is deselected to change the Name field.

  4. LastName is changed to ProfileName. Notice that the Title field name does not change, only the Name property.
Figure 4: Identifies Renamed Property


Short Desc. Field

The Short Desc. field is next to the auto check box. It that allows you to enter a short description for the Title. Initially, the text box appears small, but when you click inside it expands, which allows you to enter a brief description. You can resize the text box using the controls identified with the blue arrow on Figure 5.

Figure 5: Identifies Short Desc. Field



 Short Description Example

  1. In Figure 5, Enter Your Last Name is entered for the short description to instruct the user to enter their last name.

    • The field expands to enter this brief description.

  2. On the action form, identified on Figure 6, notice that Enter Your Last Name is inserted below the Last Name text field.
Figure 6: Displays Short Description


Value Field

The Value / Default Value field is below the Name field. It is the largest text box in General settings. Initially it appears as a long text box, but when you click inside it expands to a large text box. You can also resize the Value / Default value field using the controls identified with the green arrow on Figure 7. The field allows you to insert DotNetNuke Tokens. When you insert a token in the Value/Default Value text field, the token is applied to the Title field.

Figure 7: Identifies Token in Value/Default Value Field


Token Example
  1. In Figure 7, [User:LastName] token is entered for the Value/Default Value field to populate the user's last name in the text field on the action form.

  2. On the action form, identified on Figure 8, Wright is populated in the text field as the name of the user.

    • The user does not have to insert their last name because the token does it.

    Note: The last name of the user will only populate if the user is logged in.

Figure 8: Displays Generated Token


UI Settings

UI(User Interface) Settings field properties are specified in the UI Settings window, highlighted on Figure 9.  They allow you to insert and apply CSS Styles and Classes to individual or multiple text fields. 

Figure 9: Identifies UI Properties


CSS Styles

Action Form allows you to use the Label CSS Class(es) and Control CSS Class(es) properties to apply CSS classes to the form and the Label CSS Styles and Control CSS Styles field properties to apply individual CSS styles to the action form. CSS classes are predefined classes created by DNN and should reference the relevant css file.
  • Label CSS Class(es)
    Label CSS Class(es) allows you to apply multiple CSS classes to labels on the form.

  • Control CSS Class(es)
    Control CSS Class(es) allows you to apply multiple CSS classes to control the layout of the form.

  • Label CSS Styles
    Label CSS Styles property allows you to input and apply CSS Styles to labels.

  • Control CSS Styles
    Control CSS Styles
    property allows you to input and apply CSS Styles to control the form.
Open UI Settings
  1. To open UI Settings window, click on the right arrow next to the UI Settings link or the UI Settings link to open.

  2. The UI Settings window will open to show CSS properties. Notice there are four CSS properties that you can use to apply styles to the layout of the action form. You do not have to use them but they enhance the layout and appearance of the form.
Control CSS Styles Example
  1. In Figure 10 for example, Email Message is entered for the Title field.
  2. Then height:100px; width: 150px is entered for the Control CSS Styles text field to specify the height and width of the Email Message text field.

    • The measurements for the height and width are in pixels. You can apply the Control CSS Styles property to adjust the height and width of the form.

      Figure 10: Displays Height and Width for Control CSS Style Property



  3. On the action form, identified on Figure 11, the standard size of the Large Text box is displayed. This is before the height and width adjustments. When the height and width adjustments are applied to the Large Text field it looks like Figure 12.
Figure 11: Displays Standard Large Text Field









Figure 12: Displays Adjusted Large Text Field

   

Validations

Validations field properties are specified in the Validations window identified with the blue arrow on Figure 13. The Validations properties includes the Field is Required check box and two Custom Validation drop down menus. Custom Validation properties are specified Custom Validation #1 and Custom Validation #2 and are identified with the green arrows on Figure 13. They allow you to set validations on the Title field.

Figure 13: Identifies Validation Field Properties

Required Field

The Field is Required property allows you to set a requirement on the Title field. This option requires the user to complete the text field on the action form. If the user does not complete the field, the form returns "required" error message.

Required Field Example

  1. In Figure 14, Email is entered for the Title to specify that the user should enter an email address.

  2. Then Email is selected from the Type drop down menu to specify the Email text field requires a valid email address.

  3. Then the Field is Required check box is selected to specify that the Email text field requires completion.



    Figure 14: Identifies Field is Required Property


  4. On the action form, identified on Figure 15, the Email text field is incomplete. Since the Email text field is a required field the form returns the "required" error message.

    • Notice that there is red star (*) next to the Email title. This shows that the field is required.
Figure 15: Displays Required Field


Custom Validations

Custom Validation #1 and #2 specifies formats for validating text fields on the action form. You can set up to two validations. If you want additional validators you can add them to the /DesktopModules/AvatarSoft/ActionForm/Validators folder. Figure 16 identifies the formats that are listed in the Custom Validations #1 and #2 drop down menus.

Figure 16: Displays Custom Validation Formats


Selecting a Custom Validation Field Format
  1. To specify a custom validation format, click on one of the Custom Validations drop down menu, identified in Figure 13.

  2. Then select a format from the list. The custom validation formats are briefly explained below.

    • Email Address Format allows you to set the text field to accept only email addresses.

    • Web Address format allows you to set the text field to accept only web addresses.

    • Integer Number format allows you to set the text field to accept only integers.

    • Floating Point Number format allows you to set the text field to accept only decimal numbers.

    • Strip HTML format allows you to set the text field to accept html. This will strip the html tags and submit only the text.

    • Phone format allows you to set the text field to accept phone numbers, using the (###)###-#### format.