Skip to content

Commit

Permalink
Update text box
Browse files Browse the repository at this point in the history
  • Loading branch information
MarkvanMents committed Sep 11, 2019
1 parent fb0367e commit 03c2119
Show file tree
Hide file tree
Showing 5 changed files with 98 additions and 52 deletions.
Binary file removed content/refguide/attachments/pages/text-box.png
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
138 changes: 90 additions & 48 deletions content/refguide/text-box.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,93 +6,135 @@ tags: ["studio pro"]
#If moving or renaming this doc file, implement a temporary redirect and let the respective team know they should update the URL in the product. See Mapping to Products for more details.
---

A text box can be used to display and/or edit a textual value.
## 1 Introduction

{{% alert type="info" %}}
A **text box** is used to display the value of an attribute from an object in a textual form. It can be used to display attributes of the following [data types](data-types):

![](attachments/pages/text-box.png)
This text box allows the end-user to set the name of the customer.
* Autonumber
* Decimal
* Hashed string
* Integer
* Long
* String

{{% /alert %}}
A text box must be placed in a [data widget](data-widgets) and displays an attribute of the object(s) retrieved by that widget. The name of the attribute to be displayed is shown inside the text box, between square brackets, and colored blue.

A text box must be placed in a data view or template grid and connected to an attribute of type String. The connected attribute is shown in blue and between brackets inside the text box.
For example, the following text box allows the end-user to see, and set the **Name** of a customer.

## General Properties
![](attachments/text-box/text-box.png)

{{% snippet file="refguide/numeric-formatting.md" %}}
## 2 Properties

### Show as Password (Only for Attributes of the String or HashString Type)
An example of text box properties is represented in the image below:

| Value | Description |
| --- | --- |
| False | Normal text box |
| True | Typed characters are not shown to the end user. Instead an asterisk is shown for every typed character. |
{{% image_container width="250" %}}![](attachments/text-box/text-box-properties.png)
{{% /image_container %}}

_Default value:_ False
Text box properties consist of the following sections:

### Input Mask (Only in Web Forms)
* [Common](#common)
* [Data source](#data-source)
* [Design Properties](#design-properties)
* [Editability](#editability)
* [Events](#events)
* [Formatting](#formatting)
* [General](#general)
* [Label](#label)
* [Validation](#validation)
* [Visibility](#visibility)

The input mask limits what the user can enter in the text box. A '9' means any digit, 'Z' means any letter, 'U' an upper-case letter, 'L' a lower-case letter and '*' a letter or a digit. Other characters will be taken literally. For example, the input mask 99-LLL-9999 matches 24-apr-2008.
### 2.1 Common Section{#common}

{{% alert type="info" %}}Not supported on native mobile pages.{{% /alert %}}
{{% snippet file="refguide/common-section-link.md" %}}

### Maximum Length
### 2.2 Data Source Section{#data-source}

This property indicates the maximum number of characters that can be typed in this text box.
{{% snippet file="refguide/attribute-path-property.md" %}}

| Value | Description |
| --- | --- |
| Attribute length | The maximum number of characters is the same as the maximum length of the connected attribute. |
| Unlimited | The maximum number of characters is unlimited. |
| Custom | The maximum number of characters is set by the user. |
### 2.3 Design Properties Section{#design-properties}

_Default value: Attribute length_
### 2.4 Editability Section{#editability}

### Placeholder Text
{{% snippet file="refguide/editable-property.md" %}}

The placeholder text is shown when no text has been entered yet. It can be used to give a hint to the user what kind of text should be entered.
{{% snippet file="refguide/read-only-style.md" %}}

## Validation Properties
{{% snippet file="refguide/condition-property.md" %}}

{{% snippet file="refguide/widget-validation.md" %}}
### 2.5 Events Section{#general}

## Data Source Properties
{{% snippet file="refguide/on-change-event.md" %}}

{{% snippet file="refguide/attribute-path-property.md" %}}
{{% snippet file="refguide/on-enter-event.md" %}}

{{% snippet file="refguide/label-property.md" %}}
{{% snippet file="refguide/on-leave-event.md" %}}

## Editability Properties
### 2.6 Formatting Section{#formatting}

{{% snippet file="refguide/editable-property.md" %}}
The formatting section applies only to the way that numeric attributes are displayed. These are attributes of the following data types:

{{% snippet file="refguide/read-only-style.md" %}}
* Decimal
* Integer
* Long

{{% snippet file="refguide/condition-property.md" %}}
{{% snippet file="refguide/numeric-formatting.md" %}}

## Visibility Properties
### 2.7 General Section{#general}

{{% snippet file="refguide/visibility-property.md" %}}
#### 2.7.1 Show as Password

{{% snippet file="refguide/visibility-property-with-module-roles-simple.md" %}}
Attributes of the data type `String` or `Hashed string` can have their value hidden. This can be used for passwords, for example, to prevent bystanders from seeing them.

## Events Properties
| Value | Description |
| --- | --- |
| False *(default)*| Normal text box |
| True | Typed characters are not shown to the end user, instead an asterisk is shown for every typed character |

{{% snippet file="refguide/on-change-event.md" %}}
#### 2.7.2 Input Mask

{{% snippet file="refguide/on-enter-event.md" %}}
{{% alert type="info" %}}Input masks are not supported on native mobile pages.{{% /alert %}}

{{% snippet file="refguide/on-leave-event.md" %}}
The input mask limits what the user can enter in the text box, following the rules below:

| Character | Allows Input of |
| ----- | ----- |
| `9` | any digit |
| `Z` | any letter |
| `U` | an upper-case letter |
| `L` | a lower-case letter |
| `*` | a letter *or* a digit |

Other characters will be taken literally.

## Common Properties
For example, the input mask `99-LLL-9999` matches `24-apr-2008`.

{{% snippet file="refguide/name-property.md" %}}
#### 2.7.3 Maximum Length

{{% snippet file="refguide/class-property.md" %}}
This property indicates the maximum number of characters that can be typed in this text box.

| Value | Description |
| --- | --- |
| Attribute length *(default)* | The maximum number of characters is the same as the maximum length of the connected attribute. |
| Unlimited | The maximum number of characters is unlimited. |
| Custom | The maximum number of characters is set by the user. |

{{% snippet file="refguide/style-property.md" %}}
#### 2.7.4 Placeholder Text

{{% snippet file="refguide/tab-index-property.md" %}}
The placeholder text is shown when no text has been entered yet. It can be used to give a hint to the user what kind of text should be entered.

### 2.8 Label Section{#label}

{{% snippet file="refguide/label-property.md" %}}

### 2.9 Validation Section{#validation}

{{% snippet file="refguide/widget-validation.md" %}}

### 2.10 Visibility Section{#visibility}

{{% snippet file="refguide/visibility-property.md" %}}

{{% snippet file="refguide/visibility-property-with-module-roles-simple.md" %}}

## Read More

Expand Down
12 changes: 8 additions & 4 deletions snippets/refguide/numeric-formatting.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<div class="alert alert-info">

This mode only applies to the Decimal, Float (deprecated), and Currency (deprecated) attribute types.
This mode only applies to attributes of type Decimal.

</div>

Expand All @@ -28,7 +28,7 @@ _Default value:_ Fixed

<div class="alert alert-info">

This only applies to the Decimal, Float (deprecated), and Currency (deprecated) attribute types. This is available only when the Decimal mode is set to Fixed.
This only applies to attributes of type Decimal and is available only when the Decimal mode is set to Fixed.

</div>

Expand All @@ -38,6 +38,10 @@ _Default value:_ 2

### Group Digits

For ease of reading, numbers with many digits before the decimal separator may be divided into groups using a delimiter. This property indicates whether the user will see these groups.
For ease of reading, numbers with many digits before the decimal separator may be divided into groups using a delimiter when they are displayed. If the widget is editable and is the current focus of the page, then the delimiters will *not* be displayed.

_Default value:_ False
Set **Group digits** to **Yes** to display these groups.

For example, with **Group digits** set to `true`, the number `1100100.01` will be displayed as `1,100,100.01`.

_Default value:_ No

0 comments on commit 03c2119

Please sign in to comment.