diff --git a/docs/4DQodlyPro/gettingStarted.md b/docs/4DQodlyPro/gettingStarted.md index cd8e2bd98..10e2ee135 100644 --- a/docs/4DQodlyPro/gettingStarted.md +++ b/docs/4DQodlyPro/gettingStarted.md @@ -61,6 +61,7 @@ All the [configuration requirements](#requirements) can be automatically set for - Only settings that need to be edited are listed in the dialog box. - Since scalable sessions run in preemptive mode, enabling this setting might require that you evaluate the [thread-safety property](https://developer.4d.com/docs/Develop/preemptive-processes#writing-a-thread-safe-method) of your code. - Activating the "forceLogin" mode might require that you reconfigure the REST accesses, [as explained in this blog post](https://blog.4d.com/force-login-becomes-default-for-all-rest-auth/). +- If 4D's [user settings](https://developer.4d.com/docs/settings/overview#enabling-user-settings) are enabled, pay attention to the fact that active settings will be configured. ::: diff --git a/docs/4DQodlyPro/pageLoaders/components/img/textInput24HourFormat.png b/docs/4DQodlyPro/pageLoaders/components/img/textInput24HourFormat.png new file mode 100644 index 000000000..9aaf53ecf Binary files /dev/null and b/docs/4DQodlyPro/pageLoaders/components/img/textInput24HourFormat.png differ diff --git a/docs/4DQodlyPro/pageLoaders/components/img/textInput_am_pm.png b/docs/4DQodlyPro/pageLoaders/components/img/textInput_am_pm.png new file mode 100644 index 000000000..b16e8b22d Binary files /dev/null and b/docs/4DQodlyPro/pageLoaders/components/img/textInput_am_pm.png differ diff --git a/docs/4DQodlyPro/pageLoaders/components/textinput.md b/docs/4DQodlyPro/pageLoaders/components/textinput.md index 6c5a70b07..255d5235c 100644 --- a/docs/4DQodlyPro/pageLoaders/components/textinput.md +++ b/docs/4DQodlyPro/pageLoaders/components/textinput.md @@ -2,13 +2,12 @@ id: textinput title: Text Input --- -import Column from '@site/src/components/Column' +import Column from '@site/src/components/Column' The **Text Input** component is an interactive UI element that enables user interactions by allowing the input of alphanumeric data within a Page. With support for various input types, this component accommodates diverse data entry scenarios. - -:::info +:::info The **Text Input** component contains an embedded **Input** and a **Label** element. This is of great importance as configuring the **Text Input** component may require adjusting properties within the embedded elements. This applies to the visual style, triggers, and actions as they may differ. @@ -24,9 +23,6 @@ The Text Input component provides a versatile solution for a wide range of scena - **Comments and Notes**: Employees can leave comments, feedback, or additional information on records, facilitating efficient communication and collaboration. - - - ## Properties Customization ### Text Input Component @@ -34,30 +30,31 @@ The Text Input component provides a versatile solution for a wide range of scena Enhance the **Text Input** component to align with your application's requirements using the following customization options: - - - - - - - + + + + + + + ### Embedded Label Within the **Text Input** component, an embedded **Label** allows for further customization of the following properties: - - - - - - + + + + + + + ### Embedded Input @@ -65,15 +62,16 @@ Within the **Text Input** component, an embedded **Label** allows for further cu Within the **Text Input** component, an embedded **Input** allows for further customization of the following properties: - - - - - - + + + + + + + +
- **Input Format**: Specify the desired format for the entered data.
-See Formats for a description of available formats. + See Formats for a description of available formats.
@@ -246,30 +267,31 @@ See Formats for a description of The **Text Input** component allows for seamless integration of Qodly Sources, enabling dynamic data binding and interaction within the Page. -:::info +:::info The qodlysource for the **Text Input** component should be of type `text`, `number`, `date`, or `duration`. ::: ### Data Binding + To associate data with the Text Input component, follow these steps: 1. **Navigate to the Properties Panel**: Access the Data Access category located within the Properties panel for the Text Input component. - -
    -
  1. Define the Qodly Source: Specify the appropriate qodlysource that contains the data you want to display within the Text Input or retrieve from user input. This can be an attribute from an entity, an array, or a direct qodlysource of type text. For instance, you can select an entity, such as package.
  2. -
-
- - - + + +
    +
  1. Define the Qodly Source: Specify the appropriate qodlysource that contains the data you want to display within the Text Input or retrieve from user input. This can be an attribute from an entity, an array, or a direct qodlysource of type text. For instance, you can select an entity, such as package.
  2. +
+
+ + +
- 3. **Choose the Attribute**: Choose the specific attribute that you want to display within the component when using an entity or an array type qodlysource, such as package.name. -:::tip +:::tip Alternatively, you can establish the connection by dragging and dropping the qodlysource onto the Text Input component. ::: @@ -277,23 +299,22 @@ Alternatively, you can establish the connection by dragging and dropping the qod Retrieving user input data is equally effortless. By binding a Qodly Source to the **Text Input** component, you can access and employ user-entered content. - - - Imagine a search input where users type to find packages. Binding a qodlysource captures the input. - - - - + +Imagine a search input where users type to find packages. Binding a qodlysource captures the input. + + + + - - Consequently, you can utilize this input value in various ways, such as within a standard action to initiate a search with matching attribute values. - - - - + +Consequently, you can utilize this input value in various ways, such as within a standard action to initiate a search with matching attribute values. + + + + ## Customizing Text Input Styles @@ -304,18 +325,18 @@ The **Text Input** component consists of embedded elements that can be styled in The following HTML tags make up the structure of the **Text Input** component. Each tag can be individually styled to adjust its appearance and interaction. -| **Tag Name** | **Applies To** | **Description** | -|--------------|-----------------------------|----------------------------------------------------------------------------------------------------------------------------| +| **Tag Name** | **Applies To** | **Description** | +| ------------ | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `