update 21 R3 beta

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

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
             <li><strong>Min Value</strong>: Set the minimum value that users can select within the range.<br/></li>
             <li><strong>Max Value</strong>: Define the maximum value that users can select within the range.<br/></li>
             <li><strong>Step</strong>: Determine the increment value when users interact with the component.<br/></li>
-                <!-- "read only" removed when "disabled" was added
-                <li><strong>ReadOnly</strong>: Select this option if you want to use the slider as a visual representation of a value set elsewhere in the application, and that the user cannot change by clicking on the slider. <br/></li>
-              -->
         </ul>
     </Column.Item>
     <Column.Item width="35%">

archived_versions/versioned_docs/version-1.1.0/studio/pageLoaders/components/textinput.md

@@ -209,9 +209,6 @@ See <a href="componentsBasics#data-formatting">Formats</a> for a description of
 
 <br/>
 
-<!-- "read only" removed when "disabled" was added
-- **Read-Only Option**: Toggle the readOnly property to prevent users from editing the input content. This is useful when displaying pre-filled or calculated data that should not be modified. <img src={require('./img/textInput_readonly.png').default} style={{borderRadius: '6px', width: '15%'}} />
--->
 
 ## Data Integration
 

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

docs/4DQodlyPro/coding.md

@@ -38,7 +38,7 @@ You can create a method or class using one of the three methods:
 
 <Column.List align="center" justifyContent="between">
     <Column.Item width="65%">
-      A new entry, labeled as <code>UntitledN</code> appears in the list, where N is a number incrementing with each new creation. You can provide a <a href="../QodlyinCloud/qodlyScript/basics/lang-identifiers">compliant name</a> and press <strong>Enter</strong> to confirm the modification.
+      A new entry, labeled as <code>UntitledN</code> appears in the list, where N is a number incrementing with each new creation. You can provide a <a href="https://developer.4d.com/docs/Concepts/identifiers">compliant name</a> and press <strong>Enter</strong> to confirm the modification.
     </Column.Item>
     <Column.Item width="30%">
 		<img src={require('./img/coding_namingMethod.png').default} style={{borderRadius: '6px'}} />
@@ -65,7 +65,7 @@ To rename a method or class, you can either:
         <ul>
 			<li>Click on the icon at the right side of the item in the Explorer.</li>
 			<br/>
-			<li>Or, in the <a href="./overview#contextual-menu">tab pop-up menu</a>, select <code>Rename</code>. The tab name becomes editable, and you can give it a <a href="../QodlyinCloud/qodlyScript/basics/lang-identifiers">compliant name</a>.</li>
+			<li>Or, in the <a href="./overview#contextual-menu">tab pop-up menu</a>, select <code>Rename</code>. The tab name becomes editable, and you can give it a <a href="https://developer.4d.com/docs/Concepts/identifiers">compliant name</a>.</li>
 		</ul>
     </Column.Item>
     <Column.Item width="30%">

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

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:

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
 

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:
 

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.

docs/4DQodlyPro/pageLoaders/components/rangeinput.md

@@ -85,9 +85,6 @@ Within the **Range Input** component, an embedded **Slider Container** allows fo
             <li><strong>Min Value</strong>: Set the minimum value that users can select within the range.<br/></li>
             <li><strong>Max Value</strong>: Define the maximum value that users can select within the range.<br/></li>
             <li><strong>Step</strong>: Determine the increment value when users interact with the component.<br/></li>
-                <!-- "read only" removed when "disabled" was added
-                <li><strong>ReadOnly</strong>: Select this option if you want to use the slider as a visual representation of a value set elsewhere in the application, and that the user cannot change by clicking on the slider. <br/></li>
-              -->
         </ul>
     </Column.Item>
     <Column.Item width="35%">

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: