TextBox | X4Documentation

<TextBox> controls can be used to allow users of a Web App to work with text, numbers, or dates. Depending on the type of the TextBox, its appearance and behavior will change.

Instructions for use

A <TextBox> control is created with the <TextBox> element.

<TextBox>
...
</TextBox>

<TextBox> controls can be used in all available layout types. For more information, see Layouts.

Attribute

Note:

There are a number of default attributes that can be set for all controls. For more information about the default attributes, see Default attributes.

In addition to the default attributes, you can define the following attributes for <TextBox> controls:

Attribute	Description
`autocomplete`	This HTML attribute specifies whether AutoComplete is turned on or off for the TextBox. By default, AutoComplete is enabled. Possible values: `true`/`false`
`border`	Defines whether a border is displayed around the control. Only works if `multiline="true"`. Possible values: `true`/`false`
`border-left`	Defines whether a left border is displayed. Only works if `multiline="true"`. Possible values: `true`/`false`
`border-right`	Defines whether a right border is displayed. Only works if `multiline="true"`. Possible values: `true`/`false`
`border-top`	Defines whether a top border is displayed. Only works if `multiline="true"`. Possible values: `true`/`false`
`border-bottom`	Defines whether a bottom border is displayed. Only works if `multiline="true"`. Possible values: `true`/`false`
`displayName`	Text box label. Data binding possible Possible values: Any string
`iconColor`	Defines the color of the icon. Data binding (color) is possible Possible values: Hexadecimal color value, e.g. `ff5a00` Note: Do not use a hash before the color value. Do not use an abbreviated notation of the color value. Color code from the color palette of the Web App, e.g. `A200` For more information, see Theming.
`iconPosition`	Position of the icon within the TextBox. Possible values: `prefix`: The icon is displayed at the beginning of the TextBox (default). `suffix`: The icon is displayed at the end of the TextBox.
`iconUrl`	Path to a graphic file or specification of a material icon that is used as an icon of the component. Data binding possible The graphic file must be located in the `Resources` folder just below the Web App Project. The path is specified relative to the `Resources` folder. The material icon must be specified with the prefix `icon`, e.g. `icon:<MaterialIconName>`. Possible values: String (URI), e.g. `clock.png` `Icon:<MaterialIconName>` , e.g. `icon:extension` With Ctrl+Space, you get an overview of the available icons. The selection may differ from the actual available Material Icons.
`multiline`	Specifies whether multi-line inputs/outputs are possible in the TextBox. Works only with the `Text` type. Possible values: `true`/`false`
`rows`	Sets the visible height of the text box. Works only for multi-line text boxes. More lines can be entered, which are then visible by scrolling. Possible values: Integers (default: `5`)
`type`	Type of the TextBox, changes behavior and appearance. Possible values: `email`: Email address `month`: Month and year with datepicker `number`: Number with dial arrows (spinner) `search`: Search field `tel`: Telephone number `text`: Text (default) `time`: Time with dial arrows (spinner) `url`: URL `week`: Calendar week and year with datepicker and dial arrows (spinner) All values that contain a date or time must be stored and provided in UTC!
`value`	Required Content of the TextBox. Translatable Data binding possible Possible values: Any string

Actions

The following action is available for <TextBox> controls. For more information about actions, see Actions.

`<SelectAction>`

You can insert the Select action using the <SelectAction/> element within <TextBox>. The action is triggered when the user selects the TextBox.

Note:

You must insert the <SelectAction> element before the desired layout type (BoxLayout, FlowLayout, GridLayout, ResponsiveLayout, TabLayout).

Example

TextBox in the Detail Component

XML

<DetailComponent xmlns="http://softproject.de/webapp/1.0" name="PasswordBox">
    <FlowLayout>
        <PasswordBox value="My password" displayToggle="true" displayName="Enter your password"/>
        <PasswordBox value="My password" displayToggle="true" displayName="Confirm your password"/>
        <RichText value="">
            <PDFExport/>
        </RichText>
        <TextBox value="demo.user@softproject.com" displayName="Email address" type="email" iconUrl="icon:email"/>
        <TextBox value="demo.user" autocomplete="true" displayName="Username" iconUrl="icon:person"/>
        <TextBox value="123456" displayName="Phone number" type="tel" iconUrl="icon:phone"/>
        <TextBox value="Text" displayName="Text input" type="text" iconUrl="icon:text_fields"/>
    </FlowLayout>
</DetailComponent>