diff --git a/archived_versions/versioned_docs/version-1.0.0/studio/pageLoaders/pageLoaderOverview.md b/archived_versions/versioned_docs/version-1.0.0/studio/pageLoaders/pageLoaderOverview.md
index cb96ad0ac..7448f578d 100644
--- a/archived_versions/versioned_docs/version-1.0.0/studio/pageLoaders/pageLoaderOverview.md
+++ b/archived_versions/versioned_docs/version-1.0.0/studio/pageLoaders/pageLoaderOverview.md
@@ -327,6 +327,76 @@ self:disabled {
:::
+#### Read-Only Mode
+
+The "Read Only" toggle in the properties panel allows you to set a component to read-only. Unlike disabled components, read-only components remain focusable, tab-navigable, and accessible to screen readers, and their values are included when submitting form data.
+
+1. **Build Mode**:
+
+ - **Behavior**: The component functions normally, allowing you to configure events and test interactions during design.
+
+ - **Appearance**: The component appears unchanged in build mode.
+
+2. **Rendering Mode**:
+
+ - **Behavior**: Users cannot modify the component's value through direct interaction. All events remain functional except for user-initiated input events. For example, if two Text Input components are bound to the same Qodly Source and one is read-only, changes made through the editable input are reflected in the read-only input, but the read-only input does not emit an `onChange` event.
+
+ - **Appearance**: The cursor changes to `default` to visually indicate that the component is not editable.
+
+ The following table shows all components that support the read-only property and whether they have native HTML `readonly` support:
+
+ | Component | Type | Native `readonly` Support |
+ |--------------|-----------|:------------------------:|
+ | Text Input | text | ✅ |
+ | Text Input | number | ✅ |
+ | Text Input | password | ✅ |
+ | Text Input | text area | ✅ |
+ | Text Input | date | ✅ |
+ | Text Input | duration | ✅ |
+ | File Upload | N/A | ✅ |
+ | Select Input | N/A | ❌ |
+ | Radio | N/A | ❌ |
+ | Check Box | N/A | ❌ |
+ | Range Input | N/A | ❌ |
+ | Select Box | N/A | ❌ |
+ | Matrix | N/A | ❌ |
+ | Datatable | N/A | ❌ |
+
+:::info Read-Only vs Disabled
+While both properties restrict user interaction, they differ in important ways:
+- **Read-only** components are tab-navigable and their values are submitted with forms. Screen readers can access them normally.
+- **Disabled** components are not tab-navigable and their values are not submitted with forms.
+- When both `readonly` and `disabled` are set on a component, `disabled` takes precedence.
+:::
+
+:::info HTML Attributes
+- Components with native `readonly` support receive both `readonly="true"` and `data-readonly="true"` attributes.
+- Components without native `readonly` support receive only the `data-readonly="true"` attribute.
+
+This provides a unified way to target all read-only components in CSS using `data-readonly`.
+:::
+
+:::tip Customizing Read-Only Rendering
+You can customize the appearance of read-only components using CSS classes.
+
+For components with native `readonly` support:
+
+```css
+self[readonly] {
+ /* your styles */
+}
+```
+
+For all read-only components (including those without native support):
+
+```css
+self[data-readonly] {
+ /* your styles */
+}
+```
+
+:::
+
### Data Access Category
diff --git a/archived_versions/versioned_docs/version-1.1.0/studio/pageLoaders/components/rangeinput.md b/archived_versions/versioned_docs/version-1.1.0/studio/pageLoaders/components/rangeinput.md
index 20812176c..f5a3d02d4 100644
--- a/archived_versions/versioned_docs/version-1.1.0/studio/pageLoaders/components/rangeinput.md
+++ b/archived_versions/versioned_docs/version-1.1.0/studio/pageLoaders/components/rangeinput.md
@@ -85,9 +85,6 @@ Within the **Range Input** component, an embedded **Slider Container** allows fo
Min Value: Set the minimum value that users can select within the range.
Max Value: Define the maximum value that users can select within the range.
Step: Determine the increment value when users interact with the component.
-
diff --git a/archived_versions/versioned_docs/version-1.1.0/studio/pageLoaders/components/textinput.md b/archived_versions/versioned_docs/version-1.1.0/studio/pageLoaders/components/textinput.md
index 57a0c854c..5177f4c67 100644
--- a/archived_versions/versioned_docs/version-1.1.0/studio/pageLoaders/components/textinput.md
+++ b/archived_versions/versioned_docs/version-1.1.0/studio/pageLoaders/components/textinput.md
@@ -209,9 +209,6 @@ See Formats for a description of
-
## Data Integration
diff --git a/archived_versions/versioned_docs/version-1.1.0/studio/pageLoaders/pageLoaderOverview.md b/archived_versions/versioned_docs/version-1.1.0/studio/pageLoaders/pageLoaderOverview.md
index bb7e41891..51ddc50f8 100644
--- a/archived_versions/versioned_docs/version-1.1.0/studio/pageLoaders/pageLoaderOverview.md
+++ b/archived_versions/versioned_docs/version-1.1.0/studio/pageLoaders/pageLoaderOverview.md
@@ -327,6 +327,76 @@ self:disabled {
:::
+#### Read-Only Mode
+
+The "Read Only" toggle in the properties panel allows you to set a component to read-only. Unlike disabled components, read-only components remain focusable, tab-navigable, and accessible to screen readers, and their values are included when submitting form data.
+
+1. **Build Mode**:
+
+ - **Behavior**: The component functions normally, allowing you to configure events and test interactions during design.
+
+ - **Appearance**: The component appears unchanged in build mode.
+
+2. **Rendering Mode**:
+
+ - **Behavior**: Users cannot modify the component's value through direct interaction. All events remain functional except for user-initiated input events. For example, if two Text Input components are bound to the same Qodly Source and one is read-only, changes made through the editable input are reflected in the read-only input, but the read-only input does not emit an `onChange` event.
+
+ - **Appearance**: The cursor changes to `default` to visually indicate that the component is not editable.
+
+ The following table shows all components that support the read-only property and whether they have native HTML `readonly` support:
+
+ | Component | Type | Native `readonly` Support |
+ |--------------|-----------|:------------------------:|
+ | Text Input | text | ✅ |
+ | Text Input | number | ✅ |
+ | Text Input | password | ✅ |
+ | Text Input | text area | ✅ |
+ | Text Input | date | ✅ |
+ | Text Input | duration | ✅ |
+ | File Upload | N/A | ✅ |
+ | Select Input | N/A | ❌ |
+ | Radio | N/A | ❌ |
+ | Check Box | N/A | ❌ |
+ | Range Input | N/A | ❌ |
+ | Select Box | N/A | ❌ |
+ | Matrix | N/A | ❌ |
+ | Datatable | N/A | ❌ |
+
+:::info Read-Only vs Disabled
+While both properties restrict user interaction, they differ in important ways:
+- **Read-only** components are tab-navigable and their values are submitted with forms. Screen readers can access them normally.
+- **Disabled** components are not tab-navigable and their values are not submitted with forms.
+- When both `readonly` and `disabled` are set on a component, `disabled` takes precedence.
+:::
+
+:::info HTML Attributes
+- Components with native `readonly` support receive both `readonly="true"` and `data-readonly="true"` attributes.
+- Components without native `readonly` support receive only the `data-readonly="true"` attribute.
+
+This provides a unified way to target all read-only components in CSS using `data-readonly`.
+:::
+
+:::tip Customizing Read-Only Rendering
+You can customize the appearance of read-only components using CSS classes.
+
+For components with native `readonly` support:
+
+```css
+self[readonly] {
+ /* your styles */
+}
+```
+
+For all read-only components (including those without native support):
+
+```css
+self[data-readonly] {
+ /* your styles */
+}
+```
+
+:::
+
### Data Access Category
diff --git a/docs/4DQodlyPro/coding.md b/docs/4DQodlyPro/coding.md
index c35b6c9f1..926129cca 100644
--- a/docs/4DQodlyPro/coding.md
+++ b/docs/4DQodlyPro/coding.md
@@ -38,7 +38,7 @@ You can create a method or class using one of the three methods:
- A new entry, labeled as UntitledN appears in the list, where N is a number incrementing with each new creation. You can provide a compliant name and press Enter to confirm the modification.
+ A new entry, labeled as UntitledN appears in the list, where N is a number incrementing with each new creation. You can provide a compliant name and press Enter to confirm the modification.
@@ -65,7 +65,7 @@ To rename a method or class, you can either:
Click on the icon at the right side of the item in the Explorer.
diff --git a/docs/4DQodlyPro/gettingStarted.md b/docs/4DQodlyPro/gettingStarted.md
index 10e2ee135..3a245b945 100644
--- a/docs/4DQodlyPro/gettingStarted.md
+++ b/docs/4DQodlyPro/gettingStarted.md
@@ -140,10 +140,10 @@ You will then be prompted to enter the [access key](https://developer.4d.com/doc
The following commands and classes are dedicated to the server-side management of Qodly pages:
-- [`Web Form`](../QodlyinCloud/qodlyScript/commands/webForm.md) command: returns the Qodly page as an object.
-- [`Web Event`](../QodlyinCloud/qodlyScript/commands/webEvent.md) command: returns events triggered within Qodly page components.
-- [`WebForm`](../QodlyinCloud/qodlyScript/WebFormClass.md) class: functions and properties to manage the rendered Qodly page.
-- [`WebFormItem`](../QodlyinCloud/qodlyScript/WebFormItemClass.md) class: functions and properties to manage Qodly page components.
+- [`Web Form`](https://developer.4d.com/docs/API/commands/webForm) command: returns the Qodly page as an object.
+- [`Web Event`](https://developer.4d.com/docs/API/commands/webEvent) command: returns events triggered within Qodly page components.
+- [`WebForm`](https://developer.4d.com/docs/API/WebFormClass) class: functions and properties to manage the rendered Qodly page.
+- [`WebFormItem`](https://developer.4d.com/docs/API/WebFormItemClass) class: functions and properties to manage Qodly page components.
### Using project methods
diff --git a/docs/4DQodlyPro/httpHandlers.md b/docs/4DQodlyPro/httpHandlers.md
index 14bf3fccf..eacb21e76 100644
--- a/docs/4DQodlyPro/httpHandlers.md
+++ b/docs/4DQodlyPro/httpHandlers.md
@@ -317,15 +317,15 @@ However, only the first handler `getProductDetails` is executed, as it appears f
### Function Configuration
-The HTTP Request handler code must be implemented in a function of a [**Shared**](../QodlyinCloud/qodlyScript/basics/lang-classes.md#shared-singleton) [**singleton class**](../QodlyinCloud/qodlyScript/basics/lang-classes.md#singleton-classes).
+The HTTP Request handler code must be implemented in a function of a [**Shared**](https://developer.4d.com/docs/Concepts/classes#singleton-classes) [**singleton class**](https://developer.4d.com/docs/Concepts/classes#singleton-classes).
If the singleton is missing or not shared, an error `Cannot find singleton` is returned by the server. If the class or the function defined as handler is not found, an error `Cannot find singleton function` is returned by the server.
-Request handler functions are not necessarily shared, unless some request handler properties are updated by the functions. In this case, you need to declare its functions with the [`shared` keyword](../QodlyinCloud/qodlyScript/basics/lang-classes.md#shared-functions).
+Request handler functions are not necessarily shared, unless some request handler properties are updated by the functions. In this case, you need to declare its functions with the [`shared` keyword](https://developer.4d.com/docs/Concepts/classes#shared-functions).
:::note
-It is **not recommended** to expose request handler functions to external REST calls using [`exposed`](../QodlyinCloud/qodlyScript/guides/data-model.md#exposed-vs-non-exposed-functions) or [`onHttpGet`](../QodlyinCloud/qodlyScript/guides/data-model.md#onhttpget-keyword) keywords.
+It is **not recommended** to expose request handler functions to external REST calls using [`exposed`](https://developer.4d.com/docs/API/guides/data-model#exposed-vs-non-exposed-functions) or [`onHttpGet`](https://developer.4d.com/docs/API/guides/data-model#onhttpget-keyword) keywords.
:::
@@ -354,19 +354,19 @@ This handler catches all requests that are not matched by earlier handlers. It c
### Input: 4D.IncomingMessage Class Instance
-When a request is intercepted by the handler, it is received on the server as an instance of the [4D.IncomingMessage class](../QodlyinCloud/qodlyScript/IncomingMessageClass.md).
+When a request is intercepted by the handler, it is received on the server as an instance of the [4D.IncomingMessage class](https://developer.4d.com/docs/API/IncomingMessageClass).
This object provides all necessary request information, including the request URL, verb, headers, URL parameters, and request body. The request handler can use this information to trigger the appropriate business logic.
### Output: 4D.OutgoingMessage Class Instance
-The request handler can return an object instance of the [4D.OutGoingMessage class](../QodlyinCloud/qodlyScript/OutgoingMessageClass.md), which represents web content ready for a browser to handle, such as a file content or a structured response.
+The request handler can return an object instance of the [4D.OutGoingMessage class](https://developer.4d.com/docs/API/OutgoingMessageClass), which represents web content ready for a browser to handle, such as a file content or a structured response.
### Example
-The [4D.IncomingMessage class](../QodlyinCloud/qodlyScript/IncomingMessageClass.md) provides functions to retrieve [headers](../QodlyinCloud/qodlyScript/IncomingMessageClass.md#headers) and the [body](../QodlyinCloud/qodlyScript/IncomingMessageClass.md#gettext) of the request.
+The [4D.IncomingMessage class](https://developer.4d.com/docs/API/IncomingMessageClass) provides functions to retrieve [headers](https://developer.4d.com/docs/API/IncomingMessageClass#headers) and the [body](https://developer.4d.com/docs/API/IncomingMessageClass#gettext) of the request.
Below is an example of an HTTP handler that processes a file upload.
@@ -390,7 +390,7 @@ The request URL: `/putFile?fileName=testFile`
- The filename is included as a query parameter (*fileName*).
- - The filename is extracted using the [`urlQuery`](../QodlyinCloud/qodlyScript/IncomingMessageClass.md#urlquery) object.
+ - The filename is extracted using the [`urlQuery`](https://developer.4d.com/docs/API/IncomingMessageClass#urlquery) object.
#### Implementation of the UploadFile Class:
diff --git a/docs/4DQodlyPro/notes.md b/docs/4DQodlyPro/notes.md
index 346feeedb..e069d3ef7 100644
--- a/docs/4DQodlyPro/notes.md
+++ b/docs/4DQodlyPro/notes.md
@@ -15,9 +15,6 @@ title: Release Notes
- [Events Report](pageLoaders/pageLoaderOverview.md#events-report): Introduced the Events Report, a visual overview of all page events for components and Qodly sources complete with filtering, editing, and navigation options.
-... more to come...
-
-
## 4D 20 R10
diff --git a/docs/4DQodlyPro/pageLoaders/components/datatable.md b/docs/4DQodlyPro/pageLoaders/components/datatable.md
index 955a8f02f..7cf91ba46 100644
--- a/docs/4DQodlyPro/pageLoaders/components/datatable.md
+++ b/docs/4DQodlyPro/pageLoaders/components/datatable.md
@@ -155,7 +155,7 @@ When it comes to displaying columns in the DataTable component, you have two opt
### Server-Side Interaction
-Enhance DataTable interactivity by binding functions to events like `onheaderclick` and `oncellclick`. These events respond to user actions and retrieve event-specific details using the [webEvent](../../../QodlyinCloud/qodlyScript/commands/webEvent) command.
+Enhance DataTable interactivity by binding functions to events like `onheaderclick` and `oncellclick`. These events respond to user actions and retrieve event-specific details using the [webEvent](https://developer.4d.com/docs/API/commands/webEvent) command.
Common attributes for `onheaderclick` and `oncellclick`:
@@ -359,7 +359,7 @@ Customize the styles of the DataTable component by utilizing specific CSS classe
The **DataTable** component can respond to various events, enabling dynamic user experiences.
-Additional information including the **column number**, **row number**, and **column qodlysource name** are returned by the [`webEvent` command](../../../QodlyinCloud/qodlyScript/commands/webEvent.md) when called in an event function triggered by a **DataTable** component.
+Additional information including the **column number**, **row number**, and **column qodlysource name** are returned by the [`webEvent` command](https://developer.4d.com/docs/API/commands/webEvent) when called in an event function triggered by a **DataTable** component.
Events that can trigger actions within the component include:
diff --git a/docs/4DQodlyPro/pageLoaders/components/dialog.md b/docs/4DQodlyPro/pageLoaders/components/dialog.md
index 25c63379e..685aff39c 100644
--- a/docs/4DQodlyPro/pageLoaders/components/dialog.md
+++ b/docs/4DQodlyPro/pageLoaders/components/dialog.md
@@ -170,7 +170,7 @@ Enhance the Dialog component to align with your application's requirements using
## Server-Side Interaction
-Every dialog is uniquely named, which acts as its server-side reference for server-side interactions. This allows you to control the Dialog's behavior, such as [hiding](../../../QodlyinCloud/qodlyScript/WebFormItemClass.md#hide), [showing](../../../QodlyinCloud/qodlyScript/WebFormItemClass.md#show), [adding CSS classes](../../../QodlyinCloud/qodlyScript/WebFormItemClass.md#addcssclass), or [removing CSS classes](../../../QodlyinCloud/qodlyScript/WebFormItemClass.md#removecssclass) from it.
+Every dialog is uniquely named, which acts as its server-side reference for server-side interactions. This allows you to control the Dialog's behavior, such as [hiding](https://developer.4d.com/docs/API/WebFormItemClass#hide), [showing](https://developer.4d.com/docs/API/WebFormItemClass#show), [adding CSS classes](https://developer.4d.com/docs/API/WebFormItemClass#addcssclass), or [removing CSS classes](https://developer.4d.com/docs/API/WebFormItemClass#removecssclass) from it.
:::tip
Employing the `.show()` method triggers the `On Open` event, whereas utilizing `.hide()` triggers the `On Close` event.
diff --git a/docs/4DQodlyPro/pageLoaders/components/rangeinput.md b/docs/4DQodlyPro/pageLoaders/components/rangeinput.md
index 20812176c..f5a3d02d4 100644
--- a/docs/4DQodlyPro/pageLoaders/components/rangeinput.md
+++ b/docs/4DQodlyPro/pageLoaders/components/rangeinput.md
@@ -85,9 +85,6 @@ Within the **Range Input** component, an embedded **Slider Container** allows fo
Min Value: Set the minimum value that users can select within the range.
Max Value: Define the maximum value that users can select within the range.
Step: Determine the increment value when users interact with the component.
-
diff --git a/docs/4DQodlyPro/pageLoaders/components/tabs.md b/docs/4DQodlyPro/pageLoaders/components/tabs.md
index ed041c192..39987cac3 100644
--- a/docs/4DQodlyPro/pageLoaders/components/tabs.md
+++ b/docs/4DQodlyPro/pageLoaders/components/tabs.md
@@ -81,7 +81,7 @@ Although the **Tabs** component isn't inherently data-bound, you can still creat
The **Tabs** component can respond to various events, enabling dynamic user experiences.
-The [`webEvent` command](../../../QodlyinCloud/qodlyScript/commands/webEvent) returns the involved **tab index** when called in an event function triggered by a **Tabs** component.
+The [`webEvent` command](https://developer.4d.com/docs/API/commands/webEvent) returns the involved **tab index** when called in an event function triggered by a **Tabs** component.
Events that can trigger actions within the component include:
diff --git a/docs/4DQodlyPro/pageLoaders/components/textinput.md b/docs/4DQodlyPro/pageLoaders/components/textinput.md
index 255d5235c..ee339cf3c 100644
--- a/docs/4DQodlyPro/pageLoaders/components/textinput.md
+++ b/docs/4DQodlyPro/pageLoaders/components/textinput.md
@@ -259,9 +259,6 @@ This gives users the flexibility to work with the time format they are most fami
-
## Data Integration
diff --git a/docs/4DQodlyPro/pageLoaders/date-time-formats.md b/docs/4DQodlyPro/pageLoaders/date-time-formats.md
index 70683efb2..7f2399347 100644
--- a/docs/4DQodlyPro/pageLoaders/date-time-formats.md
+++ b/docs/4DQodlyPro/pageLoaders/date-time-formats.md
@@ -10,7 +10,7 @@ Throughout your Qodly projects, you might need to format date and/or time values
Qodly includes a comprehensive list of patterns that you can use to create and apply customized date and time formats in your applications, in addition to predefined formats. Customized format patterns are supported by:
- the [date and time qodlysources](components/componentsBasics.md#data-formatting) used in your Pages,
-- the [`string`](../../QodlyinCloud/qodlyScript/commands/string.md) command.
+- the [`string`](https://developer.4d.com/docs/API/commands/string) command.
## Pattern list
diff --git a/docs/4DQodlyPro/pageLoaders/events/bindingActionToEvents.md b/docs/4DQodlyPro/pageLoaders/events/bindingActionToEvents.md
index 9a24a2ae1..47b25ced7 100644
--- a/docs/4DQodlyPro/pageLoaders/events/bindingActionToEvents.md
+++ b/docs/4DQodlyPro/pageLoaders/events/bindingActionToEvents.md
@@ -25,7 +25,7 @@ After binding a standard action to a qodlysource with an event, follow these ste
| Scalar (Number) | Increment |  | Increments the qodlysource's value |
| | Decrement |  | Decrements the qodlysource's value |
| Entity Selection | Order By |  | Specify one or more attributes to sort and select direction |
- | | Query |  | The query is provided as a string and supports the same syntax as an [ORDA query](../../../QodlyinCloud/qodlyScript/guides/queries.md), except for formula (`eval`) and the `settings` object. Placeholders can be used with qodlysources or data as-is |
+ | | Query |  | The query is provided as a string and supports the same syntax as an [ORDA query](https://developer.4d.com/docs/API/guides/queries), except for formula (`eval`) and the `settings` object. Placeholders can be used with qodlysources or data as-is |
| | Reload |  | Reload the entire entity selection from the server |
| | All |  | Load all entities of the same dataclass |
| | Clear |  | Remove any content and create a new, empty selection of the same dataclass |
@@ -62,7 +62,7 @@ After binding a standard action to a qodlysource with an event, follow these ste
:::note About Create entity action
-Keep in mind that the **Create** action only creates a new, blank entity in memory. If you want to save this entity in the datastore, you need to execute the **Save** action. New entity attributes are filled with null values. If you want to create, initialize, and save a new entity, you might consider using a [QodlyScript function](../../../QodlyinCloud/qodlyScript/guides/data.md#creating-an-entity).
+Keep in mind that the **Create** action only creates a new, blank entity in memory. If you want to save this entity in the datastore, you need to execute the **Save** action. New entity attributes are filled with null values. If you want to create, initialize, and save a new entity, you might consider using a [QodlyScript function](https://developer.4d.com/docs/API/guides/data#creating-an-entity).
:::
@@ -129,7 +129,7 @@ The `Base` state and `Conditional` states, however, are not included among these
:::
:::tip
-The states are enabled in the given order of the standard action (same if [`WebForm.enableState`](../../../QodlyinCloud/qodlyScript/WebFormClass.md#enablestate) is called several times with different states).
+The states are enabled in the given order of the standard action (same if [`WebForm.enableState`](https://developer.4d.com/docs/API/WebFormClass#enablestate) is called several times with different states).
:::
:::warning
@@ -289,7 +289,7 @@ When the path points to a file, it doesn't open it in a new tab but instead init
- 4. Add Parameter: If your function accepts a variable number of parameters, you can use this button to declare and bind one or more appropriate parameter(s). They will be passed to the function in the defined order when called for the event.
+ 4. Add Parameter: If your function accepts a variable number of parameters, you can use this button to declare and bind one or more appropriate parameter(s). They will be passed to the function in the defined order when called for the event.
@@ -418,7 +418,7 @@ There are two primary methods for ensuring precise parameter handling:
### Binding onHttpGet Functions
-Functions defined with the [onHttpGet](../../../QodlyinCloud/qodlyScript/guides/data-model.md#onhttpget-keyword) keyword and returning an instance of the [4D.OutgoingMessage](../../../QodlyinCloud/qodlyScript/OutgoingMessageClass.md) class, have a unique behavior when bound to events. Unlike standard functions, `onHttpGet functions` are specifically designed to handle `HTTP GET` requests and provide additional flexibility for displaying results to users.
+Functions defined with the [onHttpGet](https://developer.4d.com/docs/API/guides/data-model#onhttpget-keyword) keyword and returning an instance of the [4D.OutgoingMessage](https://developer.4d.com/docs/API/OutgoingMessageClass) class, have a unique behavior when bound to events. Unlike standard functions, `onHttpGet functions` are specifically designed to handle `HTTP GET` requests and provide additional flexibility for displaying results to users.
#### Example
@@ -542,7 +542,7 @@ For further details, refer to the [Dialog](../components/dialog.md) section.
Authentication: This action logs the user out of the rendered app
-
4D Code: This action allows you to call 4D function shared through the [WA SET CONTEXT](https://developer.4d.com/docs/fr/commands/wa-set-context) when running the qodly page inside a Web Area in a 4D Form
+
4D Code: This action allows you to call 4D function shared through the [WA SET CONTEXT](https://developer.4d.com/docs/commands/wa-set-context) when running the qodly page inside a Web Area in a 4D Form
@@ -574,7 +574,7 @@ Importantly, this customized feedback aligns with the application's business rul
### Toast Notifications
-When the `Provide Feedback` checkbox is enabled, it introduces a **hidden internal feedback element** into the web page, known as a **toast** notification. This element automatically showcases messages generated by the application code in response to events, using [dedicated Page functions](../../../QodlyinCloud/qodlyScript/WebFormClass.md) or by specifying them for `On Success` or `On Failure` in the Page Editor interface, for the case of standard actions.
+When the `Provide Feedback` checkbox is enabled, it introduces a **hidden internal feedback element** into the web page, known as a **toast** notification. This element automatically showcases messages generated by the application code in response to events, using [dedicated Page functions](https://developer.4d.com/docs/API/WebFormClass) or by specifying them for `On Success` or `On Failure` in the Page Editor interface, for the case of standard actions.
:::info
If this feature is not enabled, feedback sent from the backend will not be displayed within the user interface.
@@ -591,11 +591,11 @@ For example, in the context of a technical document, regular users may require f
Three tiers of feedback are accessible and will be displayed as colored **toasts**:
-- **Informative Messages**: Dispatches informative messages when invoked, either directly through the [`setMessage()`](../../../QodlyinCloud/qodlyScript/WebFormClass.md#setmessage) function or by specifying them in the `On Success` field within the event section associated with a standard action.
+- **Informative Messages**: Dispatches informative messages when invoked, either directly through the [`setMessage()`](https://developer.4d.com/docs/API/WebFormClass#setmessage) function or by specifying them in the `On Success` field within the event section associated with a standard action.
-- **Cautionary Messages**: Sends out cautionary messages, and these messages are exclusively triggered using the [`setWarning()`](../../../QodlyinCloud/qodlyScript/WebFormClass.md#setwarning) function.
+- **Cautionary Messages**: Sends out cautionary messages, and these messages are exclusively triggered using the [`setWarning()`](https://developer.4d.com/docs/API/WebFormClass#setwarning) function.
-- **Error Messages**: Issues error messages when invoked, either directly through the [`setError()`](../../../QodlyinCloud/qodlyScript/WebFormClass.md#seterror) function or by specifying them in the `On Failure` field within the event section associated with a standard action.
+- **Error Messages**: Issues error messages when invoked, either directly through the [`setError()`](https://developer.4d.com/docs/API/WebFormClass#seterror) function or by specifying them in the `On Failure` field within the event section associated with a standard action.
diff --git a/docs/4DQodlyPro/pageLoaders/events/eventsManagement.md b/docs/4DQodlyPro/pageLoaders/events/eventsManagement.md
index f656058a9..387650250 100644
--- a/docs/4DQodlyPro/pageLoaders/events/eventsManagement.md
+++ b/docs/4DQodlyPro/pageLoaders/events/eventsManagement.md
@@ -186,7 +186,7 @@ For events bound to Class functions, the collapsed card displays the function si
diff --git a/docs/4DQodlyPro/pageLoaders/events/overview.md b/docs/4DQodlyPro/pageLoaders/events/overview.md
index 2e97df74e..9945eb5c2 100644
--- a/docs/4DQodlyPro/pageLoaders/events/overview.md
+++ b/docs/4DQodlyPro/pageLoaders/events/overview.md
@@ -95,7 +95,7 @@ When the `On Change` event is linked to a Qodly Source, it will trigger in the f
| Trigger | Description |
| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Qodly Source |
The reference pointed to by the qodlysource changes in the web browser (not on the server)
The entity is [touched](../../../QodlyinCloud/qodlyScript/EntityClass.md#touched)
|
+| Qodly Source |
The reference pointed to by the qodlysource changes in the web browser (not on the server)
The entity is [touched](https://developer.4d.com/docs/API/EntityClass#touched)
|
| Entity Qodly Source | The contents of the entity attribute change |
| Entity Selection Qodly Source |
The reference pointed by the qodlysource changes in the web browser (not on the server)
An entity is added to the entity selection
|
| Scalar Qodly Source | The contents of the scalar qodlysource change |
diff --git a/docs/4DQodlyPro/pageLoaders/pageLoaderOverview.md b/docs/4DQodlyPro/pageLoaders/pageLoaderOverview.md
index 1cc402b02..e6b6e14b0 100644
--- a/docs/4DQodlyPro/pageLoaders/pageLoaderOverview.md
+++ b/docs/4DQodlyPro/pageLoaders/pageLoaderOverview.md
@@ -365,6 +365,76 @@ self:disabled {
:::
+#### Read-Only Mode
+
+The "Read Only" toggle in the properties panel allows you to set a component to read-only. Unlike disabled components, read-only components remain focusable, tab-navigable, and accessible to screen readers, and their values are included when submitting form data.
+
+1. **Build Mode**:
+
+ - **Behavior**: The component functions normally, allowing you to configure events and test interactions during design.
+
+ - **Appearance**: The component appears unchanged in build mode.
+
+2. **Rendering Mode**:
+
+ - **Behavior**: Users cannot modify the component's value through direct interaction. All events remain functional except for user-initiated input events. For example, if two Text Input components are bound to the same Qodly Source and one is read-only, changes made through the editable input are reflected in the read-only input, but the read-only input does not emit an `onChange` event.
+
+ - **Appearance**: The cursor changes to `default` to visually indicate that the component is not editable.
+
+ The following table shows all components that support the read-only property and whether they have native HTML `readonly` support:
+
+ | Component | Type | Native `readonly` Support |
+ |--------------|-----------|:------------------------:|
+ | Text Input | text | ✅ |
+ | Text Input | number | ✅ |
+ | Text Input | password | ✅ |
+ | Text Input | text area | ✅ |
+ | Text Input | date | ✅ |
+ | Text Input | duration | ✅ |
+ | File Upload | N/A | ✅ |
+ | Select Input | N/A | ❌ |
+ | Radio | N/A | ❌ |
+ | Check Box | N/A | ❌ |
+ | Range Input | N/A | ❌ |
+ | Select Box | N/A | ❌ |
+ | Matrix | N/A | ❌ |
+ | Datatable | N/A | ❌ |
+
+:::info Read-Only vs Disabled
+While both properties restrict user interaction, they differ in important ways:
+- **Read-only** components are tab-navigable and their values are submitted with forms. Screen readers can access them normally.
+- **Disabled** components are not tab-navigable and their values are not submitted with forms.
+- When both `readonly` and `disabled` are set on a component, `disabled` takes precedence.
+:::
+
+:::info HTML Attributes
+- Components with native `readonly` support receive both `readonly="true"` and `data-readonly="true"` attributes.
+- Components without native `readonly` support receive only the `data-readonly="true"` attribute.
+
+This provides a unified way to target all read-only components in CSS using `data-readonly`.
+:::
+
+:::tip Customizing Read-Only Rendering
+You can customize the appearance of read-only components using CSS classes.
+
+For components with native `readonly` support:
+
+```css
+self[readonly] {
+ /* your styles */
+}
+```
+
+For all read-only components (including those without native support):
+
+```css
+self[data-readonly] {
+ /* your styles */
+}
+```
+
+:::
+
### Data Access Category
@@ -391,7 +461,7 @@ The Data Access properties encompass distinct options and fields tailored to eac
:::info
-Server Side allows you to control the component's behavior, such as [hiding](../../QodlyinCloud/qodlyScript/WebFormItemClass.md#hide), [showing](../../QodlyinCloud/qodlyScript/WebFormItemClass.md#show), [adding CSS classes](../../QodlyinCloud/qodlyScript/WebFormItemClass.md#addcssclass), or [removing CSS classes](../../QodlyinCloud/qodlyScript/WebFormItemClass.md#removecssclass) from it.
+Server Side allows you to control the component's behavior, such as [hiding](https://developer.4d.com/docs/API/WebFormItemClass#hide), [showing](https://developer.4d.com/docs/API/WebFormItemClass#show), [adding CSS classes](https://developer.4d.com/docs/API/WebFormItemClass#addcssclass), or [removing CSS classes](https://developer.4d.com/docs/API/WebFormItemClass#removecssclass) from it.
:::
diff --git a/docs/4DQodlyPro/pageLoaders/states/nonConditionalState.md b/docs/4DQodlyPro/pageLoaders/states/nonConditionalState.md
index 42fadefb3..bf8aca202 100644
--- a/docs/4DQodlyPro/pageLoaders/states/nonConditionalState.md
+++ b/docs/4DQodlyPro/pageLoaders/states/nonConditionalState.md
@@ -206,7 +206,7 @@ The `Base` state and `Conditional` states, however, are not included among these
:::
:::tip
-The states are enabled in the given order of the standard action (same if [`WebForm.enableState`](../../../QodlyinCloud/qodlyScript/WebFormClass.md#enablestate) is called several times with different states).
+The states are enabled in the given order of the standard action (same if [`WebForm.enableState`](https://developer.4d.com/docs/API/WebFormClass#enablestate) is called several times with different states).
:::
:::warning
@@ -218,8 +218,8 @@ If a state is initially "Non-Conditional" but later transitions to a "Conditiona
In addition to the standard actions, Page object exposes several states related functions with error handling for "Conditional" states, like:
-- [`WebForm.enableState`](../../../QodlyinCloud/qodlyScript/WebFormClass.md#enablestate): Applies the differences from selected states to the current Page.
-- [`WebForm.disableState`](../../../QodlyinCloud/qodlyScript/WebFormClass.md#disablestate): Removes the applied differences from the Page.
+- [`WebForm.enableState`](https://developer.4d.com/docs/API/WebFormClass#enablestate): Applies the differences from selected states to the current Page.
+- [`WebForm.disableState`](https://developer.4d.com/docs/API/WebFormClass#disablestate): Removes the applied differences from the Page.
:::info
These functions are designed to target only "Non-Conditional" states. In the event a "Conditional" state is used, the function will either return an error or not execute any action.
diff --git a/docs/4DQodlyPro/qodlyStudioInterface.md b/docs/4DQodlyPro/qodlyStudioInterface.md
index 7453fa194..e69de29bb 100644
--- a/docs/4DQodlyPro/qodlyStudioInterface.md
+++ b/docs/4DQodlyPro/qodlyStudioInterface.md
@@ -1,112 +0,0 @@
----
-id: qodlyStudioInterface
-title: Qodly Studio Interface
----
-
-Development in Qodly relies on the use of **Qodly Studio**, an innovative platform for creating business web applications. Our primary goal with **Qodly Studio** is to provide developers with a seamless, 100% web-based development experience. This platform empowers developers to:
-
-- Design and modify data models that align with your business logic.
-- Effortlessly link data with [ORDA](../QodlyinCloud/qodlyScript/guides/data-model.md#the-orda-concept) dataclasses.
-- Visually craft Pages by simply dragging and dropping components onto a canvas.
-- Instantly preview web pages.
-- Execute QodlyScript code directly within web events or qodlysource events.
-- Write and debug code directly within the browser.
-- Fine-tune privileges and roles as per your requirements.
-
-Ultimately, **Qodly Studio** allows developers to build comprehensive web-based business applications using just a web browser, significantly minimizing the need for extensive coding. Importantly, JavaScript is not a mandatory component in this process.
-
-
-## Qodly Studio Home Page
-
-When you first step into Qodly Studio, you'll immediately encounter a user-friendly interface. It's divided into three key sections: the `Explorer` ⓵ on the left, a `Header bar`⓶ at the top, and a `Grid container`⓷ in the center.
-
-
-
-1. **Explorer**: is where you'll find an overview of your project's essential elements:
-
- - [Pages](./pageLoaders/pageLoaderOverview.md#page-editor-overview): Serve as containers, enveloping various components within your application.
- - **Methods**: Project methods. While they can be invoked from class functions or other methods, components can't directly interact with them.
- - **Classes**: [ORDA classes](https://developer.4d.com/docs/ORDA/ordaClasses) and [user classes](https://developer.4d.com/docs/Concepts/classes), serving as the cornerstone for organizing your code around objects, granting components the capability to directly interact with them.
- - Shared: Use this folder to store any contents (local images, downloadable files...) you might need within your app. The contents of this folder can be accessed from Qodyy pages using the [`/$shared` link](pageLoaders/events/bindingActionToEvents.md#shared-folder) or from the QodlyScript language using the [`/SOURCES/Shared`](../QodlyinCloud/qodlyScript/basics/lang-pathnames.md#filesystem-pathnames) file path.
- - [Debugger](./debugging.md): Provides a suite of debugging tools that address different types of errors during the development phase.
- - [Roles And Privileges](./roles/rolesPrivilegesOverview.md): Plays a pivotal role in enforcing data access restrictions within your application, ensuring that the right users access the right data.
- - Model (disabled).
- - [Settings](./settings.md): Offer options to configure application-specific settingdds.
-
-
-2. **Header bar**: provides quick access to several project-related options:
-
- - [Debug](./debugging.md#starting-a-debug-session): Initiate a debug session on the server, attaching it to your browser, and enable debugging for your app.
- - Save All: Save all changes made across all open windows within your app.
- - [Data](https://developer.4d.com/docs/Admin/dataExplorer): Provide access to the Data Explorer, facilitating data-related operations.
- - [Preview](./rendering.md#preview-the-entire-site): Allows you to assess your application's appearance and functionality with ease.
- - [Settings](./settings.md): Present a range of options for configuring application-specific settings, tailoring the environment to your app's needs.
-
-3. **Grid container**: houses a collection of swift shortcuts for a range of actions:
-
- - **Create New**: Offers convenient quick links for:
- - [Pages](./pageLoaders/pageLoaderOverview.md#page-editor-overview): Speedily initiate the creation of a new Page.
- - [Classes](./coding.md#creating): Generate a new Class.
- - [Methods](./coding.md#creating): Generate a new Method.
- - [Data](https://developer.4d.com/docs/Admin/dataExplorer): Provide access to the Data Explorer, facilitating data-related operations.
- - **Recent Files**: Displays the most recently accessed files, allowing you to quickly revisit your recent work.
- - **What's New**: Keeps you updated with the latest news and announcements from the Qodly team.
-
-
-
-## Tabs
-
-Qodly Studio displays open items with tabs in the title area above the current editor.
-
-
-
-
-[By default](#preview-mode), when you open a file, a new tab is added for that file. New tabs are added to the right of the existing tabs. All Qodly files and editors use tabs: model, Pages, methods, classes, roles and privileges, settings, pictures, and so on.
-
-Tabs let you quickly navigate between items and you can drag and drop tabs to reorder them. Only one instance of an item can be open in the same editor window.
-
-When you have more open items than can fit in the title area, you can use the scroll bar between the tab and editor regions to drag tabs into view.
-
-
-
-
-### Contextual menu
-
-Every tab provides access to a contextual menu that you can display with a **right-click** on the tab header:
-
-
-
-The following actions are available:
-
-- **Reload**: reloads the tab contents from the server
-- **Rename** (not available with non-editable tabs such as Roles and Pivileges): makes the tab heading area editable so that you can rename the opened file.
-- **Close**: closes the current tab and its associated file.
-- **Close others**: closes all the opened tabs except the current one.
-- **Close all**: closes all the opened tabs.
-- **Close saved**: closes all the tabs that contain saved contents. Tabs with unsaved contents are not closed.
-- **Close tabs to the right/to the left**: closes all opened tabs located at the right side or the left side of the current tab.
-- **Switch to Text Editor** (only available with Page tabs and States): displays the [current Page](./pageLoaders/pageLoaderOverview.md#page-json-representation) or [State](./pageLoaders/states/conditionalState.md#json-editor) as JSON text. When called from the text editor, the menu command toggles to **Switch to Page Editor**/**Switch to Model Editor**.
-
-### Unsaved contents
-
-When the contents of a tab has been modified locally but has not been saved, a colored spot is displayed on the right part of the tab header:
-
-
-
-When closing or reloading a tab, if it contains unsaved changes, an alert window is displayed, allowing you to ignore the changes and close the tab (**Confirm**) or cancel the closure and let you click the [**Save all**](./coding.md#saving) button to save the changes.
-
-
-
-### Preview mode
-
-By default in Qodly Studio, clicking a file in the Explorer automatically opens it in a new tab, if not already opened. This can lead to open a large number of tabs.
-
-If you are browsing multiple files and don't want every opened file to have its own tab, you can enable the **tabs preview mode** using the [**Activate tabs preview mode** selector](settings.md#activate-tabs-preview-mode) of the User Settings.
-
-When the tabs preview mode is enabled, clicking a file in the Explorer displays a preview of its contents and reuses an existing tab. If you start editing the file or use double-click to open the file from the Explorer, a new tab is dedicated to that file.
-
-Preview mode tab is indicated by *italics* in the tab heading:
-
-
-
-If you'd prefer to not use preview mode and always create a new tab, just let the selector off (default mode).
\ No newline at end of file
diff --git a/docs/4DQodlyPro/roles/permissionsFunctionLevel.md b/docs/4DQodlyPro/roles/permissionsFunctionLevel.md
index cc5e770bd..097f2cab7 100644
--- a/docs/4DQodlyPro/roles/permissionsFunctionLevel.md
+++ b/docs/4DQodlyPro/roles/permissionsFunctionLevel.md
@@ -25,7 +25,7 @@ To configure **Function** Permissions for a specific privilege, follow these ste
:::tip
If the Singleton class or its exposed functions don't appear in the permissions dropdown, follow these steps to enable it:
-1. Navigate to the [Singleton class](../../QodlyinCloud/qodlyScript/basics/lang-classes.md#singleton-classes) in the class section.
+1. Navigate to the [Singleton class](https://developer.4d.com/docs/Concepts/classes#singleton-classes) in the class section.
2. Check if the **Singleton class** is missing any exposed functions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 31c825737..4cf2a18be 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -106,7 +106,8 @@ Thank you for helping us improve! 🚀
includeCurrentVersion: isProduction ? false : true, // false for prod only
versions:
{
- '21-R2': {label: '21 R2 BETA', banner: 'none',},
+ '21-R3': {label: '21 R3 BETA', banner: 'none',},
+ '21-R2': {label: '21 R2', banner: 'none',},
'21': {label: '21', banner: 'none',},
},
},
diff --git a/versioned_docs/version-21-R2/4DQodlyPro/coding.md b/versioned_docs/version-21-R2/4DQodlyPro/coding.md
index c35b6c9f1..926129cca 100644
--- a/versioned_docs/version-21-R2/4DQodlyPro/coding.md
+++ b/versioned_docs/version-21-R2/4DQodlyPro/coding.md
@@ -38,7 +38,7 @@ You can create a method or class using one of the three methods:
- A new entry, labeled as UntitledN appears in the list, where N is a number incrementing with each new creation. You can provide a compliant name and press Enter to confirm the modification.
+ A new entry, labeled as UntitledN appears in the list, where N is a number incrementing with each new creation. You can provide a compliant name and press Enter to confirm the modification.
@@ -65,7 +65,7 @@ To rename a method or class, you can either:
Click on the icon at the right side of the item in the Explorer.
diff --git a/versioned_docs/version-21-R2/4DQodlyPro/gettingStarted.md b/versioned_docs/version-21-R2/4DQodlyPro/gettingStarted.md
index 10e2ee135..3a245b945 100644
--- a/versioned_docs/version-21-R2/4DQodlyPro/gettingStarted.md
+++ b/versioned_docs/version-21-R2/4DQodlyPro/gettingStarted.md
@@ -140,10 +140,10 @@ You will then be prompted to enter the [access key](https://developer.4d.com/doc
The following commands and classes are dedicated to the server-side management of Qodly pages:
-- [`Web Form`](../QodlyinCloud/qodlyScript/commands/webForm.md) command: returns the Qodly page as an object.
-- [`Web Event`](../QodlyinCloud/qodlyScript/commands/webEvent.md) command: returns events triggered within Qodly page components.
-- [`WebForm`](../QodlyinCloud/qodlyScript/WebFormClass.md) class: functions and properties to manage the rendered Qodly page.
-- [`WebFormItem`](../QodlyinCloud/qodlyScript/WebFormItemClass.md) class: functions and properties to manage Qodly page components.
+- [`Web Form`](https://developer.4d.com/docs/API/commands/webForm) command: returns the Qodly page as an object.
+- [`Web Event`](https://developer.4d.com/docs/API/commands/webEvent) command: returns events triggered within Qodly page components.
+- [`WebForm`](https://developer.4d.com/docs/API/WebFormClass) class: functions and properties to manage the rendered Qodly page.
+- [`WebFormItem`](https://developer.4d.com/docs/API/WebFormItemClass) class: functions and properties to manage Qodly page components.
### Using project methods
diff --git a/versioned_docs/version-21-R2/4DQodlyPro/httpHandlers.md b/versioned_docs/version-21-R2/4DQodlyPro/httpHandlers.md
index 14bf3fccf..eacb21e76 100644
--- a/versioned_docs/version-21-R2/4DQodlyPro/httpHandlers.md
+++ b/versioned_docs/version-21-R2/4DQodlyPro/httpHandlers.md
@@ -317,15 +317,15 @@ However, only the first handler `getProductDetails` is executed, as it appears f
### Function Configuration
-The HTTP Request handler code must be implemented in a function of a [**Shared**](../QodlyinCloud/qodlyScript/basics/lang-classes.md#shared-singleton) [**singleton class**](../QodlyinCloud/qodlyScript/basics/lang-classes.md#singleton-classes).
+The HTTP Request handler code must be implemented in a function of a [**Shared**](https://developer.4d.com/docs/Concepts/classes#singleton-classes) [**singleton class**](https://developer.4d.com/docs/Concepts/classes#singleton-classes).
If the singleton is missing or not shared, an error `Cannot find singleton` is returned by the server. If the class or the function defined as handler is not found, an error `Cannot find singleton function` is returned by the server.
-Request handler functions are not necessarily shared, unless some request handler properties are updated by the functions. In this case, you need to declare its functions with the [`shared` keyword](../QodlyinCloud/qodlyScript/basics/lang-classes.md#shared-functions).
+Request handler functions are not necessarily shared, unless some request handler properties are updated by the functions. In this case, you need to declare its functions with the [`shared` keyword](https://developer.4d.com/docs/Concepts/classes#shared-functions).
:::note
-It is **not recommended** to expose request handler functions to external REST calls using [`exposed`](../QodlyinCloud/qodlyScript/guides/data-model.md#exposed-vs-non-exposed-functions) or [`onHttpGet`](../QodlyinCloud/qodlyScript/guides/data-model.md#onhttpget-keyword) keywords.
+It is **not recommended** to expose request handler functions to external REST calls using [`exposed`](https://developer.4d.com/docs/API/guides/data-model#exposed-vs-non-exposed-functions) or [`onHttpGet`](https://developer.4d.com/docs/API/guides/data-model#onhttpget-keyword) keywords.
:::
@@ -354,19 +354,19 @@ This handler catches all requests that are not matched by earlier handlers. It c
### Input: 4D.IncomingMessage Class Instance
-When a request is intercepted by the handler, it is received on the server as an instance of the [4D.IncomingMessage class](../QodlyinCloud/qodlyScript/IncomingMessageClass.md).
+When a request is intercepted by the handler, it is received on the server as an instance of the [4D.IncomingMessage class](https://developer.4d.com/docs/API/IncomingMessageClass).
This object provides all necessary request information, including the request URL, verb, headers, URL parameters, and request body. The request handler can use this information to trigger the appropriate business logic.
### Output: 4D.OutgoingMessage Class Instance
-The request handler can return an object instance of the [4D.OutGoingMessage class](../QodlyinCloud/qodlyScript/OutgoingMessageClass.md), which represents web content ready for a browser to handle, such as a file content or a structured response.
+The request handler can return an object instance of the [4D.OutGoingMessage class](https://developer.4d.com/docs/API/OutgoingMessageClass), which represents web content ready for a browser to handle, such as a file content or a structured response.
### Example
-The [4D.IncomingMessage class](../QodlyinCloud/qodlyScript/IncomingMessageClass.md) provides functions to retrieve [headers](../QodlyinCloud/qodlyScript/IncomingMessageClass.md#headers) and the [body](../QodlyinCloud/qodlyScript/IncomingMessageClass.md#gettext) of the request.
+The [4D.IncomingMessage class](https://developer.4d.com/docs/API/IncomingMessageClass) provides functions to retrieve [headers](https://developer.4d.com/docs/API/IncomingMessageClass#headers) and the [body](https://developer.4d.com/docs/API/IncomingMessageClass#gettext) of the request.
Below is an example of an HTTP handler that processes a file upload.
@@ -390,7 +390,7 @@ The request URL: `/putFile?fileName=testFile`
- The filename is included as a query parameter (*fileName*).
- - The filename is extracted using the [`urlQuery`](../QodlyinCloud/qodlyScript/IncomingMessageClass.md#urlquery) object.
+ - The filename is extracted using the [`urlQuery`](https://developer.4d.com/docs/API/IncomingMessageClass#urlquery) object.
#### Implementation of the UploadFile Class:
diff --git a/versioned_docs/version-21-R2/4DQodlyPro/notes.md b/versioned_docs/version-21-R2/4DQodlyPro/notes.md
index 346feeedb..b96dff6e0 100644
--- a/versioned_docs/version-21-R2/4DQodlyPro/notes.md
+++ b/versioned_docs/version-21-R2/4DQodlyPro/notes.md
@@ -15,8 +15,6 @@ title: Release Notes
- [Events Report](pageLoaders/pageLoaderOverview.md#events-report): Introduced the Events Report, a visual overview of all page events for components and Qodly sources complete with filtering, editing, and navigation options.
-... more to come...
-
## 4D 20 R10
diff --git a/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/components/datatable.md b/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/components/datatable.md
index 955a8f02f..7cf91ba46 100644
--- a/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/components/datatable.md
+++ b/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/components/datatable.md
@@ -155,7 +155,7 @@ When it comes to displaying columns in the DataTable component, you have two opt
### Server-Side Interaction
-Enhance DataTable interactivity by binding functions to events like `onheaderclick` and `oncellclick`. These events respond to user actions and retrieve event-specific details using the [webEvent](../../../QodlyinCloud/qodlyScript/commands/webEvent) command.
+Enhance DataTable interactivity by binding functions to events like `onheaderclick` and `oncellclick`. These events respond to user actions and retrieve event-specific details using the [webEvent](https://developer.4d.com/docs/API/commands/webEvent) command.
Common attributes for `onheaderclick` and `oncellclick`:
@@ -359,7 +359,7 @@ Customize the styles of the DataTable component by utilizing specific CSS classe
The **DataTable** component can respond to various events, enabling dynamic user experiences.
-Additional information including the **column number**, **row number**, and **column qodlysource name** are returned by the [`webEvent` command](../../../QodlyinCloud/qodlyScript/commands/webEvent.md) when called in an event function triggered by a **DataTable** component.
+Additional information including the **column number**, **row number**, and **column qodlysource name** are returned by the [`webEvent` command](https://developer.4d.com/docs/API/commands/webEvent) when called in an event function triggered by a **DataTable** component.
Events that can trigger actions within the component include:
diff --git a/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/components/dialog.md b/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/components/dialog.md
index 25c63379e..685aff39c 100644
--- a/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/components/dialog.md
+++ b/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/components/dialog.md
@@ -170,7 +170,7 @@ Enhance the Dialog component to align with your application's requirements using
## Server-Side Interaction
-Every dialog is uniquely named, which acts as its server-side reference for server-side interactions. This allows you to control the Dialog's behavior, such as [hiding](../../../QodlyinCloud/qodlyScript/WebFormItemClass.md#hide), [showing](../../../QodlyinCloud/qodlyScript/WebFormItemClass.md#show), [adding CSS classes](../../../QodlyinCloud/qodlyScript/WebFormItemClass.md#addcssclass), or [removing CSS classes](../../../QodlyinCloud/qodlyScript/WebFormItemClass.md#removecssclass) from it.
+Every dialog is uniquely named, which acts as its server-side reference for server-side interactions. This allows you to control the Dialog's behavior, such as [hiding](https://developer.4d.com/docs/API/WebFormItemClass#hide), [showing](https://developer.4d.com/docs/API/WebFormItemClass#show), [adding CSS classes](https://developer.4d.com/docs/API/WebFormItemClass#addcssclass), or [removing CSS classes](https://developer.4d.com/docs/API/WebFormItemClass#removecssclass) from it.
:::tip
Employing the `.show()` method triggers the `On Open` event, whereas utilizing `.hide()` triggers the `On Close` event.
diff --git a/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/components/rangeinput.md b/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/components/rangeinput.md
index 20812176c..f5a3d02d4 100644
--- a/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/components/rangeinput.md
+++ b/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/components/rangeinput.md
@@ -85,9 +85,6 @@ Within the **Range Input** component, an embedded **Slider Container** allows fo
Min Value: Set the minimum value that users can select within the range.
Max Value: Define the maximum value that users can select within the range.
Step: Determine the increment value when users interact with the component.
-
diff --git a/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/components/tabs.md b/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/components/tabs.md
index ed041c192..39987cac3 100644
--- a/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/components/tabs.md
+++ b/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/components/tabs.md
@@ -81,7 +81,7 @@ Although the **Tabs** component isn't inherently data-bound, you can still creat
The **Tabs** component can respond to various events, enabling dynamic user experiences.
-The [`webEvent` command](../../../QodlyinCloud/qodlyScript/commands/webEvent) returns the involved **tab index** when called in an event function triggered by a **Tabs** component.
+The [`webEvent` command](https://developer.4d.com/docs/API/commands/webEvent) returns the involved **tab index** when called in an event function triggered by a **Tabs** component.
Events that can trigger actions within the component include:
diff --git a/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/components/textinput.md b/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/components/textinput.md
index 255d5235c..ee339cf3c 100644
--- a/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/components/textinput.md
+++ b/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/components/textinput.md
@@ -259,9 +259,6 @@ This gives users the flexibility to work with the time format they are most fami
-
## Data Integration
diff --git a/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/date-time-formats.md b/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/date-time-formats.md
index 70683efb2..7f2399347 100644
--- a/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/date-time-formats.md
+++ b/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/date-time-formats.md
@@ -10,7 +10,7 @@ Throughout your Qodly projects, you might need to format date and/or time values
Qodly includes a comprehensive list of patterns that you can use to create and apply customized date and time formats in your applications, in addition to predefined formats. Customized format patterns are supported by:
- the [date and time qodlysources](components/componentsBasics.md#data-formatting) used in your Pages,
-- the [`string`](../../QodlyinCloud/qodlyScript/commands/string.md) command.
+- the [`string`](https://developer.4d.com/docs/API/commands/string) command.
## Pattern list
diff --git a/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/events/bindingActionToEvents.md b/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/events/bindingActionToEvents.md
index 9a24a2ae1..47b25ced7 100644
--- a/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/events/bindingActionToEvents.md
+++ b/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/events/bindingActionToEvents.md
@@ -25,7 +25,7 @@ After binding a standard action to a qodlysource with an event, follow these ste
| Scalar (Number) | Increment |  | Increments the qodlysource's value |
| | Decrement |  | Decrements the qodlysource's value |
| Entity Selection | Order By |  | Specify one or more attributes to sort and select direction |
- | | Query |  | The query is provided as a string and supports the same syntax as an [ORDA query](../../../QodlyinCloud/qodlyScript/guides/queries.md), except for formula (`eval`) and the `settings` object. Placeholders can be used with qodlysources or data as-is |
+ | | Query |  | The query is provided as a string and supports the same syntax as an [ORDA query](https://developer.4d.com/docs/API/guides/queries), except for formula (`eval`) and the `settings` object. Placeholders can be used with qodlysources or data as-is |
| | Reload |  | Reload the entire entity selection from the server |
| | All |  | Load all entities of the same dataclass |
| | Clear |  | Remove any content and create a new, empty selection of the same dataclass |
@@ -62,7 +62,7 @@ After binding a standard action to a qodlysource with an event, follow these ste
:::note About Create entity action
-Keep in mind that the **Create** action only creates a new, blank entity in memory. If you want to save this entity in the datastore, you need to execute the **Save** action. New entity attributes are filled with null values. If you want to create, initialize, and save a new entity, you might consider using a [QodlyScript function](../../../QodlyinCloud/qodlyScript/guides/data.md#creating-an-entity).
+Keep in mind that the **Create** action only creates a new, blank entity in memory. If you want to save this entity in the datastore, you need to execute the **Save** action. New entity attributes are filled with null values. If you want to create, initialize, and save a new entity, you might consider using a [QodlyScript function](https://developer.4d.com/docs/API/guides/data#creating-an-entity).
:::
@@ -129,7 +129,7 @@ The `Base` state and `Conditional` states, however, are not included among these
:::
:::tip
-The states are enabled in the given order of the standard action (same if [`WebForm.enableState`](../../../QodlyinCloud/qodlyScript/WebFormClass.md#enablestate) is called several times with different states).
+The states are enabled in the given order of the standard action (same if [`WebForm.enableState`](https://developer.4d.com/docs/API/WebFormClass#enablestate) is called several times with different states).
:::
:::warning
@@ -289,7 +289,7 @@ When the path points to a file, it doesn't open it in a new tab but instead init
- 4. Add Parameter: If your function accepts a variable number of parameters, you can use this button to declare and bind one or more appropriate parameter(s). They will be passed to the function in the defined order when called for the event.
+ 4. Add Parameter: If your function accepts a variable number of parameters, you can use this button to declare and bind one or more appropriate parameter(s). They will be passed to the function in the defined order when called for the event.
@@ -418,7 +418,7 @@ There are two primary methods for ensuring precise parameter handling:
### Binding onHttpGet Functions
-Functions defined with the [onHttpGet](../../../QodlyinCloud/qodlyScript/guides/data-model.md#onhttpget-keyword) keyword and returning an instance of the [4D.OutgoingMessage](../../../QodlyinCloud/qodlyScript/OutgoingMessageClass.md) class, have a unique behavior when bound to events. Unlike standard functions, `onHttpGet functions` are specifically designed to handle `HTTP GET` requests and provide additional flexibility for displaying results to users.
+Functions defined with the [onHttpGet](https://developer.4d.com/docs/API/guides/data-model#onhttpget-keyword) keyword and returning an instance of the [4D.OutgoingMessage](https://developer.4d.com/docs/API/OutgoingMessageClass) class, have a unique behavior when bound to events. Unlike standard functions, `onHttpGet functions` are specifically designed to handle `HTTP GET` requests and provide additional flexibility for displaying results to users.
#### Example
@@ -542,7 +542,7 @@ For further details, refer to the [Dialog](../components/dialog.md) section.
Authentication: This action logs the user out of the rendered app
-
4D Code: This action allows you to call 4D function shared through the [WA SET CONTEXT](https://developer.4d.com/docs/fr/commands/wa-set-context) when running the qodly page inside a Web Area in a 4D Form
+
4D Code: This action allows you to call 4D function shared through the [WA SET CONTEXT](https://developer.4d.com/docs/commands/wa-set-context) when running the qodly page inside a Web Area in a 4D Form
@@ -574,7 +574,7 @@ Importantly, this customized feedback aligns with the application's business rul
### Toast Notifications
-When the `Provide Feedback` checkbox is enabled, it introduces a **hidden internal feedback element** into the web page, known as a **toast** notification. This element automatically showcases messages generated by the application code in response to events, using [dedicated Page functions](../../../QodlyinCloud/qodlyScript/WebFormClass.md) or by specifying them for `On Success` or `On Failure` in the Page Editor interface, for the case of standard actions.
+When the `Provide Feedback` checkbox is enabled, it introduces a **hidden internal feedback element** into the web page, known as a **toast** notification. This element automatically showcases messages generated by the application code in response to events, using [dedicated Page functions](https://developer.4d.com/docs/API/WebFormClass) or by specifying them for `On Success` or `On Failure` in the Page Editor interface, for the case of standard actions.
:::info
If this feature is not enabled, feedback sent from the backend will not be displayed within the user interface.
@@ -591,11 +591,11 @@ For example, in the context of a technical document, regular users may require f
Three tiers of feedback are accessible and will be displayed as colored **toasts**:
-- **Informative Messages**: Dispatches informative messages when invoked, either directly through the [`setMessage()`](../../../QodlyinCloud/qodlyScript/WebFormClass.md#setmessage) function or by specifying them in the `On Success` field within the event section associated with a standard action.
+- **Informative Messages**: Dispatches informative messages when invoked, either directly through the [`setMessage()`](https://developer.4d.com/docs/API/WebFormClass#setmessage) function or by specifying them in the `On Success` field within the event section associated with a standard action.
-- **Cautionary Messages**: Sends out cautionary messages, and these messages are exclusively triggered using the [`setWarning()`](../../../QodlyinCloud/qodlyScript/WebFormClass.md#setwarning) function.
+- **Cautionary Messages**: Sends out cautionary messages, and these messages are exclusively triggered using the [`setWarning()`](https://developer.4d.com/docs/API/WebFormClass#setwarning) function.
-- **Error Messages**: Issues error messages when invoked, either directly through the [`setError()`](../../../QodlyinCloud/qodlyScript/WebFormClass.md#seterror) function or by specifying them in the `On Failure` field within the event section associated with a standard action.
+- **Error Messages**: Issues error messages when invoked, either directly through the [`setError()`](https://developer.4d.com/docs/API/WebFormClass#seterror) function or by specifying them in the `On Failure` field within the event section associated with a standard action.
diff --git a/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/events/eventsManagement.md b/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/events/eventsManagement.md
index f656058a9..387650250 100644
--- a/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/events/eventsManagement.md
+++ b/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/events/eventsManagement.md
@@ -186,7 +186,7 @@ For events bound to Class functions, the collapsed card displays the function si
diff --git a/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/events/overview.md b/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/events/overview.md
index 2e97df74e..9945eb5c2 100644
--- a/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/events/overview.md
+++ b/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/events/overview.md
@@ -95,7 +95,7 @@ When the `On Change` event is linked to a Qodly Source, it will trigger in the f
| Trigger | Description |
| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Qodly Source |
The reference pointed to by the qodlysource changes in the web browser (not on the server)
The entity is [touched](../../../QodlyinCloud/qodlyScript/EntityClass.md#touched)
|
+| Qodly Source |
The reference pointed to by the qodlysource changes in the web browser (not on the server)
The entity is [touched](https://developer.4d.com/docs/API/EntityClass#touched)
|
| Entity Qodly Source | The contents of the entity attribute change |
| Entity Selection Qodly Source |
The reference pointed by the qodlysource changes in the web browser (not on the server)
An entity is added to the entity selection
|
| Scalar Qodly Source | The contents of the scalar qodlysource change |
diff --git a/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/pageLoaderOverview.md b/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/pageLoaderOverview.md
index 1cc402b02..e6b6e14b0 100644
--- a/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/pageLoaderOverview.md
+++ b/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/pageLoaderOverview.md
@@ -365,6 +365,76 @@ self:disabled {
:::
+#### Read-Only Mode
+
+The "Read Only" toggle in the properties panel allows you to set a component to read-only. Unlike disabled components, read-only components remain focusable, tab-navigable, and accessible to screen readers, and their values are included when submitting form data.
+
+1. **Build Mode**:
+
+ - **Behavior**: The component functions normally, allowing you to configure events and test interactions during design.
+
+ - **Appearance**: The component appears unchanged in build mode.
+
+2. **Rendering Mode**:
+
+ - **Behavior**: Users cannot modify the component's value through direct interaction. All events remain functional except for user-initiated input events. For example, if two Text Input components are bound to the same Qodly Source and one is read-only, changes made through the editable input are reflected in the read-only input, but the read-only input does not emit an `onChange` event.
+
+ - **Appearance**: The cursor changes to `default` to visually indicate that the component is not editable.
+
+ The following table shows all components that support the read-only property and whether they have native HTML `readonly` support:
+
+ | Component | Type | Native `readonly` Support |
+ |--------------|-----------|:------------------------:|
+ | Text Input | text | ✅ |
+ | Text Input | number | ✅ |
+ | Text Input | password | ✅ |
+ | Text Input | text area | ✅ |
+ | Text Input | date | ✅ |
+ | Text Input | duration | ✅ |
+ | File Upload | N/A | ✅ |
+ | Select Input | N/A | ❌ |
+ | Radio | N/A | ❌ |
+ | Check Box | N/A | ❌ |
+ | Range Input | N/A | ❌ |
+ | Select Box | N/A | ❌ |
+ | Matrix | N/A | ❌ |
+ | Datatable | N/A | ❌ |
+
+:::info Read-Only vs Disabled
+While both properties restrict user interaction, they differ in important ways:
+- **Read-only** components are tab-navigable and their values are submitted with forms. Screen readers can access them normally.
+- **Disabled** components are not tab-navigable and their values are not submitted with forms.
+- When both `readonly` and `disabled` are set on a component, `disabled` takes precedence.
+:::
+
+:::info HTML Attributes
+- Components with native `readonly` support receive both `readonly="true"` and `data-readonly="true"` attributes.
+- Components without native `readonly` support receive only the `data-readonly="true"` attribute.
+
+This provides a unified way to target all read-only components in CSS using `data-readonly`.
+:::
+
+:::tip Customizing Read-Only Rendering
+You can customize the appearance of read-only components using CSS classes.
+
+For components with native `readonly` support:
+
+```css
+self[readonly] {
+ /* your styles */
+}
+```
+
+For all read-only components (including those without native support):
+
+```css
+self[data-readonly] {
+ /* your styles */
+}
+```
+
+:::
+
### Data Access Category
@@ -391,7 +461,7 @@ The Data Access properties encompass distinct options and fields tailored to eac
:::info
-Server Side allows you to control the component's behavior, such as [hiding](../../QodlyinCloud/qodlyScript/WebFormItemClass.md#hide), [showing](../../QodlyinCloud/qodlyScript/WebFormItemClass.md#show), [adding CSS classes](../../QodlyinCloud/qodlyScript/WebFormItemClass.md#addcssclass), or [removing CSS classes](../../QodlyinCloud/qodlyScript/WebFormItemClass.md#removecssclass) from it.
+Server Side allows you to control the component's behavior, such as [hiding](https://developer.4d.com/docs/API/WebFormItemClass#hide), [showing](https://developer.4d.com/docs/API/WebFormItemClass#show), [adding CSS classes](https://developer.4d.com/docs/API/WebFormItemClass#addcssclass), or [removing CSS classes](https://developer.4d.com/docs/API/WebFormItemClass#removecssclass) from it.
:::
diff --git a/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/states/nonConditionalState.md b/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/states/nonConditionalState.md
index 42fadefb3..bf8aca202 100644
--- a/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/states/nonConditionalState.md
+++ b/versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/states/nonConditionalState.md
@@ -206,7 +206,7 @@ The `Base` state and `Conditional` states, however, are not included among these
:::
:::tip
-The states are enabled in the given order of the standard action (same if [`WebForm.enableState`](../../../QodlyinCloud/qodlyScript/WebFormClass.md#enablestate) is called several times with different states).
+The states are enabled in the given order of the standard action (same if [`WebForm.enableState`](https://developer.4d.com/docs/API/WebFormClass#enablestate) is called several times with different states).
:::
:::warning
@@ -218,8 +218,8 @@ If a state is initially "Non-Conditional" but later transitions to a "Conditiona
In addition to the standard actions, Page object exposes several states related functions with error handling for "Conditional" states, like:
-- [`WebForm.enableState`](../../../QodlyinCloud/qodlyScript/WebFormClass.md#enablestate): Applies the differences from selected states to the current Page.
-- [`WebForm.disableState`](../../../QodlyinCloud/qodlyScript/WebFormClass.md#disablestate): Removes the applied differences from the Page.
+- [`WebForm.enableState`](https://developer.4d.com/docs/API/WebFormClass#enablestate): Applies the differences from selected states to the current Page.
+- [`WebForm.disableState`](https://developer.4d.com/docs/API/WebFormClass#disablestate): Removes the applied differences from the Page.
:::info
These functions are designed to target only "Non-Conditional" states. In the event a "Conditional" state is used, the function will either return an error or not execute any action.
diff --git a/versioned_docs/version-21-R2/4DQodlyPro/qodlyStudioInterface.md b/versioned_docs/version-21-R2/4DQodlyPro/qodlyStudioInterface.md
index 7453fa194..863aea196 100644
--- a/versioned_docs/version-21-R2/4DQodlyPro/qodlyStudioInterface.md
+++ b/versioned_docs/version-21-R2/4DQodlyPro/qodlyStudioInterface.md
@@ -6,7 +6,7 @@ title: Qodly Studio Interface
Development in Qodly relies on the use of **Qodly Studio**, an innovative platform for creating business web applications. Our primary goal with **Qodly Studio** is to provide developers with a seamless, 100% web-based development experience. This platform empowers developers to:
- Design and modify data models that align with your business logic.
-- Effortlessly link data with [ORDA](../QodlyinCloud/qodlyScript/guides/data-model.md#the-orda-concept) dataclasses.
+- Effortlessly link data with [ORDA](https://developer.4d.com/docs/API/guides/data-model#the-orda-concept) dataclasses.
- Visually craft Pages by simply dragging and dropping components onto a canvas.
- Instantly preview web pages.
- Execute QodlyScript code directly within web events or qodlysource events.
@@ -27,7 +27,7 @@ When you first step into Qodly Studio, you'll immediately encounter a user-frien
- [Pages](./pageLoaders/pageLoaderOverview.md#page-editor-overview): Serve as containers, enveloping various components within your application.
- **Methods**: Project methods. While they can be invoked from class functions or other methods, components can't directly interact with them.
- **Classes**: [ORDA classes](https://developer.4d.com/docs/ORDA/ordaClasses) and [user classes](https://developer.4d.com/docs/Concepts/classes), serving as the cornerstone for organizing your code around objects, granting components the capability to directly interact with them.
- - Shared: Use this folder to store any contents (local images, downloadable files...) you might need within your app. The contents of this folder can be accessed from Qodyy pages using the [`/$shared` link](pageLoaders/events/bindingActionToEvents.md#shared-folder) or from the QodlyScript language using the [`/SOURCES/Shared`](../QodlyinCloud/qodlyScript/basics/lang-pathnames.md#filesystem-pathnames) file path.
+ - Shared: Use this folder to store any contents (local images, downloadable files...) you might need within your app. The contents of this folder can be accessed from Qodyy pages using the [`/$shared` link](pageLoaders/events/bindingActionToEvents.md#shared-folder) or from the QodlyScript language using the [`/SOURCES/Shared`](https://developer.4d.com/docs/Concepts/paths#filesystem-pathnames) file path.
- [Debugger](./debugging.md): Provides a suite of debugging tools that address different types of errors during the development phase.
- [Roles And Privileges](./roles/rolesPrivilegesOverview.md): Plays a pivotal role in enforcing data access restrictions within your application, ensuring that the right users access the right data.
- Model (disabled).
diff --git a/versioned_docs/version-21-R2/4DQodlyPro/roles/permissionsFunctionLevel.md b/versioned_docs/version-21-R2/4DQodlyPro/roles/permissionsFunctionLevel.md
index cc5e770bd..097f2cab7 100644
--- a/versioned_docs/version-21-R2/4DQodlyPro/roles/permissionsFunctionLevel.md
+++ b/versioned_docs/version-21-R2/4DQodlyPro/roles/permissionsFunctionLevel.md
@@ -25,7 +25,7 @@ To configure **Function** Permissions for a specific privilege, follow these ste
:::tip
If the Singleton class or its exposed functions don't appear in the permissions dropdown, follow these steps to enable it:
-1. Navigate to the [Singleton class](../../QodlyinCloud/qodlyScript/basics/lang-classes.md#singleton-classes) in the class section.
+1. Navigate to the [Singleton class](https://developer.4d.com/docs/Concepts/classes#singleton-classes) in the class section.
2. Check if the **Singleton class** is missing any exposed functions.
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/coding.md b/versioned_docs/version-21-R3/4DQodlyPro/coding.md
new file mode 100644
index 000000000..926129cca
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/coding.md
@@ -0,0 +1,258 @@
+---
+id: coding
+title: Coding
+---
+import Column from '@site/src/components/Column'
+
+Qodly is a groundbreaking hybrid **low-code** application development platform that redefines how you build applications. With Qodly, you'll find yourself needing only a minimal amount of code, and sometimes, no code at all. It's as simple as designing your application, and Qodly Studio takes care of generating all the necessary code on your behalf.
+
+
+While Qodly empowers you with its low-code capabilities, there are situations where coding expertise becomes essential. Within Qodly Studio, you'll harness the power of [events](pageLoaders/events/bindingActionToEvents.md) in combination with class functions to effectively manage the intricacies of your web application.
+
+
+
+## Handling methods and classes from Qodly Studio
+
+You can create, duplicate, rename, and delete 4D methods and classes directly from Qodly Studio.
+
+### Creating
+
+You can create a method or class using one of the three methods:
+
+
+
+
+
You can create them individually from dedicated grids on the Studio Homepage.
+
In the Explorer, simply click the plus icon located next to either Methods or Classes.
+
While in the Page Editor, go to the New + tab and opt for either Methods or Classes.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ A new entry, labeled as UntitledN appears in the list, where N is a number incrementing with each new creation. You can provide a compliant name and press Enter to confirm the modification.
+
+
+
+
+
+
+### Duplicating
+
+
+
+ When duplicating existing methods or classes, Qodly suggests a naming convention in the itemName_copy_N format.
+
+
+
+
+
+
+### Renaming
+
+To rename a method or class, you can either:
+
+
+
+
+
Click on the icon at the right side of the item in the Explorer.
+
+
+
+
+
+
+### Deleting
+
+Deleting a method or class is straightforward:
+
+
+
+
+
In the Explorer, open the options menu for the item you wish to delete.
+
+
Select Delete.
+
+
+
+
+
+
+
+
+
+
+
Confirm the deletion in the subsequent warning dialog.
+
+
+
+
+
+
+
+### Tab Management
+
+
+
+
+ To work on a method or class, you can open it in a tab by double-clicking its name in the Explorer. Only one instance of a method or class code can be open in the same code editor window.
+ To close a tab, either click the x button or use the tab's pop-up menu
+
+
+
+
+
+
+### Executing Methods
+
+For testing purposes, a method can be executed from the Explorer
+Or directly from the toolbar
+
+:::info
+For comprehensive information on debugging your code, please refer to the [Debugger](./debugging.md) section.
+:::
+
+## Code Preservation and Synchronization
+
+Ensure the integrity and consistency of your method and class code in Qodly with these preservation and synchronization tools.
+
+### Saving
+
+Your code modifications are automatically saved at regular intervals. However, if you want to ensure immediate saving, you can click `Save all` to save all edited tabs.
+
+### Reloading code
+
+
+
+ If you're working on a class function or method, and it gets edited elsewhere, the tab displays (outdated).
+ To fetch the latest version, right-click the tab and choose Reload. This action initiates an immediate refresh of the code content directly from the server, ensuring that you are always working with the latest code, even if you haven't made any local edits.
+
+
+
+
+
+
+### Collaborative Editing Behavior
+
+Methods and class functions in Qodly Studio feature real-time synchronization when multiple users are editing the same class function. These collaborative editing capabilities are accompanied by safeguards to prevent data loss in specific scenarios. Here's how it works:
+
+
+- **Automatic Synchronization**: Whenever a user edits and saves a method or class function, those changes are instantly synchronized across all open tabs where other users are working on the same class function. This guarantees that every user has access to the most current version of the code.
+
+- **Unsaved Changes and "Outdated" Status**: Consider the scenario where `User A` makes changes to a method or class function but neglects to save them, and then `User B`, who is also working on the same method or class function, makes different changes and saves them. In this scenario, `User A`'s method or class function tab, which contains unsaved changes, will recognize that it now holds outdated content compared to the version saved by `User B`. This recognition is indicated by an `outdated` status.
+
+- **Page Refresh and Data Persistence**: Qodly Studio employs client-side data persistence through the browser's local storage to store and retrieve the state information. When `User A` initiates a page refresh, the following actions are performed:
+
+ - **Checking Local Storage**: Qodly Studio checks the local storage for any saved state data associated with the tab that `User A` was working on.
+
+ - **Retrieving Saved Data**: Upon discovery, Qodly Studio retrieves this stored data, which includes the current content of the method or class function that `User A` was editing.
+
+ - **Assessing the "Outdated" Status**: Additionally, the application assesses the `outdated` status based on an attribute within the tab state flags section. This attribute serves as an indicator of whether the current state is outdated compared to the version stored on the server.
+
+ - These measures ensure that even after a page refresh, `User A` remains fully informed about any changes made by others, such as `User B`, while preserving their own unsaved changes.
+
+
+
+
+
Reload Option: Within the method/class tab of Qodly Studio, you'll find the Reload feature. Upon selecting this option, a confirmation message will promptly appear, indicating that your local changes will be lost. Should User A choose to reload the content will trigger an immediate refresh of the code content directly from the server.
+
+
+
+
+
+
+
+
+
+
+
Save all: Should User A choose to save the outdated code in their tab, a confirmation message will appear, alerting them to the presence of new content saved by User B. This serves as a safeguard to prevent unintentional overwriting of more recent changes made by different users.
+
+
+
+
+
+
+
+- **Data Loss Prevention**: If `User A` proceeds to save the outdated code, the changes made in their tab become the current version, potentially overwriting `User B`'s changes.
+
+
+This collaborative editing behavior aligns with common practices in collaborative environments, offering users flexibility while minimizing the risk of data loss or conflicts during concurrent edits.
+
+## Code Editor
+
+### LSP
+
+Qodly Studio relies on the Language Server Protocol ([LSP technology](https://en.wikipedia.org/wiki/Language_Server_Protocol)) to offer advanced coding features like code completion and syntax highlighting.
+
+:::info
+Reloading is recommended in cases where a connection is not established. Without this connection, while you can still write and save your code, you will miss out on LSP-related features.
+:::
+
+
+### Type-ahead features
+
+Qodly Studio code editor includes helpful type-ahead and auto-completion features. You can easily incorporate these suggestions into your code using the following methods:
+
+- The suggestion list automatically appears as you start typing.
+- To insert the selected suggestion, simply press the `Tab` key.
+- At any point, you can manually trigger the suggestion list by pressing `Ctrl + Space bar`.
+
+
+### Show documentation
+
+When a QodlyScript command or function is entered in the code editor, you can get documentation on this command or function by hovering the cursor over the command or function name:
+
+- a tooltip appears, displaying the parameters of the command or function along with a short description;
+- you can also click on the **Show documentation** link within the tip, which opens the complete documentation for the command or function on [developer.qodly.com](https://developer.qodly.com/docs) in your browser.
+
+
+
+
+### Command Palette
+
+The Command Palette offers easy access to all available commands in the code editor, including any associated shortcuts. You can open it by right-clicking in the code editor window or pressing `F1`.
+
+
+
+The palette includes a filtering option to find specific commands quickly.
+
+
+
+### Warnings and errors
+
+Qodly Studio includes a Code Live Checker feature. The syntax, consistency, and structure of the entered code are automatically checked in order to prevent execution errors. For example, the Code Live Checker can detect that a right parenthesis is missing or that you used an unknown dataclass attribute.
+
+Qodly automatically checks the code syntax to see if it is correct. If you enter text or select a component that is not correct, Qodly underlines the incorrect expression. Two underline colors are used:
+
+- Yellow underlines are **warnings**
+
+Warnings are intended to draw your attention to statements that might lead to execution errors. They are not considered as coding errors.
+- Red underlines are **errors**
+
+Errors are anomalies that prevent the code from being executed correctly. It includes syntax errors, declaration errors, etc. They must be fixed, otherwise the code will not run correctly.
+
+Whatever the incorrect expression, you can move the mouse over the line to display a help tip providing the cause of the warning/error:
+
+
+
+The Code Live Checker is activated while you enter the code. When a line of a method, class or function is marked as having improper syntax, check and fix the entry. If the line becomes correct, Qodly removes the underline.
+
+The Code Live Checker checks for:
+
+- basic syntax errors (wrong operators, misspellings and the like)
+- the structure of statements (`if`, `end if` and so on)
+- matching enclosing characters in the code such as parentheses or brackets
+- the calls of attributes and functions according to your model (ORDA) and user class definitions. For example, the Code Live Checker generates an error when a call to a dataclass computed attribute is not compatible with the declared computed attribute type.
+
+The Code Live Checker cannot detect some errors that only occur during execution. Execution errors are caught by Qodly when the code is executed.
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/debugging.md b/versioned_docs/version-21-R3/4DQodlyPro/debugging.md
new file mode 100644
index 000000000..4fcbbbec6
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/debugging.md
@@ -0,0 +1,223 @@
+---
+id: debugging
+title: Debugging
+---
+import Column from '@site/src/components/Column'
+
+Errors are a common occurrence when writing code. It is unusual to write a substantial amount of code without encountering any errors. Fortunately, dealing with and resolving errors is a routine part of the development process.
+
+
+In the Qodly development environment, you have access to a range of debugging tools to help you tackle different types of errors effectively.
+
+
+## Starting a debug session
+
+To execute your code line-by-line and evaluate expressions, you must initiate a **debug session** on the server and **attach** it to your browser. Follow these steps:
+
+
+1. Click the Debug button located in Qodly Studio toolbar.
+
+2. If the debug session starts successfully, a green bullet will appear on the button label.
+
+3. Once you begin executing code within the debug session, the bullet will turn orange.
+
+
+:::info
+
+
+ You can only have one active debug session per instance. If another instance of the application has an active debug session (e.g., started from another browser), the debug button will display a warning message.
+
+
+
+
+
+:::
+
+In such cases, you must wait until the other debug session is closed before starting a new one.
+
+:::tip
+Verify that the method or function with the breakpoint is saved and not in [draft state](#breakpoint-status) for the breakpoint to take effect during debugging.
+:::
+
+## Stopping a debug session
+
+If you wish to stop a debug session, follow these steps:
+
+1. Click the **Debug** button in Qodly Studio toolbar while a debug session is active.
+
+2. A warning dialog box will prompt you to confirm whether you want to detach the debugger, effectively closing the debug session attached to your browser. You will have several options:
+
+
+
+
+
+
Keep in progress: Qodly will continue evaluating the code until the end of the current method or function, and then the debugger will be detached.
+
Stop: The debugger will be immediately detached.
+
Cancel: The debugger will not be detached.
+
+
+
+
+
+
+
+
+
+
+## Breakpoints
+
+Breakpoints allow you to pause code execution at specific points in your code. You can set breakpoints on any line of code where you want the execution to halt. Here's how to create a breakpoint:
+
+1. Click in the left margin of the code editor. This action will display a red bullet.
+
+2. When you launch the code, a yellow arrow will appear in the left margin to indicate where the execution paused and mark the next line to be executed.
+
+3. At this point, you can use the debugger panel at the bottom of the window to evaluate and debug your code.
+
+
+:::warning
+Should a function appear unexpectedly, even without any breakpoints in your code while the debugger is active, it implies the existence of an error within that specific code section.
+:::
+
+### Breakpoint Status
+
+Breakpoints can have different statuses depending on the context, which are represented by their appearance and tip:
+
+
+|Appearance|Status|Context|
+|---|---|---|
+| |Breakpoint|The breakpoint is validated in the debug session and will pause code execution as expected.|
+||Draft breakpoint|The method or function where the breakpoint is set has not been correctly saved. Please ensure you save your changes first for the breakpoint to be validated and take effect.|
+||Unverified breakpoint|The breakpoint is saved, but no debug session is currently active. It will not pause code execution until a debug session is started.|
+||Disabled breakpoint|The breakpoint has been manually disabled. It remains visible but will not interrupt code execution until re-enabled.|
+
+## Debugger Sidebar
+
+The **Debugger Sidebar** provides a centralized interface to monitor and manage all breakpoints across an application. It is designed to give developers full visibility into their active, disabled, or grouped breakpoints—regardless of which file or method they belong to.
+
+You can open the Debugger Sidebar from the left-hand panel in the code editor:
+
+
+
+
+
Open Qodly Studio.
+
In the code editor, look for the vertical tab on the left side.
+
Click the sidebar icon to open the Debugger Sidebar
+
+
+
+
+
+
+
+:::info
+You can interact with all breakpoints even if they’re in different files — no need to open each one manually. The Breakpoints Sidebar saves time and helps you stay focused when debugging large apps.
+:::
+
+### Sidebar Structure
+
+The Breakpoints Sidebar displays all breakpoints grouped by file path and method or class name. For each breakpoint, the following information and actions are available:
+
+
+
+
+
Breakpoint label: Indicates the method or class and line number where the breakpoint is defined.
+
Status checkbox: Marks whether the breakpoint is currently active or disabled.
+
Line number: Shown on the right to indicate the exact position within the code.
+
Action icons: Provide quick access to delete, or navigate to a breakpoint once you hover over a breakpoint.
+
+
+
+
+
+
+
+:::info
+For more information, please refer to the [Managing Breakpoints](#managing-breakpoints) section.
+:::
+
+
+### Variables Panel
+
+During a debug session, the debugger sidebar also includes a **Variables section**. This panel helps you inspect the state of your code at any given moment by displaying:
+
+- **Local Variables**: Displays all variables that are currently in scope within the method or class being executed. This includes any variables you've defined inside that function or block of code.
+
+- **Current Line Variable**: Highlights the specific variable being accessed or modified on the line of code currently being executed.
+
+- **Arguments**: Lists the arguments passed into the method, function, or class. These represent the input values the current code is working with, as provided by the calling context.
+
+This makes it easier to understand the current context, trace issues, and test assumptions while stepping through your code.
+
+
+## Managing Breakpoints
+
+### Breakpoint Activation
+
+Each breakpoint is associated with an activation checkbox:
+
+- When the checkbox is selected , the breakpoint is active and will interrupt code execution during a debug session.
+- When the checkbox is cleared , the breakpoint remains listed but is temporarily disabled.
+
+To manage breakpoints in bulk, a "Disable All" button is available at the top of the panel, allowing all breakpoints across the app to be disabled simultaneously without deletion.
+
+### Breakpoint Deletion
+
+Breakpoints can be removed individually or in groups:
+
+- The trash icon beside a specific breakpoint removes only that breakpoint.
+- The trash icon beside a method or class header removes all breakpoints defined within that method or class.
+
+- An overflow menu (⋮) provides additional bulk removal options:
+
+
+
+
Remove Breakpoints in the Current File: Clears all breakpoints from your active file.
+
Remove Breakpoints in Other Files: Removes all breakpoints from non-active files.
+
Remove Breakpoints in All Files: Eliminates all breakpoints across the entire project.
+
+
+
+
+
+
+
+### Breakpoint Navigation
+
+Each breakpoint entry includes an edit icon that enables direct navigation to the corresponding line in the code editor. This function supports fast inspection or modification of the code surrounding the breakpoint location.
+
+
+### Collapse/Expand Groups
+
+To improve readability when working with a large number of breakpoints, the sidebar includes a "Collapse All" button . This feature collapses all method or class sections, minimizing the visual footprint of the list and helping developers focus only on relevant groups.
+
+
+## Using Qodly debugger on 4D Server
+
+When using Qodly pages in a deployed 4D Server application (interpreted mode), you might encounter some cases where you need to debug your pages on the server, for example when a specific user configuration is required. In this case, you can attach the Qodly Studio debugger to the 4D Server and then, benefit from its features when executing your Qodly pages.
+
+Note that in this case, the Qodly Studio debugger will display all the code executed on the server, in accordance with the [attached debugger rule on 4D Server](https://developer.4d.com/docs/Debugging/debugging-remote#attached-debugger).
+
+To attach the Qodly Studio debugger to your running 4D Server application:
+
+1. Open Qodly Studio from 4D Server.
+
+:::note
+
+The project must be running in interpreted mode so that **Qodly Studio** menu item is available.
+
+:::
+
+2. In the Qodly Studio toolbar, click on the **Debug** button.
+
+
+If the debug session starts successfully, a green bullet appears on the button label  and you can use the Qodly Studio debugger.
+
+If the debugger is already attached to a another machine or another Qodly Studio page, an error is displayed. You have to detach it beforehand from the other location.
+
+To detach the Qodly Studio debugger from your running 4D Server application:
+
+1. Click the **Debug** button in the Qodly Studio toolbar while a debug session is active.
+A warning dialog box will prompt you to confirm whether you want to detach the debugger.
+2. Select **Keep in progress** to continue evaluating the code until the end of the current method or function before detaching the debugger, or **Stop** to detach the debugger immediately.
+
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/deploy.md b/versioned_docs/version-21-R3/4DQodlyPro/deploy.md
new file mode 100644
index 000000000..aef99dc35
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/deploy.md
@@ -0,0 +1,98 @@
+---
+id: deploy
+title: Deployment overview
+---
+
+
+## Enabling rendering
+
+Qodly Studio encapsulates Qodly pages, including layout, data connections, and event-driven logic, in a structured JSON file. This JSON file is processed on-the-fly by the **Qodly renderer** to serve a fully functional web page.
+
+:::info
+
+See [this page](../4DQodlyPro/rendering.md) for detailed information on how to render Qodly pages in Qodly.
+
+:::
+
+To enable the rendering of Qodly pages, the following options must be set.
+
+* The 4D project's **Settings** > **Web** > **Web Features** > [**Expose as REST server**](https://developer.4d.com/docs/19/REST/configuration#starting-the-rest-server) option must be activated.
+* The [4D web server](https://developer.4d.com/docs/WebServer/overview) must be running.
+
+:::note
+
+[Renderer buttons](../4DQodlyPro/rendering.md#page-rendering-options) are not available if the configuration options are not activated.
+
+:::
+
+## Scope of Qodly forms
+
+When rendering Qodly forms in the Qodly Studio, the renderer will connect to the 4D web server through HTTP or HTTPS, depending on the settings, following the same HTTP/HTTPS connection pattern as for the [4D WebAdmin web server](https://developer.4d.com/docs/Admin/webAdmin#accept-http-connections-on-localhost). See also [this paragraph](#about-license-usage-for-rendering) about URL schemes and license usage.
+
+
+Keep in mind that Qodly Studio runs through the 4D WebAdmin web server. When you use Qodly Studio as a developer, even when you preview a Qodly Page in the studio, you're using the 4D WebAdmin web server. This allows you to see dataclasses, functions and attributes that are not exposed as REST resources for example (they are greyed out).
+
+However, page rendering happens outside Qodly Studio, and is served by the standard 4D web server. In this situation, your web application cannot access assets that are not exposed as REST resources. See [Exposed vs non-exposed functions](https://developer.4d.com/docs/ORDA/ordaClasses#exposed-vs-non-exposed-functions) and [Exposing tables](https://developer.4d.com/docs/REST/configuration#exposing-tables) for more information on how to expose assets.
+
+
+
+
+## Accessing Qodly pages
+
+For deployment, the WebAdmin server is not necessary. End-user access to your web application made with Qodly Studio is based on the 4D REST protocol, and as such, it works as through a conventional 4D remote application.
+
+Your Qodly pages are available through the following url:
+
+```
+IP:port/$lib/renderer/?w=QodlyPageName
+```
+
+...where *IP:port* represents the address of the web server and *QodlyPageName* is the name of the Qodly page.
+
+For example:
+
+```
+https://www.myWebSite.com/$lib/renderer/?w=welcome
+```
+
+## Preview Qodly Application
+
+You can preview your Qodly application at any moment by selecting the **Preview Qodly Application...** command in the **Windows** menu (4D Server) or in the **Design** menu (4D single-user).
+
+This command launches the Qodly renderer on a local address in your default browser and displays the **start page** [defined in the Application settings](https://developer.qodly.com/docs/studio/settings#start-page) of Qodly Studio.
+
+
+
+
+## Using Qodly debugger on 4D Server
+
+When using Qodly pages in a deployed 4D Server application (interpreted mode), you might encounter some cases where you need to debug your pages on the server, for example when a specific user configuration is required. In this case, you can attach the [Qodly Studio debugger](https://developer.qodly.com/docs/studio/debugging) to the 4D Server and then, benefit from its features when executing your Qodly pages.
+
+Note that in this case, the Qodly Studio debugger will display all the code executed on the server, in accordance with the [attached debugger rule on 4D Server](https://developer.4d.com/docs/Debugging/debugging-remote#attached-debugger).
+
+To attach the Qodly Studio debugger to your running 4D Server application:
+
+1. [Open Qodly Studio](#opening-qodly-studio) from 4D Server.
+
+:::note
+
+The project must be running in interpreted mode so that **Qodly Studio** menu item is available.
+
+:::
+
+2. In the Qodly Studio toolbar, click on the **Debug** button.
+
+
+If the debug session starts successfully, a green bullet appears on the button label  and you can use the Qodly Studio debugger.
+
+If the debugger is already attached to a another machine or another Qodly Studio page, an error is displayed. You have to detach it beforehand from the other location.
+
+To detach the Qodly Studio debugger from your running 4D Server application:
+
+1. Click the **Debug** button in the Qodly Studio toolbar while a debug session is active.
+A warning dialog box will prompt you to confirm whether you want to detach the debugger.
+2. Select **Keep in progress** to continue evaluating the code until the end of the current method or function before detaching the debugger, or **Stop** to detach the debugger immediately.
+
+
+
+
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/force-login.md b/versioned_docs/version-21-R3/4DQodlyPro/force-login.md
new file mode 100644
index 000000000..9df5d8c6a
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/force-login.md
@@ -0,0 +1,96 @@
+---
+id: force-login
+title: Force Login
+---
+
+
+
+With Qodly Studio for 4D, the ["force login" mode](https://developer.4d.com/docs/REST/authUsers#force-login-mode) allows you to control the number of opened web sessions that require 4D Client licenses. You can also [logout](#logout) the user at any moment to decrement the number of retained licenses.
+
+## Configuration
+
+Make sure the ["force login" mode](https://developer.4d.com/docs/REST/authUsers#force-login-mode) is enabled for your 4D application in the [Roles and Privileges page](https://developer.qodly.com/docs/studio/roles/rolesPrivilegesOverview), using the **Force login** option:
+
+
+
+You can also set this option directly in the [**roles.json** file](https://developer.4d.com/docs/ORDA/privileges#rolesjson-file).
+
+You just need then to implemented the [`authentify()`](https://developer.4d.com/docs/REST/authUsers#function-authentify) function in the datastore class and call it from the Qodly page. A licence will be consumed only when the user is actually logged.
+
+
+:::note Compatibility
+
+When the legacy login mode ([deprecated as of 4D 20 R6](https://blog.4d.com/force-login-becomes-default-for-all-rest-auth)) is enabled, any REST request, including the rendering of an authentication Qodly page, creates a web session on the server and gets a 4D Client license, whatever the actual result of the authentication. For more information, refer to [this blog post](https://blog.4d.com/improved-4d-client-licenses-usage-with-qodly-studio-for-4d) that tells the full story.
+
+:::
+
+### Example
+
+In a simple Qodly page with login/password inputs, a "Submit" button calls the following `authentify()` function we have implemented in the DataStore class:
+
+
+
+ ```4d
+ exposed Function authentify($credentials : Object) : Text
+ var $salesPersons : cs.SalesPersonsSelection
+ var $sp : cs.SalesPersonsEntity
+
+ $salesPersons:=ds.SalesPersons.query("identifier = :1"; $credentials.identifier)
+ $sp:=$salesPersons.first()
+
+ If ($sp#Null)
+ If (Verify password hash($credentials.password; $sp.password))
+ Session.clearPrivileges()
+ Session.setPrivileges("") //guest session
+
+ return "Authentication successful"
+ Else
+ return "Wrong password"
+ End if
+ Else
+ return "Wrong user"
+ End if
+ ```
+
+
+ ```qs
+ exposed function authentify(credentials : Object) : string
+ var salesPersons : cs.SalesPersonsSelection
+ var sp : cs.SalesPersonsEntity
+
+ salesPersons=ds.SalesPersons.query("identifier = :1", credentials.identifier)
+ sp = salesPersons.first()
+
+ if (sp!=Null)
+ if (verifyPasswordHash(credentials.password, sp.password))
+ session.clearPrivileges()
+ session.setPrivileges("") //guest session
+
+ return "Authentication successful"
+ else
+ return "Wrong password"
+ end
+ else
+ return "Wrong user"
+ end
+ ```
+
+
+
+This call is accepted and as long as the authentication is not successful, `Session.setPrivileges()` is not called, thus no license is consumed. Once `Session.setPrivileges()` is called, a 4D client licence is used and any REST request is then accepted.
+
+
+
+## Logout
+
+When the ["force login" mode is enabled](#force-login), Qodly Studio for 4D allows you to implement a logout feature in your application.
+
+To logout the user, you just need to execute the **Logout** standard action from the Qodly page. In Qodly Studio, you can associate this standard action to a button for example:
+
+
+
+Triggering the logout action from a web user session has the following effects:
+
+- the current web user session loses its privileges, only [descriptive REST requests](https://developer.4d.com/docs/REST/authUsers#descriptive-rest-requests) are allowed,
+- the associated 4D license is released,
+- the `Session.storage` is kept until the web session inactivity timeout is reached (at least one hour). During this period after a logout, if the user logs in again, the same session is used and the `Session.storage` shared object is available with its current contents.
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/gettingStarted.md b/versioned_docs/version-21-R3/4DQodlyPro/gettingStarted.md
new file mode 100644
index 000000000..3a245b945
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/gettingStarted.md
@@ -0,0 +1,225 @@
+---
+id: gettingStarted
+title: Welcome
+---
+
+**Qodly Studio** is an interface builder for web applications. It provides developers with a graphical page editor to design applications running in web browsers or smartphones. It supports natively the [ORDA objects](https://developer.4d.com/docs/ORDA/overview).
+
+You use Qodly Studio directly from your [**4D environment**](https://developer.4d.com/docs) to build modern and sophisticated interfaces that you can easily integrate to and [deploy](../4DQodlyPro/deploy.md) with your existing 4D projects.
+
+Qodly Studio proposes a full-featured web UI, allowing you to:
+
+- create Qodly pages by placing components on a canvas
+- map components to Qodly Sources
+- trigger 4D code by configuring events
+- and much more.
+
+
+## Configuration
+
+### Requirements
+
+#### Browser
+
+Qodly Studio supports the following web browsers:
+
+- Chrome
+- Edge
+- FireFox
+
+The recommended resolution is 1920x1080.
+
+
+#### Project
+
+Qodly Studio only works with 4D [projects](https://developer.4d.com/docs/Project/overview) (binary databases are not supported).
+
+- Web sessions (*aka* Scalable sessions) must [be enabled](https://developer.4d.com/docs/WebServer/sessions#enabling-web-sessions).
+- The ["forceLogin" mode](https://developer.4d.com/docs/REST/authUsers#force-login-mode) must be [activated](https://developer.4d.com/docs/settings/web#activate-rest-authentication-through-dsauthentify-function) to handle web sessions.
+- The 4D code called by Qodly forms must be [thread-safe](https://developer.4d.com/docs/WebServer/preemptiveWeb).
+
+
+#### Web Server & WebAdmin Server
+
+Qodly Studio is served by the [WebAdmin web server](https://developer.4d.com/docs/Admin/webAdmin) and access data from 4D projects exposed as [REST servers](https://developer.4d.com/docs/REST/configuration) and handled by the [4D web server](https://developer.4d.com/docs/WebServer/overview). **All these servers must be launched**. If one of these levels are not enabled, access to Qodly Studio is denied (a 403 page is returned).
+
+
+
+You need to [**enable access to Qodly Studio** on the WebAdmin web server](https://developer.4d.com/docs/Admin/webAdmin#enable-access-to-qodly-studio). This setting applies to the 4D application (4D or 4D Server) on the host machine. All projects opened with that 4D application take this setting into account.
+
+In addition, you need to explicitly designate every project that can be accessed. The **Enable access to Qodly Studio** option must be enabled on the [Web Features page of the 4D application's Settings](https://developer.4d.com/docs/settings/web#enable-access-to-qodly-studio). Keep in mind that [user settings](https://developer.4d.com/docs/settings/overview) can be defined at several levels, and that priorities apply.
+
+
+### One-click configuration
+
+All the [configuration requirements](#requirements) can be automatically set for you in one click when you select the **Qodly Studio...** menu command from the **Design** menu in 4D single-user for the first time. Any requirements that are not met are listed in a dialog box and will be automatically adjusted if you click the **Enable settings** button.
+
+
+
+:::note
+
+- 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.
+
+:::
+
+
+### Activating authentication
+
+Authentication on the WebAdmin web server is granted using an access key. For more details, see [Access key](https://developer.4d.com/docs/Admin/webAdmin#access-key).
+
+In case of [access through 4D](#from-the-4d-application), an access key is transparently provided.
+
+
+### Development and deployment
+
+In accordance with the management of 4D projects, only the following usages are supported:
+
+- development with Qodly Studio must be done using **4D** (single-user).
+- deployment of 4D applications powered with Qodly pages must be done using **4D Server**.
+
+:::warning
+
+You can open Qodly Studio, [debug](#using-qodly-debugger-on-4d-server) and edit Qodly pages directly on a 4D Server machine when a project is running in interpreted mode. This feature is only provided for testing and debugging purposes, for example to evaluate the application flow with actual data, or in multi-user environment. It must NOT be considered as a regular way to develop applications since it does not provide any control over concurrent accesses.
+
+:::
+
+
+
+## Opening Qodly Studio
+
+The Qodly Studio page is available when [all requirements](#requirements) are met.
+
+There are two ways to access Qodly Studio:
+
+- by selecting the **Qodly Studio...** menu command from your 4D application,
+- by entering directly an url in a browser.
+
+### From a 4D application
+
+Select the **Qodly Studio...** menu command from the **Design** menu (4D single-user) or the **Window** menu (4D Server).
+
+Depending on the WebAdmin web server configuration, your default browser opens at `IPaddress:HTTPPort/studio` or `IPaddress:HTTPSPort/studio`.
+
+:::note
+
+When opening Qodly Studio from your 4D single-user application for the first time, you can benefit from the [one-click configuration dialog box](#one-click-configuration) to automatically configure all necessary settings.
+
+:::
+
+
+
+### On a browser
+
+When opening Qodly Studio on a browser, you need to make sure all necessary [requirements](#requirements) have been configured.
+
+with the WebAdmin web server running (launched from 4D or 4D Server), enter the following address:
+
+```
+IPaddress:HTTPPort/studio
+```
+or:
+
+```
+IPaddress:HTTPSPort/studio
+```
+
+For example, after launching a local web server on port 7080, type this address in your browser:
+
+`localhost:7080/studio`
+
+You will then be prompted to enter the [access key](https://developer.4d.com/docs/Admin/webAdmin#access-key) to access Qodly Studio.
+
+
+
+## Developing with Qodly Studio
+
+### Language
+
+The following commands and classes are dedicated to the server-side management of Qodly pages:
+
+- [`Web Form`](https://developer.4d.com/docs/API/commands/webForm) command: returns the Qodly page as an object.
+- [`Web Event`](https://developer.4d.com/docs/API/commands/webEvent) command: returns events triggered within Qodly page components.
+- [`WebForm`](https://developer.4d.com/docs/API/WebFormClass) class: functions and properties to manage the rendered Qodly page.
+- [`WebFormItem`](https://developer.4d.com/docs/API/WebFormItemClass) class: functions and properties to manage Qodly page components.
+
+
+### Using project methods
+
+We recommend using class functions over project methods. Only class functions can be called from [components](../4DQodlyPro/pageLoaders/components/componentsBasics.md). However, you can still use your project methods in Qodly Studio in two ways:
+
+- You can call your methods from class functions.
+- You can directly [execute your methods](../4DQodlyPro/coding.md#method-and-function-management) from the Qodly Explorer.
+
+
+### Offline use
+
+You can develop with Qodly Studio while your computer is not connected to the internet. In this case however, the following features are not available:
+
+- [Templates](../4DQodlyPro/pageLoaders/templates.md): the Template library is empty
+- UI tips: they are not displayed when you click on  icons.
+
+
+
+
+
+## Enabling rendering
+
+Qodly Studio encapsulates Qodly pages, including layout, data connections, and event-driven logic, in a structured JSON file. This JSON file is processed on-the-fly by the **Qodly renderer** to serve a fully functional web page.
+
+:::info
+
+See [this section](../4DQodlyPro/rendering.md) for detailed information on how to render Qodly pages in Qodly.
+
+:::
+
+To enable the rendering of Qodly pages, the following options must be set.
+
+* The 4D project's **Settings** > **Web** > **Web Features** > [**Expose as REST server**](https://developer.4d.com/docs/19/REST/configuration#starting-the-rest-server) option must be activated.
+* The [4D web server](https://developer.4d.com/docs/WebServer/overview) must be running.
+
+:::note
+
+[Renderer buttons](../4DQodlyPro/rendering.md#page-rendering-options) are not available if the configuration options are not activated.
+
+:::
+
+### Scope of Qodly forms
+
+When rendering Qodly forms in the Qodly Studio, the renderer will connect to the 4D web server through HTTP or HTTPS, depending on the settings, following the same HTTP/HTTPS connection pattern as for the [4D WebAdmin web server](https://developer.4d.com/docs/Admin/webAdmin#accept-http-connections-on-localhost). See also [this paragraph](#about-license-usage-for-rendering) about URL schemes and license usage.
+
+
+Keep in mind that Qodly Studio runs through the 4D WebAdmin web server. When you use Qodly Studio as a developer, even when you preview a Qodly Page in the studio, you're using the 4D WebAdmin web server. This allows you to see dataclasses, functions and attributes that are not exposed as REST resources for example (they are greyed out).
+
+However, page rendering happens outside Qodly Studio, and is served by the standard 4D web server. In this situation, your web application cannot access assets that are not exposed as REST resources. See [Exposed vs non-exposed functions](https://developer.4d.com/docs/ORDA/ordaClasses#exposed-vs-non-exposed-functions) and [Exposing tables](https://developer.4d.com/docs/REST/configuration#exposing-tables) for more information on how to expose assets.
+
+
+
+
+### Accessing Qodly pages
+
+For deployment, the WebAdmin server is not necessary. End-user access to your web application made with Qodly Studio is based on the 4D REST protocol, and as such, it works as through a conventional 4D remote application.
+
+Your Qodly pages are available through the following url:
+
+```
+IP:port/$lib/renderer/?w=QodlyPageName
+```
+
+...where *IP:port* represents the address of the web server and *QodlyPageName* is the name of the Qodly page.
+
+For example:
+
+```
+https://www.myWebSite.com/$lib/renderer/?w=welcome
+```
+
+### Preview Qodly Application
+
+You can preview your Qodly application at any moment by selecting the **Preview Qodly Application...** command in the **Windows** menu (4D Server) or in the **Design** menu (4D single-user).
+
+This command launches the Qodly renderer on a local address in your default browser and displays the **start page** [defined in the Application settings](https://developer.qodly.com/docs/studio/settings#start-page) of Qodly Studio.
+
+
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/httpHandlers.md b/versioned_docs/version-21-R3/4DQodlyPro/httpHandlers.md
new file mode 100644
index 000000000..eacb21e76
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/httpHandlers.md
@@ -0,0 +1,473 @@
+---
+id: httpHandlers
+title: HTTP Handlers
+---
+
+import Column from '@site/src/components/Column'
+
+## Overview
+
+HTTP Request Handlers let you define how your application responds to HTTP requests by:
+
+- Listening for specific URL patterns (e.g., /api/users).
+
+- Handling different HTTP methods (e.g., GET, POST, PUT).
+
+- Linking these requests to specific logic in your application.
+
+
+## Why Use HTTP Request Handlers?
+
+HTTP Request Handlers are ideal when:
+
+- **Server-Side Logic is Required**: Use HTTP Request Handlers to process server-side operations, such as interacting with databases, performing complex calculations, or handling business rules.
+
+ :::info Example
+ Processing user authentication or generating reports dynamically.
+ :::
+
+- **API-Like Behavior is Needed**: HTTP Request Handlers allow you to create RESTful endpoints that external systems or frontend applications can call.
+
+ :::info Example
+ A mobile app might send a POST request to /api/login to authenticate a user.
+ :::
+
+- **Scalable Interactions Across Multiple Clients**: Unlike UI events (which are specific to the client session), HTTP Request Handlers work server-side and can handle multiple client requests simultaneously.
+
+ :::info Example
+ Processing orders submitted from multiple web users simultaneously.
+ :::
+
+- **Custom URL Patterns and Verbs**: Handlers let you define flexible URL patterns and handle different HTTP methods like GET or POST for the same URL.
+
+ :::info Example
+ Using GET /products for listing products and POST /products for adding a new product.
+ :::
+
+
+:::tip When NOT to use HTTP Request Handlers:
+
+- **For purely UI-based interactions**, such as button clicks or navigating between pages in your app. These should be handled by front-end navigation events or on-click handlers.
+
+- **For real-time interactions**, like live updates to a page. Consider using WebSockets or a similar real-time communication mechanism instead.
+:::
+
+
+
+## Accessing HTTP Handlers
+
+HTTP Handlers can be accessed and managed in Qodly Studio via the HTTP Handlers menu in the Explorer:
+
+ 1. Locate the HTTP Handlers menu in the Explorer.
+
+ 2. If the menu item is greyed out , click it to create the HTTPHandlers.json file.
+
+ 3. Once created, the file will open for editing .
+
+
+
+ By default, the HTTP Handlers UI is displayed instead of the code editor, allowing handlers to be managed via an intuitive graphical interface.
+
+
+
+
+
+
+
+:::tip Switching Between UI and Code Edito
+
+Handlers can be modified using either the UI or the JSON editor.
+
+- To switch to the code editor view, clicking the code editor icon is required.
+
+- To return to the HTTP Handler UI, clicking the UI icon is necessary.
+
+- Changes made in one view are automatically synchronized with the other.
+
+:::
+
+
+If no handlers are configured, a message appears stating: `There are no HTTP Handlers configured yet. Click on the ➕ to add a new one.`.
+
+
+## Configuring HTTP Handlers
+
+### Add HTTP Handlers
+
+HTTP Handlers can be added through both the UI and the code editor.
+
+#### Using the HTTP Handler UI:
+
+1. Clicking the button opens a form for inputting handler details.
+
+2. The form requires specifying the following details:
+
+ - Class: Selecting an existing class from the dropdown list or manually entering a class name.
+ - Method: Choosing an available method from the selected class or entering a method manually.
+ - Pattern: Defining the URL pattern.
+ - As Regex: Enabling this if using a regular expression for URL matching.
+ - Verbs: Selecting supported HTTP methods (GET, POST, PUT, DELETE).
+
+
+
+3. Clicking "Confirm Changes" applies the configuration.
+
+:::danger Handling Class and Method Errors
+
+When manually entering a class name or method that does not exist, the system provides visual feedback to prevent misconfiguration.
+
+
+
+
+
If the specified class or method does not exist, a Nothing found message appears, and the input field turns red.
+
Unrecognized entries are automatically removed when pressing Enter.
+
+
+
+
+
+
+
+:::
+
+:::info Adding an Unsupported HTTP verb
+
+Only the four HTTP methods (GET, POST, PUT, DELETE) are supported. If an invalid method is typed and Enter is pressed, it will not be added.
+
+In contrast, supported methods (GET, POST, PUT, DELETE) will have a dark grey background to indicate they are valid.
+
+:::
+
+#### Using the Code Editor:
+
+Handlers can also be configured manually in the code editor, like:
+
+```json
+[
+ {
+ "class": "CustomerHandler",
+ "method": "getCustomer",
+ "pattern": "customers",
+ "verbs": "GET"
+ },
+ {
+ "class": "AuthHandler",
+ "method": "login",
+ "regexPattern": "/auth/login",
+ "verbs": "POST"
+ }
+]
+```
+
+
+:::danger Error Handling When Switching Views
+
+
+
+ If a class or method that does not exist is added directly through the code editor, there is no immediate validation or error handling. However, when switching to the UI view, the system detects invalid entries and highlights them in red. An error message appears below the affected fields, stating: `The singleton "Class or Method name" doesn't exist.`
+
+
+
+
+
+:::
+
+:::info Adding an Unsupported HTTP verb
+
+The code editor does not enforce immediate validation when an invalid HTTP method is added. If an unsupported HTTP method is entered in the JSON file, it will be saved without an error. However, when switching to the UI view the invalid method will be highlighted with a dark red background , indicating that it is not a valid option.
+
+:::
+
+### Edit HTTP Handlers
+
+Editing allows modifications to the class, method, URL pattern, or HTTP methods:
+
+- Use the UI to edit a handler and adjust its settings.
+
+- Or, edit the JSON file directly for manual changes from the code editor.
+
+### Delete HTTP Handlers
+
+Removing unnecessary handlers keeps request processing efficient:
+
+- Click the trash icon in the UI to delete a handler, then confirm the action.
+
+- Alternatively, delete the handler entry from the code editor.
+
+
+### Duplicate Handlers
+
+Duplicating handlers allows for quick replication:
+
+- Click the duplicate icon in the UI.
+
+- Copy and paste JSON objects for manual duplication.
+
+
+### Reorder Handlers
+
+Execution order can be adjusted:
+
+- Drag and drop handlers in the UI .
+
+- Manually rearrange JSON objects in the file.
+
+
+## Matching Rules
+
+Handlers can define URL patterns in two ways:
+
+- **Prefix (pattern)**: Matches any URL that starts with the specified prefix.
+
+ :::info Example
+ A handler with "pattern": `products` matches /products, /products/list, and /products/123.
+ :::
+
+- **Regular Expression (regexPattern)**: Matches URLs that satisfy the specified regular expression.
+
+ :::info Example
+ A handler with "regexPattern": `/products/[0-9]+` matches /products/123 and /products/456, but not /products/list.
+ :::
+
+
+:::tip Matching Scenarios
+
+Given the following configuration:
+
+```json
+[
+ {
+ "class": "OrderHandler",
+ "method": "getOrder",
+ "regexPattern": "/orders/[0-9]+",
+ "verbs": "GET"
+ },
+ {
+ "class": "OrderHandler",
+ "method": "listOrders",
+ "pattern": "orders",
+ "verbs": "GET"
+ }
+]
+```
+
+- `GET /orders/123`: Matches the first handler (getOrder) because `/orders/123` satisfies the regular expression `/orders/[0-9]+`.
+
+- `GET /orders`: Matches the second handler (listOrders) because `/orders` is a prefix of the URL.
+
+- `POST /orders/123`: Does not match any handler because neither handler supports the POST method.
+
+:::
+
+
+## Order of Execution
+
+When an HTTP request is received, the system evaluates each handler in the order they appear in the HTTPHandlers.json file or the UI. The execution flow follows these steps:
+
+- The URL of the request is matched against the pattern or regexPattern of each handler.
+
+- The HTTP method (verb) of the request is checked against the verbs property of the handler.
+
+- Only the first matching handler is executed, even if subsequent handlers also match the request.
+
+:::tip Example of First Match Execution
+
+Given the following configuration:
+
+
+
+
+
+ A request to GET `/products/123` will match both handlers:
+ - The first handler matches because the URL `/products/123` satisfies the regular expression `/products/[0-9]+`.
+ - The second handler matches because `/products` is a prefix of the URL.
+
+
+ ```json
+ [
+ {
+ "class": "ProductHandler",
+ "method": "getProductDetails",
+ "verbs": "GET",
+ "id": "2jSeKR6tDs4KTKXrH3vVzR",
+ "regexPattern": "/products/[0-9]+"
+ },
+ {
+ "class": "ProductHandler",
+ "method": "listProducts",
+ "verbs": "GET",
+ "id": "uJScfkSR6rkhoJSpfEiG6U",
+ "pattern": "products"
+ }
+ ]
+ ```
+
+
+
+
+
+
+
+However, only the first handler `getProductDetails` is executed, as it appears first in the configuration.
+
+:::
+
+
+## Request Handler Code
+
+### Function Configuration
+
+The HTTP Request handler code must be implemented in a function of a [**Shared**](https://developer.4d.com/docs/Concepts/classes#singleton-classes) [**singleton class**](https://developer.4d.com/docs/Concepts/classes#singleton-classes).
+
+If the singleton is missing or not shared, an error `Cannot find singleton` is returned by the server. If the class or the function defined as handler is not found, an error `Cannot find singleton function` is returned by the server.
+
+Request handler functions are not necessarily shared, unless some request handler properties are updated by the functions. In this case, you need to declare its functions with the [`shared` keyword](https://developer.4d.com/docs/Concepts/classes#shared-functions).
+
+:::note
+
+It is **not recommended** to expose request handler functions to external REST calls using [`exposed`](https://developer.4d.com/docs/API/guides/data-model#exposed-vs-non-exposed-functions) or [`onHttpGet`](https://developer.4d.com/docs/API/guides/data-model#onhttpget-keyword) keywords.
+
+:::
+
+### Handling Errors
+
+If no handler matches a request, the system automatically returns a 404 error. This behavior ensures that unexpected or unsupported requests do not disrupt the application.
+
+To handle unmatched requests explicitly, you can define a fallback handler. Fallback handlers can be used to return custom error messages, redirect requests, or log unexpected behavior.
+
+```json
+{
+ "class": "ErrorHandler",
+ "method": "handleNotFound",
+ "regexPattern": "/.+",
+ "verbs": "*"
+}
+```
+
+This handler catches all requests that are not matched by earlier handlers. It can be used to:
+
+- Return a custom 404 page.
+
+- Log details about unmatched requests.
+
+- Redirect users to a default page.
+
+### Input: 4D.IncomingMessage Class Instance
+
+When a request is intercepted by the handler, it is received on the server as an instance of the [4D.IncomingMessage class](https://developer.4d.com/docs/API/IncomingMessageClass).
+
+This object provides all necessary request information, including the request URL, verb, headers, URL parameters, and request body. The request handler can use this information to trigger the appropriate business logic.
+
+### Output: 4D.OutgoingMessage Class Instance
+
+The request handler can return an object instance of the [4D.OutGoingMessage class](https://developer.4d.com/docs/API/OutgoingMessageClass), which represents web content ready for a browser to handle, such as a file content or a structured response.
+
+
+
+### Example
+
+The [4D.IncomingMessage class](https://developer.4d.com/docs/API/IncomingMessageClass) provides functions to retrieve [headers](https://developer.4d.com/docs/API/IncomingMessageClass#headers) and the [body](https://developer.4d.com/docs/API/IncomingMessageClass#gettext) of the request.
+
+Below is an example of an HTTP handler that processes a file upload.
+
+#### HTTP Request Handler Configuration:
+```json
+[
+ {
+ "class": "UploadFile",
+ "method": "uploadFile",
+ "regexPattern": "/putFile",
+ "verbs": "POST"
+ }
+]
+```
+
+The request URL: `/putFile?fileName=testFile`
+
+ - The binary content of the file is sent in the request body.
+
+ - The POST verb is used.
+
+ - The filename is included as a query parameter (*fileName*).
+
+ - The filename is extracted using the [`urlQuery`](https://developer.4d.com/docs/API/IncomingMessageClass#urlquery) object.
+
+
+#### Implementation of the UploadFile Class:
+
+
+
+ ```4d
+ //UploadFile class
+
+ shared singleton constructor()
+
+ Function uploadFile($request : 4D.IncomingMessage) : 4D.OutgoingMessage
+ var $response := 4D.OutgoingMessage.new()
+ var $body := "Not supported file"
+ var $fileName; fileType : Text
+ var $file : 4D.File
+ var $picture : Picture
+ var $created : Boolean
+
+ $fileName := $request.urlQuery.fileName
+ $fileType := $request.getHeader("Content-Type")
+
+ Case of
+ : ($fileType = "application/pdf")
+ $file := File("/PACKAGE/Files/"+fileName+".pdf")
+ $created := $file.create()
+ $file.setContent($request.getBlob())
+ $body := "Upload OK - File size: "+string($file.size)
+
+ : ($fileType = "image/jpeg")
+ $file := File("/PACKAGE/Files/"+fileName+".jpg")
+ $picture := $request.getPicture()
+ $body := "Upload OK - Image size: "+string($file.size)
+ End case
+
+ $response.setBody($body)
+ $response.setHeader("Content-Type"; "text/plain")
+
+ return $response
+ ```
+
+
+ ```qs
+ //UploadFile class
+
+ shared singleton constructor()
+
+ function uploadFile(request : 4D.IncomingMessage) : 4D.OutgoingMessage
+ var response = 4D.OutgoingMessage.new()
+ var body = "Not supported file"
+ var fileName, fileType : string
+ var file : 4D.File
+ var picture : picture
+ var created : boolean
+
+ fileName = request.urlQuery.fileName
+ fileType = request.getHeader("Content-Type")
+
+ switch
+ : (fileType == "application/pdf")
+ file = file("/PACKAGE/Files/"+fileName+".pdf")
+ created = file.create()
+ file.setContent(request.getBlob())
+ body = "Upload OK - File size: "+string(file.size)
+
+ : (fileType == "image/jpeg")
+ file = file("/PACKAGE/Files/"+fileName+".jpg")
+ picture = request.getPicture()
+ body = "Upload OK - Image size: "+string(file.size)
+
+ end
+
+ response.setBody(body)
+ response.setHeader("Content-Type", "text/plain")
+
+ return response
+ ```
+
+
+
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/+New.png b/versioned_docs/version-21-R3/4DQodlyPro/img/+New.png
new file mode 100644
index 000000000..0ba1d1694
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/+New.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/HTTPHandlersCreated.png b/versioned_docs/version-21-R3/4DQodlyPro/img/HTTPHandlersCreated.png
new file mode 100644
index 000000000..7f3d98c3d
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/HTTPHandlersCreated.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/HTTPHandlersGreyed.png b/versioned_docs/version-21-R3/4DQodlyPro/img/HTTPHandlersGreyed.png
new file mode 100644
index 000000000..ac729906a
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/HTTPHandlersGreyed.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/HTTPHandlersOrderExecution.png b/versioned_docs/version-21-R3/4DQodlyPro/img/HTTPHandlersOrderExecution.png
new file mode 100644
index 000000000..8b478833b
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/HTTPHandlersOrderExecution.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/HTTPHandlersUIInterface.png b/versioned_docs/version-21-R3/4DQodlyPro/img/HTTPHandlersUIInterface.png
new file mode 100644
index 000000000..8ac97123c
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/HTTPHandlersUIInterface.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/QodlyEvents1.png b/versioned_docs/version-21-R3/4DQodlyPro/img/QodlyEvents1.png
new file mode 100644
index 000000000..f2eb72dd8
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/QodlyEvents1.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/UnrecognizedHTTPHandlers.png b/versioned_docs/version-21-R3/4DQodlyPro/img/UnrecognizedHTTPHandlers.png
new file mode 100644
index 000000000..e863a1a24
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/UnrecognizedHTTPHandlers.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/UnrecognizedHTTPHandlers2.png b/versioned_docs/version-21-R3/4DQodlyPro/img/UnrecognizedHTTPHandlers2.png
new file mode 100644
index 000000000..cc7a4ed6d
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/UnrecognizedHTTPHandlers2.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/UnrecognizedHTTPHandlers3.png b/versioned_docs/version-21-R3/4DQodlyPro/img/UnrecognizedHTTPHandlers3.png
new file mode 100644
index 000000000..fef94c60f
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/UnrecognizedHTTPHandlers3.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/addHandlersButton.png b/versioned_docs/version-21-R3/4DQodlyPro/img/addHandlersButton.png
new file mode 100644
index 000000000..abbde42b4
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/addHandlersButton.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/addHandlersForm.png b/versioned_docs/version-21-R3/4DQodlyPro/img/addHandlersForm.png
new file mode 100644
index 000000000..7c0ffbaa1
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/addHandlersForm.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/addLocalLocalization.png b/versioned_docs/version-21-R3/4DQodlyPro/img/addLocalLocalization.png
new file mode 100644
index 000000000..054455744
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/addLocalLocalization.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/addLocalLocalization2.png b/versioned_docs/version-21-R3/4DQodlyPro/img/addLocalLocalization2.png
new file mode 100644
index 000000000..25e2a038b
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/addLocalLocalization2.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/availableLocales.png b/versioned_docs/version-21-R3/4DQodlyPro/img/availableLocales.png
new file mode 100644
index 000000000..320f976e3
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/availableLocales.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/codeEditorView.png b/versioned_docs/version-21-R3/4DQodlyPro/img/codeEditorView.png
new file mode 100644
index 000000000..d2fb1ec11
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/codeEditorView.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/codingCollaborative_reload.png b/versioned_docs/version-21-R3/4DQodlyPro/img/codingCollaborative_reload.png
new file mode 100644
index 000000000..e354c957b
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/codingCollaborative_reload.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/codingCollaborative_saveAll.png b/versioned_docs/version-21-R3/4DQodlyPro/img/codingCollaborative_saveAll.png
new file mode 100644
index 000000000..2b04e5083
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/codingCollaborative_saveAll.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/coding_Creating.png b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_Creating.png
new file mode 100644
index 000000000..af13c2958
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_Creating.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/coding_delete.png b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_delete.png
new file mode 100644
index 000000000..c8dd35292
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_delete.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/coding_delete2.png b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_delete2.png
new file mode 100644
index 000000000..768bebb03
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_delete2.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/coding_duplicate.png b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_duplicate.png
new file mode 100644
index 000000000..8c78c9bb1
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_duplicate.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/coding_execute.png b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_execute.png
new file mode 100644
index 000000000..ab0571c1a
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_execute.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/coding_execute2.png b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_execute2.png
new file mode 100644
index 000000000..f5c681091
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_execute2.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/coding_namingMethod.png b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_namingMethod.png
new file mode 100644
index 000000000..a452ef7db
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_namingMethod.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/coding_palette.png b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_palette.png
new file mode 100644
index 000000000..68d4947cd
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_palette.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/coding_palette2.png b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_palette2.png
new file mode 100644
index 000000000..b3a899d14
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_palette2.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/coding_reload.png b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_reload.png
new file mode 100644
index 000000000..f8965cee5
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_reload.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/coding_rename.png b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_rename.png
new file mode 100644
index 000000000..bc9e99d35
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_rename.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/coding_save.png b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_save.png
new file mode 100644
index 000000000..af1cd2c88
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_save.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/coding_tabManagement.png b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_tabManagement.png
new file mode 100644
index 000000000..fdba26ee9
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/coding_tabManagement.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/confirmAddHandler.png b/versioned_docs/version-21-R3/4DQodlyPro/img/confirmAddHandler.png
new file mode 100644
index 000000000..a4914c021
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/confirmAddHandler.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/createFromHomePage.png b/versioned_docs/version-21-R3/4DQodlyPro/img/createFromHomePage.png
new file mode 100644
index 000000000..8fc5cde1b
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/createFromHomePage.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/debug1.png b/versioned_docs/version-21-R3/4DQodlyPro/img/debug1.png
new file mode 100644
index 000000000..8ca151119
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/debug1.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/debug10.png b/versioned_docs/version-21-R3/4DQodlyPro/img/debug10.png
new file mode 100644
index 000000000..b0921d48c
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/debug10.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/debug11.png b/versioned_docs/version-21-R3/4DQodlyPro/img/debug11.png
new file mode 100644
index 000000000..fb7400354
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/debug11.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/debug12.png b/versioned_docs/version-21-R3/4DQodlyPro/img/debug12.png
new file mode 100644
index 000000000..4ce0eddde
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/debug12.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/debug2.png b/versioned_docs/version-21-R3/4DQodlyPro/img/debug2.png
new file mode 100644
index 000000000..783ff6426
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/debug2.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/debug3.png b/versioned_docs/version-21-R3/4DQodlyPro/img/debug3.png
new file mode 100644
index 000000000..fe8429217
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/debug3.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/debug4.png b/versioned_docs/version-21-R3/4DQodlyPro/img/debug4.png
new file mode 100644
index 000000000..79e500b73
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/debug4.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/debug5.png b/versioned_docs/version-21-R3/4DQodlyPro/img/debug5.png
new file mode 100644
index 000000000..20643a1fa
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/debug5.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/debug6.png b/versioned_docs/version-21-R3/4DQodlyPro/img/debug6.png
new file mode 100644
index 000000000..fada1f555
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/debug6.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/debug7.png b/versioned_docs/version-21-R3/4DQodlyPro/img/debug7.png
new file mode 100644
index 000000000..7e64e0ed9
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/debug7.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/debug8.png b/versioned_docs/version-21-R3/4DQodlyPro/img/debug8.png
new file mode 100644
index 000000000..025542b4b
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/debug8.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/debug9.png b/versioned_docs/version-21-R3/4DQodlyPro/img/debug9.png
new file mode 100644
index 000000000..913d1c955
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/debug9.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/delete.png b/versioned_docs/version-21-R3/4DQodlyPro/img/delete.png
new file mode 100644
index 000000000..c1eefc795
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/delete.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/deleteKey.png b/versioned_docs/version-21-R3/4DQodlyPro/img/deleteKey.png
new file mode 100644
index 000000000..f12f8fd9e
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/deleteKey.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/deleteLocaleButton.png b/versioned_docs/version-21-R3/4DQodlyPro/img/deleteLocaleButton.png
new file mode 100644
index 000000000..87edfd039
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/deleteLocaleButton.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/dragDrop.png b/versioned_docs/version-21-R3/4DQodlyPro/img/dragDrop.png
new file mode 100644
index 000000000..4ad4023bd
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/dragDrop.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/duplicate.png b/versioned_docs/version-21-R3/4DQodlyPro/img/duplicate.png
new file mode 100644
index 000000000..4e9b83e73
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/duplicate.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/editHandler.png b/versioned_docs/version-21-R3/4DQodlyPro/img/editHandler.png
new file mode 100644
index 000000000..5661affe4
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/editHandler.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/editKey.png b/versioned_docs/version-21-R3/4DQodlyPro/img/editKey.png
new file mode 100644
index 000000000..b040d0100
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/editKey.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/editLocaleButton.png b/versioned_docs/version-21-R3/4DQodlyPro/img/editLocaleButton.png
new file mode 100644
index 000000000..eea70e187
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/editLocaleButton.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/enable-settings.png b/versioned_docs/version-21-R3/4DQodlyPro/img/enable-settings.png
new file mode 100644
index 000000000..e5aea5bee
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/enable-settings.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/error-tip.png b/versioned_docs/version-21-R3/4DQodlyPro/img/error-tip.png
new file mode 100644
index 000000000..bb493e86d
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/error-tip.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/error.png b/versioned_docs/version-21-R3/4DQodlyPro/img/error.png
new file mode 100644
index 000000000..29aadd23f
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/error.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/explorerLocalization.png b/versioned_docs/version-21-R3/4DQodlyPro/img/explorerLocalization.png
new file mode 100644
index 000000000..78052a9d9
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/explorerLocalization.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/exportLitralsButton.png b/versioned_docs/version-21-R3/4DQodlyPro/img/exportLitralsButton.png
new file mode 100644
index 000000000..290c6b59f
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/exportLitralsButton.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/exportLitralsButton2.png b/versioned_docs/version-21-R3/4DQodlyPro/img/exportLitralsButton2.png
new file mode 100644
index 000000000..314b96a2f
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/exportLitralsButton2.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/exportLitralsCheckbox.png b/versioned_docs/version-21-R3/4DQodlyPro/img/exportLitralsCheckbox.png
new file mode 100644
index 000000000..b7bc198be
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/exportLitralsCheckbox.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/exportLitralsCheckboxAll.png b/versioned_docs/version-21-R3/4DQodlyPro/img/exportLitralsCheckboxAll.png
new file mode 100644
index 000000000..19b85ad0c
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/exportLitralsCheckboxAll.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/exportLitralsModal.png b/versioned_docs/version-21-R3/4DQodlyPro/img/exportLitralsModal.png
new file mode 100644
index 000000000..a3887551c
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/exportLitralsModal.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/forcelogin.png b/versioned_docs/version-21-R3/4DQodlyPro/img/forcelogin.png
new file mode 100644
index 000000000..b92d43570
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/forcelogin.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/helper-tip.png b/versioned_docs/version-21-R3/4DQodlyPro/img/helper-tip.png
new file mode 100644
index 000000000..119654025
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/helper-tip.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/httpHandlerView.png b/versioned_docs/version-21-R3/4DQodlyPro/img/httpHandlerView.png
new file mode 100644
index 000000000..d13ed7c09
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/httpHandlerView.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/importLitralsButton.png b/versioned_docs/version-21-R3/4DQodlyPro/img/importLitralsButton.png
new file mode 100644
index 000000000..02f572f86
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/importLitralsButton.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/importLitralsModal.png b/versioned_docs/version-21-R3/4DQodlyPro/img/importLitralsModal.png
new file mode 100644
index 000000000..e466130b0
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/importLitralsModal.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/invalidVerb.png b/versioned_docs/version-21-R3/4DQodlyPro/img/invalidVerb.png
new file mode 100644
index 000000000..079d42bb4
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/invalidVerb.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/localizationPageKeyLocale.png b/versioned_docs/version-21-R3/4DQodlyPro/img/localizationPageKeyLocale.png
new file mode 100644
index 000000000..7663d390e
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/localizationPageKeyLocale.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/localizationPageKeyLocale2.png b/versioned_docs/version-21-R3/4DQodlyPro/img/localizationPageKeyLocale2.png
new file mode 100644
index 000000000..b348f9993
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/localizationPageKeyLocale2.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/localizationResult1.png b/versioned_docs/version-21-R3/4DQodlyPro/img/localizationResult1.png
new file mode 100644
index 000000000..531d07574
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/localizationResult1.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/localizationResult2.png b/versioned_docs/version-21-R3/4DQodlyPro/img/localizationResult2.png
new file mode 100644
index 000000000..56d2a8ea4
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/localizationResult2.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/logout.png b/versioned_docs/version-21-R3/4DQodlyPro/img/logout.png
new file mode 100644
index 000000000..5f78ffb83
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/logout.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/lsp.png b/versioned_docs/version-21-R3/4DQodlyPro/img/lsp.png
new file mode 100644
index 000000000..a9cf6c096
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/lsp.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints1.png b/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints1.png
new file mode 100644
index 000000000..89cf26359
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints1.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints10.png b/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints10.png
new file mode 100644
index 000000000..f6452694e
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints10.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints11.png b/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints11.png
new file mode 100644
index 000000000..07da312c0
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints11.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints12.png b/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints12.png
new file mode 100644
index 000000000..e9853e379
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints12.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints2.png b/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints2.png
new file mode 100644
index 000000000..b3883bc9d
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints2.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints3.png b/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints3.png
new file mode 100644
index 000000000..933c4f449
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints3.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints4.png b/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints4.png
new file mode 100644
index 000000000..d9d0c3327
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints4.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints5.png b/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints5.png
new file mode 100644
index 000000000..08c81a5c7
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints5.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints6.png b/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints6.png
new file mode 100644
index 000000000..5ef40229e
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints6.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints7.png b/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints7.png
new file mode 100644
index 000000000..aafc385ba
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints7.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints8.png b/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints8.png
new file mode 100644
index 000000000..ce1c9e17a
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints8.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints9.png b/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints9.png
new file mode 100644
index 000000000..c6209dda2
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/managingBreakpoints9.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/manualEditLocal1.png b/versioned_docs/version-21-R3/4DQodlyPro/img/manualEditLocal1.png
new file mode 100644
index 000000000..12fbb6b2b
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/manualEditLocal1.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/manualEditLocal2.png b/versioned_docs/version-21-R3/4DQodlyPro/img/manualEditLocal2.png
new file mode 100644
index 000000000..a0f1ee6b4
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/manualEditLocal2.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/multipleSupportedLocales.png b/versioned_docs/version-21-R3/4DQodlyPro/img/multipleSupportedLocales.png
new file mode 100644
index 000000000..c184b2cd1
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/multipleSupportedLocales.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/noLocalLocalization.png b/versioned_docs/version-21-R3/4DQodlyPro/img/noLocalLocalization.png
new file mode 100644
index 000000000..100d4338f
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/noLocalLocalization.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/overview_model.png b/versioned_docs/version-21-R3/4DQodlyPro/img/overview_model.png
new file mode 100644
index 000000000..786e6b232
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/overview_model.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/pageDefaultNoLocale.png b/versioned_docs/version-21-R3/4DQodlyPro/img/pageDefaultNoLocale.png
new file mode 100644
index 000000000..e7d0c1e37
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/pageDefaultNoLocale.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/pageLocalizationButton.png b/versioned_docs/version-21-R3/4DQodlyPro/img/pageLocalizationButton.png
new file mode 100644
index 000000000..ff4eb2ddb
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/pageLocalizationButton.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/preview-ide.png b/versioned_docs/version-21-R3/4DQodlyPro/img/preview-ide.png
new file mode 100644
index 000000000..107428188
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/preview-ide.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/preview-main.png b/versioned_docs/version-21-R3/4DQodlyPro/img/preview-main.png
new file mode 100644
index 000000000..2d852a01a
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/preview-main.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/preview-pop.png b/versioned_docs/version-21-R3/4DQodlyPro/img/preview-pop.png
new file mode 100644
index 000000000..a93d5b452
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/preview-pop.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/preview-tab.png b/versioned_docs/version-21-R3/4DQodlyPro/img/preview-tab.png
new file mode 100644
index 000000000..a1e801cef
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/preview-tab.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/primaryLocale.png b/versioned_docs/version-21-R3/4DQodlyPro/img/primaryLocale.png
new file mode 100644
index 000000000..8bf4ec7b5
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/primaryLocale.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-classes.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-classes.png
new file mode 100644
index 000000000..a0109149c
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-classes.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-debug.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-debug.png
new file mode 100644
index 000000000..88e2f7f2a
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-debug.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-classes-icon-explorer-object-structure.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-classes-icon-explorer-object-structure.png
new file mode 100644
index 000000000..fbfe1a8d2
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-classes-icon-explorer-object-structure.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-classes-icon-grid-create-new-class.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-classes-icon-grid-create-new-class.png
new file mode 100644
index 000000000..fbfe1a8d2
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-classes-icon-grid-create-new-class.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-data-icon-grid-access-data-explorer.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-data-icon-grid-access-data-explorer.png
new file mode 100644
index 000000000..5ba01e264
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-data-icon-grid-access-data-explorer.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-data-icon-headerbar-access-data-explorer.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-data-icon-headerbar-access-data-explorer.png
new file mode 100644
index 000000000..5ba01e264
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-data-icon-headerbar-access-data-explorer.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-debug-icon-headerbar-server-debugging.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-debug-icon-headerbar-server-debugging.png
new file mode 100644
index 000000000..ccf57f300
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-debug-icon-headerbar-server-debugging.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-debugger-icon-explorer-error-tools.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-debugger-icon-explorer-error-tools.png
new file mode 100644
index 000000000..0fed67c66
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-debugger-icon-explorer-error-tools.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-home-page-interface-explorer-header-grid.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-home-page-interface-explorer-header-grid.png
new file mode 100644
index 000000000..7f0845651
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-home-page-interface-explorer-header-grid.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-methods-icon-explorer-code-blocks.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-methods-icon-explorer-code-blocks.png
new file mode 100644
index 000000000..fbfe1a8d2
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-methods-icon-explorer-code-blocks.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-methods-icon-grid-create-new-method.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-methods-icon-grid-create-new-method.png
new file mode 100644
index 000000000..fbfe1a8d2
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-methods-icon-grid-create-new-method.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-model-icon-explorer-datastore-structure.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-model-icon-explorer-datastore-structure.png
new file mode 100644
index 000000000..786e6b232
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-model-icon-explorer-datastore-structure.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-open-tabs-title-bar-editor-navigation.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-open-tabs-title-bar-editor-navigation.png
new file mode 100644
index 000000000..a8b9c931c
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-open-tabs-title-bar-editor-navigation.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-pages-icon-project-overview.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-pages-icon-project-overview.png
new file mode 100644
index 000000000..9a77de2b2
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-pages-icon-project-overview.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-preview-icon-headerbar-site-rendering.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-preview-icon-headerbar-site-rendering.png
new file mode 100644
index 000000000..42acba410
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-preview-icon-headerbar-site-rendering.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-preview-mode-tab-italic-label-indicator.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-preview-mode-tab-italic-label-indicator.png
new file mode 100644
index 000000000..323c6567c
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-preview-mode-tab-italic-label-indicator.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-roles-privileges-icon-explorer-access-control.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-roles-privileges-icon-explorer-access-control.png
new file mode 100644
index 000000000..d549d4c60
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-roles-privileges-icon-explorer-access-control.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-save-all-icon-headerbar-app-wide-changes.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-save-all-icon-headerbar-app-wide-changes.png
new file mode 100644
index 000000000..4a5fd6164
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-save-all-icon-headerbar-app-wide-changes.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-settings-icon-explorer-app-configuration.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-settings-icon-explorer-app-configuration.png
new file mode 100644
index 000000000..d766cf06c
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-settings-icon-explorer-app-configuration.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-settings-icon-headerbar-app-config-options.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-settings-icon-headerbar-app-config-options.png
new file mode 100644
index 000000000..d766cf06c
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-settings-icon-headerbar-app-config-options.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-shared-icon-explorer-assets-folder.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-shared-icon-explorer-assets-folder.png
new file mode 100644
index 000000000..bbafc8f78
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-shared-icon-explorer-assets-folder.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-tab-context-menu-options-right-click.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-tab-context-menu-options-right-click.png
new file mode 100644
index 000000000..920756551
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-tab-context-menu-options-right-click.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-tab-scrollbar-overflow-navigation-editor-tabs.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-tab-scrollbar-overflow-navigation-editor-tabs.png
new file mode 100644
index 000000000..910363e62
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-tab-scrollbar-overflow-navigation-editor-tabs.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-unsaved-changes-warning-prompt-dialog.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-unsaved-changes-warning-prompt-dialog.png
new file mode 100644
index 000000000..16544a0ab
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-unsaved-changes-warning-prompt-dialog.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-unsaved-tab-indicator-modified-content.png b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-unsaved-tab-indicator-modified-content.png
new file mode 100644
index 000000000..3c74fbb13
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/qodly-studio-unsaved-tab-indicator-modified-content.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/render-button.png b/versioned_docs/version-21-R3/4DQodlyPro/img/render-button.png
new file mode 100644
index 000000000..0c3f68da8
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/render-button.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/revokeI18nKey.png b/versioned_docs/version-21-R3/4DQodlyPro/img/revokeI18nKey.png
new file mode 100644
index 000000000..bd431e3e0
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/revokeI18nKey.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/revokeI18nKeyButton.png b/versioned_docs/version-21-R3/4DQodlyPro/img/revokeI18nKeyButton.png
new file mode 100644
index 000000000..5cf55a26b
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/revokeI18nKeyButton.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/schemes.png b/versioned_docs/version-21-R3/4DQodlyPro/img/schemes.png
new file mode 100644
index 000000000..705699955
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/schemes.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/settings-application.png b/versioned_docs/version-21-R3/4DQodlyPro/img/settings-application.png
new file mode 100644
index 000000000..aa44dcf7b
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/settings-application.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/settings-button.png b/versioned_docs/version-21-R3/4DQodlyPro/img/settings-button.png
new file mode 100644
index 000000000..5806e8b86
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/settings-button.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/settings-user.png b/versioned_docs/version-21-R3/4DQodlyPro/img/settings-user.png
new file mode 100644
index 000000000..2f6cf1154
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/settings-user.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/show-documentation.png b/versioned_docs/version-21-R3/4DQodlyPro/img/show-documentation.png
new file mode 100644
index 000000000..1cec68a87
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/show-documentation.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/studioLocaleValue1.png b/versioned_docs/version-21-R3/4DQodlyPro/img/studioLocaleValue1.png
new file mode 100644
index 000000000..15959015e
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/studioLocaleValue1.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/studioLocaleValue2.png b/versioned_docs/version-21-R3/4DQodlyPro/img/studioLocaleValue2.png
new file mode 100644
index 000000000..1f690b0de
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/studioLocaleValue2.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/styleboxLanguageSwitching.png b/versioned_docs/version-21-R3/4DQodlyPro/img/styleboxLanguageSwitching.png
new file mode 100644
index 000000000..d9598bcf9
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/styleboxLanguageSwitching.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/styleboxLanguageSwitching2.png b/versioned_docs/version-21-R3/4DQodlyPro/img/styleboxLanguageSwitching2.png
new file mode 100644
index 000000000..770744247
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/styleboxLanguageSwitching2.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/textTranslationKey.png b/versioned_docs/version-21-R3/4DQodlyPro/img/textTranslationKey.png
new file mode 100644
index 000000000..99d8c9a27
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/textTranslationKey.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/tips.png b/versioned_docs/version-21-R3/4DQodlyPro/img/tips.png
new file mode 100644
index 000000000..a3b553461
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/tips.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/tool-tip.png b/versioned_docs/version-21-R3/4DQodlyPro/img/tool-tip.png
new file mode 100644
index 000000000..548fe586b
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/tool-tip.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/tooltipI18n.png b/versioned_docs/version-21-R3/4DQodlyPro/img/tooltipI18n.png
new file mode 100644
index 000000000..fec829c9c
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/tooltipI18n.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/tooltipI18nModal.png b/versioned_docs/version-21-R3/4DQodlyPro/img/tooltipI18nModal.png
new file mode 100644
index 000000000..ff421dc98
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/tooltipI18nModal.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/tooltipI18nModalCreateKey.png b/versioned_docs/version-21-R3/4DQodlyPro/img/tooltipI18nModalCreateKey.png
new file mode 100644
index 000000000..c0cdf9762
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/tooltipI18nModalCreateKey.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/tooltipI18nModalSearchForKeys.png b/versioned_docs/version-21-R3/4DQodlyPro/img/tooltipI18nModalSearchForKeys.png
new file mode 100644
index 000000000..9de591358
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/tooltipI18nModalSearchForKeys.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/validVerb.png b/versioned_docs/version-21-R3/4DQodlyPro/img/validVerb.png
new file mode 100644
index 000000000..091e77de3
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/validVerb.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/warning.png b/versioned_docs/version-21-R3/4DQodlyPro/img/warning.png
new file mode 100644
index 000000000..091493c93
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/warning.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/web-studio-intro.png b/versioned_docs/version-21-R3/4DQodlyPro/img/web-studio-intro.png
new file mode 100644
index 000000000..1b525e940
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/web-studio-intro.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/img/workflow.png b/versioned_docs/version-21-R3/4DQodlyPro/img/workflow.png
new file mode 100644
index 000000000..d89572d7a
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/img/workflow.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/license.md b/versioned_docs/version-21-R3/4DQodlyPro/license.md
new file mode 100644
index 000000000..4dd8acdf9
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/license.md
@@ -0,0 +1,58 @@
+---
+id: license
+title: License usage for rendering
+---
+
+
+
+In default mode when any page is rendered, or in "force login" mode when a page handling data or calling a function is rendered, you must have an available license, as rendering Qodly forms targets the project database's main web server.
+
+## URL Schemes
+
+Qodly Studio's URL scheme configuration (HTTP and HTTPS) determines how many licenses are retained when rendering Qodly forms. With the appropriate configuration, you can avoid unnecessary license retaining.
+
+As explained in the [configuration](#configuration) section, the WebAdmin web server provides a secured web access to Qodly Studio. On the other hand, the [renderer](#enabling-rendering) communicates with the 4D web server of the database using REST requests. As such, it behaves like a conventional 4D Client.
+
+If you run the renderer from the Qodly Studio and these two web servers are not reached through the same URL scheme (HTTP or HTTPS), it might lead to wrong licence counting.
+
+:::info
+
+Using different schemes might also lead to [session](https://developer.4d.com/docs/commands/session) issues, such as losing [privileges](https://developer.4d.com/docs/ORDA/privileges) after a page refresh.
+
+:::
+
+### Example
+
+1. You run the Qodly Studio on an HTTPS URL scheme (e.g. `https://127.0.0.1:7443/studio/`)
+
+2. The web server of your database is started only on an HTTP port.
+
+
+
+3. In Qodly Studio, you click on the **Preview** icon. You are warned that the two web servers are started on different schemes, but despite this you click on the **Confirm** button.
+
+
+
+As a result, two licenses are retained.
+
+:::note
+
+You can enable/disable the display of the renderer pop over using a Qodly Studio user setting.
+
+:::
+
+## SameSite attribute
+
+The behavior previously described is due to the session cookie of the 4D web server. This session cookie has a `SameSite` attribute that determines if the session cookie is sent to the web server.
+
+If the `SameSite` attribute's value is `Strict` (default), the session cookie is not sent to the web server, so a new session is opened each time a page is rendered or refreshed.
+
+For more information on the `SameSite` attribute, check out [this blog post](https://blog.4d.com/get-ready-for-the-new-SameSite-and-secure-attributes-for-cookies/).
+
+## Recommendations
+
+To avoid using more licenses than necessary, we recommend doing one of the following:
+
+- Run the renderer on another browser tab (by entering the rendered URL of your Qodly page: `IP:port/$lib/renderer/?w=QodlyPageName`).
+- Ensure the Qodly Studio and your database are reached on the same URL scheme.
+- Use the `Lax` value for the [session cookie](https://developer.4d.com/docs/WebServer/webServerConfig.html#session-cookie-samesite) of your project database's web server.
\ No newline at end of file
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/localization.md b/versioned_docs/version-21-R3/4DQodlyPro/localization.md
new file mode 100644
index 000000000..774362f0f
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/localization.md
@@ -0,0 +1,542 @@
+---
+id: localization
+title: Localization (i18n)
+---
+
+import Column from '@site/src/components/Column'
+
+## Overview
+
+The Localization (i18n) in Qodly provides built-in support for creating multilingual applications without requiring any manual coding.
+It enables developers to manage languages, create translation keys, configure dynamic translations for page elements, and allow end-users to switch languages at runtime.
+
+Localization in Qodly is designed to integrate seamlessly into the visual development workflow. Developers can define locales, manage literals (translated text values), and bind language-switching mechanisms using qodlysources, without needing to manipulate data structures manually.
+
+:::info Feature Capabilities
+- Define supported application locales.
+- Set a primary (default) locale for fallback.
+- Create and manage translation keys linked to UI components.
+- Edit literals per locale directly within the Webform Editor.
+- Enable runtime language switching through the UserLanguage shared source.
+- Export and import literals using CSV or JSON for external translation processes.
+:::
+
+## Key Concepts
+
+| Term | Definition |
+|---------------------------------|---------------------------------------------------------------|
+| Locale | A specific language or regional variation used for translations. |
+| Primary Locale | The fallback language displayed when no user selection or supported browser language is available. |
+| Literal | A piece of user-facing text that can have translations across multiple locales. |
+| Key | A unique reference identifier linking a literal to its translations. |
+| UserLanguage | A built-in shared source containing the currently selected locale and the list of supported locales. |
+
+
+## Localization Setup
+
+### Accessing the Localization Page
+
+
+
+ The **Localization** page provides a centralized interface for managing application languages and translation keys.
+
+ It is accessible through the **Explorer** view within Qodly Studio.
+
+ From this page, developers can create supported locales, define primary locales, manage literals, and configure translations without modifying application logic.
+
+
+
+
+
+
+
+### Creating Locales
+
+A **locale** represents a specific language or regional variant that the application supports. Adding locales allows the application to adapt its content to different audiences.
+
+To add supported languages:
+
+
+
+ 1. Navigate to the Localization page.
+
+ 2. Click **Add new Locale** to open the locale selection dropdown.
+
+
+
+
+
+
+
+
+ 3. Choose the desired language from the list.
+
+ 4. Validate the selection to add the locale.
+
+
+
+
+
+
+
+
+
+ Developers can define multiple supported locales by clicking on the "+" button .
+
+
+
+
+
+
+
+### Setting the Primary Locale
+
+One of the locales must be set as the **Primary Locale**, which acts as the default language whenever no user preference or browser match is available.
+
+
+
+Setting a Primary Locale ensures consistent fallback behavior across user sessions and browsers.
+
+
+### Previewing Locales in the Studio
+
+By default, no locale is selected when opening a page in the Studio.
+
+
+
+Developers can manually switch between configured locales during development to preview how translations appear across languages.
+
+
+
+
+ This is achieved by:
+ - Clicking the **Localization** button in the [Header panel](./pageLoaders/pageLoaderOverview.md#header-panel) of the page.
+
+ - Selecting any of the available locales to simulate the translated application view.
+
+
+
+
+
+
+This preview is strictly for **design-time visualization** within the canvas and does not affect runtime user sessions or language selection persistence.
+
+
+## Translating Content
+
+A **literal** is any visible text in the application interface (e.g., labels, button texts, titles). By default, each literal exists independently for each locale page.
+
+### Manual Translation
+
+Developers can manually modify the literal text **directly** in each locale's version without creating a translation key.
+
+
+
+
+
+
+
+
+
+
+:::info
+This method is simple for small applications but becomes harder to maintain as the number of locales grows.
+:::
+
+### Creating Translation Keys
+
+For better scalability, **literals can be assigned to translation keys**. A **translation key** links a text element to a centralized reference, allowing it to be easily managed and translated across all supported locales.
+
+Assigning a translation key enables centralized updates, reduces duplication, and ensures consistency when a literal is reused across different pages or components.
+
+To create a translation key:
+
+
+
+ 1. Double-click the text within the text component you want to translate.
+
+
+
+
+
+2. From the tooltip, click on the **i18n** button .
+
+
+ 3. A modal will appear showing the current text value.
+
+
+
+
+
+
+
+ 4. In the **Search for keys** field, type the desired key name (for example, `marketingText_Key`).
+
+
+
+
+
+
+
+ 5. The system will suggest creating the key.
+
+ 6. Click **Create** to link your text to the new key.
+
+
+
+
+
+
+Once created:
+
+- The translation key will be automatically associated with the text.
+
+
+ :::tip
+ The key will appear under all locales.
+ :::
+
+- Different values can be assigned for the same key depending on the active locale.
+
+### Translation Key Scenarios
+
+Here’s how key assignment works when localizing content:
+
+1. **Assigning a Key in the Base State (No Locale Selected)**: When no specific locale is selected (you’re in the base state), clicking the purple i18n button adds the key to all locales.
+
+2. **Assigning a Key While a Locale is Selected**: If a locale is selected when you click the i18n button, the key is still added to all locales, including the base state.
+
+3. **Manually Editing Labels per Locale (No Key Used)**: Instead of using keys, you can manually update the Label field for each locale.
+ - Select a locale and directly type the desired label.
+ - This is quick and flexible but may become harder to manage at scale.
+ - Use the approach that best matches the complexity and reuse patterns of your UI labels.
+
+
+### Removing a Key from a Literal
+
+If needed, you can remove a translation key association from a text component:
+
+
+
+ - Click again on the **i18n** button from the component’s tooltip.
+
+ - In the key field, click the **remove key** ("-") button next to the assigned key.
+
+
+
+
+
+
+This action will unlink the text from the translation key, allowing it to behave as a standard independent literal again.
+
+:::warning
+Removing a key from a literal in a specific locale will only affect that locale. The key remains available and associated in other locales where it has already been used.
+:::
+
+### Configuring Key Values Per Locale
+
+Translation keys maintain a **single unique identifier** across all locales. However, the **value** associated with the key is locale-specific, allowing developers to configure different translations for each supported language.
+
+To configure key values:
+
+- Navigate to the Localization page.
+- Select the desired locale.
+- Locate the relevant translation key.
+- Edit the literal value for that locale.
+- Confirm the changes.
+
+
+
+
+By switching between locales inside the Studio and previewing the pages, developers can immediately see how each configured translation appears for different languages.
+
+
+
+
+
+
+
+
+
+
+
+:::info Important Behavior for Key Creation
+
+When creating locales for the first time, **no keys exist initially**.
+
+- The first key must be created while translating elements directly on the page using the i18n buttton.
+- Once at least one key has been created through a component (e.g., a text field, button label), the Localization page becomes fully enabled for direct key management.
+- After the first key is created, you can create additional translation keys directly from the Localization page, even without selecting elements on the page.
+
+This ensures that key management is progressively unlocked as localization is set up.
+:::
+
+### Add i18n for Other Specific Components
+
+For components other than the Text component, adding i18n translation keys is done directly through the Properties panel in Qodly Studio.
+
+For example, to localize the label of a Button component:
+
+1. Select the component in your page.
+2. Go to the Properties tab in the right-hand panel.
+3. Locate the Label/Title field.
+4. You have three options:
+ - Assign a key to all locales: Click the purple i18n button next to the label field without selecting a locale. This adds the key for all supported locales.
+ - Assign a key to a specific locale: First select the target locale from the locale switcher, then click the i18n button. This will assign the key only for that selected locale.
+ - Manually edit label value: You can also manually change the value of the label per locale without using a translation key.
+
+
+## Managing Locales
+
+### Editing a Locale
+
+To edit an existing locale:
+
+- Navigate to the **Localization** page from the Explorer.
+- Locate the locale you want to modify in the list.
+- Click on the **Edit** button next to the locale name.
+- A language selector dropdown will appear.
+- Choose a new language to replace the current one.
+
+### Removing a Locale
+
+To completely remove a locale:
+
+- Navigate to the **Localization** page from the Explorer.
+- Find the locale you wish to remove.
+- Click on the **Delete** button next to the locale name.
+
+Removing a locale will:
+
+- Delete all translation keys associated with that locale.
+- Automatically update the `UserLanguage.supported` array, removing the deleted language from the runtime switching options.
+
+
+## Managing Keys
+
+### Editing a Translation Key
+
+To edit the value of a translation key for a specific locale:
+
+1. Go to the Localization page in Qodly Studio.
+2. Select the desired locale.
+3. Locate the key you wish to update from the list.
+4. Click the edit icon or directly click into the value field.
+5. Modify the value and click the ✔ button to confirm your changes or ✖ to cancel.
+
+
+
+### Deleting a Translation Key
+
+To delete a translation key entirely from the Localization page:
+
+1. Open the Localization page.
+2. Navigate to the locale where the key is visible.
+3. Locate the key in the list and click the delete icon.
+
+
+
+Deleting a key will:
+
+- Remove the key itself.
+- Remove all translations associated with it across all locales.
+- Unlink any components or literals that were referencing the deleted key.
+
+Use this option only when the key is no longer needed in the application.
+
+
+## Runtime Language Switching
+
+To enable dynamic, user-driven language switching at runtime, the application must be configured to bind to the [UserLanguage shared Qodly source](./pageLoaders/qodlySources.md#qodlysource-userlanguage).
+
+Runtime switching involves the following configuration steps:
+
+
+
+ 1. Bind the `UserLanguage.supported` to the listbox qodly source.
+
+ 2. Bind the `UserLanguage.selected` to the *Selected Element** of the listbox.
+
+
+
+
+
+
+This binding enables users to pick a language dynamically from a dropdown list during runtime.
+
+When the application is rendered:
+
+
+
+ - The select box allows the user to switch between available languages.
+
+
+
+
+
+
+- Upon selecting a language, the value of `UserLanguage.selected` is updated.
+
+- The application automatically refreshes the displayed text to match the translations configured for the selected locale.
+
+
+
+
+
+
+
+
+
+
+:::info
+If no UserLanguage binding is configured, language switching will not function in preview or renderer modes, even if locales exist.
+:::
+
+## Localization Feature Behavior
+
+Localization in Qodly follows a **layered priority model** to determine which language is displayed to the end user at any given moment.
+
+The priority order for language resolution is:
+
+1. **User-selected language**: If the user manually selects a language during their session (for example, using a language switcher dropdown), the application will immediately display the selected language and store it in the session.
+
+2. **Session-stored language**: On subsequent visits, if a session language has been previously stored, the application will automatically reuse this stored language preference without requiring user interaction.
+
+3. **Browser language detection**: If no session language is set (e.g., on a user's very first login), the application will attempt to detect the user's browser language.
+ - If the browser language matches one of the supported locales configured in the Localization page, it will be used automatically.
+
+4. **Primary locale fallback**: If neither a session language nor a matching browser language is available, the application will fall back to displaying the **Primary locale** defined in the Localization settings.
+
+:::info Behavior for Missing Translations
+
+If a literal does not have a translation value for the active locale, the original text value (literal) will be displayed as-is.
+
+This ensures that the application remains functional even if translations are incomplete.
+
+:::
+
+## Exporting and Importing Translations
+
+Qodly makes it easy to manage translations externally by allowing you to **export** and **import** translation files. You can export your application's literals to a CSV or JSON file, translate them externally, and then re-import them back into your application.
+
+### Export First, then Import
+
+Before you can import translations into Qodly, you must first export your application's literals. This ensures that the file structure matches the expected internal format.
+
+You cannot create a valid translation file from scratch or use a file exported from another app. The import process requires a file that was originally exported from your own Qodly app.
+
+Once exported, you can edit the file using a spreadsheet editor (for CSV) or a code/text editor (for JSON), then re-import it into your app.
+
+### Exporting Literals
+
+The **Export** button is initially disabled by default.
+
+To enable the Export button:
+
+1. You must select at least one locale from the Localization panel.
+
+2. You can either:
+
+ - Manually check the box for one or more locales.
+
+ - Or check the **Select All** checkbox to select all available locales at once.
+
+
+ Once at least one locale is selected, the **Export** button becomes active .
+
+3. Click **Export** to open the export configuration modal.
+
+
+
+ Inside the Export modal:
+ - Select your preferred export format:
+ - **CSV**: Suitable for spreadsheet editing or basic translation workflows.
+ - **JSON**: Suitable for structured editing and external system integration.
+ - After selecting the format, click **Export**.
+
+
+
+
+
+
+A file will be generated and downloaded in the chosen format containing all literals for the selected locales.
+
+### Importing Literals
+
+To import translated literals:
+ - Click the **Import** button located next to the Export options.
+
+
+ - A file selector will open.
+
+ - Upload a valid `.csv` or `.json` file matching the export format.
+
+ - Once a file is selected, click **Import** to update your application's literals.
+
+
+
+
+
+
+### Supported File Formats
+
+Qodly supports two export/import formats: JSON and CSV. Each format has its own structure and is suitable for different use cases.
+
+#### JSON Format
+
+The JSON format is structured for developers and tools that prefer a nested, key-based structure.
+
+| Field | Description |
+|-------|-------------|
+| `webforms.i18n` | Maps component IDs to their translation data. Each ID represents a UI element. |
+| `resolverName` | The type of component (e.g., Label, Text, SelectBox). |
+| `props` | An array of translated properties, each with: `__dataPath`, `__default`, and one or more language translations. |
+| `i18n` | Contains all custom translation keys created by the developer. Each key includes a `default` value and language-specific values. |
+
+**Example:**
+```json
+{
+ "webforms": {
+ "i18n": {
+ "1DVbAUpEoU": {
+ "resolverName": "Label",
+ "props": [
+ {
+ "__dataPath": "text",
+ "__default": "Label",
+ "en": "Label",
+ "es": "Label"
+ }
+ ]
+ },
+ ...
+ }
+ },
+ "i18n": {
+ "marketingText_Key": {
+ "default": "marketing Style Text",
+ "en": "Qodly Studio is a modern, low-code development environment...",
+ "fr": "Qodly Studio est un environnement de développement..."
+ }
+ }
+}
+```
+
+#### CSV Format
+
+The CSV format is ideal for translation teams working in spreadsheet editors.
+
+| Column | Description |
+|--------|-------------|
+| `keys` | Path to the literal or translation key. E.g., `webforms.i18n.Z7Gc1JzZ16.doc` or `i18n.marketingText_Key.en`. |
+| `resolverName` | Type of the UI component (`Label`, `Text`, etc.). |
+| `__t` | The default fallback value shown when a translation is missing. |
+| `en`, `es`, `fr`, etc. | Columns for each language code, containing the translated values. |
+| `key_default` | The value tied to a custom translation key when applicable. |
+
+**Example:**
+```
+keys,resolverName,__t,en,es,key_default,zh,ja,it,de,fr
+webforms.i18n.1DVbAUpEoU.text,Label,"Label","Label","Label"
+i18n.marketingText_Key.en,,,,,Qodly Studio is a modern, low-code development environment...
+```
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/notes.md b/versioned_docs/version-21-R3/4DQodlyPro/notes.md
new file mode 100644
index 000000000..7e9e847d2
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/notes.md
@@ -0,0 +1,53 @@
+---
+id: release-notes
+title: Release Notes
+---
+
+
+
+## 4D 21
+
+### Highlights
+
+- [Localization (i18n)](./localization.md): Launched built-in Localization support, allowing you to create multilingual applications visually—without coding. You can define supported locales, manage translation keys and literals, preview translations directly in the Studio, and allow users to switch languages at runtime using the [UserLanguage](pageLoaders/qodlySources.md#qodlysource-userlanguage) shared source.
+
+- [Page Zoom Controls](pageLoaders/pageLoaderOverview.md#page-zoom-controls): in the header panel, allowing users to adjust the page’s zoom level for more precise component placement and layout editing.
+
+- [Events Report](pageLoaders/pageLoaderOverview.md#events-report): Introduced the Events Report, a visual overview of all page events for components and Qodly sources complete with filtering, editing, and navigation options.
+
+
+
+
+## 4D 20 R10
+
+### Highlights
+
+- [Saved Condition Go To Button](pageLoaders/states/conditionalState.md#saved-condition-integration): When a saved condition is integrated into a state, a **Go to** button now appears next to its name. Clicking it opens the full saved condition in edit mode—so you can quickly review or update it without leaving the schema view.
+
+- [Interval Range Validation for Text Input](pageLoaders/components/textinput.md#intervals-for-date-input): For text inputs using the **interval type `Range`**, if the **start date is later than the end date**, an error message will be shown and the dates will be temporarily disabled until corrected.
+
+- [Matrix Selection Behavior Options](pageLoaders/components/matrix.md#properties-customization): You can now control how the **Matrix** behaves after a data update (like reloading or filtering).
+
+- [Debugger Sidebar](./debugging.md#debugger-sidebar): A new sidebar in the code editor lets you monitor, group, enable/disable, delete, and jump to breakpoints across your entire app. It also shows a [Variables panel](./debugging.md#variables-panel) during debug sessions, so you can view local variables, current line variables, and method arguments—all in one place.
+
+- [Built-in Shared Qodly Namespace](pageLoaders/qodlySources.md#built-in-shared-qodly-namespace): Introduced a built-in Qodly namespace available across all application pages. It provides ready-to-use qodlysources for shared data handling, including a [Location shared qodlysource](pageLoaders/qodlySources.md#qodlysource-location) that simplifies working with URL segments, query parameters, and anchors. As well as, a [UserLanguage shared qodlysource](pageLoaders/qodlySources.md#qodlysource-userlanguage) that allows runtime management of user-selected languages and lists supported locales dynamically; and a [Title shared qodlysource](pageLoaders/qodlySources.md#qodlysource-title) that enables setting the browser tab title dynamically at runtime.
+
+- [Connection Status Handling in Renderer](rendering.md#connection-status-handling): The Renderer now displays connection status messages when the network is lost or restored during rendering. A red banner appears when disconnected, and a green banner confirms when the connection is restored.
+
+### Behavior Changes
+
+- **Renamed properties in the [intervals datasource](pageLoaders/components/textinput.md#params-object-properties)** of the text input component for consistency:
+
+ - `toDay` is now `today`
+ - `startingfrom` is now `startingFrom`
+ - `untilto` is now `until`
+
+- **Include Option and Interval Card Toggle**: Added visual controls to improve interval management. The [Include checkbox](pageLoaders/components/textinput.md#include-checkbox-within-the-card) lets users include or exclude specific date ranges, while the [card toggle](pageLoaders/components/textinput.md#card-toggle-top-right) allows enabling or disabling intervals without losing their configuration.
+
+- [HTTP Handlers UI Redesign](./httpHandlers.md): Updated the UI to provide a clearer and more intuitive layout, making it easier to configure and manage request handlers.
+
+- [Roles and Privileges UI – Button Label Update](./roles/permissionsOverview.md#clean-non-existing-resources): In the Roles and Privileges interface, the **Clear** button was renamed to **Clean** for clarity. This button appears when a resource (like an attribute) is no longer available, and lets users remove outdated permissions.
+
+- [Initial Value Editing in Qodly Source](pageLoaders/qodlySources.md#editing-a-qodly-source): For qodlysources with editable properties, initial values now include a **Maximize** button for fields of type `object` or `array`. Clicking the maximize icon opens a popup editor, which can also be expanded to fill the contextual panel, making it easier to edit complex or long values.
+
+- [Date Picker Navigation in Text Input](pageLoaders/components/textinput.md#embedded-input): Users can now navigate to the next/previous month and next/previous year directly within the date picker for a smoother selection experience.
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/button.md b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/button.md
new file mode 100644
index 000000000..49c68fc91
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/button.md
@@ -0,0 +1,143 @@
+---
+id: button
+title: Button
+---
+import Column from '@site/src/components/Column'
+
+
+The **Button** component is a UI element that prompts user engagement and triggers actions within your Page.
+
+
+:::info
+
+The **Button** component has an **Icon** element embedded within it. This is of great importance as configuring the **Button** component may require adjusting properties within the embedded element. This applies to the visual style, triggers, and actions as they may differ.
+
+:::
+
+
+## Use Cases
+
+Buttons are indispensable in a wide range of scenarios where user engagement and interaction are paramount:
+
+- **Form Submission**: Utilize buttons to allow users to submit forms after providing necessary input.
+
+- **Navigation**: Implement buttons to facilitate navigation between different sections or pages of your application.
+
+- **Data Manipulation**: Enable users to perform operations such as adding, editing, or deleting data entries through buttons.
+
+
+## Properties Customization
+
+### Button Component
+
+Enhance the **Button** component to align with your application's requirements using the following customization options:
+
+
+
+
+
Label: Personalize the label to offer clear instructions or guidance.
+
Icon Position: Choose the position of the icon in relation to the label, allowing options for top, bottom, left, right, or even hidden for a seamless integration into your design.
+
+
+
+
+
+
+
+
+### Embedded Icon
+
+Within the Button component, an embedded Icon allows for further customization of the following properties:
+
+
+
+
+
Icon: When the icon visibility is configured in the Button component's customization properties, you can select an icon from an icon picker list.
+
+
+
+
+
+
+
+## Data Integration
+
+When it comes to data-binding, it's important to note that the **Button** component itself is not inherently data-bound. Unlike components like the **DataTable** that derive their content from specified Qodly Sources, the **Button** component primarily focuses on initiating actions and interactions within the user interface.
+
+## Customizing Button Styles
+
+### Example 1 - Overall Component Style
+
+The `self` selector targets the entire Button component, allowing you to customize its size, shape, and appearance with background color and shadows.
+
+
+
+
+
+
+
+
+
+
+### Example 2 - Active Button Style
+
+The `self:active` selector applies when the button is actively pressed or clicked, providing visual feedback with a change in shadow effect to simulate a "pressed-in" appearance.
+
+
+
+
+
+
+
+
+
+
+
+## Triggers and Events
+
+### Button Component
+
+The **Button** component can respond to various events, enabling dynamic user experiences. Events that can trigger actions within the component include:
+
+|Event|Description|
+|---|---|
+|On Click| Calls for an action when the user clicks on the component. |
+|On Blur| Calls for an action when the component loses focus (user clicks outside). |
+|On Focus| Calls for an action when the component gains focus (user clicks on it). |
+|On MouseEnter| Calls for an action when the user's mouse cursor enters the area of the component.|
+|On MouseLeave| Calls for an action when the user's mouse cursor exits the area of the component.|
+|On Keyup| Calls for an action when a keyboard key is released while the component is in focus|
+|On KeyDown| Calls for an action when a keyboard key is pressed down while the component is in focus. |
+
+### Embedded Icon
+
+The embedded **Icon** can also respond to various events, allowing for dynamic user experiences. Events that can trigger actions within the embedded icon include:
+
+|Event|Description|
+|---|---|
+|On Click| Calls for an action when the user clicks on the Icon. |
+|On Keyup| Calls for an action when a keyboard key is released while the Icon is in focus|
+|On KeyDown| Calls for an action when a keyboard key is pressed down while the Icon is in focus. |
+|On MouseEnter| Calls for an action when the user's mouse cursor enters the area of the Icon.|
+|On MouseLeave| Calls for an action when the user's mouse cursor exits the area of the Icon.|
\ No newline at end of file
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/checkbox.md b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/checkbox.md
new file mode 100644
index 000000000..7592708da
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/checkbox.md
@@ -0,0 +1,290 @@
+---
+id: checkbox
+title: Checkbox
+---
+import Column from '@site/src/components/Column'
+
+The **Checkbox** component is a UI element designed for binary selections. It consists of a small box that can be checked (selected) or unchecked (deselected) by the user.
+
+:::info
+
+The **Checkbox** component contains an embedded **Checkbox Input** and a **Label** element. This is of great importance as configuring the **Checkbox** component may require adjusting properties within the embedded elements. This applies to the visual style, triggers, and actions as they may differ.
+
+:::
+
+
+## Use Cases
+
+The **Checkbox** component serve various purposes in user interfaces, including:
+
+- **Feature Control**: Enable/disable features.
+
+- **Preference Indication**: Reflect user preferences.
+
+- **Agree/Disagree Choices**: Obtain user consent.
+
+
+
+
+## Properties Customization
+
+### Checkbox Component
+
+Enhance the **Checkbox** component to align with your application's requirements using the following customization options:
+
+
+
+
+
Label Position: Developers can tailor the label's position, placing it above, below, to the left, to the right, or even hidden.
+
+
+
+
+
+
+
+
+- **Variant Selection**: Choose the variant that aligns with your design:
+
+
+
+
+
Checkbox Variant: Select this for the standard checkbox style.
+
Switch Variant: Choose this for a switch-like appearance.
+
+
+
+
+
+
+
+
+- **Checkbox Type selection**: Choose between three checkbox configurations to determine the available states and default values for the checkbox:
+
+
+
+
+
Two-State Checkbox (Default): Select this for straightforward binary decisions.
+
Three-State Checkbox: Select this for scenarios requiring an optional or undefined state.
+
Initial Indeterminate Checkbox: Select this to provide an indeterminate state initially, transitioning to two-state behavior after first use.
+
+
+
+
+
+
+
+ | **Type** | **States** | **Default Value** | **State Transition Order** |
+ |-------------------------|------------------------------------|---------------------------|------------------|
+ | **Two-State Checkbox** | - Checked (`true`): Option is selected. - Unchecked (`false`): Option is rejected. | `false` (unchecked) | - Checked - Unchecked |
+ | **Three-State Checkbox**| - Checked (`true`): Option is selected. - Unchecked (`false`): Option is rejected. - Indeterminate (`null`): No action has been taken or optional. | `null` (indeterminate) | - Indeterminate - Checked - Unchecked - Indeterminate |
+ | **Initial Indeterminate Checkbox** | - Checked (`true`): Option is selected. - Unchecked (`false`): Option is rejected. - Indeterminate (`null`): Only before first user action. | `null` (indeterminate) | - Indeterminate (before first action only) - Checked - Unchecked|
+
+
+
+
+
+
Size: Choose from small, medium, or large sizes for the Checkbox component.
+
+
+
+
+
+
+
+
+### Embedded Label
+
+Within the **Checkbox** component, an embedded **Label** allows for further customization of the following properties:
+
+
+
+
+
Label: Personalize the label to offer clear instructions or guidance.
+
+
+
+
+
+
+
+
+
+## Data Integration
+
+The **Checkbox** component allows for seamless integration of Qodly Sources, enabling dynamic data binding and interaction within the Page.
+
+:::info
+The qodlysource for the **Checkbox** component should be binary, with values limited to `true` or `false`.
+:::
+
+
+### Data Binding
+To associate data with the Checkbox component, follow these steps:
+
+1. **Navigate to the Properties Panel**: Access the Data Access category located within the Properties panel for the Checkbox component.
+
+2. **Define the Qodly Source**: Specify the relevant qodlysource that will capture the user's selected choice.
+
+:::tip
+Alternatively, you can establish the connection by dragging and dropping the qodlysource onto the Checkbox component.
+:::
+
+### Server-Side Interaction
+
+Interacting with user input data is straightforward. When you bind a qodlysource to the **Checkbox** component, you can access and make use of the input content.
+
+Subsequently, you can utilize this input value in various ways, such as within a standard action to initiate a search with matching attribute values.
+
+
+## Customizing CheckBox Styles
+
+The **Checkbox** component offers additional customization options through CSS, providing control over the appearance of checkbox elements.
+
+### Component-Specific Classes
+
+The following CSS classes are applied to various elements within the **CheckBox** component, defining their layout, style, and behavior. Each class can be customized to adjust the look and functionality of specific parts of the component.
+
+| **Class Name** | **Applies To** | **Description** |
+|------------------------------|--------------------------------------|----------------------------------------------------------------------------------------------------------------------------|
+| `chakra-checkbox` | CheckBox wrapper | Provides base styling for the CheckBox wrapper, including layout and positioning. |
+| `chakra-checkbox__input` | Checkbox input | Applies default styling for the actual checkbox input element, usually hidden to allow the control to display instead. |
+| `fd-label` | Label element | Styles the CheckBox label, including font size, color, and positioning relative to the checkbox input. |
+
+
+### Component-Specific Tags
+
+The following HTML tags make up the structure of the **CheckBox** component. Each tag can be styled to adjust its appearance, alignment, and user interaction.
+
+| **Tag Name** | **Applies To** | **Description** |
+|--------------|-----------------------------|----------------------------------------------------------------------------------------------------------------------------|
+| `` | Checkbox input field | The main checkbox where users select or deselect options. Styling the input affects borders, padding, and position, influencing how it appears alongside the label text. |
+
+
+### Example 1 - Overall CheckBox Style
+
+The `self .chakra-checkbox` selector targets the main CheckBox container, allowing customization of size, cursor behavior, and shadow effects.
+
+
+
+
+
+
+
+
+
+
+
+### Example 2 - Check Mark Control Style
+
+The `self .chakra-checkbox span` selector applies to the visual representation of the check mark control, adjusting its font size, weight, and transition effects.
+
+
+
+
+
+
+
+
+
+
+
+## Triggers and Events
+
+### Checkbox Component
+
+The **Checkbox** component can respond to various events, enabling dynamic user experiences. Events that can trigger actions within the component include:
+
+|Event|Description|
+|---|---|
+|On Click| Calls for an action when the user clicks on the component. |
+|On Blur| Calls for an action when the component loses focus (user clicks outside). |
+|On Focus| Calls for an action when the component gains focus (user clicks on it). |
+|On MouseEnter| Calls for an action when the user's mouse cursor enters the area of the component.|
+|On MouseLeave| Calls for an action when the user's mouse cursor exits the area of the component.|
+
+### Embedded Label
+
+The embedded **Label** can also respond to various events, allowing for dynamic user experiences. Events that can trigger actions within the embedded icon include:
+
+|Event|Description|
+|---|---|
+|On Click| Calls for an action when the user clicks on the Label. |
+|On Keyup| Calls for an action when a keyboard key is released while the Label is in focus|
+|On KeyDown| Calls for an action when a keyboard key is pressed down while the Label is in focus. |
+|On MouseEnter| Calls for an action when the user's mouse cursor enters the area of the Label.|
+|On MouseLeave| Calls for an action when the user's mouse cursor exits the area of the Label.|
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/componentsBasics.md b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/componentsBasics.md
new file mode 100644
index 000000000..ffb2d8747
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/componentsBasics.md
@@ -0,0 +1,207 @@
+---
+id: componentsBasics
+title: Components basics
+---
+import Column from '@site/src/components/Column'
+
+
+
+Components are the fundamental building blocks that constitute your application's user interface. These modular elements allow you to construct rich and dynamic interfaces by combining various functionalities and visual elements.
+
+
+
+## Locating Components
+
+
+
+ Components are located in the Components tab on the left side panel. Components are systematically organized into distinct categories, simplifying the search and selection process:
+
+
Containers: Components that encapsulate other components and manage their placement.
+
+
Simple: Components that display scalar or native data, images, and facilitate user actions
+
+
List: Components that iterate over qodlysources and manage user interactions with this data.
+
+
Custom Components: These are external React components that have been imported into Qodly by the user.
+
+
+
+
+
+
+
+## Adding Components
+
+Incorporating components into your Page is a straightforward process that involves **drag-and-drop** functionality. Simply select a component and place it onto your working area or canvas.
+
+You have the flexibility to drop components directly onto the Page itself, as well as within other components that accept nested elements. This versatility allows you to construct complex layouts and hierarchies by combining different components within one another.
+
+
+
+## Uploading Custom Components
+
+
+
+ Qodly Studio provides a dedicated upload button in the Component bar, allowing users to upload Custom Components.
+
+
+
+
+
+
+
+## Tooltip
+
+
+
+ When you select a component on the canvas, a contextual tooltip becomes available, offering a variety of actions that can be performed on the chosen component. These actions provide you with the tools to efficiently manage and manipulate your Page's design. Here's a breakdown of the actions available in the tooltip:
+
+
+
+
+
+
+
+
+### Essential Options
+
+|Option|Description|
+|---|---|
+|Move| Reposition the selected component on the canvas.|
+|Select Parent Component| Select the parent component of the current selection.|
+|Delete Component| Remove the selected component from the canvas. As an alternative solution, you can use the shortcut **Alt + Shift + Delete (⌥ + ⇧ + Delete for Mac)**.|
+|Export Styles| Export the overridden CSS properties to a new CSS class.|
+|Open Events Panel| Binding events to the selected component.|
+
+
+### More Options
+
+|Option|Description|
+|---|---|
+|Copy| Make a copy of the selected component. As an alternative solution, you can use the shortcut **Alt + C (⌥ + C for Mac)**|
+|Cut| Cuts the selected component so you can paste it elsewhere. As an alternative solution, you can use the shortcut **Alt + X (⌥ + X for Mac)**|
+|Paste| Paste the copied component directly into your Page. As an alternative solution, you can use the shortcut **Alt + V (⌥ + V for Mac)**|
+|Paste into| Paste the copied component into another component. As an alternative solution, you can use the shortcut **Alt + ⇧ + V (⌥ + ⇧ + V for Mac)**|
+|Duplicate| Duplicate the selected component in the same parent component. As an alternative solution, you can use the shortcut **Alt + D (⌥ + D for Mac)**|
+|Save as craft| Save the component, its child components, and their styles as a reusable component. As an alternative solution, you can use the shortcut **Alt + K (⌥ + K for Mac)**|
+|Copy content| Copy content. As an alternative solution, you can use the shortcut **Alt + ⇧ + C (⌥ + ⇧ + C for Mac)**|
+|Clear styles| Clear the styles of the selected component (resets the overridden CSS properties). As an alternative solution, you can use the shortcut **Alt + J (⌥ + J for Mac)**|
+|Clear content| Clear content within the selected component. As an alternative solution, you can use the shortcut **Alt + E (⌥ + E for Mac)**|
+
+
+## Data Formatting
+
+
+
+ Your Pages can incorporate Qodly Source attributes with data types such as string, number, date, time, or duration. When these attributes are presented within components, you have the option to choose their display format in the Properties section.
+
+
+
+
+
+
+:::info
+Formatting options may vary based on the specific data type of the attribute and the type of component being used.
+:::
+
+
+
+
+
For Text (string):
+
+
UPPERCASE: Converts all characters to uppercase.
+
lowercase: Converts all characters to lowercase.
+
Capitalize: Capitalizes the first letter of the text.
+
Capitalize Each Word: Capitalizes the first letter of each word.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
For Number:
+
+
0: Standard numerical format.
+
0%: Displays the number as a percentage.
+
#,##0: Adds thousands separators to the number.
+
#,##0.00: Adds thousands separators and displays two decimal places.
+
+
+ Refer to the Review guidelines for customizing number formats.
+
+
+
+
+
+
+
+
+
+
+
+
+
For Date:
+
+
Date short: Displays the date in a short format.
+
Date long: Displays the date in a long format.
+
Date abbreviated: Displays the date with abbreviated month name.
+
ISO date GMT: Displays the date in ISO 8601 format with GMT time zone.
+
UTC String: Displays the date in a UTC format.
+
+
+ Qodly supports a wide range of customized date formats. For a comprehensive list of available patterns, refer to the Date and Time Formats page.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
For Duration:
+
+
Simple: 14:40:30
+
Without seconds: 14:40
+
Distance: about 15 hours
+
Distance with Suffix: in about 15 hours
+
Strict Distance: 15 hours
+
Strict Distance with Suffix: in 15 hours
+
+ Note: Examples with duration 52 830 000 ms.
+
+
+ Qodly supports a wide range of customized time formats. For a comprehensive list of available time patterns, refer to the Date and Time Formats page.
+
+
+
+
+
+
+
+## Data Integration
+
+This section serves as a fundamental introduction to the integration of Qodly Sources with components. It's essential to note that each component has its own dedicated section on its respective page, including the following subsections:
+
+- **Data Binding**: This step configures the connection between a component and a Qodly Source, determining where the component retrieves its data.
+
+- **Data Display**: After binding data, this section guides you in visually presenting data within the component, including configuring its appearance and additional components.
+
+- **Dynamic Attribute Display**: This section explains how a component can automatically display attributes of a selected Qodly Source, offering detailed information without extra interactions.
+
+- **Server-Side Interaction**: This section explains obtaining user selections in a server-side context when a Qodly Source is bound to a component, enabling content retrieval and use.
+
+:::note
+Please note that the following subsections (Data Binding, Data Display, Dynamic Attribute Display, and Server-Side Interaction) may or may not be applicable to all components. Their presence or absence depends on the specific component's functionality and use case.
+:::
\ No newline at end of file
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/datatable.md b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/datatable.md
new file mode 100644
index 000000000..7cf91ba46
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/datatable.md
@@ -0,0 +1,382 @@
+---
+id: datatable
+title: Data Table
+---
+import Column from '@site/src/components/Column'
+
+The **DataTable** component is a versatile UI element used to display data in a tabular format, resembling a table. It efficiently iterates through a designated Qodly Source, converting it into an organized list comprising rows and columns. In the DataTable, columns represent attributes, rows represent entities, and a header row labels the columns.
+
+
+
+## Use Cases
+
+The **DataTable** component proves invaluable across a multitude of scenarios where data needs to be comprehensively displayed, including:
+
+- **Data Analysis**: Utilize the DataTable to showcase datasets, enabling users to perform in-depth analysis, exploration, and comparison of various attributes.
+
+- **Inventory Management**: Employ the DataTable in inventory management systems to present product details, quantities, and availability.
+
+- **Sales Reports**: For tracking sales performance, the DataTable effectively displays revenue, product sales, and other relevant metrics.
+
+
+
+## Properties Customization
+
+Enhance the **DataTable** component to align with your application's requirements using the following customization options:
+
+
+
+
+
Header Height: Define the height of the header row in pixels.
+
+
+
+
+
+
+
+
+
+
+
Row Height: Set the height of each row (excluding the header) in pixels.
+
+
+
+
+
+
+
+
+
+
+
Show Borders: Enable or disable the display of line and column borders within the DataTable.
+
+
+
+
+
+
+
+
+
+
+
+
Sorting Behavior: Control the scrolling behavior of the DataTable after sorting columns. This feature improves navigation and focus in large tables by offering two options:
+
+
Scroll to Selection (default): After sorting, the table keeps the selected element in focus and ensures it remains in view.
+
Scroll to Top: After sorting, the table scrolls to the top while retaining the selected element in the table.
+
+
+
+
+
+
+
+
+- **Columns Area**: The columns area is where developers can manage the columns within the DataTable. It provides options for adding, moving, or removing columns to customize the structure of the table.
+
+ - **Adding Columns**: To add a new column, click on the `+` icon. This action triggers the appearance of a new column configuration area located at the bottom of the column list. This area allows you to define properties for the new column:
+
+
+
+
Title: The title is the text displayed in the header row as the label for the column. It also appears as the column name in the properties area.
+
Source: The source attribute specifies the qodlysource for the column. Typically, it refers to an attribute whose value depends on each element of the DataTable's qodlysource. This determines the content to be displayed in the column cells.
+
Format: The format property allows you to define how the data in the column should be displayed, depending on its type. It specifies the visual representation of the data, such as date formatting or decimal places. See Formats for a description of available formats.
+
Width: The width of the column can be customized. You have the option to define the width in pixels or as a percentage. The unit menu at the right side of the entry area lets you choose between PX (pixels) or % (percentage).
+
Sorting: The sorting selector enables users to interactively sort the column. When this selector is activated, users can click on the header area of the column to perform ascending or descending sorting at runtime.
+
+
+
+
+
+
+
+ - **Column Duplication**: Duplicate existing columns to replicate configurations quickly by clicking on the icon.
+ - **Column Removal**: Delete columns that no longer serve a purpose by clicking on the icon.
+
+ - **Moving Column**: Arrange columns to your preferred position by clicking on the icon
+
+## Data Integration
+
+The **DataTable** component is data-bound, meaning it relies on an external Qodly Source to populate its options. This allows the component to display and interact with data.
+
+:::info
+The qodlysource for the **DataTable** component can take the form of either an `ORDA entity selection` or an `array`.
+:::
+
+### Data Binding
+
+To associate data with the **DataTable** component, follow these steps:
+
+
+
+
+
Navigate to the Properties Panel: Access the Data Access category located within the Properties panel for the Data Table component.
+
Define the Qodly Source: Specify the appropriate qodlysource that contains the data you want to display within the DataTable. For instance, you can select an entity selection, such as the Packages dataclass.
+
+
+
+
+
+
+
+:::tip
+Alternatively, you can establish the connection by dragging and dropping the qodlysource onto the DataTable component.
+:::
+
+### Data Display
+
+When it comes to displaying columns in the DataTable component, you have two options:
+
+- **Property Customization in the Columns Area**: Modify column settings according to your preferences directly from the [Columns Area](#properties-customization).
+
+- **Attribute Drag-and-Drop**: Alternatively, you can include columns by dragging and dropping attributes from the Qodly Source onto the DataTable.
+
+### Dynamic Attribute Display
+
+
+
+
+ The Data Table component can link its currently selected entity to a qodlysource in the Selected Element field. This feature allows the component to automatically display the attributes of the selected element whenever a new entity is chosen.
+
+
+
+
+
+
+
+
+ These attributes can be showcased in other configured components, such as a Text component, to display the corresponding attribute values.
+
+
+
+
+
+
+### Server-Side Interaction
+
+Enhance DataTable interactivity by binding functions to events like `onheaderclick` and `oncellclick`. These events respond to user actions and retrieve event-specific details using the [webEvent](https://developer.4d.com/docs/API/commands/webEvent) command.
+
+Common attributes for `onheaderclick` and `oncellclick`:
+
+|Attribute|Type|Description|
+|---|---|---|
+|caller| Text | Server-side reference of the DataTable component.|
+|data| Object | The data object containing event-specific information.|
+|eventType| Text | Type of event that has been triggered ("onheaderclick" or "oncellclick")|
+
+- **onheaderclick**: Triggered when a user clicks a column header. The data object attribute includes:
+
+|Attribute|Type|Description|
+|---|---|---|
+|index| Number | The index of the clicked column header (starting from 0).|
+|name| Text | The qodlysource of the column.|
+
+
+- **oncellclick**: Triggered when a user clicks a cell in a row. The data object attribute includes:
+
+|Attribute|Type|Description|
+|---|---|---|
+|index| Number | The index of the clicked column header (starting from 0).|
+|name| Text | The qodlysource of the column.|
+|row| Number | The number of the clicked row.|
+
+
+## User Experience Features
+
+The **DataTable** component provides a range of user-friendly features:
+
+- **Column Sorting**: Users can sort data by clicking column headers .
+
+- **Resizable Columns**: Adjust column widths to fit content .
+
+- **Drag-and-Drop Column Movement**: Rearrange columns with ease .
+
+- **Selectable/Tabbable Rows**: Navigate and select rows using keyboard tabbing.
+
+
+
+## Customizing DataTable Styles
+
+The **DataTable** component offers extensive customization options through CSS, enabling adjustments to the appearance of various table elements.
+
+
+
+### Component-Specific CSS Classes
+
+The DataTable component supports a range of CSS classes, allowing customization of the appearance of headers, rows, cells, and columns. Below is a detailed list of supported CSS classes and the elements they apply to.
+
+#### Table Header Classes
+
+| **Class Name** | **Applies To** | **Description** |
+|------------------|-------------------------------|--------------------------------------------|
+| `.header` | The entire header | Styles the entire table header area. |
+| `.header-cell` | All header cells | Targets individual header cells. |
+| `.header-even` | Even-numbered header cells | Applies styles to header cells in even columns. |
+| `.header-qodlysourceName` | The header of a specific column | Targets the header of a specific column, where `qodlysourceName` refers to the associated data field (e.g., `.header-lastname`). |
+
+#### Table Row Classes
+
+| **Class Name** | **Applies To** | **Description** |
+|------------------|-------------------------------|--------------------------------------------|
+| `.row` | All rows | Applies styles to all rows in the table. |
+| `.selected` | The selected row | Highlights the currently selected row. |
+| `.row-even` | Even-numbered rows | Styles the even rows in the table. |
+| `.hover` | The hovered row | Styles the row that is currently hovered. |
+
+#### Table Cell Classes
+
+| **Class Name** | **Applies To** | **Description** |
+|------------------|-------------------------------|--------------------------------------------|
+| `.cell` | All cells | Targets all cells within the rows. |
+
+#### Table Column Classes
+
+| **Class Name** | **Applies To** | **Description** |
+|------------------|-------------------------------|--------------------------------------------|
+| `.col-qodlysourceName` | A specific column | Targets the column associated with a particular data field (e.g., `.col-lastname`). |
+| `.col-even` | Even-numbered columns | Styles columns that are even-numbered. |
+| `.sorted` | Sorted columns | Highlights columns that are sorted. |
+| `.sorted-asc` | Ascending sorted columns | Applies styles to columns sorted in ascending order. |
+| `.sorted-desc` | Descending sorted columns | Applies styles to columns sorted in descending order. |
+
+:::tip
+For fields associated with relationships, use a dash (`-`) instead of a dot (`.`) in class names (e.g., `.header-employer-name`).
+:::
+
+### Example 1 – Blue Headers
+
+This example customizes the DataTable to feature blue-colored headers with rounded borders, and shadow effects. Additionally, a soft blue background is applied to the header cells, and a light shade is used for even-numbered rows.
+
+
+
+
+```css
+self {
+ border-radius: 10px;
+ box-shadow: 0 0 40px 0 rgb(0 0 0 / 15%);
+}
+
+self .header .header-cell {
+ background-color: #6c7ae0;
+ color: #fff;
+ font-weight: bold;
+ padding: 1.25rem 2rem;
+}
+
+self .row {
+ align-items: center;
+}
+
+self .row .cell {
+ padding: 0.5rem 2rem;
+}
+
+self .row.selected {
+ background-color: #d2d7f5;
+}
+
+self .row-even:not(.selected):not(:hover) {
+ background-color: #f8f6ff;
+}
+```
+
+### Example 2 – Green Headers
+
+This example customizes the DataTable to feature a green color scheme, with specific styles for even-numbered header cells.
+
+
+
+```css
+self .header .header-cell {
+ background-color: #324960;
+ color: #fff;
+ font-weight: bold;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+self .header .header-even {
+ background-color: #4fc3a1;
+}
+
+self .row {
+ align-items: center;
+}
+
+self .row.selected {
+ background-color: #caede2;
+}
+```
+
+This example highlights alternating header cells with a green background and provides custom styling for selected rows.
+
+
+### Example 3 – Dark Mode DataTable
+
+This example demonstrates a dark mode design for the DataTable, where the background and text colors are adjusted for better visibility in low-light environments.
+
+
+
+```css
+self {
+ background-color: rgb(61, 54, 61);
+}
+
+self .row {
+ align-items: center;
+}
+
+self .header .header-cell {
+ background-color: transparent;
+ color: #fff;
+ font-size: 11px;
+ text-transform: uppercase;
+}
+
+self .row:hover .col-lastname {
+ color: #b474e4;
+ font-weight: bold;
+}
+```
+
+This dark theme provides a sleek and modern look, with specific styles applied to hovered rows and the `lastname` column.
+
+
+## Showcase
+
+Here's a glimpse of how the **DataTable** component will look and behave in action:
+
+
+
+:::info
+Customize the styles of the DataTable component by utilizing specific CSS classes that target various elements of the DataTable. For more details, refer to the section on [Customizing DataTable Styles](#customizing-datatable-styles).
+:::
+
+## Triggers and Events
+
+The **DataTable** component can respond to various events, enabling dynamic user experiences.
+
+Additional information including the **column number**, **row number**, and **column qodlysource name** are returned by the [`webEvent` command](https://developer.4d.com/docs/API/commands/webEvent) when called in an event function triggered by a **DataTable** component.
+
+Events that can trigger actions within the component include:
+
+|Event|Description|
+|---|---|
+|On Select| Calls for an action when an item within the component is selected. |
+|On Click| Calls for an action when the user clicks on the component. |
+|On DoubleClick| Calls for an action when the user double-clicks on the component. |
+|On HeaderClick| Calls for an action when the user clicks on the header of a column. |
+|On HeaderDoubleClick| Calls for an action when the user double-clicks on the header of a column. |
+|On CellClick| Calls for an action when the user clicks on a cell within the component. |
+|On CellDoubleClick| Calls for an action when the user double-clicks on a cell within the component. |
+|On Keyup| Calls for an action when a keyboard key is released while the component is in focus|
+|On KeyDown| Calls for an action when a keyboard key is pressed down while the component is in focus. |
+|On CellMouseEnter| Calls for an action when the user's mouse cursor enters a cell within the component.|
+|On MouseEnter| Calls for an action when the user's mouse cursor enters the area of the component.|
+|On MouseLeave| Calls for an action when the user's mouse cursor exits the area of the component.|
+
+
+
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/dialog.md b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/dialog.md
new file mode 100644
index 000000000..685aff39c
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/dialog.md
@@ -0,0 +1,215 @@
+---
+id: dialog
+title: Dialog
+---
+
+import Column from '@site/src/components/Column'
+
+
+
+A Dialog is an interactive, dynamic UI element designed as a popup overlay to streamline user engagement by rendering additional content or forms within the existing page context.
+
+
+## Dialog Creation
+
+To initiate a dialog, navigate to the edited Page header panel and select the `Dialogs` button .
+
+
+
+ Initially, it will indicate There are no configured Dialogs yet. However, once dialogs are created, they will be listed under this section.
+
+ To create a new dialog, click on the New dialog button within this panel.
+
+
+
+
+
+
+
+
+
+ This will trigger a modal where you can assign a name to the dialog.
+
+
+
+
+
+
+
+
+After naming and confirming with the create button, the new dialog will appear both in the dialog's list and within the outline view.
+
+
+
+
+
+
+
+
+
+
+
+:::info
+At runtime, dialogs are displayed at the center of the page.
+:::
+
+
+## Dialog Deletion
+
+There are two ways for removing Dialogs:
+
+
+
+ - Dialogs List: Click on the delete icon next to the dialog you intend to delete in the dialogs listt.
+
+
+
+
+
+
+
+
+
+ - Outline section: As an alternative method, dialogs can also be removed directly from the outline section..
+
+
+
+
+
+
+
+:::info
+
+
+
+ Regardless of the chosen method, a confirmation step is required in a follow-up modal to finalize the deletion process.
+
+
+
+
+
+
+:::
+
+
+## Dialog Renaming
+
+
+
+ To change the name of a dialog, select the edit icon next to the desired dialog in the dialogs list. This action activates the edit mode within the same interface, allowing you to rename the dialog.
+
+
+
+
+
+
+
+## Dialog Content Editing
+
+
+
+ To edit a dialog, select it from the dialog list in the header panel:
+
+
+
+
+
+
+
+
+ Or, access it via the outline:
+
+
+
+
+
+
+This will open the dialog within the current Page, providing a dedicated interface for modifying its content.
+
+:::info
+
+
+
+ The dialog that is currently being edited in the Page will be highlighted in the dialog list, making it easy to identify which dialog is under modification.
+
+
+
+
+
+
+:::
+
+
+Each dialog includes a style box that enables the integration and customization of various components. Components can be dragged and dropped directly into this style box, allowing for efficient customization of the dialog's appearance.
+
+
+
+
+:::tip
+To exit the dialog's editing mode, click the close button located at the top right corner.
+:::
+
+
+## Properties Customization
+
+Enhance the Dialog component to align with your application's requirements using the following customization options:
+
+
+
+
Overlay (Boolean): Activates a screen overlay when set to true.
+
Draggable (Boolean): Enables user-driven repositioning. Features a customizable move icon .
+
Closable (Boolean): Integrates a close function, operable via the button or by clicking outside the dialog (if overlay is enabled). Features a customizable close icon .
+
Animated: Implements an opening flicker effect for visual emphasis.
+
+
+
+
+
+
+
+
+## Server-Side Interaction
+
+Every dialog is uniquely named, which acts as its server-side reference for server-side interactions. This allows you to control the Dialog's behavior, such as [hiding](https://developer.4d.com/docs/API/WebFormItemClass#hide), [showing](https://developer.4d.com/docs/API/WebFormItemClass#show), [adding CSS classes](https://developer.4d.com/docs/API/WebFormItemClass#addcssclass), or [removing CSS classes](https://developer.4d.com/docs/API/WebFormItemClass#removecssclass) from it.
+
+:::tip
+Employing the `.show()` method triggers the `On Open` event, whereas utilizing `.hide()` triggers the `On Close` event.
+:::
+
+
+
+## Display and Customization
+
+The overlay style of dialogs can be further styled using the shared CSS class `fd-dialog-overlay`, such as:
+
+```css
+fd-dialog-overlay {
+ background-color: rgba(137, 43, 226, 50%);
+}
+```
+
+:::info
+This shared CSS class takes precedence and cannot be superseded by any locally defined classes of the same name.
+:::
+
+
+## Showcase
+
+Here's a glimpse of how the **Dialog** component will look and behave in action:
+
+
+
+
+## Triggers and Events
+
+The Dialog component can respond to various events, enabling dynamic user experiences. Events that can trigger actions within the component include:
+
+| Event | Description |
+|-----------|--------------------------------------------------------------|
+| On Init | Calls for an action when the dialog initially opens. It is used for the dialog's initialization. |
+| On Loaded | Calls for an action once the dialog has completely mounted/loaded, indicating readiness for interaction. |
+| On Close | Calls for an action to be performed just before the dialog is closed. |
+
+:::tip
+In scenarios where the `Dialog` includes a `Page Loader`, these events are triggered before the `On Load` actions of the `Page Loader`.
+:::
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/fileupload.md b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/fileupload.md
new file mode 100644
index 000000000..83ccc4b32
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/fileupload.md
@@ -0,0 +1,164 @@
+---
+id: fileupload
+title: File Upload
+---
+import Column from '@site/src/components/Column'
+
+
+The **File Upload** component is an interactive UI element that simplifies file transfers by allowing users to easily upload files to the server.
+
+
+:::info
+
+The **File Upload** component has an **Icon** element embedded within it. This is of great importance as configuring the **File Upload** component may require adjusting properties within the embedded element. This applies to the visual style, triggers, and actions as they may differ.
+
+:::
+
+
+## Use Cases
+
+The **File Upload** component finds valuable application in diverse scenarios, including:
+
+- **Document Management**: Facilitate efficient document uploads and storage for improved organization.
+
+- **Media Sharing**: Allow users to upload images, videos, or audio files for seamless sharing with others.
+
+- **File Archiving**: Provide users with a means to securely store and retrieve essential files or records.
+
+
+
+## Properties Customization
+
+### File Upload Component
+
+Enhance the **File Upload** component to align with your application's requirements using the following customization options:
+
+
+
+
+
Label: Personalize the label to offer clear instructions or guidance.
+
+
+
+
+
+
+
+
+
+
+
Icon Position: Choose the position of the icon in relation to the label, allowing options for top, bottom, left, right, or even hidden.
+
+
+
+
+
+
+
+
+
+
+
Size Limit: Define the maximum file size users are allowed to upload. Choose from units such as KB, MB, and GB.
+ If a user attempts to upload a file exceeding the specified size, an error message is displayed in the browser.
+
+
+
+
+
+
+
+
+
+
+
+
Media Type: Specify the supported file types that can be uploaded using the component. Supported types include text, image, video, and audio.
+
+
+
+
+
+
+
+
+### Embedded Icon
+
+Within the **File Upload** component, an embedded **Icon** allows for further customization of the following properties:
+
+
+
+
+
Icon: When the icon visibility is configured in the File Upload component's customization properties, you can select an icon from an icon picker list.
+
+
+
+
+
+
+
+## Data Integration
+
+The **File Upload** component uses data-binding to link user interactions with the underlying data structure.
+
+:::info
+The qodlysource for the **File Upload** component can take the form of either a `Blob` or a `Picture`.
+:::
+
+### Data Binding
+
+
+
+ Bind the component to an attribute of Blob or Picture type within an entity qodlysource. This specific attribute will serve as the storage location for the uploaded file.
+
+
+
+
+
+
+:::tip
+Alternatively, you can establish the connection by dragging and dropping the qodlysource onto the File Upload component.
+:::
+
+## Example: Sending the File and File Name
+
+To send both a file and its name to the database, the File Upload component must be bound to a Picture field (e.g., imageEntity.Content) within an entity. However, to capture the file name along with the file itself, you must also reference the entity in the action that handles the file upload.
+
+For example, in the "Send" button of your form, you can use a function with two parameters:
+
+uploadImage(imageEntity, imageEntity.Content)
+
+To implement this, your function should retrieve the picture from imageEntity.Content and the file name from the object (e.g., OB Get($oImage; "path")), then save both to a new entity instance.
+
+## Showcase
+
+Here's a glimpse of how the **File Upload** component will look and behave in action:
+
+
+
+
+## Triggers and Events
+
+### File Upload Component
+
+The **File Upload** component can respond to various events, enabling dynamic user experiences. Events that can trigger actions within the component include:
+
+|Event|Description|
+|---|---|
+|On Click| Calls for an action when the user clicks on the component. |
+|On Blur| Calls for an action when the component loses focus (user clicks outside). |
+|On Focus| Calls for an action when the component gains focus (user clicks on it). |
+|On MouseEnter| Calls for an action when the user's mouse cursor enters the area of the component.|
+|On MouseLeave| Calls for an action when the user's mouse cursor exits the area of the component.|
+|On KeyDown| Calls for an action when a keyboard key is pressed down while the component is in focus. |
+|On Keyup| Calls for an action when a keyboard key is released while the component is in focus|
+
+### Embedded Icon
+
+The embedded **Icon** can also respond to various events, allowing for dynamic user experiences. Events that can trigger actions within the embedded icon include:
+
+|Event|Description|
+|---|---|
+|On Click| Calls for an action when the user clicks on the Icon. |
+|On Keyup| Calls for an action when a keyboard key is released while the Icon is in focus|
+|On KeyDown| Calls for an action when a keyboard key is pressed down while the Icon is in focus. |
+|On MouseEnter| Calls for an action when the user's mouse cursor enters the area of the Icon.|
+|On MouseLeave| Calls for an action when the user's mouse cursor exits the area of the Icon.|
\ No newline at end of file
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/icon.md b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/icon.md
new file mode 100644
index 000000000..cc16aaab0
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/icon.md
@@ -0,0 +1,52 @@
+---
+id: icon
+title: Icon
+---
+import Column from '@site/src/components/Column'
+
+The **Icon** component is a UI element that displays graphical symbols or icons in web applications.
+
+
+## Use Cases
+
+The **Icon** component serves various purposes within user interfaces, including:
+
+- **Action Indicators**: Icons are used to represent actions, such as "Save," "Delete," or "Print".
+
+- **Navigation Enhancements**: Icons can be employed to enhance navigation by representing menu items, links, or categories.
+
+- **Information Presentation**: Icons are utilized to visually convey information, such as alerts, warnings, or success messages.
+
+
+## Properties Customization
+
+Enhance the **Icon** component to align with your application's requirements using the following customization options:
+
+
+
+
+
Icon: Select the desired icon from a predefined list of icons.
+
+
+
+
+
+
+
+
+## Data Integration
+
+When it comes to data-binding, it's important to note that the **Icon** component itself is not inherently data-bound. Unlike components like the **DataTable** that derive their content from specified qodlysources, the main purpose of the **Icon** component is to provide a visual representation.
+
+
+## Triggers and Events
+
+The **Icon** component can respond to various events, enabling dynamic user experiences. Events that can trigger actions within the component include:
+
+|Event|Description|
+|---|---|
+|On Click| Calls for an action when the user clicks on the component. |
+|On Keyup| Calls for an action when a keyboard key is released while the component is in focus|
+|On KeyDown| Calls for an action when a keyboard key is pressed down while the component is in focus. |
+|On MouseEnter| Calls for an action when the user's mouse cursor enters the area of the component.|
+|On MouseLeave| Calls for an action when the user's mouse cursor exits the area of the component.|
\ No newline at end of file
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/image.md b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/image.md
new file mode 100644
index 000000000..05ccfba23
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/image.md
@@ -0,0 +1,97 @@
+---
+id: image
+title: Image
+---
+import Column from '@site/src/components/Column'
+
+
+The **Image** component is a UI element that enables you to integrate images into your Page.
+
+## Use Cases
+
+The **Image** component offers versatile solutions for enhancing your web application's visual experience:
+
+- **Static Images**: Display fixed visual elements, such as logos, icons, and decorative images.
+- **Dynamic Content**: Display dynamic content fetched from qodlysources.
+- **Data Visualization**: Display charts, graphs, and diagrams as images, enabling the visualization of complex data in a more accessible and engaging manner.
+
+
+## Display Options
+
+The **Image** component offers multiple options for displaying images.
+
+### Qodly Source Binding
+
+
+
+ You can bind the Image component to a qodlysource of type image, causing the displayed image to update according to the value within the qodlysource.
+
+
+
+
+
+
+
+### Image Source
+
+
+
+ Alternatively, you can specify an image source directly. This source can be a URL or a path to the image stored in the Shared folder.
+
+
+
+
+
+
+:::info
+For instance, if you've uploaded an image named "booking.png" in a "visuals" folder, you can set the image source as `/$shared/visuals/booking.png`.
+:::
+
+
+## Image Management
+
+### Direct Image Upload
+
+The Image component simplifies the process of adding new images. By clicking on the image component and uploading the desired picture, the image is automatically added to the Shared folder's /$shared/assets/images subdirectory. The component's image source is updated accordingly.
+
+
+:::tip
+Alternatively, you can establish the connection by dragging and dropping an image qodlysource onto the Page, which will automatically add an Image component with the qodlysource bound to it.
+:::
+
+
+### Default Image Source
+
+
+
+
+ Qodly displays a "missing image" placeholder in the Image component when the bound image qodlysource is null, such as when the "photo" attribute of an "Employee" entity has not been uploaded:
+
+
+
+
+
+
+
+
+
+ Use the Default Image Source property to define your own default image, allowing you to replace the standard placeholder with a custom image that fits your application's aesthetics or branding:
+
+
+
+
+
+
+### Drag and Drop from Shared Folder
+
+The Image component supports a drag and drop functionality that allows users to move images directly from a shared folder to become the image source. This feature is particularly useful for rapidly updating the image souce without the need for navigating through files.
+
+## Triggers and Events
+
+The **Image** component can respond to various events, enabling dynamic user experiences. Events that can trigger actions within the component include:
+
+|Event|Description|
+|---|---|
+|On Click| Calls for an action when the user clicks on the component. |
+|On MouseEnter| Calls for an action when the user's mouse cursor enters the area of the component. |
+|On MouseLeave| Calls for an action when the user's mouse cursor exits the area of the component. |
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/BlueHeaders.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/BlueHeaders.png
new file mode 100644
index 000000000..50cca574a
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/BlueHeaders.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/Dark-mode.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/Dark-mode.png
new file mode 100644
index 000000000..0b17c960b
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/Dark-mode.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/GreenHeaders.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/GreenHeaders.png
new file mode 100644
index 000000000..f46246b2a
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/GreenHeaders.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/Matrix_EmbeddedStylebox.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/Matrix_EmbeddedStylebox.png
new file mode 100644
index 000000000..79a0e961a
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/Matrix_EmbeddedStylebox.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/SelectBox_EmbeddedStylebox.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/SelectBox_EmbeddedStylebox.png
new file mode 100644
index 000000000..20ed70c98
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/SelectBox_EmbeddedStylebox.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/Tabs_EmbeddedStylebox.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/Tabs_EmbeddedStylebox.png
new file mode 100644
index 000000000..f7cbb6c05
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/Tabs_EmbeddedStylebox.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/addingComponents.gif b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/addingComponents.gif
new file mode 100644
index 000000000..7fe4668b7
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/addingComponents.gif differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/arrange.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/arrange.png
new file mode 100644
index 000000000..dc8025493
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/arrange.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/button_PropertiesCustomization.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/button_PropertiesCustomization.png
new file mode 100644
index 000000000..c357bc7c4
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/button_PropertiesCustomization.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/button_icon.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/button_icon.png
new file mode 100644
index 000000000..159a65ec4
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/button_icon.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/button_style1.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/button_style1.png
new file mode 100644
index 000000000..427c398a3
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/button_style1.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/button_style2.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/button_style2.png
new file mode 100644
index 000000000..9d4ae81e6
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/button_style2.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/checkbox_Size.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/checkbox_Size.png
new file mode 100644
index 000000000..7714c325e
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/checkbox_Size.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/checkbox_TypeSelection.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/checkbox_TypeSelection.png
new file mode 100644
index 000000000..5e5453855
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/checkbox_TypeSelection.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/checkbox_VariantSelection.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/checkbox_VariantSelection.png
new file mode 100644
index 000000000..d1c88ce35
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/checkbox_VariantSelection.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/checkbox__style1.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/checkbox__style1.png
new file mode 100644
index 000000000..75dcb039e
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/checkbox__style1.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/checkbox__style2.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/checkbox__style2.png
new file mode 100644
index 000000000..c066887b6
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/checkbox__style2.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/checkbox__style3.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/checkbox__style3.png
new file mode 100644
index 000000000..a3f7b0a8f
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/checkbox__style3.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/checkbox__style4.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/checkbox__style4.png
new file mode 100644
index 000000000..31589bc88
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/checkbox__style4.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/currrentElem.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/currrentElem.png
new file mode 100644
index 000000000..36edbd4f4
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/currrentElem.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_1.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_1.png
new file mode 100644
index 000000000..d326e25e5
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_1.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_10.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_10.png
new file mode 100644
index 000000000..12cd42527
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_10.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_11.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_11.png
new file mode 100644
index 000000000..6be4295c5
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_11.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_2.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_2.png
new file mode 100644
index 000000000..68010b4e0
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_2.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_3.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_3.png
new file mode 100644
index 000000000..ce96ac66f
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_3.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_4.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_4.png
new file mode 100644
index 000000000..e4dc56750
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_4.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_5.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_5.png
new file mode 100644
index 000000000..62f81af6c
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_5.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_6.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_6.png
new file mode 100644
index 000000000..ab2e2493f
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_6.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_7.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_7.png
new file mode 100644
index 000000000..d7dcaa5d7
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_7.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_8.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_8.png
new file mode 100644
index 000000000..0ed1b49b5
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_8.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_9.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_9.png
new file mode 100644
index 000000000..edff78f73
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/customComponent_9.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_ColumnsArea.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_ColumnsArea.png
new file mode 100644
index 000000000..fd8e88621
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_ColumnsArea.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_DataBinding.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_DataBinding.png
new file mode 100644
index 000000000..8bb820183
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_DataBinding.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_HeaderHeight.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_HeaderHeight.png
new file mode 100644
index 000000000..c88f47ff6
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_HeaderHeight.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_Preview.gif b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_Preview.gif
new file mode 100644
index 000000000..03cafbb70
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_Preview.gif differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_RowHeight.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_RowHeight.png
new file mode 100644
index 000000000..dc033735b
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_RowHeight.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_ShowBorders.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_ShowBorders.png
new file mode 100644
index 000000000..0ca482839
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_ShowBorders.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_SortingBehavior.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_SortingBehavior.png
new file mode 100644
index 000000000..92e3adde0
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_SortingBehavior.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_rearrange.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_rearrange.png
new file mode 100644
index 000000000..6aadab6d8
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_rearrange.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_resize.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_resize.png
new file mode 100644
index 000000000..3d5711c3d
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_resize.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_sort.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_sort.png
new file mode 100644
index 000000000..49760bd18
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dataTable_sort.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/datatable-schema.jpg b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/datatable-schema.jpg
new file mode 100644
index 000000000..6c26ccad5
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/datatable-schema.jpg differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/delete.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/delete.png
new file mode 100644
index 000000000..3cda0ea90
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/delete.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogClosable.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogClosable.png
new file mode 100644
index 000000000..a3c4ea81c
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogClosable.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogCreationModal.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogCreationModal.png
new file mode 100644
index 000000000..f71884582
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogCreationModal.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogDelete1.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogDelete1.png
new file mode 100644
index 000000000..ca265ccbb
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogDelete1.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogDelete2.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogDelete2.png
new file mode 100644
index 000000000..0b9cbf94b
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogDelete2.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogDelete3.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogDelete3.png
new file mode 100644
index 000000000..9c902934f
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogDelete3.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogDelete4.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogDelete4.png
new file mode 100644
index 000000000..4eafda88e
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogDelete4.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogDraggable.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogDraggable.png
new file mode 100644
index 000000000..8bd098d61
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogDraggable.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogEdit1.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogEdit1.png
new file mode 100644
index 000000000..c508e97af
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogEdit1.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogEdit2.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogEdit2.png
new file mode 100644
index 000000000..8041eccb7
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogEdit2.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogEdit3.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogEdit3.png
new file mode 100644
index 000000000..89fba18de
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogEdit3.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogEdit4.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogEdit4.png
new file mode 100644
index 000000000..099906e71
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogEdit4.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogEditOutline.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogEditOutline.png
new file mode 100644
index 000000000..7724fc36d
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogEditOutline.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogProperties.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogProperties.png
new file mode 100644
index 000000000..0a138ec4a
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogProperties.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogRename1.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogRename1.png
new file mode 100644
index 000000000..b9a0b69e5
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogRename1.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogRename2.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogRename2.png
new file mode 100644
index 000000000..a51f2e7fe
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogRename2.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialog_Preview.gif b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialog_Preview.gif
new file mode 100644
index 000000000..96a14e063
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialog_Preview.gif differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogs.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogs.png
new file mode 100644
index 000000000..4d3291c14
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogs.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogsList.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogsList.png
new file mode 100644
index 000000000..5a115123d
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogsList.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogsOutline.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogsOutline.png
new file mode 100644
index 000000000..8e67eb478
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dialogsOutline.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/duplicate.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/duplicate.png
new file mode 100644
index 000000000..b089dd029
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/duplicate.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dynamicAttributeDisplay_SelectedElement.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dynamicAttributeDisplay_SelectedElement.png
new file mode 100644
index 000000000..66a74a4c8
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dynamicAttributeDisplay_SelectedElement.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dynamicAttributeDisplay_attributeValue.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dynamicAttributeDisplay_attributeValue.png
new file mode 100644
index 000000000..042b79763
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/dynamicAttributeDisplay_attributeValue.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/fileUpload_IconPosition.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/fileUpload_IconPosition.png
new file mode 100644
index 000000000..6e60482bd
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/fileUpload_IconPosition.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/fileUpload_Label.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/fileUpload_Label.png
new file mode 100644
index 000000000..a8f01e3d3
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/fileUpload_Label.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/fileUpload_MediaType.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/fileUpload_MediaType.png
new file mode 100644
index 000000000..9dfa583f4
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/fileUpload_MediaType.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/fileUpload_Preview.gif b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/fileUpload_Preview.gif
new file mode 100644
index 000000000..8fb1441b4
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/fileUpload_Preview.gif differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/fileUpload_SizLimitError.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/fileUpload_SizLimitError.png
new file mode 100644
index 000000000..2c67a4260
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/fileUpload_SizLimitError.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/fileUpload_SizeLimit.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/fileUpload_SizeLimit.png
new file mode 100644
index 000000000..498562436
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/fileUpload_SizeLimit.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/fileUpload_dataBinding.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/fileUpload_dataBinding.png
new file mode 100644
index 000000000..7332518f5
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/fileUpload_dataBinding.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/format_duration.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/format_duration.png
new file mode 100644
index 000000000..53e9a4c0b
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/format_duration.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/formats.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/formats.png
new file mode 100644
index 000000000..12b091f4c
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/formats.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/image_Default.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/image_Default.png
new file mode 100644
index 000000000..b734be910
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/image_Default.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/image_Default_factory.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/image_Default_factory.png
new file mode 100644
index 000000000..79983bea6
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/image_Default_factory.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/image_ImageSource.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/image_ImageSource.png
new file mode 100644
index 000000000..346d88a1e
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/image_ImageSource.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/image_QodlySourceBinding.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/image_QodlySourceBinding.png
new file mode 100644
index 000000000..2939eaff1
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/image_QodlySourceBinding.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/includeDateRange.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/includeDateRange.png
new file mode 100644
index 000000000..c109cdf48
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/includeDateRange.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_date.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_date.png
new file mode 100644
index 000000000..ad11d30c5
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_date.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_dateIntervals1.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_dateIntervals1.png
new file mode 100644
index 000000000..482ddecb4
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_dateIntervals1.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_dateIntervals2.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_dateIntervals2.png
new file mode 100644
index 000000000..a3e1a49a8
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_dateIntervals2.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_dateWeekStarts.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_dateWeekStarts.png
new file mode 100644
index 000000000..db7f0d74a
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_dateWeekStarts.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_duration.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_duration.png
new file mode 100644
index 000000000..42a3d04b2
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_duration.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_number.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_number.png
new file mode 100644
index 000000000..b8bc2a543
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_number.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_password.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_password.png
new file mode 100644
index 000000000..8f0ab4cb4
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_password.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_passwordIconPosition.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_passwordIconPosition.png
new file mode 100644
index 000000000..4d2ad4f4d
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_passwordIconPosition.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_passwordTooltip.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_passwordTooltip.png
new file mode 100644
index 000000000..7f19e7df5
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_passwordTooltip.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_passwordTooltip2.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_passwordTooltip2.png
new file mode 100644
index 000000000..9ed7485c0
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_passwordTooltip2.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_passwordTooltip3.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_passwordTooltip3.png
new file mode 100644
index 000000000..cc838c413
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_passwordTooltip3.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_text.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_text.png
new file mode 100644
index 000000000..a086b1168
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_text.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_textArea.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_textArea.png
new file mode 100644
index 000000000..676df3476
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_textArea.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_time.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_time.png
new file mode 100644
index 000000000..e00d30ee1
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/inputType_time.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/intervalCardToggle.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/intervalCardToggle.png
new file mode 100644
index 000000000..23a992476
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/intervalCardToggle.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/locatingComponents.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/locatingComponents.png
new file mode 100644
index 000000000..0cf39efc5
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/locatingComponents.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrixCustomizableScrollPositioning.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrixCustomizableScrollPositioning.png
new file mode 100644
index 000000000..800442edd
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrixCustomizableScrollPositioning.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_DataBinding.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_DataBinding.png
new file mode 100644
index 000000000..f037fdd19
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_DataBinding.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_DataDisplay.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_DataDisplay.png
new file mode 100644
index 000000000..854fc65eb
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_DataDisplay.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_DataDisplay_embeddedMatrix.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_DataDisplay_embeddedMatrix.png
new file mode 100644
index 000000000..9200cba2c
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_DataDisplay_embeddedMatrix.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_Preview.gif b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_Preview.gif
new file mode 100644
index 000000000..849848c9c
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_Preview.gif differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_ServerSideInteraction_RelatedEntity.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_ServerSideInteraction_RelatedEntity.png
new file mode 100644
index 000000000..f5ef9be49
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_ServerSideInteraction_RelatedEntity.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_fdVirtualGrid.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_fdVirtualGrid.png
new file mode 100644
index 000000000..77fa949e6
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_fdVirtualGrid.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_hover.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_hover.png
new file mode 100644
index 000000000..261a1d45e
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_hover.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_innerScrollContainer.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_innerScrollContainer.png
new file mode 100644
index 000000000..7a90b290b
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_innerScrollContainer.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_orientations.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_orientations.png
new file mode 100644
index 000000000..221d4cc11
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_orientations.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_schema.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_schema.png
new file mode 100644
index 000000000..d79b965d1
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_schema.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_selected.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_selected.png
new file mode 100644
index 000000000..5f0cc7715
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/matrix_selected.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/noConfiguredDialogs.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/noConfiguredDialogs.png
new file mode 100644
index 000000000..c35c6a8d1
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/noConfiguredDialogs.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/pageloader_DirectConfiguration.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/pageloader_DirectConfiguration.png
new file mode 100644
index 000000000..d4bd43870
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/pageloader_DirectConfiguration.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/pageloader_DynamicBinding.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/pageloader_DynamicBinding.png
new file mode 100644
index 000000000..b177b6ebf
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/pageloader_DynamicBinding.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/pageloader_InitialValue.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/pageloader_InitialValue.png
new file mode 100644
index 000000000..544ec91cc
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/pageloader_InitialValue.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/pageloader_Navigation.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/pageloader_Navigation.png
new file mode 100644
index 000000000..cd943b116
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/pageloader_Navigation.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/pageloader_Navigation_Preview.gif b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/pageloader_Navigation_Preview.gif
new file mode 100644
index 000000000..c375859e1
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/pageloader_Navigation_Preview.gif differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_DataBinding.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_DataBinding.png
new file mode 100644
index 000000000..f262a813e
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_DataBinding.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_Options.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_Options.png
new file mode 100644
index 000000000..f864ea923
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_Options.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_Preview.gif b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_Preview.gif
new file mode 100644
index 000000000..e02cbee50
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_Preview.gif differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_defaultValue.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_defaultValue.png
new file mode 100644
index 000000000..6affb2332
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_defaultValue.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_fd-radio__item.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_fd-radio__item.png
new file mode 100644
index 000000000..b61a9acf8
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_fd-radio__item.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_fd-radio__item_hovered.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_fd-radio__item_hovered.png
new file mode 100644
index 000000000..27d90eb18
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_fd-radio__item_hovered.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_fd-radio__item_selected.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_fd-radio__item_selected.png
new file mode 100644
index 000000000..7d7c24c19
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_fd-radio__item_selected.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_mode.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_mode.png
new file mode 100644
index 000000000..6347e88f4
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_mode.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_standardAction.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_standardAction.png
new file mode 100644
index 000000000..360ec470f
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_standardAction.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_type.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_type.png
new file mode 100644
index 000000000..a4804609b
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/radio_type.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_DataDisplay.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_DataDisplay.png
new file mode 100644
index 000000000..148ebb488
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_DataDisplay.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_LabelPosition.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_LabelPosition.png
new file mode 100644
index 000000000..c5788149f
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_LabelPosition.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_orientation.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_orientation.png
new file mode 100644
index 000000000..19aab3597
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_orientation.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_sliderProperties.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_sliderProperties.png
new file mode 100644
index 000000000..ff5c44ea6
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_sliderProperties.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_style1.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_style1.png
new file mode 100644
index 000000000..98c3edf52
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_style1.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_style2.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_style2.png
new file mode 100644
index 000000000..ccbbee447
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_style2.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_style3.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_style3.png
new file mode 100644
index 000000000..1f28094b4
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_style3.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_style4.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_style4.png
new file mode 100644
index 000000000..1f8125b74
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_style4.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_style5.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_style5.png
new file mode 100644
index 000000000..f183051a1
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_style5.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_style6.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_style6.png
new file mode 100644
index 000000000..b20ea6467
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeInput_style6.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeIntervalInconsistentDates.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeIntervalInconsistentDates.png
new file mode 100644
index 000000000..8d16deaf3
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/rangeIntervalInconsistentDates.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectBox_DataBinding.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectBox_DataBinding.png
new file mode 100644
index 000000000..4448a6913
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectBox_DataBinding.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectBox_DataDisplay.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectBox_DataDisplay.png
new file mode 100644
index 000000000..9a5810bb9
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectBox_DataDisplay.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectBox_EnableSearch.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectBox_EnableSearch.png
new file mode 100644
index 000000000..66de81691
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectBox_EnableSearch.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectBox_NumberOfItems.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectBox_NumberOfItems.png
new file mode 100644
index 000000000..df4c70518
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectBox_NumberOfItems.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectBox_Placeholder.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectBox_Placeholder.png
new file mode 100644
index 000000000..9763891ce
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectBox_Placeholder.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectBox_Preview.gif b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectBox_Preview.gif
new file mode 100644
index 000000000..7baf6f02f
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectBox_Preview.gif differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectBox_ServerSideInteraction_RelatedEntity.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectBox_ServerSideInteraction_RelatedEntity.png
new file mode 100644
index 000000000..624f6da12
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectBox_ServerSideInteraction_RelatedEntity.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectBox_ShowLength.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectBox_ShowLength.png
new file mode 100644
index 000000000..9e13b16f4
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectBox_ShowLength.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectInput_DataBinding.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectInput_DataBinding.png
new file mode 100644
index 000000000..48564e821
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectInput_DataBinding.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectInput_Options.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectInput_Options.png
new file mode 100644
index 000000000..19c7107f7
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectInput_Options.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectInput_Preview.gif b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectInput_Preview.gif
new file mode 100644
index 000000000..def3168fe
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectInput_Preview.gif differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectInput_option.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectInput_option.png
new file mode 100644
index 000000000..50645a922
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectInput_option.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectInput_option_checked.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectInput_option_checked.png
new file mode 100644
index 000000000..80059dc44
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectInput_option_checked.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectInput_select.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectInput_select.png
new file mode 100644
index 000000000..9cd8b9aad
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectInput_select.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectInput_standardAction.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectInput_standardAction.png
new file mode 100644
index 000000000..221db7880
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectInput_standardAction.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectbox_container.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectbox_container.png
new file mode 100644
index 000000000..340b8256c
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectbox_container.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectbox_container_hover.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectbox_container_hover.png
new file mode 100644
index 000000000..9ac9460d2
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectbox_container_hover.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectbox_fd_virtual_list.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectbox_fd_virtual_list.png
new file mode 100644
index 000000000..551e2fad9
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectbox_fd_virtual_list.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectbox_menu_wrapper.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectbox_menu_wrapper.png
new file mode 100644
index 000000000..c1bbd6411
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectbox_menu_wrapper.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectbox_wrapper.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectbox_wrapper.png
new file mode 100644
index 000000000..8565bbf36
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/selectbox_wrapper.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/styleBox_dataBinding_entityAttribute.gif b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/styleBox_dataBinding_entityAttribute.gif
new file mode 100644
index 000000000..f01d46f69
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/styleBox_dataBinding_entityAttribute.gif differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/styleBox_dataBinding_length.gif b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/styleBox_dataBinding_length.gif
new file mode 100644
index 000000000..8f35744d3
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/styleBox_dataBinding_length.gif differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/tab_CanvasAddition.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/tab_CanvasAddition.png
new file mode 100644
index 000000000..47238fc25
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/tab_CanvasAddition.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/tabs_PlusButtonAddition.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/tabs_PlusButtonAddition.png
new file mode 100644
index 000000000..dadf19141
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/tabs_PlusButtonAddition.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/tabs_Preview.gif b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/tabs_Preview.gif
new file mode 100644
index 000000000..243a427c8
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/tabs_Preview.gif differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/tabs_VariantSelection.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/tabs_VariantSelection.png
new file mode 100644
index 000000000..cfe98cb13
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/tabs_VariantSelection.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput24HourFormat.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput24HourFormat.png
new file mode 100644
index 000000000..9aaf53ecf
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput24HourFormat.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_DataBinding.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_DataBinding.png
new file mode 100644
index 000000000..6a9a6d641
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_DataBinding.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_DataDisplay.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_DataDisplay.png
new file mode 100644
index 000000000..56f3f51ef
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_DataDisplay.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_InputCustomization.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_InputCustomization.png
new file mode 100644
index 000000000..96dc6d118
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_InputCustomization.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_InputFomat_Date.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_InputFomat_Date.png
new file mode 100644
index 000000000..357b7082f
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_InputFomat_Date.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_InputFomat_Number.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_InputFomat_Number.png
new file mode 100644
index 000000000..576909295
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_InputFomat_Number.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_InputFomat_Text.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_InputFomat_Text.png
new file mode 100644
index 000000000..c9f6a0078
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_InputFomat_Text.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_InputFomat_Time.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_InputFomat_Time.png
new file mode 100644
index 000000000..bc97263b3
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_InputFomat_Time.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_InputFormat.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_InputFormat.png
new file mode 100644
index 000000000..d477a4709
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_InputFormat.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_LabelPosition.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_LabelPosition.png
new file mode 100644
index 000000000..c04414803
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_LabelPosition.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_Server-SideInteraction.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_Server-SideInteraction.png
new file mode 100644
index 000000000..9c3593a71
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_Server-SideInteraction.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_am_pm.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_am_pm.png
new file mode 100644
index 000000000..b16e8b22d
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_am_pm.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_label.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_label.png
new file mode 100644
index 000000000..49e8cab33
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_label.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_readonly.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_readonly.png
new file mode 100644
index 000000000..9fd3878b5
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_readonly.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_standardAction.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_standardAction.png
new file mode 100644
index 000000000..ca114f976
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_standardAction.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_style1.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_style1.png
new file mode 100644
index 000000000..9e7f9d8bd
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_style1.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_style2.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_style2.png
new file mode 100644
index 000000000..6132cf6c2
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_style2.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_style3.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_style3.png
new file mode 100644
index 000000000..7675455ee
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_style3.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_style4.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_style4.png
new file mode 100644
index 000000000..c3addf415
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/textInput_style4.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/text_Display_Flex.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/text_Display_Flex.png
new file mode 100644
index 000000000..edd7ff1eb
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/text_Display_Flex.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/text_FormatSupport.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/text_FormatSupport.png
new file mode 100644
index 000000000..52b1cccb8
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/text_FormatSupport.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/text_PropertiesCustomization.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/text_PropertiesCustomization.png
new file mode 100644
index 000000000..6e8ba65bd
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/text_PropertiesCustomization.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/text_StyleButtons.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/text_StyleButtons.png
new file mode 100644
index 000000000..65322538b
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/text_StyleButtons.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/text_ToggleLink.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/text_ToggleLink.png
new file mode 100644
index 000000000..9d90bf471
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/text_ToggleLink.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/text_ToggleqodlySource.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/text_ToggleqodlySource.png
new file mode 100644
index 000000000..dff1f0cbb
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/text_ToggleqodlySource.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/thumb-display.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/thumb-display.png
new file mode 100644
index 000000000..02b5c4018
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/thumb-display.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/thumb.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/thumb.png
new file mode 100644
index 000000000..1448dafc5
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/thumb.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/tooltip2.png b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/tooltip2.png
new file mode 100644
index 000000000..5d618df5c
Binary files /dev/null and b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/img/tooltip2.png differ
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/matrix.md b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/matrix.md
new file mode 100644
index 000000000..ebc788687
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/matrix.md
@@ -0,0 +1,266 @@
+---
+id: matrix
+title: Matrix
+---
+import Column from '@site/src/components/Column'
+
+
+The **Matrix** component is a UI element designed to display a dynamic array of Stylebox components.
+
+:::info
+
+Categorized under iterative components, the **Matrix** component is specialized in showcasing dynamic arrays of **Stylebox** components based on the component's designated qodlysource.
+
+:::
+
+
+Upon being placed on the canvas, the Matrix component includes a single Stylebox component, and this Stylebox is duplicated for each iteration of data.
+
+
+## Use Cases
+
+The **Matrix** component finds application in various scenarios where data needs to be displayed iteratively and can be customized. Common use cases include:
+
+- **Product Gallery**: Create an interactive product gallery where each Stylebox represents a product with its image, name, and price.
+
+- **News Feed**: Design a dynamic news feed by using the Matrix component to iterate over news articles. Each Stylebox can display the headline and a brief excerpt.
+
+- **User Profile Showcase**: Build a user profile showcase where the Matrix iterates over user profiles, displaying profile images and usernames.
+
+
+## Properties Customization
+
+Enhance the **Matrix** component to align with your application's requirements using the following customization options:
+
+- **Orientation**: Developers can choose between horizontal and vertical orientations for the Matrix. This choice affects the arrangement of Stylebox components and the presence of scrollbars.
+
+
+
+
+
Vertical Orientation (Default): By default, the Matrix component is oriented vertically. This means that Stylebox components are stacked from top to bottom. If the content surpasses the defined height, a vertical scrollbar will automatically be shown, facilitating vertical scrolling to access all the content.
+
Horizontal Orientation: When the Matrix component is configured with a horizontal orientation, Stylebox components are arranged from left to right. If the content exceeds the available width, a horizontal scrollbar will automatically appear, enabling users to scroll through the content horizontally.
+
+
+
+
+
+
+
+- **Selection Behavior**: Defines how the Matrix component behaves after data is updated, such as after reloading or applying a filter. Developers can choose from different behaviors to control how the Matrix scrolls and whether an element is automatically selected.
+
+
+
+
+
Select & Scroll First: With this option, the Matrix automatically scrolls to the top and selects the first element whenever data is reloaded or filtered.
+
Select & Scroll Current (Default): By default, the Matrix scrolls to the currently selected item and keeps it in view after a data update.
+
No Select: With this option, the Matrix retains its current scroll position and does not auto-select any element after a data update. Use this option when you want full control over selection. It's ideal when you're manually setting the selected item—for example, by calling a function or using a standard action that updates the selected element datasource yourself.
+
+
+
+
+
+
+
+:::info
+The Selection Behavior option is only visible if the currently selected element in the Matrix is filled.
+:::
+
+## Data Integration
+
+The **Matrix** component is data-bound, meaning it relies on an external qodlysource to populate its options. This allows the component to display and interact with data.
+
+:::info
+The qodlysource for the **Matrix** component can take the form of either an `ORDA entity selection` or an `array`.
+:::
+
+### Data Binding
+
+To associate data with the **Matrix** component, follow these steps:
+
+
+
+
+
Navigate to the Properties Panel: Access the Data Access category located within the Properties panel for the Matrix component.
+
Define the Qodly Source: Specify the appropriate qodlysource that contains the data you want to display within the Matrix. For instance, you can select an entity selection from a relevant dataclass, such as roomSelection.
+
+
+
+
+
+
+
+:::tip
+Alternatively, you can establish the connection by dragging and dropping the qodlysource onto the Matrix component.
+:::
+
+### Data Display
+
+To display data iterated over a Qodly Source, you can follow these additional steps:
+
+1. **Access the Matrix**: Within the Matrix component, locate the embedded Stylebox.
+2. **Add a Component**: Add a Text component or other relevant components within the Stylebox.
+
+
+3. **Configure the Component**: Click on the component you've added to enter its editing mode. The process of configuring components varies based on their type:
+
+ - **Toggle Qodly Source**: Prepare to connect the component to the qodlysource in the next step by using the `Toggle Qodly Source` button.
+
+ - **Properties Panel**: In the next step, you'll configure them through the `Data Access` category in the Properties panel.
+
+4. **Choose the Iterator**: Choose the iterator corresponding to the iterated data (e.g., $This) to represent the current data item.
+
+
+5. **Choose the Attribute**: Once you've selected the iterator, choose the specific attribute that you want to display within the component. This could include related entity selections. For example, use an embedded Matrix within the same Matrix to present various choices like room options (with/without breakfast).
+
+
+
+### Dynamic Attribute Display
+
+
+
+
+ The Matrix component can link its currently selected entity to a qodlysource in the Selected Element field. This feature allows the component to automatically display the attributes of the selected element whenever a new entity is chosen.
+
+
+
+
+
+
+
+
+ These attributes can be showcased in other configured components, such as a Text component, to display the corresponding attribute values.
+
+
+
+
+
+
+### Server-Side Interaction
+
+You can associate functions with embedded components in the **Matrix** component using `$This`. This capability enables the execution of functions from the entity class of the qodlysource that is providing data and being iterated upon in response to event triggers, such as button clicks.
+
+
+To implement this functionality, follow these steps:
+
+
+
+
+
Integrate the Matrix component into the interface.
+
Select a Qodly Source like Rooms for the Matrix.
+
Embed a component (e.g., a button) within the Matrix for each iterated data.
+
Bind the desired function, like selectRoomOption, to the component's event, such as a button click, using $This.
+
In the code editor, within the function, you can directly retrieve the data of the currently selected element without the need to pass the selected element qodlysource as a parameter to the function.
+
+
+
+
+
+
+
+
+:::tip
+The same principle applies to Related Entity Interaction when you have embedded Matrices within the primary Matrix to manage each iterated data. You can link the intended function to the embedded Matrix's component event using `$This`.
+:::
+
+## Customizing Matrix Styles
+
+The **Matrix** component offers additional customization options through CSS, allowing the personalization of the appearance of matrix elements.
+
+
+### Understanding Matrix CSS Classes
+
+The Matrix component supports a range of CSS classes, enabling customization of the appearance of the inner scroll container, the virtual grid and the default styleboxes. Below is a detailed list of supported CSS classes and the elements they apply to.
+
+#### Matrix Classes
+
+| **Class Name** | **Applies To** | **Description** |
+|------------------|-------------------------------|--------------------------------------------|
+| `.FdVirtualGrid` | The entire matrix | Styles the entire matrix area. |
+| `.innerScrollContainer` | All the default styleboxes in the matrix | Targets all the [default styleboxes](stylebox.md#enhancing-content-presentation) incorporated in the matrix. |
+| `.innerScrollContainer > div.selected` | The selected stylebox | Applies styles to the currently selected stylebox. |
+| `.innerScrollContainer > div:hover` | The hovered stylebox | Applies styles to the currently hovered stylebox. |
+| `.fd-stylebox > div` | The internal elements of styleboxes | Targets the internal components of the styleboxes that form the main Matrix. |
+
+:::tip
+It is important to prefix each class name with **self** to ensure it is applied specifically to the matrix it is associated with, rather than being applied to all matrices with the same class name.
+:::
+
+### Custom styling examples
+The following examples demonstrate how to customize the Matrix component's appearance.
+
+#### Example 1 - Virtual Grid
+This example styles the matrix with a white background, rounded corners, a double border, and shadow effects for added depth. The text color is changed to black.
+
+
+
+```css
+self .FdVirtualGrid {
+ background-color: white;
+ border-radius: 10px;
+ border-style: double;
+ border-color: rgb(187, 196, 243);
+ border-width: 1px;
+ box-shadow: -4px 4px 8px rgba(187, 196, 243, 0.5), -4px 4px 10px rgba(187, 196, 243,0.5);
+ padding: 20px;
+ color: rgb(21, 18, 18);
+}
+```
+#### Example 2 - Inner Scroll Container
+This example customize the inner scroll container with a light shade of white, rounded borders, a double border style, and shadow effects . This styling differenciates the `innerScrollContainer` from the `FdVirtualGrid` class.
+
+
+
+```css
+self .innerScrollContainer {
+ background-color: rgb(254, 253, 255);
+ box-shadow: -4px 4px 8px rgba(187, 196, 243, 0.86), -4px 4px 20px rgba(187, 196, 243, 0.874);
+ border-radius: 10px;
+ border-color: rgb(187, 196, 243);
+}
+```
+#### Example 3 - Selected Stylebox
+In this example, the selected stylebox is customized with a periwinkle blue background, blue text color, and italic font style.
+
+
+
+```css
+self .innerScrollContainer > div.selected {
+ font-family: italic;
+ background-color: rgb(187, 196, 243);
+ color:rgb(19, 19, 197);
+}
+```
+#### Example 4 - Hovered Stylebox
+This example customizes the hovered stylebox in the matrix with a rounded border, cursive font, green text color, and shadow effects for a highlighted appearance. Additionally, the border color is set to a light green.
+
+
+
+```css
+self .innerScrollContainer > div:hover {
+ box-shadow: -4px 4px 8px rgba(187, 196, 243, 0.4), -6px 6px 20px rgba(187, 196, 243, 0.4);
+ font-family:cursive;
+ border-radius: 10px;
+ border-color: rgb(198, 222, 200);
+ color:rgb(27, 88, 8);
+}
+```
+
+## Showcase
+
+Here's a glimpse of how the **Matrix** component will look and behave in action:
+
+
+
+
+## Triggers and Events
+
+The **Matrix** component can respond to various events, enabling dynamic user experiences. Events that can trigger actions within the component include:
+
+|Event|Description|
+|---|---|
+|On Click| Calls for an action when the user clicks on the component. |
+|On Keyup| Calls for an action when a keyboard key is released while the component is in focus|
+|On KeyDown| Calls for an action when a keyboard key is pressed down while the component is in focus. |
+|On MouseEnter| Calls for an action when the user's mouse cursor enters the area of the component.|
+|On MouseLeave| Calls for an action when the user's mouse cursor exits the area of the component.|
+|On Select| Calls for an action when an item within the component is selected. |
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/pageLoader.md b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/pageLoader.md
new file mode 100644
index 000000000..8c8faf16f
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/pageLoader.md
@@ -0,0 +1,77 @@
+---
+id: pageLoader
+title: Page Loader
+---
+import Column from '@site/src/components/Column'
+
+The **Page Loader** component is a versatile UI element designed to integrate one Page into another within the context of your application.
+
+
+## Use Cases
+
+The **Page Loader** component offers a multitude of applications, enhancing the modularity and interactivity of your Pages:
+
+- **Nested Pages**: Nest one Page within another to facilitate complex UI structures and content hierarchies.
+
+- **Dynamic Content**: Utilize the Page Loader to display dynamic content that can be updated on-the-fly through data binding
+
+- **Conditional Loading**: Implement conditional loading of Pages based on user interactions or specific conditions.
+
+
+## Properties Customization
+
+
+
+ The Page Loader component functions by displaying a designated Page within the current Page. The Page to be displayed is determined based on the initial value set for the Page Loader component. This initial value can be configured using either of the following methods:
+
+
+
+
+
+
+
+
+
+
+ - Direct Configuration: Utilize the Properties panel of the Page Loader to directly choose the target Page from a dropdown list.
+
+
+
+
+
+
+
+
+ - Dynamic Binding: Establish a binding with a qodlysource of type Text. By binding the component to this qodlysource and assigning it an initial value, you gain the flexibility to dynamically update the contents of the Page Loader. The initial value should correspond to the name of the target Page you intend to display.
+
+
+
+
+
+
+
+Note that:
+:::info
+In the case of concurrent application of both methods, the content sourced from the bound qodlysource takes priority.
+:::
+
+## Navigating with Page Loader
+
+When orchestrating navigation actions through the Page Loader component, it's crucial to employ the `Ref` property to specify the components requiring processing during the navigation event. This property guarantees that the target Page is loaded, and its contents are integrated into the current Page.
+
+
+
+Consider a travel agency's backoffice solution, where a content manager needs to manage various aspects of travel packages. For instance, when the content manager attempts to delete a specific flight associated with a package, clicking on the delete button can trigger a navigation action. This action could lead to the loading of the Page `modal_removeFlight` using the **Page Loader** component with the reference `0FW_eM-2g1`.
+
+
+
+## Triggers and Events
+
+The **Page Loader** component can respond to various events, enabling dynamic user experiences. Events that can trigger actions within the component include:
+
+|Event|Description|
+|---|---|
+|On Click| Calls for an action when the user clicks on the component. |
+|On DblClick| Calls for an action when the user double-clicks on the component. |
+|On MouseEnter| Calls for an action when the user's mouse cursor enters the area of the component.|
+|On MouseLeave| Calls for an action when the user's mouse cursor exits the area of the component.|
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/radio.md b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/radio.md
new file mode 100644
index 000000000..5dd1fa9b7
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/radio.md
@@ -0,0 +1,250 @@
+---
+id: radio
+title: Radio
+---
+import Column from '@site/src/components/Column'
+
+The **Radio** component is an interactive UI element that enables users to make single or multiple selections from a predefined set of options. Users can choose one or more options using radio buttons associated with each value in the set.
+
+
+:::info
+
+Unlike certain other components, the **Radio** component cannot be linked to a qodlysource to display data, instead, options must be configured through the properties panel.
+
+:::
+
+
+## Use Cases
+
+**Radio** component serve various purposes in user interfaces, including:
+
+- **User Preferences**: Select preferred theme, language, or notification settings.
+
+- **Content Filtering**: Filter content based on specific categories or criteriay.
+
+- **Survey Management**: Manage survey questions with predefined answer choices for collecting feedback and insights.
+
+
+
+## Properties Customization
+
+Enhance the **Radio** component to align with your application's requirements using the following customization options:
+
+
+
+
+
Type: Choose the appearance style of the radio buttons. You can select either "Radio" for standard radio buttons or "Tab" for a tab-like appearance.
+
+
+
+
+
+
+
+
+- **Mode**: The Radio Button component offers two distinct selection modes:
+
+
+
+
+
Single Selection: Users can choose only one option at a time, ensuring that their selections are distinct and non-overlapping.
+
Multiple Selection: Users can choose multiple options that are relevant to their needs.
+
+
+
+
+
+
+
+
+
+
+
+
+
Default Value: Set a default value for the radio component, ensuring that a specific option is pre-selected when the component is loaded.
+
+
+
+
+
+
+
+
+- **Options**:
+ - **Adding Options**: Incorporate new options by utilizing the "+" button within the Radio component. Each option can be customized with a label and a corresponding value, enhancing the clarity of user selections.
+
+
+
+
Label: A descriptive text label for each option.
+
Value: A distinct value to each option, enabling effective data handling based on the selections made by users.
+
+
+
+
+
+
+
+ - **Option Duplication**: Duplicate existing options to replicate configurations quickly by clicking on the icon.
+
+ - **Option Removal**: Delete options that no longer serve a purpose by clicking on the icon.
+
+ - **Moving Option**: Arrange options to your preferred position by clicking on the icon
+
+
+
+## Data Integration
+
+The **Radio** component captures and reflects the user's choice within this set.
+
+:::info
+The **Radio** component provides selections from a predefined set of options within the [properties panel](#properties-customization), without relying on qodlysources.
+:::
+
+### Data Binding
+
+To enable data capture for the Radio component, follow these steps:
+
+1. **Navigate to the Properties Panel**: Access the Data Access category located within the Properties panel for the Radio component.
+
+
+
+
+
Define the Qodly Source: Specify the relevant qodlysource that will capture the user's selected choice.
+
+
+
+
+
+
+
+:::tip
+Alternatively, you can establish the connection by dragging and dropping the qodlysource onto the Radio component.
+:::
+
+### Server-Side Interaction
+
+Retrieving user choices is straightforward. By binding a qodlysource to the **Radio** component, you can access and utilize the selected content.
+
+
+
+ For example, when users make a single choice from a set of options, binding a qodlysource captures the selected option.
+ Consequently, you can utilize this option value in various ways, such as within a standard action to initiate a search with matching attribute values.
+
+
+
+
+
+
+Additionally:
+
+:::tip
+The **Radio** component's qodlysource can also be linked to the value of an attribute in the currently selected entity of another qodlysource. This enables the component to automatically display the saved value of the selected option whenever a new entity is chosen.
+:::
+
+## Customizing Radio Styles
+
+The **Radio** component offers additional customization options through CSS, providing control over the appearance of radio elements.
+
+### Understanding Radio CSS Classes
+
+The Radio component supports various CSS classes that enable the customization of radio item appearance. Below is a detailed list of supported CSS classes and the elements they apply to.
+
+| **Class Name** | **Applies To** | **Description** |
+|------------------|-------------------------------|--------------------------------------------|
+| `.fd-radio__item` | The entire set of choices | Styles all the radio elements. |
+| `.selected` | The selected choice | Applies to the radio option that is currently selected. |
+
+### Custom styling examples
+The following examples demonstrate how to customize the Radio component's appearance.
+
+#### Example 1: Shadowed Radio Items
+
+In this example, all radio choices are styled with a white background, rounded corners, and shadow effects to add depth. The text is centered and the color is set to dark blue for contrast.
+
+
+
+
+
+
+
+
+
+
+#### Example 2: Italicized Selected Radio Item
+
+This example customizes the selected radio item by setting its background color to a muted green with a cursive font and italicized style.
+
+
+
+
+
+
+
+
+
+
+#### Example 3: Green Hovered Radio Item
+
+In this example, the hovered radio item is customized with a soft green text and a shadow effect to add depth.
+
+
+
+
+
+
+
+
+
+
+## Showcase
+
+Here's a glimpse of how the **Radio** component will look and behave in action:
+
+
+
+
+## Triggers and Events
+
+The **Radio Button** component primarily responds to the "**On Change**" event, triggering actions when users select different options. This interaction allows you to create dynamic and responsive interfaces based on user choices.
+
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/rangeinput.md b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/rangeinput.md
new file mode 100644
index 000000000..f5a3d02d4
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/rangeinput.md
@@ -0,0 +1,444 @@
+---
+id: rangeinput
+title: Range Input
+---
+import Column from '@site/src/components/Column'
+
+The **Range Input** component is a UI element enabling users to choose a numeric value from a defined range, or enabling developers to represent a value by a cursor positioned within a defined range.
+
+:::info
+
+The **Range Input** component contains embedded elements: **Slider Container**, **Label**, **Filled track**, **Thumb**, and **Track**. This is of great importance as configuring the **Range Input** component may require adjusting properties within the embedded elements. This applies to the visual style, triggers, and actions as they may differ.
+
+:::
+
+
+## Use Cases
+
+**Range Input** component can be applied in various scenarios:
+
+- **Volume Control**: Use it to control audio or video volume levels.
+
+- **Data Filtering**: Implement it to allow users to filter results based on a numeric range, such as prices or quantities.
+
+- **Configuration Settings**: Utilize it for user-configurable settings that require selecting a specific numeric value within a range.
+
+- **Visual representation**: Display a value through a cursor within a range for a visual information.
+
+
+
+## Properties Customization
+
+### Range Input Component
+
+Enhance the **Range Input** component to align with your application's requirements using the following customization options:
+
+
+
+
+
Label Position: Developers can tailor the label's position, placing it above, below, to the left, to the right, or even hidden.
+
+
+
+
+
+
+
+- **Orientation**: Developers can choose between horizontal and vertical orientations for the Matrix. This choice affects the arrangement of Stylebox components and the presence of scrollbars.
+
+
+
+
+
Vertical Orientation (Default): By default, the Range Input component is oriented vertically. This means that Slider container is stacked from top to bottom.
+
Horizontal Orientation: When the Range Input component is configured with a horizontal orientation, Slider container is arranged from left to right.
+
+
+
+
+
+
+
+
+### Embedded Label
+
+Within the **Range Input** component, an embedded **Label** allows for further customization of the following properties:
+
+
+
+
+
Label: Personalize the label to offer clear instructions or guidance.
+
+
+
+
+
+
+
+
+### Embedded Slider Container
+
+Within the **Range Input** component, an embedded **Slider Container** allows for further customization of the following properties:
+
+
+
+
+
Min Value: Set the minimum value that users can select within the range.
+
Max Value: Define the maximum value that users can select within the range.
+
Step: Determine the increment value when users interact with the component.
+
+
+
+
+
+
+
+### Embedded Filled track, Thumb, and Track
+
+A slider object consists of these three elements, that can be customized separately:
+
+
+
+They have a default design that can be customized using standard formatting properties, such as **Background color** and **Height/Width**.
+
+The **Display** property allows to control how they are drawn:
+
+
+
+
+
block: standard display, for example the thumb is a 14px white circle by default.
flex: provides extra formatting properties.
none: the element is not displayed; for example, you can hide the thumb
+
+
+
+
+
+
+
+
+
+
+## Data Integration
+
+The **Range Input** component allows for seamless integration of Qodly Sources, enabling dynamic data binding and interaction within the Page.
+
+:::info
+The qodlysource for the **Range Input** component should be a numeric value.
+:::
+
+### Data Binding
+To associate data with the Range Input component, follow these steps:
+
+1. **Navigate to the Properties Panel**: Access the Data Access category located within the Properties panel for the Range Input component.
+
+
+
+
+
Define the Qodly Source: Specify the appropriate qodlysource that contains the data you want to display within the Range Input or retrieve from user input. This can be an attribute from an entity, an array, or a direct qodlysource of type number. For instance, you can select an entity, such as dayplan.hotel_ID.
+
+
+
+
+
+
+
+
+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 dayplan.hotel_ID.rating.
+
+:::tip
+Alternatively, you can establish the connection by dragging and dropping the qodlysource onto the Range Input component.
+:::
+
+### Server-Side Interaction
+
+Interacting with user input data is straightforward. When you bind a qodlysource to the **Range Input** component, you can access and make use of the input content.
+
+Subsequently, you can utilize this input value in various ways, such as within a standard action to initiate a search with matching attribute values.
+
+## Customizing Range Input Styles
+
+The **Range Input** component provides additional customization options through CSS, allowing for a personalized appearance of its elements.
+
+### Component-Specific Classes
+
+The following CSS classes are applied to elements within the **Range Input** component, defining their layout, style, and responsive behavior. Each class can be customized to adjust the look and functionality of specific parts of the component.
+
+| **Class Name** | **Applies To** | **Description** |
+|---------------------------|-----------------------------|----------------------------------------------------------------------------------------------------------------------------|
+| `fd-slidercontainer` | Slider container | Wrapper around the slider track and thumb, controlling padding and spacing between these elements. |
+| `fd-slider` | Main slider container | Defines the main structure of the slider component, setting up basic layout and responsiveness. |
+| `chakra-slider` | Main slider element | Provides styling and positioning for the main slider element, including adjustments for focus and user interaction. |
+| `chakra-slider__track` | Slider track | Styles the visible slider track, controlling background color, height, and positioning of the track element. |
+| `chakra-slider__thumb` | Slider thumb | Styles the draggable thumb, setting properties like size, color, and border radius for the thumb. |
+
+### Component-Specific Tags
+
+The following HTML tags make up the structure of the **Range Input** component. Each tag can be styled individually to adjust its appearance and interaction.
+
+| **Tag Name** | **Applies To** | **Description** |
+|--------------------|-------------------------------------|----------------------------------------------------------------------------------------------------------------------------|
+| `
.default})
@@ -65,7 +65,7 @@ To rename a method or class, you can either:
.default})
@@ -418,7 +418,7 @@ There are two primary methods for ensuring precise parameter handling:
### Binding onHttpGet Functions
-Functions defined with the [onHttpGet](../../../QodlyinCloud/qodlyScript/guides/data-model.md#onhttpget-keyword) keyword and returning an instance of the [4D.OutgoingMessage](../../../QodlyinCloud/qodlyScript/OutgoingMessageClass.md) class, have a unique behavior when bound to events. Unlike standard functions, `onHttpGet functions` are specifically designed to handle `HTTP GET` requests and provide additional flexibility for displaying results to users.
+Functions defined with the [onHttpGet](https://developer.4d.com/docs/API/guides/data-model#onhttpget-keyword) keyword and returning an instance of the [4D.OutgoingMessage](https://developer.4d.com/docs/API/OutgoingMessageClass) class, have a unique behavior when bound to events. Unlike standard functions, `onHttpGet functions` are specifically designed to handle `HTTP GET` requests and provide additional flexibility for displaying results to users.
#### Example
@@ -542,7 +542,7 @@ For further details, refer to the [Dialog](../components/dialog.md) section.
.default})
-
-1. **Explorer**: is where you'll find an overview of your project's essential elements:
-
- - .default}){kind=icon}
[Pages](./pageLoaders/pageLoaderOverview.md#page-editor-overview): Serve as containers, enveloping various components within your application.
- - .default}){kind=icon}
**Methods**: Project methods. While they can be invoked from class functions or other methods, components can't directly interact with them.
- - .default}){kind=icon}
**Classes**: [ORDA classes](https://developer.4d.com/docs/ORDA/ordaClasses) and [user classes](https://developer.4d.com/docs/Concepts/classes), serving as the cornerstone for organizing your code around objects, granting components the capability to directly interact with them.
- - .default}){kind=icon}
Shared: Use this folder to store any contents (local images, downloadable files...) you might need within your app. The contents of this folder can be accessed from Qodyy pages using the [`/$shared` link](pageLoaders/events/bindingActionToEvents.md#shared-folder) or from the QodlyScript language using the [`/SOURCES/Shared`](../QodlyinCloud/qodlyScript/basics/lang-pathnames.md#filesystem-pathnames) file path.
- - .default}){kind=icon}
[Debugger](./debugging.md): Provides a suite of debugging tools that address different types of errors during the development phase.
- - .default}){kind=icon}
[Roles And Privileges](./roles/rolesPrivilegesOverview.md): Plays a pivotal role in enforcing data access restrictions within your application, ensuring that the right users access the right data.
- - .default})
Model (disabled).
- - .default}){kind=icon}
[Settings](./settings.md): Offer options to configure application-specific settingdds.
-
-
-2. **Header bar**: provides quick access to several project-related options:
-
- - .default}){kind=icon}
[Debug](./debugging.md#starting-a-debug-session): Initiate a debug session on the server, attaching it to your browser, and enable debugging for your app.
- - .default}){kind=icon}
Save All: Save all changes made across all open windows within your app.
- - .default}){kind=icon}
[Data](https://developer.4d.com/docs/Admin/dataExplorer): Provide access to the Data Explorer, facilitating data-related operations.
- - .default}){kind=icon}
[Preview](./rendering.md#preview-the-entire-site): Allows you to assess your application's appearance and functionality with ease.
- - .default}){kind=icon}
[Settings](./settings.md): Present a range of options for configuring application-specific settings, tailoring the environment to your app's needs.
-
-3. **Grid container**: houses a collection of swift shortcuts for a range of actions:
-
- - **Create New**: Offers convenient quick links for:
- - .default}){kind=icon}
[Classes](./coding.md#creating): Generate a new Class.
- - .default}){kind=icon}
[Methods](./coding.md#creating): Generate a new Method.
- - .default}){kind=icon}
[Data](https://developer.4d.com/docs/Admin/dataExplorer): Provide access to the Data Explorer, facilitating data-related operations.
- - **Recent Files**: Displays the most recently accessed files, allowing you to quickly revisit your recent work.
- - **What's New**: Keeps you updated with the latest news and announcements from the Qodly team.
-
-
-
-## Tabs
-
-Qodly Studio displays open items with tabs in the title area above the current editor.
-
-.default})
-
-
-[By default](#preview-mode), when you open a file, a new tab is added for that file. New tabs are added to the right of the existing tabs. All Qodly files and editors use tabs: model, Pages, methods, classes, roles and privileges, settings, pictures, and so on.
-
-Tabs let you quickly navigate between items and you can drag and drop tabs to reorder them. Only one instance of an item can be open in the same editor window.
-
-When you have more open items than can fit in the title area, you can use the scroll bar between the tab and editor regions to drag tabs into view.
-
-.default})
-
-
-### Contextual menu
-
-Every tab provides access to a contextual menu that you can display with a **right-click** on the tab header:
-
-.default})
-
-The following actions are available:
-
-- **Reload**: reloads the tab contents from the server
-- **Rename** (not available with non-editable tabs such as Roles and Pivileges): makes the tab heading area editable so that you can rename the opened file.
-- **Close**: closes the current tab and its associated file.
-- **Close others**: closes all the opened tabs except the current one.
-- **Close all**: closes all the opened tabs.
-- **Close saved**: closes all the tabs that contain saved contents. Tabs with unsaved contents are not closed.
-- **Close tabs to the right/to the left**: closes all opened tabs located at the right side or the left side of the current tab.
-- **Switch to Text Editor** (only available with Page tabs and States): displays the [current Page](./pageLoaders/pageLoaderOverview.md#page-json-representation) or [State](./pageLoaders/states/conditionalState.md#json-editor) as JSON text. When called from the text editor, the menu command toggles to **Switch to Page Editor**/**Switch to Model Editor**.
-
-### Unsaved contents
-
-When the contents of a tab has been modified locally but has not been saved, a colored spot is displayed on the right part of the tab header:
-
-.default})
-
-When closing or reloading a tab, if it contains unsaved changes, an alert window is displayed, allowing you to ignore the changes and close the tab (**Confirm**) or cancel the closure and let you click the [**Save all**](./coding.md#saving) button to save the changes.
-
-.default})
-
-### Preview mode
-
-By default in Qodly Studio, clicking a file in the Explorer automatically opens it in a new tab, if not already opened. This can lead to open a large number of tabs.
-
-If you are browsing multiple files and don't want every opened file to have its own tab, you can enable the **tabs preview mode** using the [**Activate tabs preview mode** selector](settings.md#activate-tabs-preview-mode) of the User Settings.
-
-When the tabs preview mode is enabled, clicking a file in the Explorer displays a preview of its contents and reuses an existing tab. If you start editing the file or use double-click to open the file from the Explorer, a new tab is dedicated to that file.
-
-Preview mode tab is indicated by *italics* in the tab heading:
-
-.default})
-
-If you'd prefer to not use preview mode and always create a new tab, just let the selector off (default mode).
\ No newline at end of file
diff --git a/docs/4DQodlyPro/roles/permissionsFunctionLevel.md b/docs/4DQodlyPro/roles/permissionsFunctionLevel.md
index cc5e770bd..097f2cab7 100644
--- a/docs/4DQodlyPro/roles/permissionsFunctionLevel.md
+++ b/docs/4DQodlyPro/roles/permissionsFunctionLevel.md
@@ -25,7 +25,7 @@ To configure **Function** Permissions for a specific privilege, follow these ste
:::tip
If the Singleton class or its exposed functions don't appear in the permissions dropdown, follow these steps to enable it:
-1. Navigate to the [Singleton class](../../QodlyinCloud/qodlyScript/basics/lang-classes.md#singleton-classes) in the class section.
+1. Navigate to the [Singleton class](https://developer.4d.com/docs/Concepts/classes#singleton-classes) in the class section.
2. Check if the **Singleton class** is missing any exposed functions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 31c825737..4cf2a18be 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -106,7 +106,8 @@ Thank you for helping us improve! 🚀
includeCurrentVersion: isProduction ? false : true, // false for prod only
versions:
{
- '21-R2': {label: '21 R2 BETA', banner: 'none',},
+ '21-R3': {label: '21 R3 BETA', banner: 'none',},
+ '21-R2': {label: '21 R2', banner: 'none',},
'21': {label: '21', banner: 'none',},
},
},
diff --git a/versioned_docs/version-21-R2/4DQodlyPro/coding.md b/versioned_docs/version-21-R2/4DQodlyPro/coding.md
index c35b6c9f1..926129cca 100644
--- a/versioned_docs/version-21-R2/4DQodlyPro/coding.md
+++ b/versioned_docs/version-21-R2/4DQodlyPro/coding.md
@@ -38,7 +38,7 @@ You can create a method or class using one of the three methods:
.default})
.default})
.default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
.default})
+
+:::info
+For comprehensive information on debugging your code, please refer to the [Debugger](./debugging.md) section.
+:::
+
+## Code Preservation and Synchronization
+
+Ensure the integrity and consistency of your method and class code in Qodly with these preservation and synchronization tools.
+
+### Saving
+
+Your code modifications are automatically saved at regular intervals. However, if you want to ensure immediate saving, you can click `Save all` to save all edited tabs. .default})
+
+### Reloading code
+
+.default})
+ .default})
+ .default})
+ .default})
+
+:::info
+Reloading is recommended in cases where a connection is not established. Without this connection, while you can still write and save your code, you will miss out on LSP-related features.
+:::
+
+
+### Type-ahead features
+
+Qodly Studio code editor includes helpful type-ahead and auto-completion features. You can easily incorporate these suggestions into your code using the following methods:
+
+- The suggestion list automatically appears as you start typing.
+- To insert the selected suggestion, simply press the `Tab` key.
+- At any point, you can manually trigger the suggestion list by pressing `Ctrl + Space bar`.
+
+
+### Show documentation
+
+When a QodlyScript command or function is entered in the code editor, you can get documentation on this command or function by hovering the cursor over the command or function name:
+
+- a tooltip appears, displaying the parameters of the command or function along with a short description;
+- you can also click on the **Show documentation** link within the tip, which opens the complete documentation for the command or function on [developer.qodly.com](https://developer.qodly.com/docs) in your browser.
+
+.default})
+
+
+### Command Palette
+
+The Command Palette offers easy access to all available commands in the code editor, including any associated shortcuts. You can open it by right-clicking in the code editor window or pressing `F1`.
+
+.default})
+
+The palette includes a filtering option to find specific commands quickly.
+
+.default})
+
+### Warnings and errors
+
+Qodly Studio includes a Code Live Checker feature. The syntax, consistency, and structure of the entered code are automatically checked in order to prevent execution errors. For example, the Code Live Checker can detect that a right parenthesis is missing or that you used an unknown dataclass attribute.
+
+Qodly automatically checks the code syntax to see if it is correct. If you enter text or select a component that is not correct, Qodly underlines the incorrect expression. Two underline colors are used:
+
+- Yellow underlines are **warnings**.default})
+
+2. If the debug session starts successfully, a green bullet will appear on the button label. .default})
+
+3. Once you begin executing code within the debug session, the bullet will turn orange. .default})
+
+
+:::info
+.default})
+ .default})
+ .default})
+
+2. When you launch the code, a yellow arrow will appear in the left margin to indicate where the execution paused and mark the next line to be executed. .default})
+
+3. At this point, you can use the debugger panel at the bottom of the window to evaluate and debug your code.
+.default})
+
+:::warning
+Should a function appear unexpectedly, even without any breakpoints in your code while the debugger is active, it implies the existence of an error within that specific code section.
+:::
+
+### Breakpoint Status
+
+Breakpoints can have different statuses depending on the context, which are represented by their appearance and tip:
+
+
+|Appearance|Status|Context|
+|---|---|---|
+| .default})
|Breakpoint|The breakpoint is validated in the debug session and will pause code execution as expected.|
+|.default})
|Draft breakpoint|The method or function where the breakpoint is set has not been correctly saved. Please ensure you save your changes first for the breakpoint to be validated and take effect.|
+|.default})
|Unverified breakpoint|The breakpoint is saved, but no debug session is currently active. It will not pause code execution until a debug session is started.|
+|.default})
|Disabled breakpoint|The breakpoint has been manually disabled. It remains visible but will not interrupt code execution until re-enabled.|
+
+## Debugger Sidebar
+
+The **Debugger Sidebar** provides a centralized interface to monitor and manage all breakpoints across an application. It is designed to give developers full visibility into their active, disabled, or grouped breakpoints—regardless of which file or method they belong to.
+
+You can open the Debugger Sidebar from the left-hand panel in the code editor:
+
+.default})
+ .default})
+ .default})
, the breakpoint is active and will interrupt code execution during a debug session.
+- When the checkbox is cleared .default})
, the breakpoint remains listed but is temporarily disabled.
+
+To manage breakpoints in bulk, a "Disable All" button .default})
is available at the top of the panel, allowing all breakpoints across the app to be disabled simultaneously without deletion.
+
+### Breakpoint Deletion
+
+Breakpoints can be removed individually or in groups:
+
+- The trash icon beside a specific breakpoint .default})
removes only that breakpoint.
+- The trash icon beside a method or class header .default})
removes all breakpoints defined within that method or class.
+
+- An overflow menu (⋮) provides additional bulk removal options:
+ .default})
+ .default})
that enables direct navigation to the corresponding line in the code editor. This function supports fast inspection or modification of the code surrounding the breakpoint location.
+
+
+### Collapse/Expand Groups
+
+To improve readability when working with a large number of breakpoints, the sidebar includes a "Collapse All" button .default})
. This feature collapses all method or class sections, minimizing the visual footprint of the list and helping developers focus only on relevant groups.
+
+
+## Using Qodly debugger on 4D Server
+
+When using Qodly pages in a deployed 4D Server application (interpreted mode), you might encounter some cases where you need to debug your pages on the server, for example when a specific user configuration is required. In this case, you can attach the Qodly Studio debugger to the 4D Server and then, benefit from its features when executing your Qodly pages.
+
+Note that in this case, the Qodly Studio debugger will display all the code executed on the server, in accordance with the [attached debugger rule on 4D Server](https://developer.4d.com/docs/Debugging/debugging-remote#attached-debugger).
+
+To attach the Qodly Studio debugger to your running 4D Server application:
+
+1. Open Qodly Studio from 4D Server.
+
+:::note
+
+The project must be running in interpreted mode so that **Qodly Studio** menu item is available.
+
+:::
+
+2. In the Qodly Studio toolbar, click on the **Debug** button..default})
, click it to create the HTTPHandlers.json file.
+
+ 3. Once created, the file will open for editing .default})
.
+
+.default})
+ .default})
is required.
+
+- To return to the HTTP Handler UI, clicking the UI icon .default})
is necessary.
+
+- Changes made in one view are automatically synchronized with the other.
+
+:::
+
+
+If no handlers are configured, a message appears stating: `There are no HTTP Handlers configured yet. Click on the ➕ to add a new one.`.
+
+
+## Configuring HTTP Handlers
+
+### Add HTTP Handlers
+
+HTTP Handlers can be added through both the UI and the code editor.
+
+#### Using the HTTP Handler UI:
+
+1. Clicking the .default})
button opens a form for inputting handler details.
+
+2. The form requires specifying the following details:
+
+ - Class: Selecting an existing class from the dropdown list or manually entering a class name.
+ - Method: Choosing an available method from the selected class or entering a method manually.
+ - Pattern: Defining the URL pattern.
+ - As Regex: Enabling this if using a regular expression for URL matching.
+ - Verbs: Selecting supported HTTP methods (GET, POST, PUT, DELETE).
+
+ .default})
+
+3. Clicking "Confirm Changes" .default})
applies the configuration.
+
+:::danger Handling Class and Method Errors
+
+When manually entering a class name or method that does not exist, the system provides visual feedback to prevent misconfiguration.
+
+.default})
+ .default})
+ .default})
to indicate they are valid.
+
+:::
+
+#### Using the Code Editor:
+
+Handlers can also be configured manually in the code editor, like:
+
+```json
+[
+ {
+ "class": "CustomerHandler",
+ "method": "getCustomer",
+ "pattern": "customers",
+ "verbs": "GET"
+ },
+ {
+ "class": "AuthHandler",
+ "method": "login",
+ "regexPattern": "/auth/login",
+ "verbs": "POST"
+ }
+]
+```
+
+
+:::danger Error Handling When Switching Views
+
+.default})
+ .default})
, indicating that it is not a valid option.
+
+:::
+
+### Edit HTTP Handlers
+
+Editing allows modifications to the class, method, URL pattern, or HTTP methods:
+
+- Use the UI to edit .default})
a handler and adjust its settings.
+
+- Or, edit the JSON file directly for manual changes from the code editor.
+
+### Delete HTTP Handlers
+
+Removing unnecessary handlers keeps request processing efficient:
+
+- Click the trash icon .default})
in the UI to delete a handler, then confirm the action.
+
+- Alternatively, delete the handler entry from the code editor.
+
+
+### Duplicate Handlers
+
+Duplicating handlers allows for quick replication:
+
+- Click the duplicate icon .default})
in the UI.
+
+- Copy and paste JSON objects for manual duplication.
+
+
+### Reorder Handlers
+
+Execution order can be adjusted:
+
+- Drag and drop handlers in the UI .default})
.
+
+- Manually rearrange JSON objects in the file.
+
+
+## Matching Rules
+
+Handlers can define URL patterns in two ways:
+
+- **Prefix (pattern)**: Matches any URL that starts with the specified prefix.
+
+ :::info Example
+ A handler with "pattern": `products` matches /products, /products/list, and /products/123.
+ :::
+
+- **Regular Expression (regexPattern)**: Matches URLs that satisfy the specified regular expression.
+
+ :::info Example
+ A handler with "regexPattern": `/products/[0-9]+` matches /products/123 and /products/456, but not /products/list.
+ :::
+
+
+:::tip Matching Scenarios
+
+Given the following configuration:
+
+```json
+[
+ {
+ "class": "OrderHandler",
+ "method": "getOrder",
+ "regexPattern": "/orders/[0-9]+",
+ "verbs": "GET"
+ },
+ {
+ "class": "OrderHandler",
+ "method": "listOrders",
+ "pattern": "orders",
+ "verbs": "GET"
+ }
+]
+```
+
+- `GET /orders/123`: Matches the first handler (getOrder) because `/orders/123` satisfies the regular expression `/orders/[0-9]+`.
+
+- `GET /orders`: Matches the second handler (listOrders) because `/orders` is a prefix of the URL.
+
+- `POST /orders/123`: Does not match any handler because neither handler supports the POST method.
+
+:::
+
+
+## Order of Execution
+
+When an HTTP request is received, the system evaluates each handler in the order they appear in the HTTPHandlers.json file or the UI. The execution flow follows these steps:
+
+- The URL of the request is matched against the pattern or regexPattern of each handler.
+
+- The HTTP method (verb) of the request is checked against the verbs property of the handler.
+
+- Only the first matching handler is executed, even if subsequent handlers also match the request.
+
+:::tip Example of First Match Execution
+
+Given the following configuration:
+
+.default})
+
+.default})
+ .default})
+ .default})
+ .default})
.
+ .default})
+ .default})
+
+Setting a Primary Locale ensures consistent fallback behavior across user sessions and browsers.
+
+
+### Previewing Locales in the Studio
+
+By default, no locale is selected when opening a page in the Studio.
+
+.default})
+
+Developers can manually switch between configured locales during development to preview how translations appear across languages.
+
+
+.default})
in the [Header panel](./pageLoaders/pageLoaderOverview.md#header-panel) of the page.
+
+ - Selecting any of the available locales to simulate the translated application view.
+ .default})
+ .default})
+ .default})
+ .default}){kind=spacer}
+ .default})
.
+.default})
+ .default})
+ .default})
+ .default})
+
+ :::tip
+ The key will appear under all locales.
+ :::
+
+- Different values can be assigned for the same key depending on the active locale.
+
+### Translation Key Scenarios
+
+Here’s how key assignment works when localizing content:
+
+1. **Assigning a Key in the Base State (No Locale Selected)**: When no specific locale is selected (you’re in the base state), clicking the purple i18n button adds the key to all locales.
+
+2. **Assigning a Key While a Locale is Selected**: If a locale is selected when you click the i18n button, the key is still added to all locales, including the base state.
+
+3. **Manually Editing Labels per Locale (No Key Used)**: Instead of using keys, you can manually update the Label field for each locale.
+ - Select a locale and directly type the desired label.
+ - This is quick and flexible but may become harder to manage at scale.
+ - Use the approach that best matches the complexity and reuse patterns of your UI labels.
+
+
+### Removing a Key from a Literal
+
+If needed, you can remove a translation key association from a text component:
+
+.default})
next to the assigned key.
+ .default})
+ .default})
+
+
+By switching between locales inside the Studio and previewing the pages, developers can immediately see how each configured translation appears for different languages.
+
+.default})
+ .default})
+ .default})
next to the locale name.
+- A language selector dropdown will appear.
+- Choose a new language to replace the current one.
+
+### Removing a Locale
+
+To completely remove a locale:
+
+- Navigate to the **Localization** page from the Explorer.
+- Find the locale you wish to remove.
+- Click on the **Delete** button .default})
next to the locale name.
+
+Removing a locale will:
+
+- Delete all translation keys associated with that locale.
+- Automatically update the `UserLanguage.supported` array, removing the deleted language from the runtime switching options.
+
+
+## Managing Keys
+
+### Editing a Translation Key
+
+To edit the value of a translation key for a specific locale:
+
+1. Go to the Localization page in Qodly Studio.
+2. Select the desired locale.
+3. Locate the key you wish to update from the list.
+4. Click the edit icon or directly click into the value field.
+5. Modify the value and click the ✔ button to confirm your changes or ✖ to cancel.
+
+.default})
+
+### Deleting a Translation Key
+
+To delete a translation key entirely from the Localization page:
+
+1. Open the Localization page.
+2. Navigate to the locale where the key is visible.
+3. Locate the key in the list and click the delete icon.
+
+.default})
+
+Deleting a key will:
+
+- Remove the key itself.
+- Remove all translations associated with it across all locales.
+- Unlink any components or literals that were referencing the deleted key.
+
+Use this option only when the key is no longer needed in the application.
+
+
+## Runtime Language Switching
+
+To enable dynamic, user-driven language switching at runtime, the application must be configured to bind to the [UserLanguage shared Qodly source](./pageLoaders/qodlySources.md#qodlysource-userlanguage).
+
+Runtime switching involves the following configuration steps:
+
+.default})
+ .default})
+ .default})
+ .default})
+ .default})
by default.
+
+To enable the Export button:
+
+1. You must select at least one locale from the Localization panel.
+
+2. You can either:
+
+ - Manually check the box for one or more locales. .default})
+
+ - Or check the **Select All** checkbox .default})
to select all available locales at once.
+
+
+ Once at least one locale is selected, the **Export** button becomes active .default})
.
+
+3. Click **Export** to open the export configuration modal.
+
+ .default})
+ .default})
located next to the Export options.
+ .default})
+ .default})
+ .default}){kind=icon}
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+
+## Uploading Custom Components
+
+.default})
button in the Component bar, allowing users to upload Custom Components.
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
icon
+
+## Data Integration
+
+The **DataTable** component is data-bound, meaning it relies on an external Qodly Source to populate its options. This allows the component to display and interact with data.
+
+:::info
+The qodlysource for the **DataTable** component can take the form of either an `ORDA entity selection` or an `array`.
+:::
+
+### Data Binding
+
+To associate data with the **DataTable** component, follow these steps:
+
+.default})
+ .default})
+ .default})
+ .default})
.
+
+- **Resizable Columns**: Adjust column widths to fit content .default})
.
+
+- **Drag-and-Drop Column Movement**: Rearrange columns with ease .default})
.
+
+- **Selectable/Tabbable Rows**: Navigate and select rows using keyboard tabbing.
+
+
+
+## Customizing DataTable Styles
+
+The **DataTable** component offers extensive customization options through CSS, enabling adjustments to the appearance of various table elements.
+
+.default})
+
+### Component-Specific CSS Classes
+
+The DataTable component supports a range of CSS classes, allowing customization of the appearance of headers, rows, cells, and columns. Below is a detailed list of supported CSS classes and the elements they apply to.
+
+#### Table Header Classes
+
+| **Class Name** | **Applies To** | **Description** |
+|------------------|-------------------------------|--------------------------------------------|
+| `.header` | The entire header | Styles the entire table header area. |
+| `.header-cell` | All header cells | Targets individual header cells. |
+| `.header-even` | Even-numbered header cells | Applies styles to header cells in even columns. |
+| `.header-qodlysourceName` | The header of a specific column | Targets the header of a specific column, where `qodlysourceName` refers to the associated data field (e.g., `.header-lastname`). |
+
+#### Table Row Classes
+
+| **Class Name** | **Applies To** | **Description** |
+|------------------|-------------------------------|--------------------------------------------|
+| `.row` | All rows | Applies styles to all rows in the table. |
+| `.selected` | The selected row | Highlights the currently selected row. |
+| `.row-even` | Even-numbered rows | Styles the even rows in the table. |
+| `.hover` | The hovered row | Styles the row that is currently hovered. |
+
+#### Table Cell Classes
+
+| **Class Name** | **Applies To** | **Description** |
+|------------------|-------------------------------|--------------------------------------------|
+| `.cell` | All cells | Targets all cells within the rows. |
+
+#### Table Column Classes
+
+| **Class Name** | **Applies To** | **Description** |
+|------------------|-------------------------------|--------------------------------------------|
+| `.col-qodlysourceName` | A specific column | Targets the column associated with a particular data field (e.g., `.col-lastname`). |
+| `.col-even` | Even-numbered columns | Styles columns that are even-numbered. |
+| `.sorted` | Sorted columns | Highlights columns that are sorted. |
+| `.sorted-asc` | Ascending sorted columns | Applies styles to columns sorted in ascending order. |
+| `.sorted-desc` | Descending sorted columns | Applies styles to columns sorted in descending order. |
+
+:::tip
+For fields associated with relationships, use a dash (`-`) instead of a dot (`.`) in class names (e.g., `.header-employer-name`).
+:::
+
+### Example 1 – Blue Headers
+
+This example customizes the DataTable to feature blue-colored headers with rounded borders, and shadow effects. Additionally, a soft blue background is applied to the header cells, and a light shade is used for even-numbered rows.
+
+.default})
+
+
+```css
+self {
+ border-radius: 10px;
+ box-shadow: 0 0 40px 0 rgb(0 0 0 / 15%);
+}
+
+self .header .header-cell {
+ background-color: #6c7ae0;
+ color: #fff;
+ font-weight: bold;
+ padding: 1.25rem 2rem;
+}
+
+self .row {
+ align-items: center;
+}
+
+self .row .cell {
+ padding: 0.5rem 2rem;
+}
+
+self .row.selected {
+ background-color: #d2d7f5;
+}
+
+self .row-even:not(.selected):not(:hover) {
+ background-color: #f8f6ff;
+}
+```
+
+### Example 2 – Green Headers
+
+This example customizes the DataTable to feature a green color scheme, with specific styles for even-numbered header cells.
+
+.default})
+
+```css
+self .header .header-cell {
+ background-color: #324960;
+ color: #fff;
+ font-weight: bold;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+self .header .header-even {
+ background-color: #4fc3a1;
+}
+
+self .row {
+ align-items: center;
+}
+
+self .row.selected {
+ background-color: #caede2;
+}
+```
+
+This example highlights alternating header cells with a green background and provides custom styling for selected rows.
+
+
+### Example 3 – Dark Mode DataTable
+
+This example demonstrates a dark mode design for the DataTable, where the background and text colors are adjusted for better visibility in low-light environments.
+
+.default})
+
+```css
+self {
+ background-color: rgb(61, 54, 61);
+}
+
+self .row {
+ align-items: center;
+}
+
+self .header .header-cell {
+ background-color: transparent;
+ color: #fff;
+ font-size: 11px;
+ text-transform: uppercase;
+}
+
+self .row:hover .col-lastname {
+ color: #b474e4;
+ font-weight: bold;
+}
+```
+
+This dark theme provides a sleek and modern look, with specific styles applied to hovered rows and the `lastname` column.
+
+
+## Showcase
+
+Here's a glimpse of how the **DataTable** component will look and behave in action:
+
+.default})
+
+:::info
+Customize the styles of the DataTable component by utilizing specific CSS classes that target various elements of the DataTable. For more details, refer to the section on [Customizing DataTable Styles](#customizing-datatable-styles).
+:::
+
+## Triggers and Events
+
+The **DataTable** component can respond to various events, enabling dynamic user experiences.
+
+Additional information including the **column number**, **row number**, and **column qodlysource name** are returned by the [`webEvent` command](https://developer.4d.com/docs/API/commands/webEvent) when called in an event function triggered by a **DataTable** component.
+
+Events that can trigger actions within the component include:
+
+|Event|Description|
+|---|---|
+|On Select| Calls for an action when an item within the component is selected. |
+|On Click| Calls for an action when the user clicks on the component. |
+|On DoubleClick| Calls for an action when the user double-clicks on the component. |
+|On HeaderClick| Calls for an action when the user clicks on the header of a column. |
+|On HeaderDoubleClick| Calls for an action when the user double-clicks on the header of a column. |
+|On CellClick| Calls for an action when the user clicks on a cell within the component. |
+|On CellDoubleClick| Calls for an action when the user double-clicks on a cell within the component. |
+|On Keyup| Calls for an action when a keyboard key is released while the component is in focus|
+|On KeyDown| Calls for an action when a keyboard key is pressed down while the component is in focus. |
+|On CellMouseEnter| Calls for an action when the user's mouse cursor enters a cell within the component.|
+|On MouseEnter| Calls for an action when the user's mouse cursor enters the area of the component.|
+|On MouseLeave| Calls for an action when the user's mouse cursor exits the area of the component.|
+
+
+
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/dialog.md b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/dialog.md
new file mode 100644
index 000000000..685aff39c
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/dialog.md
@@ -0,0 +1,215 @@
+---
+id: dialog
+title: Dialog
+---
+
+import Column from '@site/src/components/Column'
+
+
+
+A Dialog is an interactive, dynamic UI element designed as a popup overlay to streamline user engagement by rendering additional content or forms within the existing page context.
+
+
+## Dialog Creation
+
+To initiate a dialog, navigate to the edited Page header panel and select the `Dialogs` button .default})
.
+
+.default})
+ .default})
+ .default})
+ .default})
+ .default})
next to the dialog you intend to delete in the dialogs listt.
+ .default})
+ .default})
+ .default})
+ .default})
next to the desired dialog in the dialogs list. This action activates the edit mode within the same interface, allowing you to rename the dialog.
+ .default})
+ .default})
+ .default})
+ .default})
+
+
+:::tip
+To exit the dialog's editing mode, click the close button .default})
located at the top right corner.
+:::
+
+
+## Properties Customization
+
+Enhance the Dialog component to align with your application's requirements using the following customization options:
+
+.default})
..default})
..default})
+ .default})
+
+
+## Triggers and Events
+
+The Dialog component can respond to various events, enabling dynamic user experiences. Events that can trigger actions within the component include:
+
+| Event | Description |
+|-----------|--------------------------------------------------------------|
+| On Init | Calls for an action when the dialog initially opens. It is used for the dialog's initialization. |
+| On Loaded | Calls for an action once the dialog has completely mounted/loaded, indicating readiness for interaction. |
+| On Close | Calls for an action to be performed just before the dialog is closed. |
+
+:::tip
+In scenarios where the `Dialog` includes a `Page Loader`, these events are triggered before the `On Load` actions of the `Page Loader`.
+:::
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/fileupload.md b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/fileupload.md
new file mode 100644
index 000000000..83ccc4b32
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/fileupload.md
@@ -0,0 +1,164 @@
+---
+id: fileupload
+title: File Upload
+---
+import Column from '@site/src/components/Column'
+
+
+The **File Upload** component is an interactive UI element that simplifies file transfers by allowing users to easily upload files to the server.
+
+
+:::info
+
+The **File Upload** component has an **Icon** element embedded within it. This is of great importance as configuring the **File Upload** component may require adjusting properties within the embedded element. This applies to the visual style, triggers, and actions as they may differ.
+
+:::
+
+
+## Use Cases
+
+The **File Upload** component finds valuable application in diverse scenarios, including:
+
+- **Document Management**: Facilitate efficient document uploads and storage for improved organization.
+
+- **Media Sharing**: Allow users to upload images, videos, or audio files for seamless sharing with others.
+
+- **File Archiving**: Provide users with a means to securely store and retrieve essential files or records.
+
+
+
+## Properties Customization
+
+### File Upload Component
+
+Enhance the **File Upload** component to align with your application's requirements using the following customization options:
+
+.default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+
+
+## Triggers and Events
+
+### File Upload Component
+
+The **File Upload** component can respond to various events, enabling dynamic user experiences. Events that can trigger actions within the component include:
+
+|Event|Description|
+|---|---|
+|On Click| Calls for an action when the user clicks on the component. |
+|On Blur| Calls for an action when the component loses focus (user clicks outside). |
+|On Focus| Calls for an action when the component gains focus (user clicks on it). |
+|On MouseEnter| Calls for an action when the user's mouse cursor enters the area of the component.|
+|On MouseLeave| Calls for an action when the user's mouse cursor exits the area of the component.|
+|On KeyDown| Calls for an action when a keyboard key is pressed down while the component is in focus. |
+|On Keyup| Calls for an action when a keyboard key is released while the component is in focus|
+
+### Embedded Icon
+
+The embedded **Icon** can also respond to various events, allowing for dynamic user experiences. Events that can trigger actions within the embedded icon include:
+
+|Event|Description|
+|---|---|
+|On Click| Calls for an action when the user clicks on the Icon. |
+|On Keyup| Calls for an action when a keyboard key is released while the Icon is in focus|
+|On KeyDown| Calls for an action when a keyboard key is pressed down while the Icon is in focus. |
+|On MouseEnter| Calls for an action when the user's mouse cursor enters the area of the Icon.|
+|On MouseLeave| Calls for an action when the user's mouse cursor exits the area of the Icon.|
\ No newline at end of file
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/icon.md b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/icon.md
new file mode 100644
index 000000000..cc16aaab0
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/icon.md
@@ -0,0 +1,52 @@
+---
+id: icon
+title: Icon
+---
+import Column from '@site/src/components/Column'
+
+The **Icon** component is a UI element that displays graphical symbols or icons in web applications.
+
+
+## Use Cases
+
+The **Icon** component serves various purposes within user interfaces, including:
+
+- **Action Indicators**: Icons are used to represent actions, such as "Save," "Delete," or "Print".
+
+- **Navigation Enhancements**: Icons can be employed to enhance navigation by representing menu items, links, or categories.
+
+- **Information Presentation**: Icons are utilized to visually convey information, such as alerts, warnings, or success messages.
+
+
+## Properties Customization
+
+Enhance the **Icon** component to align with your application's requirements using the following customization options:
+
+.default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+
+3. **Configure the Component**: Click on the component you've added to enter its editing mode. The process of configuring components varies based on their type:
+
+ - **Toggle Qodly Source**: Prepare to connect the component to the qodlysource in the next step by using the `Toggle Qodly Source` button.
+
+ - **Properties Panel**: In the next step, you'll configure them through the `Data Access` category in the Properties panel.
+
+4. **Choose the Iterator**: Choose the iterator corresponding to the iterated data (e.g., .default})
+
+### Dynamic Attribute Display
+
+
+.default})
+ .default})
+ .default})
+
+### Understanding Matrix CSS Classes
+
+The Matrix component supports a range of CSS classes, enabling customization of the appearance of the inner scroll container, the virtual grid and the default styleboxes. Below is a detailed list of supported CSS classes and the elements they apply to.
+
+#### Matrix Classes
+
+| **Class Name** | **Applies To** | **Description** |
+|------------------|-------------------------------|--------------------------------------------|
+| `.FdVirtualGrid` | The entire matrix | Styles the entire matrix area. |
+| `.innerScrollContainer` | All the default styleboxes in the matrix | Targets all the [default styleboxes](stylebox.md#enhancing-content-presentation) incorporated in the matrix. |
+| `.innerScrollContainer > div.selected` | The selected stylebox | Applies styles to the currently selected stylebox. |
+| `.innerScrollContainer > div:hover` | The hovered stylebox | Applies styles to the currently hovered stylebox. |
+| `.fd-stylebox > div` | The internal elements of styleboxes | Targets the internal components of the styleboxes that form the main Matrix. |
+
+:::tip
+It is important to prefix each class name with **self** to ensure it is applied specifically to the matrix it is associated with, rather than being applied to all matrices with the same class name.
+:::
+
+### Custom styling examples
+The following examples demonstrate how to customize the Matrix component's appearance.
+
+#### Example 1 - Virtual Grid
+This example styles the matrix with a white background, rounded corners, a double border, and shadow effects for added depth. The text color is changed to black.
+
+.default})
+
+```css
+self .FdVirtualGrid {
+ background-color: white;
+ border-radius: 10px;
+ border-style: double;
+ border-color: rgb(187, 196, 243);
+ border-width: 1px;
+ box-shadow: -4px 4px 8px rgba(187, 196, 243, 0.5), -4px 4px 10px rgba(187, 196, 243,0.5);
+ padding: 20px;
+ color: rgb(21, 18, 18);
+}
+```
+#### Example 2 - Inner Scroll Container
+This example customize the inner scroll container with a light shade of white, rounded borders, a double border style, and shadow effects . This styling differenciates the `innerScrollContainer` from the `FdVirtualGrid` class.
+
+.default})
+
+```css
+self .innerScrollContainer {
+ background-color: rgb(254, 253, 255);
+ box-shadow: -4px 4px 8px rgba(187, 196, 243, 0.86), -4px 4px 20px rgba(187, 196, 243, 0.874);
+ border-radius: 10px;
+ border-color: rgb(187, 196, 243);
+}
+```
+#### Example 3 - Selected Stylebox
+In this example, the selected stylebox is customized with a periwinkle blue background, blue text color, and italic font style.
+
+.default})
+
+```css
+self .innerScrollContainer > div.selected {
+ font-family: italic;
+ background-color: rgb(187, 196, 243);
+ color:rgb(19, 19, 197);
+}
+```
+#### Example 4 - Hovered Stylebox
+This example customizes the hovered stylebox in the matrix with a rounded border, cursive font, green text color, and shadow effects for a highlighted appearance. Additionally, the border color is set to a light green.
+
+.default})
+
+```css
+self .innerScrollContainer > div:hover {
+ box-shadow: -4px 4px 8px rgba(187, 196, 243, 0.4), -6px 6px 20px rgba(187, 196, 243, 0.4);
+ font-family:cursive;
+ border-radius: 10px;
+ border-color: rgb(198, 222, 200);
+ color:rgb(27, 88, 8);
+}
+```
+
+## Showcase
+
+Here's a glimpse of how the **Matrix** component will look and behave in action:
+
+.default})
+
+
+## Triggers and Events
+
+The **Matrix** component can respond to various events, enabling dynamic user experiences. Events that can trigger actions within the component include:
+
+|Event|Description|
+|---|---|
+|On Click| Calls for an action when the user clicks on the component. |
+|On Keyup| Calls for an action when a keyboard key is released while the component is in focus|
+|On KeyDown| Calls for an action when a keyboard key is pressed down while the component is in focus. |
+|On MouseEnter| Calls for an action when the user's mouse cursor enters the area of the component.|
+|On MouseLeave| Calls for an action when the user's mouse cursor exits the area of the component.|
+|On Select| Calls for an action when an item within the component is selected. |
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/pageLoader.md b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/pageLoader.md
new file mode 100644
index 000000000..8c8faf16f
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/pageLoader.md
@@ -0,0 +1,77 @@
+---
+id: pageLoader
+title: Page Loader
+---
+import Column from '@site/src/components/Column'
+
+The **Page Loader** component is a versatile UI element designed to integrate one Page into another within the context of your application.
+
+
+## Use Cases
+
+The **Page Loader** component offers a multitude of applications, enhancing the modularity and interactivity of your Pages:
+
+- **Nested Pages**: Nest one Page within another to facilitate complex UI structures and content hierarchies.
+
+- **Dynamic Content**: Utilize the Page Loader to display dynamic content that can be updated on-the-fly through data binding
+
+- **Conditional Loading**: Implement conditional loading of Pages based on user interactions or specific conditions.
+
+
+## Properties Customization
+
+.default})
+ .default})
+ .default})
+ .default})
+
+Consider a travel agency's backoffice solution, where a content manager needs to manage various aspects of travel packages. For instance, when the content manager attempts to delete a specific flight associated with a package, clicking on the delete button can trigger a navigation action. This action could lead to the loading of the Page `modal_removeFlight` using the **Page Loader** component with the reference `0FW_eM-2g1`.
+
+.default})
+
+## Triggers and Events
+
+The **Page Loader** component can respond to various events, enabling dynamic user experiences. Events that can trigger actions within the component include:
+
+|Event|Description|
+|---|---|
+|On Click| Calls for an action when the user clicks on the component. |
+|On DblClick| Calls for an action when the user double-clicks on the component. |
+|On MouseEnter| Calls for an action when the user's mouse cursor enters the area of the component.|
+|On MouseLeave| Calls for an action when the user's mouse cursor exits the area of the component.|
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/radio.md b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/radio.md
new file mode 100644
index 000000000..5dd1fa9b7
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/radio.md
@@ -0,0 +1,250 @@
+---
+id: radio
+title: Radio
+---
+import Column from '@site/src/components/Column'
+
+The **Radio** component is an interactive UI element that enables users to make single or multiple selections from a predefined set of options. Users can choose one or more options using radio buttons associated with each value in the set.
+
+
+:::info
+
+Unlike certain other components, the **Radio** component cannot be linked to a qodlysource to display data, instead, options must be configured through the properties panel.
+
+:::
+
+
+## Use Cases
+
+**Radio** component serve various purposes in user interfaces, including:
+
+- **User Preferences**: Select preferred theme, language, or notification settings.
+
+- **Content Filtering**: Filter content based on specific categories or criteriay.
+
+- **Survey Management**: Manage survey questions with predefined answer choices for collecting feedback and insights.
+
+
+
+## Properties Customization
+
+Enhance the **Radio** component to align with your application's requirements using the following customization options:
+
+.default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+ .default})
+
+
+## Triggers and Events
+
+The **Radio Button** component primarily responds to the "**On Change**" event, triggering actions when users select different options. This interaction allows you to create dynamic and responsive interfaces based on user choices.
+
diff --git a/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/rangeinput.md b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/rangeinput.md
new file mode 100644
index 000000000..f5a3d02d4
--- /dev/null
+++ b/versioned_docs/version-21-R3/4DQodlyPro/pageLoaders/components/rangeinput.md
@@ -0,0 +1,444 @@
+---
+id: rangeinput
+title: Range Input
+---
+import Column from '@site/src/components/Column'
+
+The **Range Input** component is a UI element enabling users to choose a numeric value from a defined range, or enabling developers to represent a value by a cursor positioned within a defined range.
+
+:::info
+
+The **Range Input** component contains embedded elements: **Slider Container**, **Label**, **Filled track**, **Thumb**, and **Track**. This is of great importance as configuring the **Range Input** component may require adjusting properties within the embedded elements. This applies to the visual style, triggers, and actions as they may differ.
+
+:::
+
+
+## Use Cases
+
+**Range Input** component can be applied in various scenarios:
+
+- **Volume Control**: Use it to control audio or video volume levels.
+
+- **Data Filtering**: Implement it to allow users to filter results based on a numeric range, such as prices or quantities.
+
+- **Configuration Settings**: Utilize it for user-configurable settings that require selecting a specific numeric value within a range.
+
+- **Visual representation**: Display a value through a cursor within a range for a visual information.
+
+
+
+## Properties Customization
+
+### Range Input Component
+
+Enhance the **Range Input** component to align with your application's requirements using the following customization options:
+
+.default})
+ .default})
+ .default})
+ .default})
+
+They have a default design that can be customized using standard formatting properties, such as **Background color** and **Height/Width**.
+
+The **Display** property allows to control how they are drawn:
+
+.default})
+ .default})
+