Update input widgets

content/refguide/drop_down.md

@@ -1,74 +1,93 @@
 ---
-title: "Drop-Down"
+title: "Drop Down"
 parent: "input-widgets"
 menu_order: 30
 tags: ["Drop-down", "input", "page", "widget", "enumeration", "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 drop-down is an [input widget](input-widgets) that can be used to display and edit enumeration attributes. It should not be confused with a reference selector, which is used to select a object with which to fill an [association](associations).
+## 1 Introduction
 
-{{% alert type="info" %}}
-
- ![](attachments/pages/drop-down.png)
+A **drop down** is used to display and, optionally, allow the end-user to edit the value of an attribute of [data type](data-types) *enumeration*.
 
-This drop-down widget allows the user to select their favorite color.
+A drop down 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 drop down, between square brackets, and colored blue.
 
+{{% alert type="info" %}}
+A drop down should not be confused with a [reference selector](reference-selector), which is used to select an [association](associations) to another object.
 {{% /alert %}}
 
-## General Properties
+For example, the following drop down allows the end-user to see, and set, the **Region** to which a customer is allocated.
 
-### Empty Option Caption
+![](attachments/drop-down/drop-down.png)
 
-This property represents the caption for the empty option in the drop-down shown to the user. This is a translatable text. For more details, see [Translatable Texts](translatable-texts).
+## 2 Properties
 
-{{% alert type="info" %}}
+An example of drop down properties is represented in the image below:
 
-Filling out the caption for an empty option improves the user experience of your application. It also helps screen-reader users to operate the application easily. For example, the drop-down that represents the color selection for a car could have a caption reading "Select a color".
+{{% image_container width="250" %}}![](attachments/drop-down/drop-down-properties.png)
+{{% /image_container %}}
 
-{{% /alert %}}
+Text box properties consist of the following sections:
 
-## Validation Properties
+* [Common](#common)
+* [Data source](#data-source)
+* [Design Properties](#design-properties)
+* [Editability](#editability)
+* [Events](#events)
+* [General](#general)
+* [Label](#label)
+* [Validation](#validation)
+* [Visibility](#visibility)
 
-{{% snippet file="refguide/widget-validation.md" %}}
+### 2.1 Common Section{#common}
+
+{{% snippet file="refguide/common-section-link.md" %}}
 
-## Data Source Properties
+### 2.2 Data Source Section{#data-source}
 
 {{% snippet file="refguide/attribute-path-property.md" %}}
 
-{{% snippet file="refguide/label-property.md" %}}
+### 2.3 Design Properties Section{#design-properties}
 
-## Editability Properties
+### 2.4 Editability Section{#editability}
 
 {{% snippet file="refguide/editable-property.md" %}}
 
 {{% snippet file="refguide/read-only-style.md" %}}
 
 {{% snippet file="refguide/condition-property.md" %}}
 
-## Visibility Properties
-
-{{% snippet file="refguide/visibility-property.md" %}}
-
-{{% snippet file="refguide/visibility-property-with-module-roles-simple.md" %}}
-
-## Events Properties
+### 2.5 Events Section{#events}
 
 {{% snippet file="refguide/on-change-event.md" %}}
 
 {{% snippet file="refguide/on-enter-event.md" %}}
 
 {{% snippet file="refguide/on-leave-event.md" %}}
 
-## Common Properties
+### 2.6 General Section{#general}
+
+#### 2.6.1 Empty Option Caption
+
+Empty option caption is the text that is shown for the empty option in the drop-down shown to the end-user. This is a translatable text. For more details, see [Translatable Texts](translatable-texts).
+
+Adding a caption for the empty option improves the user experience of your application. It also helps end-users using a screen-reader to operate the application easily.
+
+For example, the drop-down that allows the end-user to select the region allocated to a customer could have a caption `Select a region`.
 
-{{% snippet file="refguide/name-property.md" %}}
+![](attachments/drop-down/select-a-region.png)
 
-{{% snippet file="refguide/class-property.md" %}}
+### 2.7 Label Section{#label}
+
+{{% snippet file="refguide/label-property.md" %}}
+
+### 2.8 Validation Section{#validation}
+
+{{% snippet file="refguide/widget-validation.md" %}}
 
-{{% snippet file="refguide/style-property.md" %}}
+### 2.9 Visibility Section{#visibility}
 
-{{% snippet file="refguide/tab-index-property.md" %}}
+{{% snippet file="refguide/visibility-section-link.md" %}}
 
 ## Read More
 

content/refguide/project-settings.md

@@ -134,7 +134,7 @@ The difference is noticeable when the operation takes less time. So if you expec
 It is important to remember when changing hashing algorithms is that any hashed attribute (like the System$User password attribute) has its algorithm set on hashing. In other words, for the hashing type to take effect, any existing hashed attribute will have to be reset using the new hashing type.
 {{% /alert %}}
 
-### 3.10 Rounding Mode
+### 3.10 Rounding Mode{#rounding}
 
 The rounding mode is used to select how to round numbers when performing calculations.
 

content/refguide/text-area.md

@@ -6,109 +6,123 @@ 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 area can be used to display and/or edit a long text value that can be split over several lines.
+## 1 Introduction
 
-{{% alert type="info" %}}
+A **text area** is used to display and, optionally, allow the end-user to edit the value of an attribute of [data type](data-types) *String*. It differs from a [text box](text-box) In that the value can be displayed over several lines.
 
-![](attachments/pages/text-area.png)
+A text area 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.
 
-This text area allows the end-user to set the description of the product.
+For example, the following text box allows the end-user to see, and set, the **Notes** about a contact.
 
-{{% /alert %}}
+![](attachments/text-area/text-area.png)
 
-A text area 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 area.
+## 2 Properties
 
-## General Properties
+An example of text area properties is represented in the image below:
 
-### Grow Automatically
+{{% image_container width="250" %}}![](attachments/text-area/text-area-properties.png)
+{{% /image_container %}}
 
-This property defines whether the text area grows automatically depending on the amount of text in it.
+Text box properties consist of the following sections:
 
-_Default value:_ No
+* [Common](#common)
+* [Data source](#data-source)
+* [Design Properties](#design-properties)
+* [Editability](#editability)
+* [Events](#events)
+* [General](#general)
+* [Label](#label)
+* [Validation](#validation)
+* [Visibility](#visibility)
 
-{{% alert type="info" %}}Not supported on native mobile pages. On iOS, the text area will grow automatically.{{% /alert %}}
+### 2.1 Common Section{#common}
 
-### Number of Lines
+{{% snippet file="refguide/common-section-link.md" %}}
 
-The number of lines determine how many lines the text area shows at the same time. If the text in the text area contains more lines you will have to use a scrollbar to see it all. This property is only shown if Grow automatically is set to No.
+### 2.2 Data Source Section{#data-source}
 
-_Default value:_ 5
+{{% snippet file="refguide/attribute-path-property.md" %}}
 
-### Counter Message
+### 2.3 Design Properties Section{#design-properties}
 
-This is the text displayed when typing in the text area. This text has 2 placeholders. The first placeholder shows the number of characters already typed and the second placeholder shows the maximum number of characters.
+### 2.4 Editability Section{#editability}
 
-{{% alert type="info" %}}
+{{% snippet file="refguide/editable-property.md" %}}
 
-You've used {1} characters of the {2} characters that are allowed.
+{{% snippet file="refguide/read-only-style.md" %}}
 
-{{% /alert %}}
+{{% snippet file="refguide/condition-property.md" %}}
 
-{{% alert type="info" %}}Not supported on native mobile pages.{{% /alert %}}
+### 2.5 Events Section{#events}
 
-### Text Too Long Message
+{{% snippet file="refguide/on-change-event.md" %}}
 
-This is the text displayed when the number of typed characters is higher than the maximum allowed number of characters.
+{{% snippet file="refguide/on-enter-event.md" %}}
 
-{{% alert type="info" %}}Not supported on native mobile pages.{{% /alert %}}
+{{% snippet file="refguide/on-leave-event.md" %}}
 
-### Maximum Length
+### 2.6 General Section(#general)
 
-This property indicates the maximum number of characters that can be typed in this text box.
+#### 2.6.1 Grow Automatically
 
-| 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. |
+{{% alert type="info" %}}The grow automatically property does not impact the behavior of native mobile pages. On iOS, the text area will always grow automatically
+{{% /alert %}}
 
-_Default value: Attribute length_
+This property defines whether the text area grows automatically depending on the amount of text in it.
 
-### Placeholder Text
+_Default value:_ No
 
-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.6.2 Number of Lines
 
-## Validation Properties
+**Number of lines** determines the size of the text area, based on the height of the lines. If the text in the text area contains more lines, a scrollbar will enable the end-user to see it all. This property is only used if **Grow automatically** is set to *No*.
 
-{{% snippet file="refguide/widget-validation.md" %}}
+_Default value:_ 5
 
-## Data Source Properties
+#### 2.6.3 Counter Message
 
-{{% snippet file="refguide/attribute-path-property.md" %}}
+{{% alert type="info" %}}Counter message is not supported on native mobile pages.{{% /alert %}}
 
-{{% snippet file="refguide/label-property.md" %}}
+This is the text displayed when typing in the text area. This text has two [parameters](text#parameters). The first parameter contains the number of characters already typed and the second parameter contains the maximum number of characters.
 
-## Editability Properties
+For example, if you use the counter message `You've used {1} characters of the {2} characters that are allowed.` for your text area, the end-user will see this message displayed below the text area widget:
 
-{{% snippet file="refguide/editable-property.md" %}}
+![](attachments/text-area/counter-message.png)
 
-{{% snippet file="refguide/read-only-style.md" %}}
+#### 2.6.4 Text Too Long Message
 
-{{% snippet file="refguide/condition-property.md" %}}
+{{% todo %}}[DOES THIS ACTUALLY DO ANYTHING - HOW CAN IT BE DISPLAYED?]{{% /todo %}}
 
-## Visibility Properties
+{{% alert type="info" %}}Text too long message is not supported on native mobile pages.{{% /alert %}}
 
-{{% snippet file="refguide/visibility-property.md" %}}
+This is the text displayed when the number of typed characters is higher than the maximum allowed number of characters.
 
-{{% snippet file="refguide/visibility-property-with-module-roles-simple.md" %}}
+#### 2.6.5 Maximum Length
 
-## Events Properties
+This property specifies the maximum number of characters that can be typed in this text box.
 
-{{% snippet file="refguide/on-change-event.md" %}}
+| 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 specified in the widget properties |
 
-{{% snippet file="refguide/on-enter-event.md" %}}
+#### 2.6.6 Placeholder Text
 
-{{% snippet file="refguide/on-leave-event.md" %}}
+The placeholder text is shown when no text has been entered yet, or when a displayed attribute is empty.
 
-## Common Properties
+It can be used, for example, to give a hint to the end-user what kind of text should be entered.
 
-{{% snippet file="refguide/name-property.md" %}}
+### 2.7 Label Section{#label}
 
-{{% snippet file="refguide/class-property.md" %}}
+{{% snippet file="refguide/label-property.md" %}}
+
+### 2.8 Validation Section{#validation}
+
+{{% snippet file="refguide/widget-validation.md" %}}
 
-{{% snippet file="refguide/style-property.md" %}}
+### 2.9 Visibility Section{#visibility}
 
-{{% snippet file="refguide/tab-index-property.md" %}}
+{{% snippet file="refguide/visibility-section-link.md" %}}
 
 ## Read More
 

content/refguide/text-box.md

@@ -8,7 +8,7 @@ tags: ["studio pro"]
 
 ## 1 Introduction
 
-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):
+A **text box** is used to display and, optionally, allow the end-user to edit 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):
 
 * Autonumber
 * Decimal
@@ -19,7 +19,7 @@ A **text box** is used to display the value of an attribute from an object in a
 
 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.
 
-For example, the following text box allows the end-user to see, and set the **Name** of a customer.
+For example, the following text box allows the end-user to see, and set, the **Name** of a customer.
 
 ![](attachments/text-box/text-box.png)
 
@@ -61,7 +61,7 @@ Text box properties consist of the following sections:
 
 {{% snippet file="refguide/condition-property.md" %}}
 
-### 2.5 Events Section{#general}
+### 2.5 Events Section{#events}
 
 {{% snippet file="refguide/on-change-event.md" %}}
 
@@ -88,13 +88,16 @@ Attributes of the data type `String` or `Hashed string` can have their value hid
 | 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 |
+| True | Typed characters are not shown to the end-user , instead an asterisk is shown for every typed character |
 
 #### 2.7.2 Input Mask
 
-{{% alert type="info" %}}Input masks are not supported on native mobile pages.{{% /alert %}}
+{{% alert type="info" %}}Input masks are not supported on native mobile pages.
 
-The input mask limits what the user can enter in the text box, following the rules below:
+Input masks are designed for string data types. Be cautious when using them with numeric or hashed string data types.
+{{% /alert %}}
+
+The input mask limits what the end-user can enter in the text box, following the rules below:
 
 | Character | Allows Input of |
 | ----- | ----- |
@@ -110,17 +113,19 @@ For example, the input mask `99-LLL-9999` matches `24-apr-2008`.
 
 #### 2.7.3 Maximum Length
 
-This property indicates the maximum number of characters that can be typed in this text box.
+This property specifies 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. |
+| 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 specified in the widget properties |
 
 #### 2.7.4 Placeholder Text
 
-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.
+The placeholder text is shown when no text has been entered yet, or when a displayed attribute is empty.
+
+It can be used, for example, to give a hint to the end-user what kind of text should be entered.
 
 ### 2.8 Label Section{#label}
 
@@ -132,11 +137,10 @@ The placeholder text is shown when no text has been entered yet. It can be used
 
 ### 2.10 Visibility Section{#visibility}
 
-{{% snippet file="refguide/visibility-property.md" %}}
-
-{{% snippet file="refguide/visibility-property-with-module-roles-simple.md" %}}
+{{% snippet file="refguide/visibility-section-link.md" %}}
 
 ## Read More
 
-*   [Data view](data-view)
-*   [Attributes](attributes)
+* [Data Types](data-types)  
+* [Data View](data-view)
+* [Attributes](attributes)