Text Widget

Use this widget to display a text input on the Form.

Last published at: March 24th, 2026

Description:

This widget renders a text input control. 

 

Inputs

  • ID/Name - Name of widget generated by FlowWright (read-only field)
  • Placeholder - Enter text to display on render
  • Data Type - Choose between any of the data types (Currency, Custom Format, Email, Numeric, Password, Phone, Regular Expression, SSN, Text)
  • Default Value - Enter value to display on render
  • Format - Enter a format for Currency data type
  • Auto Format - Select checkbox to auto format the value during runtime
  • Required - Select the checkbox for mandatory (tick mark)
  • Hide - Select the checkbox to Hide (tick mark)
  • Read Only - Select the checkbox to Read-Only (tick mark)
  • Maximum Allowed Chars - Enter value for maximum text chars to be input
  • Input Size - Choose between any of the display size (Mini, Small, Medium, Large, X-Large, XX-Large)
  • Styles - Enter the CSS scripts for widget styles
  • Apply Classes - Select between custom classes defined 
  • Tool Tip - Enter information to display on mouse hover on form render
  • Globalize - When applicable
  • Save - Save the input values 
  • Delete - Remove this Form widget from the designer page 
  • Close - Close the input popup window
 

 

Design:

 

 

Example: 

Let’s build and execute the “TextWidgetDef” example.  

  • Create a Form Definition called “TextWidgetDef.” 
  • Drag a “BootstrapGrid, Label, Text, and Submit” control onto the canvas and arrange them as shown below.

 

  • Double-click the “Text” widget to configure the “Settings” properties. Enter a name for the control and specify placeholder text. Choose “Text” from the drop-down list for the data type. Set the default text value. Check the “Required” box for mandatory input. Check the “Hide” box to conceal this form field at runtime. Check the “Read-Only” box to prevent editing at runtime. Click the Save button. 

 

  • Select the “Currency” data type to accept currency values. Provide an optional default value and specify the mask format with the currency sign. The mask format should control the input (for example: $###,###,###.##). Check the box to enable Auto Format during runtime. Select the “Required” box for mandatory input. Check the “Hide” box to conceal this form field during runtime. Check the “Read-Only” box to prevent editing during runtime. 

 

  • Select the “Currency” data type to accept currency values. Provide an optional default value and specify the mask format. The mask format should validate inputs (for example, use ###-###-### to accept US phone numbers). Check the “Required” box to make input mandatory. Check the “Hide” box to conceal this form field at runtime. Check the “Read-Only” box to prevent editing during runtime. 

 

  • Select the “SNN” data type to accept a US Social Security Number. Provide an optional default value and specify the mask format. The mask should validate the input (for example, use ###-##-### for SNN). Check the “Required” box for mandatory input. Check the “Hide” box to conceal this field at runtime. Check the “Read-Only” box to prevent editing during runtime.

 

  • Select the “Regular Expression” data type to accept a string value in a specific format. Provide an optional default value and specify the mask format. The mask format should validate the input (for example, use /^[A-HJ-NPR-Z\d]{17,20}$/ to accept VIN values). 

 

  • Select the “Custom Format” data type to accept text in a specific format. Provide an optional default value and specify the mask format. The mask format should validate the input (for example, use AA-##-aa to accept AA-12-aa). Check the “Required” box for mandatory input. Check the “Hide” box to conceal this form field at runtime. Check the “Read-Only” box to prevent editing during runtime.

 

  • Double-click the “Text” widget to configure the “Styling” properties. Choose the UI width from the drop-down list (Mini, Small, Medium, Large, X-Large, XX-Large). Enter the CSS syntax for the styles. Select the classes to apply from the global drop-down list. 

 

  • Double-click the “Text” widget to configure the “Other” properties. Enter the tooltip text and click the Save button. 

 

  • Double-click the “Text” widget to configure the “Globalize” properties. The application will notify you if there is nothing to globalize, as shown below. Otherwise, select a language from the drop-down list and then click the Translate button. Finally, click the Save button. 

 

  • Save the Form definition. Select Actions > Create Form Instance from the menu. Create a new Form Instance, then check the box to edit this Form Instance.

 

  • The Form displays a default value to the user. Enter the user input. The text value exceeding 10 characters is not accepted according to the configuration. Click the Submit button to complete.

 

 

Definition Sample:

You can download and extract the sample definition(s) from the link provided and then import them (drag-and-drop) into your FlowWright Process Definition (XML file) or Form Definition (HTML file) page.

Note: Please verify and complete the process steps for any missing configurations, such as file path references and database connections, after the import. Then, save the definition to confirm the changes.

Click here to download the sample file.