` | Displays the actual label text. CSS changes to the span can modify text color, style, or opacity, influencing the label’s emphasis and readability. |
+| `
+
+
+
+{`/* Input tag styling*/
+self input{
+ width: 20.4rem;
+ height: 4rem;
+ border-radius: 1rem;
+ font-size: 1.4rem;
+ box-shadow: inset .2rem .2rem .5rem #c8d0e7, inset -.2rem -.2rem .5rem #FFFFFF;
+ background: none;
+ font-family: inherit;
+ color: #9a8ff8;
+ border: 0 !important;
+}
+/* Layout adjustment to display the first child element as a flex container */
+self > :first-child{
+ display: flex;
+}`}
+
+
+
+
+
+
+
+### Example 2 - Placeholder Style
+
+The `self input::placeholder` selector targets the placeholder text, giving it a distinct color for clarity.
+
+
+
+
+
+{`/* Placeholder text color */
+self input::placeholder{
+ color: #a3a9b5;
+}`}
+
+
+
+
+
+
+
+### Example 3 - Focus Style
+
+The `self:focus-within` selector applies when the input is focused, such as when a user clicks or types in the field, adding a visual effect to indicate that the field is active.
+
+
+
+
+
+{`/* Focus state styling for the input tag */
+self input:focus-within {
+ outline: none;
+ box-shadow: .3rem .3rem .6rem #c8d0e7, -.2rem -.2rem .5rem #FFFFFF;
+ color: #6d5dfc;
+}`}
+
+
+
+
+
+
+
+### Example 4 - Label as a Search Icon Inside the Text Input Field
+
+In this example, the Text Input component’s label is positioned on the left and is visible. The `self label::before` selector is used to replace the label with a search icon, and `self:focus-within label::before` changes the icon’s color when the input is focused.
+
+:::tip
+Make sure that the label text is empty so that you won’t have an icon next to the text label you put.
+:::
+
+
+
+
+
+{`/* Main component styling*/
+self {
+ width: 20.4rem;
+ height: 4rem;
+ border-radius: 1rem;
+ font-size: 1.4rem;
+ box-shadow: inset .2rem .2rem .5rem #c8d0e7, inset -.2rem -.2rem .5rem #FFFFFF;
+ background: none;
+ font-family: inherit;
+ padding-left: 1.4rem;
+}
+/* Input tag styling*/
+self input{
+ color: #9a8ff8;
+ border: 0 !important;
+}
+/* Layout adjustment to display the first child element as a flex container */
+self > :first-child{
+ display: flex;
+}
+/* Placeholder text color */
+self input::placeholder{
+ color: #a3a9b5;
+}
+/* Focus state styling for the main component */
+self:focus-within {
+ outline: none;
+ box-shadow: .3rem .3rem .6rem #c8d0e7, -.2rem -.2rem .5rem #FFFFFF;
+}
+/* Focus state styling for input text color */
+self input:focus-within {
+ color: #6d5dfc;
+}
+/* Adds an icon before the label text */
+self label::before{
+ content: "\f002";
+ font: normal normal normal 14px/1 FontAwesome;
+ font-size: x-large;
+ color: #9baacf;
+}
+/* Changes the search icon color when the input is in focus */
+self:focus-within label::before{
+ color: #6d5dfc;
+}`}
+
+
+
+
+
+
+
+
+## Triggers and Events
+
+### Text Input Component
+
+The **Text Input** 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.|
+
+### Embedded Input
+
+The embedded **Input** can also respond to various events, allowing for dynamic user experiences. Events that can trigger actions within the embedded icon include:
+
+|Event|Description|
+|---|---|
+|On Change| Calls for an action when the value of the Input changes. This typically occurs when the user enters or modifies text in the Input field. |
+|On Click| Calls for an action when the user clicks on the Input. |
+|On Keyup| Calls for an action when a keyboard key is released while the Input is in focus|
+|On KeyDown| Calls for an action when a keyboard key is pressed down while the Input is in focus. |
+|On AuxClick| Calls for an action when the user performs an auxiliary action (e.g., right-click or middle-click) on the Input.|
+|On Blur| Calls for an action when the Input loses focus (user clicks outside). |
+|On Focus| Calls for an action when the Input gains focus (user clicks on it). |
+|On MouseEnter| Calls for an action when the user's mouse cursor enters the area of the Input.|
+|On MouseLeave| Calls for an action when the user's mouse cursor exits the area of the Input.|
+
+### 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.|
\ No newline at end of file
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/components/uploadCustomComponents.md b/versioned_docs/version-21/4DQodlyPro/pageLoaders/components/uploadCustomComponents.md
new file mode 100644
index 000000000..d4742c22d
--- /dev/null
+++ b/versioned_docs/version-21/4DQodlyPro/pageLoaders/components/uploadCustomComponents.md
@@ -0,0 +1,172 @@
+---
+id: uploadCustomComponents
+title: Upload Custom Component
+---
+
+import Column from '@site/src/components/Column'
+
+
+## Overview
+
+Qodly Studio offers an upload functionality to enhance the user experience and streamline the integration of custom components. This feature enables users to upload components generated using the [`npm run build` command](../../../Integrations/customComponent/setup.md#building-the-project).
+
+
+## Community's Custom Components
+
+The Qodly developer community is actively expanding, with members continuously crafting innovative custom components. These components are generously shared for free download within the community. If you're interested in contributing your custom components to this collective effort, we invite you to do so on the [**Custom Components for Qodly Studio page**](https://github.com/qodly/custom-components).
+
+## Uploading Custom Component
+
+
+
+
+ Qodly Studio provides a dedicated upload
+
+
+
+
+
+
+
+ Users can drag and drop a component file onto the designated area within the popup.
+ Alternatively, users have the option to select a component file from their computer using a file explorer.
+
+
+
+
+
+
+
+
+
+ If a user drops a file in the ".zip" format, the name of the file is prominently displayed in the drop area, confirming the selection.
+
+
+
+
+
+:::info
+Attempting to drop a file in a format other than ".zip" leaves the popup unaffected.
+:::
+
+
+## Installing Custom Component
+
+
+
+ The "Install Component" button remains inactive until a user selects a custom component for upload.
+
+
+
+
+
+
+
+ Upon clicking the "Install Component" button, a progress icon
+
+
+
+
+
+
+ After a successful installation, a page reload is necessary for the custom component to appear.
+
+
+
+
+
+
+
+ Clicking the reload button will close the popup and refresh the page. Subsequently, it adds a new entry to the component list in the "Custom Component" category, complete with the icon and name of the uploaded component.
+
+
+
+
+
+:::info
+If no specific icon is defined for the custom component, the default icon is displayed alongside the component name.
+:::
+
+
+
+
+ In case of upload failure, an error message is displayed in the popup, stating that an error occurred during the upload.
+
+
+
+
+
+:::info
+To check relevant details about the error and address the issue, inspect the network activity in the browser console. The upload request will display precisely what the error is.
+
+
+ Upon successful upload and installation of a custom component, a structured process is executed to ensure integration into Qodly Studio.
+ CustomComponents folder within the Shared directory in the Explorer panel, containing relevant metadata and the uploaded custom components.
+
+
+
+
+
+### Manifest File Generation
+
+Within the `CustomComponents` folder, a `manifest.json` file is generated, serving as a configuration document with information about the uploaded custom component.
+
+```json
+[
+ {
+ "scope": "qodly_381922b196e120e9eee5",
+ "author": {
+ "name": "Qodly Team",
+ "email": "contact@qodly.com",
+ "url": "https://qodly.com"
+ },
+ "module": "components",
+ "remoteEntryFileName": "components.js",
+ "url": "/$shared/CustomComponents/qodly_381922b196e120e9eee5/"
+ }
+]
+```
+
+### Component Folder Creation
+
+Simultaneously, a folder is created with a name corresponding to the unique ID of the uploaded custom component. This folder encompasses various essential files, including JavaScript files and licenses dedicated to the custom component:
+
+- **64.6f4d1ae1**: This file contains minified JavaScript code associated with the definition of the React component "ExampleComponent". It encompasses settings, component structure, event handling, and other functionalities crucial to the behavior of the component.
+
+- **64.6f4d1ae1.js.LICENSE**: This file contains licensing information for the JavaScript file "64.6f4d1ae1". It provides details regarding the license under which the code is distributed.
+
+- **693.a8434817**: This file holds minified JavaScript code responsible for defining various functions or features within the component. It plays a role in enhancing the overall functionality of the custom component.
+
+- **693.a8434817.js.LICENSE**: Licensing information specific to the JavaScript file "693.a8434817". It includes details about the license under which the code is distributed.
+
+- **components**: This file contains a minified and compressed file that encompasses functionality related to dynamic module loading, shared modules, dynamic script creation and loading, error handling, and references to Webpack chunks. It is crucial for efficient operation and integration of the custom component within Qodly Studio.
+
+- **main.e029b478**: A minified JavaScript file containing code related to the React component "ExampleComponent". It includes modules for a Page editor (@ws-ui/webform-editor) and the React library itself. The code defines and exports components, settings, and other functionality.
+
+- **main.e029b478.js.LICENSE**: Licensing information for the JavaScript file "main.e029b478". It includes details about the license under which the code is distributed.
+
+- **manifest**: The "manifest" file includes important metadata about the custom component
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/craftedComponents.md b/versioned_docs/version-21/4DQodlyPro/pageLoaders/craftedComponents.md
new file mode 100644
index 000000000..9272748b0
--- /dev/null
+++ b/versioned_docs/version-21/4DQodlyPro/pageLoaders/craftedComponents.md
@@ -0,0 +1,99 @@
+---
+id: craftedComponents
+title: Crafted components
+---
+import Column from '@site/src/components/Column'
+
+**Crafted components** allow you to create reusable components by encapsulating existing components along with their styles, child components, event configurations, and qodlysource references.
+
+:::info
+Crafted components enable you to transform any component, except the Page component, into a reusable unit.
+:::
+
+
+
+## Crafting a Component
+
+Suppose you're striving for uniform design elements across your website, ensuring compatibility with both light and dark modes. To accomplish this:
+
+- **Element Selection**: Choose the component on the canvas that you wish to transform into a crafted component.
+- **Save as Craft**: In the Tooltip menu, select the ellipsis icon
+
+ - Name and Icon : Name your crafted component and search for the desired icon in the predefined list using the search bar.Add : Click the Add button to complete the process.
+
+
+
+
+
+
+ Once completed, your crafted component will be available in the Components > Crafted section. You can then drag and drop it onto the canvas as needed.
+
+
+
+
+
+## CSS Class Behavior
+
+### Local CSS Classes
+
+When a component is styled with a **local** CSS class, such as `styled_checkBox` for the **checkBox** component, and you save it as a crafted component for subsequent reuse in another Page, two scenarios emerge:
+
+- **First Scenario**: If the target Page lacks a **local** CSS class matching the one in the crafted component, the crafted component's CSS class will be added as a **local** CSS class within the target Page.
+
+- **Second Scenario**: In the case where the target Page already has a **local** CSS class of the same name, incorporating the crafted component will not override the existing **local** CSS class. Instead, the crafted component will use the **local** CSS class from the target Page. Should you delete the **local** CSS class in the target Page and subsequently attempt to re-add the crafted component, you will observe the addition of the **local** CSS class, accompanied by the appropriate styles.
+
+
+Here's a glimpse of how it will look and behave in action:
+
+
+
+ The event configuration of a crafted component remains intact upon placement onto the canvas. If the crafted component holds specific event configurations from its original Page, these configurations persist when you position the crafted component on a new canvas.
+
+
+
+
+
+
+Potential adjustments could include:
+
+- **Event Targets**: Ensure that the events are targeting the correct elements in the new Page.
+
+- **Event Actions**: Verify that the actions triggered by events are appropriate for the new context. For example, an action that shows a specific message might need to be updated to display a different message relevant to the new Page.
+
+- **Event Conditions**: Check if any conditions tied to events still hold true in the new Page.
\ No newline at end of file
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/date-time-formats.md b/versioned_docs/version-21/4DQodlyPro/pageLoaders/date-time-formats.md
new file mode 100644
index 000000000..70683efb2
--- /dev/null
+++ b/versioned_docs/version-21/4DQodlyPro/pageLoaders/date-time-formats.md
@@ -0,0 +1,170 @@
+---
+id: date-time-formats
+title: Date and Time Formats
+---
+
+
+
+Throughout your Qodly projects, you might need to format date and/or time values according to the specificities of the application interface.
+
+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.
+
+
+## Pattern list
+
+The following table lists all supported patterns for date and time formats.
+
+|Symbol|Meaning|Pattern|Example Output|
+|---|---|---|----|
+|G|era designator|G, GG, or GGG|AD|
+| | |GGGG|Anno Domini|
+| | |GGGGG|A|
+|y|year|yy|96|
+| | |y or yyyy|1996|
+|Y|year of "Week of Year"|Y|1997|
+|u|extended year|u|4601|
+|Q|quarter|Q|2|
+| | |QQ|02|
+| | |QQQ|Q2|
+| | |QQQQ|2nd quarter|
+| | |QQQQQ|2|
+|q|stand-alone quarter|q|2|
+| | |qq|02|
+| | |qqq|Q2|
+| | |qqqq|2nd quarter|
+| | |qqqqq|2|
+|M|month in year|M|9|
+| | |MM|09|
+| | |MMM|Sep|
+| | |MMMM|September|
+| | |MMMMM|S|
+|L|stand-alone month in year|L|9|
+| | |LL|09|
+| | |LLL|Sep|
+| | |LLLL|September|
+| | |LLLLL|S|
+w|week of year|w|27
+ | |ww|27
+|d|day in month|d|2|
+| | |dd|2|
+|D|day of year|D|189|
+|E|day of week|E, EE, or EEE|Tue|
+| | |EEEE|Tuesday|
+| | |EEEEE|T|
+| | |EEEEEE|Tu|
+|e|local day of week|e|2|
+| | |ee|02|
+| | |eee|Tue|
+| | |eeee|Tuesday|
+| | |eeeee|T|
+| | |eeeeee|Tu|
+|c|stand-alone local day of week|c or cc|2|
+| | |ccc|Tue|
+| | |cccc|Tuesday|
+| | |ccccc|T|
+| | |cccccc|Tu|
+|a|AM or PM|a, aa, or aaa|PM [abbrev]|
+| | |aaaa|PM [wide]|
+| | |aaaaa|p|
+|b|AM, PM, noon, midnight|b, bb, or bbb|mid.|
+| | |bbbb|midnight|
+| | |bbbbb|md|
+|B|flexible day periods|B, BB, or BBB|at night [abbrev]|
+| | |BBBB|at night [wide]|
+| | |BBBBB|at night [narrow]|
+|h|hour in am/pm (1~12)|h|7|
+| | |hh|07|
+|H|hour in day (0~23)|H|0|
+| | |HH|00|
+|K|hour in am/pm (0~11)|K|0|
+| | |KK|00|
+|k|hour in day (1~24)|k|24|
+| | |kk|24|
+|m|minute in hour|m|4|
+| | |mm|04|
+|s|second in minute|s|5|
+| | |ss|05|
+|X|Time Zone: ISO8601 basic hm?, with Z for 0|X|-08, +0530, Z|
+| |Time Zone: ISO8601 basic hm, with Z|XX|-0800, Z|
+| |Time Zone: ISO8601 extended hm, with Z|XXX|-08:00, Z|
+| |Time Zone: ISO8601 basic hms?, with Z|XXXX|-0800, -075258, Z|
+| |Time Zone: ISO8601 extended hms?, with Z|XXXXX|-08:00, -07:52:58, Z|
+|x|Time Zone: ISO8601 basic hm?, without Z for 0|x|-08, +0530|
+| |Time Zone: ISO8601 basic hm, without Z|xx|-800|
+| |Time Zone: ISO8601 extended hm, without Z|xxx|-08:00|
+| |Time Zone: ISO8601 basic hms?, without Z|xxxx|-0800, -075258|
+| |Time Zone: ISO8601 extended hms?, without Z|xxxxx|-08:00, -07:52:58|
+|O|Time Zone: short localized GMT|O|GMT-8|
+| |Time Zone: long localized GMT (=ZZZZ)|OOOO|GMT-08:00|
+|z|Time Zone: specific non-location|z, zz, or zzz|-0800|
+| | |zzzz|GMT-08:00|
+| | |zzzzz|-08:00, -07:52:58, Z|
+|| | | |
+|'|escape for text|'|'|
+|' '|two single quotes produce one|' '|' '|
+
+
+
+## Exploring patterns
+
+
+### `y` vs `Y`
+
+`y` is the calendar year, while `Y` is the year based on the week number. For example, if the first days of January 2010 are not week #1, then y = 2010 but Y = 2009 (until the date where the 1st week of 2010 begins).
+
+### `L` (stand-alone) vs `M`
+
+In some languages (Russian, Slovak), the month used alone is different from the month in a date. In "January 10, 2010", "January" is not spelled the same as in "*rendez-vous* in January".
+
+### `e` vs `c`
+
+Same remark as for `L` and `M`: `c` is for a day used alone "every tuesday") and `e` is for a day in a date ("Tuesday January 15, 1951").
+
+### `E` vs `e`
+
+`e` is based on system settings: if the week is defined in the system as starting on a Wednesday, then Wednesday will have the numerical value "1" (or zero) whereas "E" always returns the same value (from 1 to 7 or from 0 to 6).
+
+### Leading zeros
+
+In general, when the number of letters in the formatting string is higher than the expected number, leading zeros are added. Ex: "yyyyyy" would give "001996".
+
+### Localized parts
+
+Some parts of the outputs, such as "midnight" or "Tuesday" are localized, according to regional settings.
+
+For example, for the time `13:25:34`, "B" will display *in the afternoon* on an US system, and *après-midi* on a French system.
+
+
+### Extra letters
+
+Formatting strings can contain characters not to be interpreted as formatting characters: if they are between "a" and "z" or "A" and "Z", they must be enclosed in single quotes.
+
+For example:
+
+"15:30:00" with pattern "HH 'hours and' mm 'minutes'" produces "15 hours and 30 minutes".
+
+### Starting and ending spaces
+
+Starting and ending spaces in patterns are automatically trimmed in outputs. If you want to add spaces before or after the resulting string, you must enclose them in single quotes.
+
+For example:
+
+" HH : mm : ss " ---> "09 : 10 : 25"
+"' 'HH : mm : ss' '" ---> " 09 : 10 : 25 "
+
+
+## Examples
+
+|Date or time|Pattern|Result|Comments|
+|---|---|----|---|
+|15/06/2000|"QQQQ"|"2nd quarter"|localized|
+|17/03/2001|"D"|"76"|76th day of the year|
+|17/03/1954|"w"|"11"|11th week of the year|
+|17/03/1954|"eeee"|"Wednesday"|localized|
+|15:00:00|"a"|"PM"||
+|18:00:00|"K a"|"6 PM"||
+|13:30:15|"hh:mm aa O"|"01:30 PM GMT+1"
+
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/events/bindingActionToEvents.md b/versioned_docs/version-21/4DQodlyPro/pageLoaders/events/bindingActionToEvents.md
new file mode 100644
index 000000000..3e382d081
--- /dev/null
+++ b/versioned_docs/version-21/4DQodlyPro/pageLoaders/events/bindingActionToEvents.md
@@ -0,0 +1,573 @@
+---
+id: bindingActionToEvents
+title: Binding Actions to Events
+---
+
+import Column from '@site/src/components/Column'
+
+## Binding Standard Actions to Events
+
+Standard actions are applicable to both Qodly Sources and States, with their availability and specific functionality depending on the type of qodlysource or state involved. Qodly Sources can be categorized into three types: Entity, Entity Selection, and Scalar. Additionally, actions within Page states play a crucial role in defining the page's behavior in response to user interactions, further enhancing the dynamic capabilities of the system.
+
+### Qodly Sources
+
+After binding a standard action to a qodlysource with an event, follow these steps:
+
+
+1. **Define Action**: Proceed to the Action section to unvail the available actions, which vary depending on the type of the qodlysource:
+
+ | Qodly Source Type | Action | Icon | Description |
+ |------------------|-----------------------|----------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------|
+ | Scalar | Copy |  | Copy the content of the qodlysource to a target qodlysource |
+ | | Set Value |  | Update the qodlysource with a new value, which can be a String, Number, Boolean, Date, Array, or Object (with JSON validity). Note that this will trigger any configured OnChange event for the qodlysource. |
+ | | Clear |  | Erase the content within the qodlysource |
+ | | Reset |  | Resets the qodlysource to its initial 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 |
+ | | 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 |
+ | | Reset |  | Resets the entity selection qodlysource to its initial value (All or none) |
+ | | Copy |  | Copy the entity selection to a target entity selection qodlysource |
+ | | Clean |  | Clean the entity selection to ensure it references only existing entities, maintaining consistent length with the referenced entities Qodly Source |
+ | Entity | Create |  | Generate a new entity in memory from the corresponding dataclass (see Note) |
+ | | Save |  | Save the entity on the server |
+ | | Reload |  | Reload entity values from the server |
+ | | Drop |  | Delete the entity on the server |
+ | | Copy |  | Copy the entity to a target entity qodlysource |
+ | | Clear |  | Put `null` in the qodlysource. If the qodlysource is the selected element of a component (Matrix, Select box, Datatable), clearing the qodlysource also unselects the selected element |
+ | | Reset |  | Resets the entity qodlysource to its initial value (First or none) |
+ | | First |  | Navigate to the first entity within the entity selection |
+ | | Previous |  | Move to the previous entity within the entity selection |
+ | | Next |  | Advance to the next entity within the entity selection |
+ | | Last |  | Navigate to the last entity within the entity selection |
+ | Entity (Standalone)| Create |  | Generate a new entity in memory from the corresponding dataclass (see Note) |
+ | | Save |  | Save the entity on the server |
+ | | Reload |  | Reload entity values from the server |
+ | | Drop |  | Delete the entity on the server |
+ | | Copy |  | Copy the entity to a target entity qodlysource |
+ | | Clear |  | Put `null` in the qodlysource. If the qodlysource is the selected element of a component (Matrix, Select box, Datatable), clearing the qodlysource also unselects the selected element |
+ | | Reset |  | Resets the qodlysource to its initial value |
+ | Iterator ($This) | Copy |  | Copy the entity to a target entity qodlysource |
+ | | Drop |  | Delete the entity on the server |
+
+
+
+:::info
+[Entities originating from an Entity Selection Qodly Source](../qodlySources.md#standalone-entity-vs-entity-from-es) enable iterative navigation within the selection, while [Independently Created Standalone Entities](../qodlySources.md#standalone-entity-vs-entity-from-es) are generated independently and lack any selection affiliation.
+:::
+
+Provide Feedback checkbox to customize the handling of unexpected error messages, determining what will be displayed to end users. For more detailed information, refer to the Provide Feedback section. Here, you have the ability to:
+
+
+
+
+ Provide simple UI feedback on a Save, Reload, or Drop standard action on an entity.
+ Provide simple UI feedback on a Reload, Order by, or Query standard action on an EntitySelection.
+
+
+
+
+
+
+### States
+
+Upon binding a standard action to a state, follow these steps:
+
+1. **Define Action**: Proceed to the Action section to unvail the available actions, which vary depending on the type of the qodlysource:
+
+
+
+
+ - Add Action : Utilized for incorporating modifications from selected states into the base state.
+
+
+
+
+
+
+
+
+ - Delete Action : This action facilitates the removal of selected states, along with their changes, in relation to the base state.
+
+
+
+
+
+
+:::tip
+When a new state is applied or removed as a user interacts with an input field, the interaction remains uninterrupted ensuring that the focus on the input field is not lost by the state change.
+:::
+
+
+
+
+ When triggering these actions, users can select from available states, which are then tagged in the state field.
+
+
+
+
+
+
+
+ Navigation actions can be configured to direct users to particular targets by associating these actions with specific events.
+
+
+
+
+
+The navigation target can be defined in two ways using the toggle
+
+ - Qodly Sources : When the destination Page or external link is generated through server-side business logic. In such cases, provide a qodlysource of type string.
+
+
+
+
+
+
+
+ - Hardcoded values : When selecting a Page from the Pages list or providing a direct link as a hardcoded value.
+
+
+
+
+
+
+### Pages
+
+To set up a navigation action after linking it with an event, proceed as follows:
+
+
+
+ 1. Choose Target Type : Select the "Page" option.
+
+
+
+
+
+2. Either:
+
+ - **Specify Target Pages for "Qodly Source" type targets**: Enter the string-type qodlysource containing the name of the intended Page.
+
+ - **Explore Target Pages for "Hardcoded Value" type targets**: Browse through the list of available Pages, each serving as a potential navigation destination.
+
+3. **Define Transition Method**: Define the approach through which the target Page will be presented based on the following options:
+
+
+
+
+ New Tab: Induce the opening of a new browser tab.
+ Current Tab: Replace the ongoing browser tab with the chosen Page.
+ Page Loader: Access the intended Page through a dedicated Page loader .
+ Page Loader (Self): Reveals content within the existing Page loader .
+
+
+
+
+
+
+:::info
+Shared datasources are reinitialized with each tab navigation. However, when using a Page Loader (or Page Loader Self) during navigation, shared values persist across pages, preventing reinitialization and maintaining state continuity.
+:::
+
+:::tip
+The feature for providing feedback is not applicable in the context of navigation events.
+:::
+
+### External Links
+
+In addition to navigating to Pages, Qodly Studio offers a convenient way to direct users to external links. The process follows the same steps as outlined for [associating navigation actions with events for Pages](#pages), with a slight variation in the "Target Type" step:
+
+
+
+
+ 1. Choose Target Type : Select the "External Link" option and input the URL of the desired external link.
+
+
+
+
+
+
+
+ 2. Define Transition Method : Similar to configuring Page navigation, you can specify how the external link will open. However, for external links, you have two options:
+
+ New Tab : Induce the opening of a new browser tab.Current Tab : Replace the ongoing browser tab with the chosen external link.
+
+
+
+
+
+
+
+### Shared Folder
+
+Accessing content stored in the **Shared** folder follows a process similar to [navigating to external links](#external-links). You have the option to display items from this folder, like images, in either a new tab or the current tab by specifying the image path (e.g., `/$shared/visuals/banner.png`) in the target field. Ensure that the path begins with `/$shared`.
+
+:::tip
+When the path points to a file, it doesn't open it in a new tab but instead initiates a download.
+:::
+
+
+## Binding Class Functions to Events
+
+### Class Functions
+
+
+
+ Data model class functions can be linked to events, utilizing parameters from qodlysources or static values, with the option to assign the result to a qodlysource as needed. After binding a class function with an event, follow these steps:
+
+
+
+
+
+1. **Select a Function**: Browse the available functions and select an appropriate class function (A class function will only be available if it is **exposed**; otherwise, it will appear as disabled ). You can link events to various types of class functions, including datastore class functions, dataclass class functions, entity class functions, entity selection class functions, and singleton class functions.
+
+2. **Pass Parameters**: After selecting a class function, Qodly Studio automatically parses it, extracting its declared prototype. This allows you to visualize and configure its parameter(s) and return value. You can enhance the functionality of class functions by configuring parameters in two ways using the toggle
+
+
+ If your class function defines a specific variable for the result, its name will be displayed in the label within the return parameter section.
+ However, if your class function does not specify a result name, the default label result will be used in the return parameter section.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+ 5. Provide Feedback : Enable the Provide Feedback checkbox to display backend feedback on the user interface. For more detailed information, refer to the Provide Feedback section.
+
+
+
+
+
+
+:::tip
+A single class function can be utilized across multiple events, allowing you to assign multiple events to a single function and observe a coordinated sequence of actions taking place.
+:::
+
+### Function Parameters & Variability
+
+#### Parameter Handling
+
+There are two primary methods for ensuring precise parameter handling:
+
+
+
+ - Hardcoded values : Provide various types of values directly to the class function as parameters by selecting the type through the value icon
+
+
+
+
+
+ The following types are supported as hard-coded values:
+
+
+ Type Description Example
+
+
+ String Any string value Hello World
+ Object JSON syntax {"age": 12, "name": "Smith"}
+ Array Collection of values [10, 20, 30]
+ Number Any numeric value 42
+ Date A short-format date 20/12/2024
+ Boolean True or False False
+
+
+
+
+:::info
+
+
+ Toggling hardcoded values and entering values that differ from the specified type will promptly trigger an error message beneath the parameter field.
+
+
+
+
+:::
+
+
+
+ - Qodly Sources : Pass Local or Shared Qodly Sources as parameters to the class function. The scope of the qodlysource is indicated by a name tag. If the tag reads Page, it signifies a local qodlysource visible only within the current Page. On the other hand, if there is a tag with a specific name shared, it implies that you have passed a shared qodlysource belonging to a namespace.
+
+
+
+
+#### Variadic Parameters
+
+
+
+ Utilize the ... notation in function prototypes to handle a variable number of parameters .
+
+
+
+
+
+
+
+ When creating a variadic function, such as one of type integer, without parameters, associating it with an event initially generates an empty function prototype.
+
+
+
+
+
+
+
+ However, when parameters are added to the event, they all adopt the specified type (e.g., integer) for the variadic parameters.
+ Reloading the Event Function Prototype after changing one of the parameter types resets them to match the updated information.
+
+
+
+
+
+:::info
+
+
+ If a variadic function incorporates mixed parameter types, like a string parameter followed by variadic parameters of type integer:
+
+
+
+
+
+
+ Qodly ensures the first parameter is of type string when associating it with an event. Subsequent parameters will align with their specified types, such as number for the variadic parameters.
+
+
+
+
+:::
+
+### 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.
+
+#### Example
+
+Consider a function called `product.productManual`, which is exposed with the `onHTTPGet` keyword. This function can retrieve a product manual in PDF format based on the `productName` parameter. When bound to an onclick event, users can download or view the manual by simply clicking a button.
+
+
+
+ ```4d
+ exposed onHTTPGet Function productManual($productName : Text) : 4D.OutgoingMessage
+ var $manual : 4D.File
+ var $response : 4D.OutgoingMessage := 4D.OutgoingMessage.new()
+
+ // Specify the file location based on the product name
+ $manual := File("/SOURCES/Shared/" + productName + ".pdf")
+
+ // Set the file content as the body of the outgoing message
+ $response.setBody($manual.getContent())
+
+ // Set the appropriate Content-Type for a PDF
+ $response.setHeader("Content-Type"; "application/pdf")
+
+ // Return the constructed response
+ return $response
+ ```
+
+
+ ```qs
+ exposed onHTTPGet function productManual(productName : string) : 4D.OutgoingMessage
+ var manual : 4D.File
+ var response : 4D.OutgoingMessage = 4D.OutgoingMessage.new()
+
+ // Specify the file location based on the product name
+ manual = file("/SOURCES/Shared/" + productName + ".pdf")
+
+ // Set the file content as the body of the outgoing message
+ response.setBody(manual.getContent())
+
+ // Set the appropriate Content-Type for a PDF
+ response.setHeader("Content-Type", "application/pdf")
+
+ // Return the constructed response
+ return response
+ ```
+
+
+
+
+#### Configuring Display Options
+
+`onHttpGet` functions include a distinct `Open In` setting to control how the `4D.OutgoingMessage` response is displayed in the browser. This setting provides three options:
+
+
+
+
+ New Browser Tab : Opens the response in a new browser tab, allowing users to view or download content like PDFs independently.Current Browser Tab : Loads the content in the current tab, replacing the existing page content.Nowhere : Ignores the response, preventing the browser from displaying any content, even if the function returns a 4D.OutgoingMessage instance. This option is useful for backend processing where a visible response is not required.
+
+
+
+
+
+:::tip No Result Datasource
+`onHttpGet` functions cannot store their results in a Qodly datasource. The result is handled purely through the display options in `Open In`, ensuring that the function’s output is managed directly by the browser rather than the application’s data layer.
+:::
+
+## Binding Dialog Actions to Events
+
+
+
+ Components within a Page can be configured to trigger dialog-related events. By choosing the Add a dialog action in a component's event configuration, you can define the following:
+
+
+
+
+
+
+
+ 1. The type of action:
+
+ Open : This action causes the dialog to be displayed.Close : This action leads to the closing of the dialog.
+
+
+
+
+
+
+
+ 2. The name of the dialog to be affected by this interaction.
+
+
+
+
+
+:::info
+For further details, refer to the [Dialog](../components/dialog.md) section.
+:::
+
+## Providing feedback
+
+To provide feedback within the user interface, enable the `Provide Feedback` checkbox. This feature allows the backend to communicate with the user by displaying relevant messages regarding the outcomes of different functions or standard actions.
+
+:::info
+Importantly, this customized feedback aligns with the application's business rules and does not disrupt the application's navigation flow.
+:::
+
+### 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.
+
+:::info
+If this feature is not enabled, feedback sent from the backend will not be displayed within the user interface.
+:::
+
+### Control of Feedback Display
+
+The `Provide Feedback` checkbox offers manual control over the display of feedback messages when executing a specific function. This manual control is designed to determine when to provide and display feedback, ensuring that messages precisely align with the specific needs of the user and the context.
+
+For example, in the context of a technical document, regular users may require feedback messages to stay informed about the status of their requests, such as waiting for admin approval. However, administrators using a different interface to make modifications to the same technical document, which invokes the same function, might not need to receive the same message due to their administrative roles.
+
+
+### Three Tiers of Feedback
+
+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.
+
+- **Cautionary Messages**: Sends out cautionary messages, and these messages are exclusively triggered using the [`setWarning()`](../../../QodlyinCloud/qodlyScript/WebFormClass.md#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.
+
+
+
+ To remove a defined action, simply click on the trash icon
+
+
+
+
+## Copying an Event Action
+
+To facilitate easier management of repetitive event actions across various parts of your application, follow these steps:
+
+
+
+ 1. Locate the Event Action : Navigate to the event action you intend to copy.
+
+
+
+
+
+2. **Copy the Event Action**: Click the copy button
+
+ 2. Edit the Function Call : To change the function, click the "Edit Function" button
+
+
+
+
+
+
+
+ 3. Choose the Function : Use the typeahead dropdown to select the new function you wish to use. Options appear based on your input for easier selection.
+
+
+
+
+
+
+
+
+ 4. Confirm the Changes : Once you select the new function, click "Confirm" to update the event action. The event action will maintain its parameters and return values as closely as possible to the original configuration.
+
+
+
+
+
+## Toggling Event Execution
+
+
+
+ To manage whether an event should execute during rendering, you can toggle its execution status using the toggle icon
+
+
+
+
+This feature is valuable for scenarios like debugging or temporarily pausing specific event executions without removing them from your application entirely.
+
+## Toggle Event Card Visibility
+
+When the contextual panel is opened for a component or a qodlysource, all events are initially collapsed to provide a concise representation of their content. To expand all event cards, click the
+
+ Choose between table (default) or line format by clicking the
+
+
+
+:::
+
+### Standard Action
+
+For events bound to Standard actions, the collapsed card displays the qodlysource name involved, followed by its namespace if it's shared or `Page` when local, on the left side. On the right side, the icon of the standard action is shown.
+
+
+
+
+
+
+
+
+However, in specific cases, there may be minor differences in the display. For instance, in the case of the standard `Copy` action, the right side, instead of showing the icon of the standard action, displays the targeted qodlysource where the copying is intended.
+
+
+
+
+
+
+
+
+### Navigation Action
+
+For events bound to Navigation actions, the collapsed card displays only the targeted Page on the left side, with the icon of the transition method on the right side.
+
+
+
+
+
+
+
+
+### Class Functions
+
+For events bound to Class functions, the collapsed card displays the function signature, including its name, parameters with filled values, and the returned result. The keyword displayed in the event card varies depending on the type:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### Dialog
+
+For events bound to Dialogs, the collapsed card displays the action type name, followed by the dialog name involved.
+
+
+
+
+
+
+
+
+## Reload Event Function Prototype
+
+
+
+ When you make modifications to the function prototype in the code editor, such as adding or removing parameters or changing their types, and you want these changes to be applied to the Function event card, you can easily do so by clicking the reload button. Qodly will then re-parse the function prototype to reflect the updated information while preserving the already assigned qodlysources as parameters.
+
+
+
+
+
+## Chaining actions
+
+In event coordination, actions are linked together sequentially. Pay attention to the alignment of each action with its predecessor, contributing to the overall flow and effectiveness of the process.
+
+
+## Preview Section
+
+In the preview section, various capabilities are available when actions are bound to a specific event, depending on the type of action. It's worth mentioning that standard actions have no effect in this context.
+
+
+
+ - Preview Function Code : Selecting a function bound to a particular event allows you to preview its content within the preview section.
+
+
+
+
+
+
+
+ - Edit Function Code : To directly open and edit a function associated with a specific event, simply select the function and click on the function edit icon
+
+
+
+
+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) |
+|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|
+
+## Circular Dependency Risk
+
+Using the `Reload` standard action within an `On Change` event can create a circular dependency. This causes Qodly Studio to enter an infinite loop of reloading, which results in the application freezing.
+
+When you set an **On Change** event to reload the qodly source, the following happens:
+
+- A change in the qodly source triggers the On Change event.
+
+- The On Change event contains a Reload standard action.
+
+- The Reload standard action causes the qodly source to reload, which is considered a change.
+
+- This change triggers the On Change event again.
+
+This creates a loop:
+
+ Change → On Change Event → Reload Standard Action → Change → On Change Event → Reload Standard Action → ...
+
+This loop continues indefinitely until Qodly Studio runs out of resources or crashes, leading to the application freezing.
+
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/+New.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/+New.png
new file mode 100644
index 000000000..f76f7cabb
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/+New.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/BindingQodlySourceToComponent.gif b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/BindingQodlySourceToComponent.gif
new file mode 100644
index 000000000..0ae23396c
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/BindingQodlySourceToComponent.gif differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/Built-inSharedQodlyNamespace.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/Built-inSharedQodlyNamespace.png
new file mode 100644
index 000000000..bb8c14a0f
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/Built-inSharedQodlyNamespace.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/Catalog.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/Catalog.png
new file mode 100644
index 000000000..1ef350681
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/Catalog.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/DataAccessPanel.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/DataAccessPanel.png
new file mode 100644
index 000000000..539e3b913
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/DataAccessPanel.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/EntitiesFromEntitySelection.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/EntitiesFromEntitySelection.png
new file mode 100644
index 000000000..1fe228da7
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/EntitiesFromEntitySelection.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/Namespace.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/Namespace.png
new file mode 100644
index 000000000..3fb8caaac
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/Namespace.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/PageEditorOverview.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/PageEditorOverview.png
new file mode 100644
index 000000000..6b8d88392
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/PageEditorOverview.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/QodlySource-1.1.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/QodlySource-1.1.png
new file mode 100644
index 000000000..1f3a5e1d5
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/QodlySource-1.1.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/QodlySource-1.2.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/QodlySource-1.2.png
new file mode 100644
index 000000000..95c19fe03
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/QodlySource-1.2.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/QodlySource.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/QodlySource.png
new file mode 100644
index 000000000..a11dae57e
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/QodlySource.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/QodlySourceEdit.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/QodlySourceEdit.png
new file mode 100644
index 000000000..b1e21c12d
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/QodlySourceEdit.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/QodlySourceEdit2.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/QodlySourceEdit2.png
new file mode 100644
index 000000000..0357dbd55
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/QodlySourceEdit2.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/QodlysourceLocation.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/QodlysourceLocation.png
new file mode 100644
index 000000000..5f64b6b62
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/QodlysourceLocation.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/QodlysourceUserLanguage.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/QodlysourceUserLanguage.png
new file mode 100644
index 000000000..267ed2632
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/QodlysourceUserLanguage.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/ThisPage.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/ThisPage.png
new file mode 100644
index 000000000..2dd2c5993
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/ThisPage.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/addCssClass.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/addCssClass.png
new file mode 100644
index 000000000..88e02e156
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/addCssClass.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/breadcrumbs.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/breadcrumbs.png
new file mode 100644
index 000000000..29bf88caf
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/breadcrumbs.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/cannotEditThemeCSSClassCode.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/cannotEditThemeCSSClassCode.png
new file mode 100644
index 000000000..24845fe67
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/cannotEditThemeCSSClassCode.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/canvas.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/canvas.png
new file mode 100644
index 000000000..54e414c2f
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/canvas.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/class1.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/class1.png
new file mode 100644
index 000000000..02afb8dab
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/class1.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/classNameField.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/classNameField.png
new file mode 100644
index 000000000..fbd2930aa
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/classNameField.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/contextualPanel_addStandardActionEvent.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/contextualPanel_addStandardActionEvent.png
new file mode 100644
index 000000000..b55bf53a8
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/contextualPanel_addStandardActionEvent.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/contextualPanel_tabCSS.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/contextualPanel_tabCSS.png
new file mode 100644
index 000000000..fe62a3efd
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/contextualPanel_tabCSS.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/contextualPanel_tabComponent.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/contextualPanel_tabComponent.png
new file mode 100644
index 000000000..277737f9e
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/contextualPanel_tabComponent.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/contextualPanel_tabQodlySource.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/contextualPanel_tabQodlySource.png
new file mode 100644
index 000000000..055c4a6c6
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/contextualPanel_tabQodlySource.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/craftedComponent_CraftedSection.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/craftedComponent_CraftedSection.png
new file mode 100644
index 000000000..3f5e273e0
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/craftedComponent_CraftedSection.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/craftedComponent_Event.gif b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/craftedComponent_Event.gif
new file mode 100644
index 000000000..107f86d28
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/craftedComponent_Event.gif differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/craftedComponent_SaveAsCraft.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/craftedComponent_SaveAsCraft.png
new file mode 100644
index 000000000..01c6acc7c
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/craftedComponent_SaveAsCraft.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/craftedComponent_localCSSclass.gif b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/craftedComponent_localCSSclass.gif
new file mode 100644
index 000000000..242bfd212
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/craftedComponent_localCSSclass.gif differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/craftedComponent_nameIcon.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/craftedComponent_nameIcon.png
new file mode 100644
index 000000000..b891f170e
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/craftedComponent_nameIcon.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/createCssClass.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/createCssClass.png
new file mode 100644
index 000000000..915ee7333
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/createCssClass.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/createCssClass2.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/createCssClass2.png
new file mode 100644
index 000000000..a63ab0705
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/createCssClass2.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/css.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/css.png
new file mode 100644
index 000000000..c6f64da8a
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/css.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/cssinspect.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/cssinspect.png
new file mode 100644
index 000000000..aef793aca
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/cssinspect.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/delete-unused_css.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/delete-unused_css.png
new file mode 100644
index 000000000..1b5049b86
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/delete-unused_css.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/delete-unused_dts.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/delete-unused_dts.png
new file mode 100644
index 000000000..1bd3c2399
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/delete-unused_dts.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/delete.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/delete.png
new file mode 100644
index 000000000..f96ec5723
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/delete.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/difference_betweenStandalone&Associated.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/difference_betweenStandalone&Associated.png
new file mode 100644
index 000000000..a19fa2841
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/difference_betweenStandalone&Associated.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/display.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/display.png
new file mode 100644
index 000000000..b1a05e0a4
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/display.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/edit-events-report.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/edit-events-report.png
new file mode 100644
index 000000000..bf6bb7584
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/edit-events-report.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/edit.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/edit.png
new file mode 100644
index 000000000..0459d1735
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/edit.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/edit2.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/edit2.png
new file mode 100644
index 000000000..42526f51f
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/edit2.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/editCSSClassCode.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/editCSSClassCode.png
new file mode 100644
index 000000000..b27983c3f
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/editCSSClassCode.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/editCSSClassCode2.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/editCSSClassCode2.png
new file mode 100644
index 000000000..329f9418a
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/editCSSClassCode2.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/editClass.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/editClass.png
new file mode 100644
index 000000000..444a37ee6
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/editClass.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/event-QodlySource-event.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/event-QodlySource-event.png
new file mode 100644
index 000000000..d0de5f567
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/event-QodlySource-event.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/event-QodlySource-result.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/event-QodlySource-result.png
new file mode 100644
index 000000000..301467c6d
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/event-QodlySource-result.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/event-QodlySource.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/event-QodlySource.png
new file mode 100644
index 000000000..2bbcd57f2
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/event-QodlySource.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/event-function.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/event-function.png
new file mode 100644
index 000000000..5b48ffec2
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/event-function.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/events-report-switch.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/events-report-switch.png
new file mode 100644
index 000000000..2a72ada82
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/events-report-switch.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/events-report.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/events-report.png
new file mode 100644
index 000000000..6b050f310
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/events-report.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/explorer.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/explorer.png
new file mode 100644
index 000000000..af8c807e0
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/explorer.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/exportingStyles.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/exportingStyles.png
new file mode 100644
index 000000000..8f3834d70
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/exportingStyles.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/eye.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/eye.png
new file mode 100644
index 000000000..051f89044
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/eye.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/filter-events-report.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/filter-events-report.png
new file mode 100644
index 000000000..fe7a0cb6c
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/filter-events-report.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/flex.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/flex.png
new file mode 100644
index 000000000..a5507e46a
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/flex.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/headerPanel.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/headerPanel.png
new file mode 100644
index 000000000..76f6aca5e
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/headerPanel.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/headerPanel_Airy.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/headerPanel_Airy.png
new file mode 100644
index 000000000..5115e949c
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/headerPanel_Airy.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/headerPanel_Dialogs.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/headerPanel_Dialogs.png
new file mode 100644
index 000000000..2e09a42e8
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/headerPanel_Dialogs.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/headerPanel_dtscolor.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/headerPanel_dtscolor.png
new file mode 100644
index 000000000..cf409c3d6
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/headerPanel_dtscolor.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/headerPanel_render1.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/headerPanel_render1.png
new file mode 100644
index 000000000..1edaa2ffc
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/headerPanel_render1.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/headerPanel_render2.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/headerPanel_render2.png
new file mode 100644
index 000000000..1012997f2
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/headerPanel_render2.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/headerPanel_sanity-ok.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/headerPanel_sanity-ok.png
new file mode 100644
index 000000000..48e30d6bd
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/headerPanel_sanity-ok.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/homepageNewPage.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/homepageNewPage.png
new file mode 100644
index 000000000..ba94b1070
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/homepageNewPage.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/image-server-side.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/image-server-side.png
new file mode 100644
index 000000000..ce7e66427
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/image-server-side.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/inspect-button.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/inspect-button.png
new file mode 100644
index 000000000..af8a8b717
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/inspect-button.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/inspect-button2.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/inspect-button2.png
new file mode 100644
index 000000000..b227a2787
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/inspect-button2.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/inspect-button3.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/inspect-button3.png
new file mode 100644
index 000000000..855ae68e5
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/inspect-button3.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/matrix_orientations.gif b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/matrix_orientations.gif
new file mode 100644
index 000000000..c7dbaff5e
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/matrix_orientations.gif differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/maximizeQodlySourceEditor.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/maximizeQodlySourceEditor.png
new file mode 100644
index 000000000..b00edb6cc
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/maximizeQodlySourceEditor.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/message-error.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/message-error.png
new file mode 100644
index 000000000..1c84d7a5f
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/message-error.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/message-info.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/message-info.png
new file mode 100644
index 000000000..0e6e8fcf2
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/message-info.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/message-warning.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/message-warning.png
new file mode 100644
index 000000000..d6b171ea4
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/message-warning.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/navigationToggle.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/navigationToggle.png
new file mode 100644
index 000000000..f3b763c71
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/navigationToggle.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/number-1-icon.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/number-1-icon.png
new file mode 100644
index 000000000..d391add81
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/number-1-icon.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/outline.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/outline.png
new file mode 100644
index 000000000..1f557d10d
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/outline.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/padding.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/padding.png
new file mode 100644
index 000000000..710d8917c
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/padding.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/pageJSONRepresentation.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/pageJSONRepresentation.png
new file mode 100644
index 000000000..df70b6dca
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/pageJSONRepresentation.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/pageLocalizationButton.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/pageLocalizationButton.png
new file mode 100644
index 000000000..fdced0b2c
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/pageLocalizationButton.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/pageObject.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/pageObject.png
new file mode 100644
index 000000000..325e330b0
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/pageObject.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/plusPage.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/plusPage.png
new file mode 100644
index 000000000..485308292
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/plusPage.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/popupEditor.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/popupEditor.png
new file mode 100644
index 000000000..a962a9718
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/popupEditor.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/popupEditor2.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/popupEditor2.png
new file mode 100644
index 000000000..4b4f27850
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/popupEditor2.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/properties-panel.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/properties-panel.png
new file mode 100644
index 000000000..6ddf6991a
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/properties-panel.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/propertiesPanel_displayMode.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/propertiesPanel_displayMode.png
new file mode 100644
index 000000000..9b21e4d9b
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/propertiesPanel_displayMode.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/propertiesPanel_ref.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/propertiesPanel_ref.png
new file mode 100644
index 000000000..754b1f490
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/propertiesPanel_ref.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/propertiesPanel_refRoot.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/propertiesPanel_refRoot.png
new file mode 100644
index 000000000..8c3e494ed
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/propertiesPanel_refRoot.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/propertiesPanel_searchBox.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/propertiesPanel_searchBox.png
new file mode 100644
index 000000000..38121f9e9
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/propertiesPanel_searchBox.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/rename.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/rename.png
new file mode 100644
index 000000000..c6fe65988
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/rename.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/render-button.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/render-button.png
new file mode 100644
index 000000000..d527e49cd
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/render-button.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/resetValue.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/resetValue.png
new file mode 100644
index 000000000..32da49b71
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/resetValue.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/sanityCheck_error.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/sanityCheck_error.png
new file mode 100644
index 000000000..cd4f14bab
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/sanityCheck_error.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/sanityCheck_info.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/sanityCheck_info.png
new file mode 100644
index 000000000..187c8f6bb
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/sanityCheck_info.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/sanityCheck_warning.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/sanityCheck_warning.png
new file mode 100644
index 000000000..c32da4ed6
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/sanityCheck_warning.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/search-component.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/search-component.png
new file mode 100644
index 000000000..da5d8ddde
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/search-component.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/search-event.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/search-event.png
new file mode 100644
index 000000000..1ae40d883
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/search-event.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/serverSide.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/serverSide.png
new file mode 100644
index 000000000..c6c0b37d2
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/serverSide.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/share.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/share.png
new file mode 100644
index 000000000..44211f1c7
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/share.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/shared&local.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/shared&local.png
new file mode 100644
index 000000000..42ff20ec7
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/shared&local.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/shared-stylesheet.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/shared-stylesheet.png
new file mode 100644
index 000000000..2de534d2e
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/shared-stylesheet.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/shared.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/shared.png
new file mode 100644
index 000000000..af4813598
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/shared.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/singleton.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/singleton.png
new file mode 100644
index 000000000..8169a52be
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/singleton.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/standaloneEntities.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/standaloneEntities.png
new file mode 100644
index 000000000..cdb55dabb
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/standaloneEntities.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/style-panel.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/style-panel.png
new file mode 100644
index 000000000..9144cb505
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/style-panel.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/styles-library.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/styles-library.png
new file mode 100644
index 000000000..40b723f5b
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/styles-library.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/switch-event-report.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/switch-event-report.png
new file mode 100644
index 000000000..10c73e7f9
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/switch-event-report.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/syntaxCheck_brace.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/syntaxCheck_brace.png
new file mode 100644
index 000000000..483c0493e
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/syntaxCheck_brace.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/syntaxCheck_colon.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/syntaxCheck_colon.png
new file mode 100644
index 000000000..1041720bc
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/syntaxCheck_colon.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/syntaxCheck_comma.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/syntaxCheck_comma.png
new file mode 100644
index 000000000..f6b7fc56d
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/syntaxCheck_comma.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/syntaxCheck_string.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/syntaxCheck_string.png
new file mode 100644
index 000000000..f293591cb
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/syntaxCheck_string.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/syntaxCheck_value.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/syntaxCheck_value.png
new file mode 100644
index 000000000..28b97e547
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/syntaxCheck_value.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/tabs.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/tabs.png
new file mode 100644
index 000000000..59879dedd
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/tabs.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/tag.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/tag.png
new file mode 100644
index 000000000..ae8ffec5e
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/tag.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/tailwindCSS.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/tailwindCSS.png
new file mode 100644
index 000000000..5e71f1d1e
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/tailwindCSS.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_category.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_category.png
new file mode 100644
index 000000000..f0ba6e5ea
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_category.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_categoryTemplates.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_categoryTemplates.png
new file mode 100644
index 000000000..fe9eb9f0a
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_categoryTemplates.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_datatabbleBlueheader.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_datatabbleBlueheader.png
new file mode 100644
index 000000000..9d78676e3
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_datatabbleBlueheader.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_datatableCategory.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_datatableCategory.png
new file mode 100644
index 000000000..376393e8e
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_datatableCategory.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_datatableCustomizeColumnSource.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_datatableCustomizeColumnSource.png
new file mode 100644
index 000000000..7f9c66c2d
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_datatableCustomizeColumnSource.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_datatableCustomizeCss.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_datatableCustomizeCss.png
new file mode 100644
index 000000000..39e4321e8
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_datatableCustomizeCss.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_datatableCustomizeQodlySource.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_datatableCustomizeQodlySource.png
new file mode 100644
index 000000000..8bb820183
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_datatableCustomizeQodlySource.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_description.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_description.png
new file mode 100644
index 000000000..69ec1811a
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_description.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_grid.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_grid.png
new file mode 100644
index 000000000..16e202a37
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_grid.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_list.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_list.png
new file mode 100644
index 000000000..55f91cfa8
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_list.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_search.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_search.png
new file mode 100644
index 000000000..bc59939dd
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_search.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_tab.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_tab.png
new file mode 100644
index 000000000..1ffec9b9d
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/templates_tab.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/textEditor.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/textEditor.png
new file mode 100644
index 000000000..77884f36b
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/textEditor.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/theme.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/theme.png
new file mode 100644
index 000000000..ef8cf35f5
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/theme.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/trash.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/trash.png
new file mode 100644
index 000000000..7856aca68
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/trash.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/unit.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/unit.png
new file mode 100644
index 000000000..21abb58bc
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/unit.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/usingCSSClasses.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/usingCSSClasses.png
new file mode 100644
index 000000000..083129e0c
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/usingCSSClasses.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/view.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/view.png
new file mode 100644
index 000000000..ee24c5932
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/view.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/web-studio.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/web-studio.png
new file mode 100644
index 000000000..997c8548e
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/web-studio.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/zoom-controls.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/zoom-controls.png
new file mode 100644
index 000000000..78833e624
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/img/zoom-controls.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/pageLoaderOverview.md b/versioned_docs/version-21/4DQodlyPro/pageLoaders/pageLoaderOverview.md
new file mode 100644
index 000000000..1cc402b02
--- /dev/null
+++ b/versioned_docs/version-21/4DQodlyPro/pageLoaders/pageLoaderOverview.md
@@ -0,0 +1,898 @@
+---
+id: pageLoaderOverview
+title: Page Editor
+---
+import Column from '@site/src/components/Column'
+
+## Creating a Page
+
+In Qodly, a project's groundwork starts with a Page, which acts as the primary container integrating various components such as buttons and style boxes. There are three methods available for creating a Page:
+
+
+
+
+ On the Qodly Studio Homepage , select Page and name the new Page in the creation modal.
+ In the Explorer , simply click the plus icon located next to Pages.
+ While in the Page Editor , go to the New + tab and opt for Page.
+
+
+
+
+
+
+
+
+## Page Editor Overview
+
+The Page Editor enhances your application by providing a versatile toolkit for interface and content customization:
+
+
+
+ The Breadcrumbs feature showcases the hierarchy of your selected components. As you follow the trail, you can click on any parent component's name to choose it.
+
+
+
+
+
+
+
+## Outline
+
+
+
+ The outline section provides a visual representation of your Page's hierarchy, allowing you to grasp the structural arrangement.
+ By clicking on an element within the list, you can select it for further action, or utilize the drag-and-drop functionality within the outline to reposition elements. To manage the visibility of specific elements, simply click the eye icon
+
+
+
+
+
+
+## Header panel
+
+
+
+ For simplified project tracking, utilize the Project Management tools. Here are the key features:
+
+
+
+
+
+
+
+ - Errors : Errors are displayed in red and occur, for instance, when a component is linked to a non-existent qodlysource.
+
+
+
+
+
+
+
+ - Warnings : Warnings are shown in yellow, such as when a component needs to be bound to a qodlysource.
+
+
+
+
+
+
+
+ - Informational : Informational notices are in grey, like when a qodlysource is created but not utilized.
+
+
+
+
+
+:::info
+The Sanity Check serves as an informative tool. Even if errors are present, a Page can still be saved.
+:::
+
+
+### Qodly Source Color
+
+The Qodly Sources Color button
+
+ The Component tab enables linking actions like Class Functions , Navigation Actions , Standard Actions and Dialog Actions to a component's specific events, streamlining event-driven functionalities.
+
+
+
+
+
+
+### Qodly Source Tab
+
+
+
+ The Qodly Source tab facilitates management of actions such as Class Functions , Navigation Actions , Standard Actions and Dialog Actions tied to events linked with a qodlysource, providing a centralized interface for coordinating components and their data interactions.
+
+
+
+
+
+:::tip
+The Qodly Source tab becomes accessible only when a component is linked to a qodlysource.
+:::
+
+### CSS Tab
+
+
+
+ The CSS tab focuses on managing CSS classes applied to components, displaying them in a list on the left-hand side. Selecting a class from this list opens it in the CSS editing area for modification and highlights it.
+
+
+
+
+
+:::info Important Considerations:
+
+- **CSS Class Deletion**: Direct deletion of CSS classes from the Contextual Panel is not possible. For complete removal, navigate to the Styles Library.
+
+- **Removing CSS Classes from Components**: Unapplying a CSS class from a component requires alterations in the component's Properties Panel, not via the Contextual Panel.
+:::
+
+
+For further details about styling components, refer to the [Styling](styling.md) section.
+
+:::tip
+The CSS tab becomes accessible only when there are CSS classes applied to a component.
+:::
+
+
+## Properties panel
+
+The Properties panel is a powerful tool for customizing a wide array of component attributes, enabling you to shape their behavior and appearance to suit your needs. The available properties are contingent upon the specific component you have selected.
+
+### Display Modes
+
+The Properties Panel offers a pair of distinctive modes:
+
+- **Standard mode**: This mode presents a concise and straightforward view, ideal for configuring essential properties swiftly. Utilize it to quickly set up key attributes for your Page components.
+- **Advanced mode**: In this mode, a comprehensive view showcasing all available properties is provided. Choose this mode for intricate property definition, enabling meticulous configuration of design choices and parameters.
+
+
+
+ To toggle between modes, utilize the switch located in the top-right corner of the editor.
+
+
+
+
+
+
+### Component Reference (Ref)
+
+
+
+ This section introduces the internal ID assigned to the chosen component during creation. This unique identifier is utilized for referencing during Page Loader component navigation actions. The reference for a Page component is consistently set to ROOT
+
+
+
+
+
+### Search box
+
+
+
+ The search box feature streamlines property name searches, ensuring swift and convenient access. As you input characters, the property list dynamically updates, displaying only properties with corresponding names.
+
+
+
+
+
+
+### Properties Category
+
+Enhance a component to align with your application's requirements using the available customization options, depending on the component selected.
+
+:::info
+Each component's documentation contains its own dedicated section explaining these customization possibilities.
+:::
+
+### Component
+
+#### Disabling a Component
+
+The "Disable" feature allows to disable components within a Page, ensuring they exhibit consistent behavior and appearance when disabled. When a component is disabled, it has distinct behaviors in both build mode and rendering mode:
+
+1. **Build Mode**:
+
+ - **Behavior**: All potentially triggered events actions on certain events are activated. This ensures that the component is visually distinct and users are aware that it is disabled.
+
+ - **Appearance**: The component appears grayed out only, indicating that it is disabled and not interactive. Nothing else is changed in the appearance.
+
+2. **Rendering Mode**:
+
+ - **Behavior**: Actions set up on events are not triggered. This ensures that no interactions can occur with the disabled component, maintaining the intended functionality.
+
+ - **Appearance**: Most components share the same appearance details when disabled:
+
+ - **Cursor**: `not-allowed`
+ - **Opacity**: applied
+
+ However, certain components have additional behaviors when disabled:
+
+ | Component | Additional Behavior |
+ |--------------|-----------------------------------------|
+ | Tabs | Not clickable |
+ | Text Input | No text entry |
+ | File Upload | No file selection |
+ | Radio | Not clickable |
+ | Range Input | Slider cannot be moved |
+ | Select Input | Value cannot be changed |
+ | Check Box | Not clickable |
+ | Select Box | Selection cannot be changed, CSS selectors not applied |
+ | Datatable | Selection cannot be changed, CSS selectors not applied |
+ | Matrix | Selection cannot be changed, CSS selectors not applied |
+
+
+:::info
+For complex components such as Text Input, Slider, Select Input, and Check Box, the disabled property is also applicable to sub-components.
+:::
+
+:::tip Customizing Disabled Rendering
+Overwriting the default disabled rendering is achieved by applying custom CSS classes. This allows for flexibility in design while maintaining the disabled state functionality.
+
+
+```css
+self:disabled {
+ background-color: #e9f1fc;
+}
+```
+
+:::
+
+
+
+### Data Access Category
+
+Configure the interaction between your chosen component and its associated qodlysource, if applicable. These property details are extensively covered in the [**Qodly Sources**](qodlySources.md) section.
+
+The Data Access properties encompass distinct options and fields tailored to each specific component, including:
+
+- **Qodly Source**: Identifies the qodlysource for component iteration.
+- **Selected Element**: Specifies the currently selected element within the component.
+- **Iterate with**: Utilizes a qodlysource for looping through the same dataset.
+
+ #### Server Side:
+
+
+
+ Server Side Provides the means to exercise server-side control over a component's behavior. This involves assigning a Server Side reference, essentially an "address" on the server, to a specific component. By doing so, you enable the utilization of this reference in class functions, thereby governing the component's actions.
+
+
+
+
+
+
+
+ To restore the value of an attribute within the Style category to its default value, simply click on the attribute's name and select Reset Value.
+
+
+
+
+:::
+
+## Page JSON Representation
+
+
+
+ In Qodly Studio, every Page possesses a unique JSON representation. Explorer and choosing Open With a Text Editor.
+
+
+
+
+
+### Purpose
+
+The JSON representation serves as a fundamental blueprint for the Page. Its primary purposes include:
+
+- **Secure Preservation**: It securely preserves the Page in a structured, machine-readable format.
+
+- **Consistent Modification**: It simplifies the process of modifying component-related details to customize the Page, resolve issues, or perform global search and replace operation.
+
+- **Easy Replication**: It allows users to effortlessly replicate the entire Page, including its design and functionality, by copying and pasting it into another Page's text editor.
+
+:::tip Notably:
+This process ensures the seamless replication of even local qodlysources and locally defined CSS classes, guaranteeing a consistent visual style and behavior across the target Page.
+:::
+
+### Example
+
+Let's explore the JSON representation of a Page that includes a [Page Loader](./components/pageLoader.md) component and a [Stylebox](./components/stylebox.md) component encapsulating a [Text](./components/text.md) component and a [Radio](./components/radio.md) component.
+
+
+
+```javascript
+{
+ "metadata": {
+ "v": "1.0",
+ "qodlysources": [
+ {
+ "id": "homePage",
+ "type": "scalar",
+ "namespace": "",
+ "dataType": "string",
+ "initialValue": "home"
+ },
+ {
+ "id": "version",
+ "type": "scalar",
+ "namespace": "",
+ "dataType": "string",
+ "initialValue": ""
+ }
+ ],
+ "styles": [
+ {
+ "name": "comforterBrush",
+ "content": "self {\n\tfont-family: \"Comforter Brush\", cursive !important;\n}",
+ "parentId": null,
+ "id": "Ub8fl59kqIYbend2op18M"
+ }
+ ]
+ },
+ "components": {
+ "ROOT": {
+ "type": {
+ "resolvedName": "Container"
+ },
+ "isCanvas": true,
+ "props": {
+ "classNames": [],
+ "events": [
+ {
+ "type": "method",
+ "dataclass": "DataStore",
+ "events": [
+ "onload"
+ ],
+ "id": "77VxabQYTbMyky6JW2MmJm",
+ "method": "ds.loadUser",
+ "params": [],
+ "returns": {
+ "name": "$0",
+ "type": "Variable",
+ "qodlysource": "userManagement:user"
+ }
+ }
+ ],
+ "className": "bg-white h-full w-full px-6",
+ "airyMode": false,
+ "style": {
+ "paddingTop": "0px",
+ "paddingRight": "0px",
+ "paddingBottom": "0px",
+ "paddingLeft": "0px"
+ },
+ "serverSideRef": "PageRef"
+ },
+ "displayName": "Page",
+ "custom": {},
+ "parent": "",
+ "hidden": false,
+ "nodes": [
+ "JT1BLTebtT",
+ "bXx3gBHhJA"
+ ],
+ "linkedNodes": {}
+ },
+ "JT1BLTebtT": {
+ "type": {
+ "resolvedName": "StyleBox"
+ },
+ "isCanvas": true,
+ "props": {
+ "events": [],
+ "style": {
+ "backgroundColor": "#ffffffff",
+ "display": "flex",
+ "paddingLeft": "0px",
+ "paddingRight": "0px",
+ "gap": "20px",
+ "paddingTop": "0px",
+ "paddingBottom": "0px",
+ "borderBottomColor": "#FFBC00",
+ "borderBottomWidth": "4px",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "flexWrap": "wrap",
+ "alignContent": "center",
+ "width": "100%",
+ "minWidth": "100%",
+ "height": "10%"
+ },
+ "serverSideRef": "",
+ "iterableChild": true
+ },
+ "displayName": "Stylebox",
+ "custom": {
+ "displayName": "Header"
+ },
+ "parent": "ROOT",
+ "hidden": false,
+ "nodes": [
+ "0aNlvNGY8X",
+ "KeLZVvKaHp"
+ ],
+ "linkedNodes": {}
+ },
+ "0aNlvNGY8X": {
+ "type": {
+ "resolvedName": "Text"
+ },
+ "isCanvas": false,
+ "props": {
+ "events": [],
+ "doc": [
+ {
+ "type": "paragraph",
+ "children": [
+ {
+ "text": "TravelTrove ",
+ "italic": false,
+ "underlined": false,
+ "strikethrough": false,
+ "bold": true
+ },
+ {
+ "type": "qodlysource",
+ "qodlysource": "version",
+ "children": [
+ {
+ "italic": false,
+ "underlined": false,
+ "strikethrough": false,
+ "bold": true,
+ "text": "v"
+ }
+ ],
+ "dsType": "string",
+ "format": ""
+ },
+ {
+ "text": ""
+ }
+ ]
+ }
+ ],
+ "qodlysource": "version",
+ "style": {
+ "fontSize": "40px",
+ "textAlign": "center",
+ "fontFamily": "New Tegomin",
+ "paddingLeft": "10px",
+ "paddingRight": "10px",
+ "paddingBottom": "10px",
+ "paddingTop": "10px"
+ },
+ "classNames": [
+ "comforterBrush"
+ ],
+ "serverSideRef": "textRef",
+ "iterableChild": true
+ },
+ "displayName": "Text",
+ "custom": {},
+ "parent": "JT1BLTebtT",
+ "hidden": false,
+ "nodes": [],
+ "linkedNodes": {}
+ },
+ "vQwIVqfzaG": {
+ "type": {
+ "resolvedName": "StyleBox"
+ },
+ "isCanvas": true,
+ "props": {
+ "events": [],
+ "style": {
+ "minHeight": "40px",
+ "display": "flex",
+ "alignItems": "center"
+ },
+ "iterableChild": true
+ },
+ "displayName": "Stylebox",
+ "custom": {},
+ "parent": "vt5ll-8J-n",
+ "hidden": false,
+ "nodes": [],
+ "linkedNodes": {}
+ },
+ "KeLZVvKaHp": {
+ "type": {
+ "resolvedName": "Radio"
+ },
+ "isCanvas": false,
+ "props": {
+ "classNames": [
+ "radio-selectedItem"
+ ],
+ "events": [],
+ "defaultValue": "home",
+ "mode": "single",
+ "type": "tabs",
+ "options": [
+ {
+ "label": "HOME",
+ "value": "home",
+ "id": "8SFueBkpxWtmqTmEHa92ew"
+ },
+ {
+ "label": "TOURS",
+ "value": "tours",
+ "id": "fLxd7NcKBA9xzUTwf8NXPj"
+ },
+ {
+ "label": "DESTINATIONS",
+ "value": "destinations",
+ "id": "f9mqtjJG2nap5EJKaMqKM5"
+ }
+ ],
+ "qodlysource": "Ui:mainPage",
+ "style": {
+ "color": "#000000ff",
+ "textTransform": "uppercase",
+ "fontWeight": "700"
+ },
+ "serverSideRef": "radioOptionsRef"
+ },
+ "displayName": "Radio",
+ "custom": {},
+ "parent": "JT1BLTebtT",
+ "hidden": false,
+ "nodes": [],
+ "linkedNodes": {}
+ },
+ "bXx3gBHhJA": {
+ "type": {
+ "resolvedName": "PageLoader"
+ },
+ "isCanvas": false,
+ "props": {
+ "classNames": [],
+ "events": [],
+ "componentName": "PageLoader",
+ "style": {
+ "width": "100%",
+ "height": "90%",
+ "paddingLeft": "0px",
+ "paddingRight": "0px",
+ "paddingBottom": "0px",
+ "paddingTop": "0px"
+ },
+ "qodlysource": "Ui:mainPage",
+ "Page": "home",
+ "serverSideRef": "pageLoaderRef",
+ "text": "Some Text"
+ },
+ "displayName": "Page Loader",
+ "custom": {},
+ "parent": "ROOT",
+ "hidden": false,
+ "nodes": [],
+ "linkedNodes": {}
+ }
+ }
+}
+```
+
+
+
+### Dissection
+
+The JSON representation of the Page consists of two major elements: `metadata` and `components`.
+
+1. **metadata**: Contains metadata related to the Page.
+
+ v : Version of the Page.qodlysources : An array of local qodlysources scoped to the Page, with the following sub-attributes:
+ id : Identifier for each qodlysource.type : Specifies the type of the qodlysource.namespace : Denotes the namespace of the qodlysource, which is empty if the qodlysource is local.dataType : Represents the data type of the qodlysource.initialValue : Indicates the initial value of the qodlysource name.
+ styles : An array of local css classes scoped to the Page. It includes the following sub-attributes:
+ name : Name of the css class.content : The actual CSS content of the CSS class.parentId : Identifier of the parent CSS class, if applicable.id : Unique identifier for each CSS class.scope : Defines the scope in which the style operates, remaining local at all times, as the styles exclusively represent an array of local CSS classes confined to the Page.
+
+
+2. **components**: Represents the individual components used in the Page. Each component shares these common attributes:
+
+ - `type`:
+ - `resolvedName`: Specifies the component's type.
+
+ - Expected comma : This error typically occurs when a comma , is absent between key-value pairs in an object or elements in an array.
+
+
+
+
+
+
+
+ - Expected closing brace : This error occurs when the parser anticipates a closing curly brace } to conclude an object but does not find it.
+
+
+
+
+
+
+
+ - Value expected : This error arises when an object key is succeeded by a colon, but the corresponding value is missing, indicating an incomplete JSON representation.
+
+
+
+
+
+
+
+ - Colon expected : This error suggests that a colon : is required to separate the key and value in an object, but it is missing from the code.
+
+
+
+
+
+
+
+ - Unexpected end of string json : This error is triggered when the parser encounters the end of a string without coming across a closing double quote ", indicating an unfinished string value or when the opening double quote is missing at the beginning of the string.
+
+
+
+
+
+:::warning
+It is essential to exercise caution when editing the JSON representation, as the syntax check does not validate whether attribute names match the expected ones or if there are issues with the attribute names. Similarly, it does not necessarily catch issues where a boolean value is used in place of a string value.
+
+These discrepancies may not trigger errors, but they can potentially corrupt your Page or, in more severe cases, break it until the errors are rectified. Therefore, thorough validation of attribute names and values is crucial to ensure the integrity and functionality of your Page.
+:::
+
+## Japanese Character Support
+
+Japanese characters are now supported in all elements created in Qodly. This includes:
+
+- **Qodly Source Names**
+- **Namespace of Shared Qodly Sources**
+- **"Iterate with" Names**
+- **Server Side References**
+- **CSS Class Names**
+- **Dataclass Names**
+- **Property (Field) Names**
+- **Craft Components**
+- **Pages**
+- **States**
+- **Method Names**
+- **Roles and Privileges**
+- **Shared Folder Names**
+- **Class Names**
+
+This enhancement ensures that all elements within Qodly can be named and utilized using Japanese characters, providing full localization support for Japanese-speaking users.
+
+## Triggers and Events
+
+The **Page** can respond to various events, enabling dynamic user experiences. Events that can trigger actions within the page include:
+
+| Event | Description |
+|-------------|-----------------------------------------------------------------------------------------------------------|
+| **On Init** | Triggered before the page is rendered, ensuring that all necessary data and conditions are in place. This pre-render event helps in setting up the page correctly before any content is displayed to the user. |
+| **On Loaded** | Fired once the page and its components are fully loaded. Ideal for post-load processing. |
+| **On PrivilegeChange** | Triggered when a user's privilege is changed. Ensures that appropriate elements are displayed based on the user's current privileges. |
+| **On Click** | Activated when a user clicks on a specific element, enabling interaction handling. |
+| **On KeyUp** | Occurs when a key is released while the page or a component is focused, useful for key-based interactions.|
+| **On KeyDown** | Triggered when a key is pressed down, allowing pre-emptive handling of key events. |
+| **On MouseEnter** | Fired when the mouse pointer enters a specific element, useful for hover effects and tooltips. |
+| **On MouseLeave** | Activated when the mouse pointer leaves an element, often used to revert hover effects. |
+
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/qodlySources.md b/versioned_docs/version-21/4DQodlyPro/pageLoaders/qodlySources.md
new file mode 100644
index 000000000..41be0aa2d
--- /dev/null
+++ b/versioned_docs/version-21/4DQodlyPro/pageLoaders/qodlySources.md
@@ -0,0 +1,469 @@
+---
+id: qodlySources
+title: Qodly Sources
+---
+import Column from '@site/src/components/Column'
+
+Qodly Sources are integral to Qodly's architectural design, simplifying the development of web applications. They act as **data connectors, serving as references** that automatically activate events upon data changes. These qodlysources can be **linked** to Page components, providing an intuitive way to display and manage data within your application.
+
+## Understanding Qodly Sources
+
+### Components and Qodly Sources
+
+[Components](./components/componentsBasics.md) are UI elements that can be bound to qodlysources, allowing them to display attributes from these qodlysources. When a qodlysource changes, the component automatically reflects the updated data. For instance, if a function returns a qodlysource as a result, any changes to that qodlysource will be immediately reflected in the associated component.
+
+
+
+### Events and Qodly Sources
+
+You can also attach events to qodlysources, triggering specific actions when these qodlysources are updated in the web browser. Please refer to [Qodly Source Events](events/bindingActionToEvents.md#qodly-sources) for more details.
+
+
+
+## Qodly Source Types
+
+### Catalog Qodly Sources
+
+Catalog qodlysources (also known as **ORDA qodlysources**), serve as references to entities and entity selections that originate from the server and are based on the data model.
+
+:::info
+These qodlysources optimize data exchange by selectively requesting only the attributes displayed by the component from the server and then making them available in the browser.
+:::
+
+### Scalar Qodly Sources
+
+Scalar qodlysources, on the other hand, are confined to the browser's local environment. They can be generated directly within the browser and subsequently transmitted to the server during a function call. Scalar qodlysources are versatile and can take on various data types, including String, Number, Boolean, Date, Object, or Collection.
+
+:::info
+It's crucial to emphasize that Scalar qodlysources do not originate from the Data model and, consequently, do not possess persistence.
+:::
+
+## Qodly Source Scopes
+
+### Page Qodly Sources
+
+Page qodlysource are scoped to the Page where they are defined. They can only be used within that specific Page.
+
+### Shared Qodly Sources
+
+Shared qodlysource, on the other hand, are scoped to the entire application and can be utilized in multiple Pages within the same project.
+
+:::info
+By default, when you [**create a Qodly Source**](#creating-a-qodly-source) without specifying a namespace, you define a Page qodlysource.
+:::
+
+### Shared functions
+
+Shared functions are also accessible when Entity and Entity Selection serve as shared qodlysources, making them available for use in multiple Pages within the same project.
+
+### Determining the Scope of Qodly Sources
+
+When selecting a component bound to a qodlysource, the Properties panel provides information about whether the qodlysource is shared:
+
+- If the tag reads **Page**, it signifies a local qodlysource visible only within the current Page.
+
+- On the other hand, if there is a tag with **a specific name**, it implies that you have passed a shared qodlysource belonging to a namespace.
+
+:::info
+When configuring a function event, the Contextual panel indicates whether the function is shared.
+:::
+
+## Built-in Shared Qodly Namespace
+
+Shared namespaces enable you to define qodlysources accessible across multiple pages within your application. Among these shared namespaces, Qodly provides a built-in namespace named `Qodly`, specially designed to simplify common tasks related to URL handling and shared data management.
+
+The `Qodly` namespace
+
+
+ A Search area for filtering the qodlysource list.
+ The Catalog , containing:
+
+ Dataclasses from your application. Here, you can designate entities or entity selections from your Datastore, which will be handled by the server as qodlysources.
+ Functions defined at the datastore level and within each dataclass.
+
+ This Page : qodlysource exclusive to the current Page.Namespaces : Shared qodlysources organized by namespaces. You can create a namespace by clicking the + icon or when defining a shared qodlysource.
+
+
+
+
+
+
+### From the Catalog
+
+To create Page or Shared qodlysources directly from the Catalog, follow these steps:
+
+
+
+
+ In the Qodly Sources section, choose Catalog > Data Classes .
+ Click the + icon next to a defined Dataclass.
+ Enter the name of the qodlysource.
+ Select the qodlysource type, either through Entity selection or Entity, to establish an ORDA qodlysource. Afterward, proceed to configure its settings, including initial values, page size, and depth.
+ To create a shared qodlysource, specify a Namespace, for a Page (non-shared) qodlysource, leave the field empty.
+
+
+
+
+
+
+:::info
+Specifying a namespace places the qodlysource in the **Namespaces** section, while without a namespace, it is situated in the **This Page** section.
+:::
+
+### From This Page
+
+To create Page qodlysources, follow these steps:
+
+
+
+
+ Click the + icon in the header of the This Page section.
+ Enter the name of the qodlysource.
+ Choose the qodlysource type and configure its initial value according to the selected type.
+
+
+
+
+
+
+
+
+
+ Click the + icon next to a defined Namespace . + icon in the header of the Namespaces section to establish one before proceeding to create a shared qodlysource within it.
+ Enter the name of the qodlysource.
+ Choose the qodlysource type and configure its initial value according to the selected type.
+
+
+
+
+
+
+
+
+ - Entities from Entity Selection Qodly Source : These entities originate from an entity selection qodlysource, particularly advantageous in situations necessitating navigation and bulk actions.
+
+
+
+
+
+
+ - Independently Created Standalone Entities : These entities have no affiliation with entity selections. They exist in isolation and are well-suited for the management of individual entities that do not require inclusion in larger selections. Standalone entities are typically managed on a one-to-one basis.
+
+
+
+
+
+:::info
+
+
+ To distinguish between the two types of entities, look for the keyword entity selection qodlysource Name that appears after the child entity qodlysource, such as products.
+
+
+
+
+:::
+
+### Editing a Qodly Source
+
+
+
+ Once a qodlysource is created, you can edit all its properties except for its Type. To start editing, select the Edit icon located next to the qodlysource name:
+
+
+
+
+
+
+
+
+ This action will display the Qodly Source in the Contextual panel. To alter an editable property, simply click on the "Edit" icon situated on the right side of the property.
+
+
+
+
+
+
+
+
+ If the value is long or complex, a Maximize button
+
+
+
+
+
+
+ The popup itself can also be maximized to cover the full contextual panel for better visibility.
+
+
+
+
+
+### Renaming a Qodly Source
+
+You can easily rename a qodlysource from the contextual panel. In doing so, Qodly Studio will automatically update references to the renamed qodlysource:
+
+- Within components bound to the qodlysource.
+
+- In other qodlysources where the renamed qodlysource serves as the origin.
+
+:::caution
+Please note that when renaming a shared qodlysource, only opened Pages can have their references renamed.
+:::
+
+### Tracking Qodly Source Usage
+
+
+
+
+ The Inspect option allows you to see where your qodlysources are used within your Pages.
+
+
+
+
+
+
+## Deleting Qodly Sources
+
+### Deleting a Qodly Source
+
+To delete a qodlysource, click the delete button
+
+
+ Qodly Source : This is the primary qodlysource used for iterating through data. Its attributes are bound to the component, allowing you to display and work with the iterative data. Typically, this qodlysource represents an entity selection or a array. Selected Element : This secondary qodlysource is used to retrieve the currently selected item within the iterative component. In most cases, it represents an entity or a array element.
+
+
+
+
+
+### Capturing Function Results in a Qodly Source
+
+You can capture the results of a function call and store them in a qodlysource. For example, you can configure an event that calls a function and then captures the outcome, saving it in a qodlysource.
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/conditionalState.md b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/conditionalState.md
new file mode 100644
index 000000000..b03d3fd2e
--- /dev/null
+++ b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/conditionalState.md
@@ -0,0 +1,676 @@
+---
+id: conditionalState
+title: Conditional States
+---
+
+import Column from '@site/src/components/Column'
+
+## Scope of Conditions
+
+Conditions within Qodly are classified into two types:
+
+### Local Conditions
+
+Local Conditions are specific to the currently selected state and can be customized to meet unique logic requirements of that state.
+
+
+### Saved Conditions
+
+Saved Conditions are reusable and can be applied across different states, stored within the `Saved Conditions` area for easy access and application.
+
+:::info
+For more details, please refer to the [Saved Conditions](#saved-conditions-area) area section.
+:::
+
+
+## Conditions Interface
+
+Accessible via the `Conditions` button
+
+ The States section is organized with tabs for each available state, allowing straightforward navigation and modification of state conditions. The tab for the currently active state is highlighted to clearly indicate which state is being edited.
+
+
+
+
+
+### Saved Conditions Area
+
+
+
+ This area allows users to create, store, and manage conditions that can be reused across various states within the Page.
+
+
+
+
+
+:::tip
+The tab representing the condition currently being modified is distinctly highlighted, providing users with a clear visual indication of the active condition.
+:::
+
+Adding a new saved condition involves clicking the
+
+ The JSON Editor is an advanced tool for those who need to directly manipulate the condition's properties in JSON format.
+
+
+
+
+
+
+
+ The JSON Editor can be accessed through the Conditions Interface by clicking on the JSON Editor button. This opens a dedicated editing area where users can view and edit the JSON representation of their conditions.
+
+
+
+
+
+Upon addition, each condition's initial JSON structure appears in the editor as follows:
+
+```json
+{
+ "id": "auto_generated_unique_identifier",
+ "name": "default_condition_name",
+ "type": "unspecified"
+}
+```
+
+This initial blueprint provides a template that users can modify to fit the specific requirements of their Page conditions.
+
+
+:::info Common JSON Fields
+
+When working with conditions in the JSON Editor, users will encounter several common fields:
+
+- **id**: A unique identifier for the condition (type: string).
+- **name**: The name of the condition (type: string).
+- **type**: Specifies the type of condition (e.g., qodlysource, privilege, parentState, reference, combination).
+- **path**: The data path within the qodlysource (for qodlysource conditions).
+- **value**: The value to compare against, which can be of various types (number, string, boolean, object, array, or null).
+- **op**: The operator for comparison (e.g., eq, neq, regex, in, nin, gt, gte, lt, lte).
+:::
+
+## Conditions Schema Editor
+
+At the core of the Conditions Interface is the Schema Editor, a dynamic visualization tool essential for mapping out and manipulating condition logic in a flowchart-like format. This interface allows for intuitive operations such as:
+
+### Default Options
+
+
+
+ If no conditions are pre-set for the selected state, the Schema Editor provides an Add condition button by default, facilitating quick starts in condition creation.
+
+
+
+
+
+### Saved Condition Integration
+
+
+
+ Users can integrate a Saved Condition into the current state's logic by clicking and dragging from the Saved Conditions Section directly into the schema.
+
+
+
+
+
+:::tip
+
+Ensure proper placement by dragging the `Saved condition` to the ellipsis icon
+
+ Link conditions with visual connectors representing logical operators. Use the & operator for combined fulfillment, or the | operator for partial fulfillment.
+
+
+
+
+
+
+### Comprehensive View Controls
+
+Facilitate a switch between detailed and overview modes by using the global expand/collapse button
+
+ Each condition card within the schema serves as an access point for configuring the specific properties of a condition. When a card is collapsed, it displays essential information at a glance, such as the condition's type and the qodlysource it is connected to.
+
+
+
+
+
+:::info
+For additional details, please refer to the [Condition Types](#condition-types) section.
+:::
+
+
+## Condition Types
+
+Each condition within the schema is represented by an interactive card, providing a user-friendly interface for configuring specific properties. These cards can be expanded or collapsed to display key details and settings.
+
+### Qodly Source
+
+| Name | Icon | Description | Available Operators |
+|--------------|------|-------------|-------------------------------------------------------|
+| Qodly Source |
+
+
+
+
+
+```json
+{
+ "type": "combination",
+ "id": "auto_generated_unique_identifier_1",
+ "op": "and",
+ "conditions": [
+ {
+ "type": "qodlysource",
+ "id": "auto_generated_unique_identifier_2",
+ "name": "Age over 25",
+ "path": "employee.age",
+ "op": "gt",
+ "value": 25
+ },
+ {
+ "type": "qodlysource",
+ "id": "auto_generated_unique_identifier_3",
+ "name": "Lastname starts with D",
+ "path": "employee.lastname",
+ "op": "regex",
+ "value": "^D"
+ }
+ ]
+}
+```
+
+
+
+
+
+### Current State Condition
+
+| Name | Icon | Description | Available Operators |
+|---------------|------|-------------|---------------------------|
+| Current State |
+
+
+
+
+
+```json
+{
+ "type": "combination",
+ "id": "auto_generated_unique_identifier_13",
+ "op": "and",
+ "conditions": [
+ {
+ "type": "currentState",
+ "id": "auto_generated_unique_identifier_14",
+ "name": "Current state is State_1",
+ "op": "eq",
+ "value": "State_1"
+ },
+ {
+ "type": "currentState",
+ "id": "auto_generated_unique_identifier_15",
+ "name": "Current state matches regex",
+ "op": "regex",
+ "value": "^State"
+ }
+ ]
+}
+```
+
+
+
+
+:::tip Dropdown Behavior
+The current state dropdown shows all available states when the operator is set to anything other than regex. Typing into the dropdown is disabled to ensure only valid states can be selected
+:::
+
+:::tip Handling Deleted States
+- If a state is deleted, it is automatically removed from the dropdown menu.
+- If the deleted state is currently selected, it is cleared from the field to prevent invalid selections.
+:::
+
+:::tip Handling Renamed States
+If a state is renamed, the dropdown menu is updated to reflect the new name.
+:::
+
+### Parent State Condition
+
+| Name | Icon | Description | Available Operators |
+|-------------|------|-------------|---------------------------|
+| Parent State|
+
+
+
+
+
+```json
+{
+ "type": "combination",
+ "id": "auto_generated_unique_identifier_10",
+ "op": "and",
+ "conditions": [
+ {
+ "type": "parentState",
+ "id": "auto_generated_unique_identifier_11",
+ "name": "Parent state is Active",
+ "op": "eq",
+ "value": "Active"
+ },
+ {
+ "type": "parentState",
+ "id": "auto_generated_unique_identifier_12",
+ "name": "Parent state starts with A",
+ "op": "regex",
+ "value": "^A"
+ }
+ ]
+}
+```
+
+
+
+
+
+
+### Privilege Condition
+
+| Name | Icon | Description | Available Operators |
+|--------------|------|-------------|---------------------------|
+| Privilege |
+
+
+
+
+
+```json
+{
+ "type": "combination",
+ "id": "auto_generated_unique_identifier_7",
+ "op": "and",
+ "conditions": [
+ {
+ "type": "privilege",
+ "id": "auto_generated_unique_identifier_8",
+ "name": "User is guest",
+ "op": "eq",
+ "value": "guest"
+ },
+ {
+ "type": "privilege",
+ "id": "auto_generated_unique_identifier_9",
+ "name": "Not restricted",
+ "op": "neq",
+ "value": "restricted"
+ }
+ ]
+}
+```
+
+
+
+
+:::tip Dropdown Behavior
+The privilege dropdown shows all available privileges when the operator is set to anything other than regex. Typing into the dropdown is disabled to ensure only valid privileges can be selected.
+:::
+
+:::tip Handling Deleted Privileges
+- If a privilege is deleted, it is automatically removed from the dropdown menu.
+- If the deleted privilege is currently selected, its name remains displayed in the field, and an error message is shown below the field and in the sanity check: "The [Privilege Name] privilege does not exist."
+:::
+
+:::tip Handling Renamed Privileges
+If a privilege is renamed, the border of the privilege field turns red, and a sanity check error is raised with the message: "Incorrect value of the privilege state condition."
+:::
+
+### Saved Condition
+
+| Name | Icon | Description | Available Operators |
+|--------------|------|-------------|---------------------|
+| Saved Condition |
+
+ - The error message "The 'X' must be a valid shared Qodly Source" is displayed below the field.
+
+
+
+
+
+:::
+
+#### Example
+
+
+
+
+
+
+
+```json
+{
+ "type": "combination",
+ "id": "iiq55CwnDbkEbqtZ46HmuN",
+ "op": "or",
+ "conditions": [
+ {
+ "type": "reference",
+ "id": "auto_generated_unique_identifier_5",
+ "name": "Condition 2",
+ "ref": "7EhcZvWyNCr6AqPqS139Mz"
+ },
+ {
+ "type": "reference",
+ "id": "auto_generated_unique_identifier_6",
+ "name": "Condition 3",
+ "ref": "7ymDgJc1iL6ca1Q8WzL43z"
+ }
+ ]
+}
+```
+
+
+
+
+
+
+
+## Condition Management
+
+
+
+ Every condition card is equipped with a set of actions, facilitating modifications like renaming or deleting the condition.
+
+
+
+
+
+
+### Add Condition (Local)
+
+Local Conditions are specific to the currently active state and allow for state-specific conditions customization. To add a Local Condition to your state:
+
+- **From the Schema Window**: If no conditions are currently set up, simply click the `Add condition` button in the schema window to insert a new condition at the base level of the state’s logic hierarchy.
+
+- **Using the Side Menu**: For contextual additions within a specific logic level, select the `Add condition` option from the side menu. This will introduce a new condition card at the same hierarchical level as the location where you invoked the command.
+
+ :::info
+
+
+
+ For instance, in the visual example provided, if Add condition is selected from the side menu at the position of conditions c1 and c2, the new condition will be placed on the same level as these conditions.
+
+
+
+
+
+
+
+ It ensures that your new condition is logically organized within the same group, maintaining the consistency and flow of the state's configuration.
+
+
+
+
+
+ :::
+
+### Duplicate Condition
+
+The Duplicate condition option allows users to create an exact copy of an existing condition or groups of conditions, preserving all configurations.
+
+
+
+
+
+
+
+
+
+### Rename Condition
+
+
+
+ To better reflect a condition's role within the Page, the Rename condition option enables users to change its default name.
+
+
+
+
+
+
+### Save Condition
+
+
+
+ Using the Save condition option, conditions or groups of conditions can be stored as saved conditions accessible in the Saved States area.
+
+
+
+
+
+### Remove Condition
+
+
+
+ The Remove condition option is available for users needing to clear out unused or unwanted conditions from the schema. This tool helps declutter the configuration space by removing selected conditions or groups of conditions.
+
+
+
+
+
+## Conditional State Lifecycle
+
+Conditional states are primarily applied during the Rendering and Post-Render Updates phases of the [Page/Renderer lifecycle](../../rendering.md#pagerenderer-lifecycle):
+
+1. **Rendering Phase**:
+
+ - The page renders its initial state, often defaulting to the Base state. This is when the initial content, styles, and layouts are displayed to the user.
+
+2. **Post-Render Updates Phase**:
+
+ - Based on the evaluated conditions and fetched qodly sources, the page updates its state. Conditional states modify the Base state to reflect user-specific configurations.
+
+ - Users interact with the page, which might trigger further state changes and updates.
+
+
+:::tip Preventing Base State Visibility
+
+The Base state might be visible initially due to the timing of data fetching and condition evaluation relative to the rendering process. The page initializes its structure and components, then renders the Base state, which contains all potential elements and components.
+
+To ensure the Base state is not visible before the correct state is applied, follow these steps:
+
+1. **Use the `onInit` Event**:
+
+ - Utilize the `onInit` event to set up all necessary qodly sources and conditions before the page is rendered.
+
+ - This event runs before the rendering phase, allowing you to prepare the page state in advance.
+
+2. **Initialize Qodly Sources Early**:
+
+ - Ensure that all required qodly sources are fetched and available during the `onInit` event.
+
+ - This ensures that the data needed for conditional states is ready before rendering.
+
+3. **Evaluate Conditions Pre-render**:
+
+ - Evaluate all conditions necessary to determine the user-specific state within the `onInit` event.
+
+ - This includes checking priviliges and other relevant criteria.
+:::
+
+## Singleton Properties's Impact on State
+
+Singleton computed properties are used to manage and return objects stored in Qodly Sources. These properties are typically invoked to refresh data or trigger server-side processes. However, their interaction with a state can lead to significant implications:
+
+- **State Dependency**: When a singleton computed property updates a Qodly Source that is bound to a state condition on the Qodly Page, any change in this source can trigger a state change.
+
+- **Deserialize and Re-rendering**: Clicking a button that invokes a singleton computed property can cause a state change. This triggers Qodly to deserialize and re-render the page to update the internal state of CraftJS, which can result in an entire page reload.
+
+
+:::info To illustrate, consider the following sequence of events:
+
+1. **Initial Action**: A button with an onClick event calls a singleton computed property that returns an object and stores it in a Qodly Source. Clicking this button alone works as expected without reloading the page.
+
+2. **Triggering a Server-side Process**: Another action triggers a server-side process through the singleton computed property.
+
+3. **Subsequent Action**: Clicking the initial button again causes the page to reload. This happens because the Qodly Source used in the state condition is updated, triggering a state change. Qodly then deserializes and re-renders the page through CraftJS, leading to a full page reload.
+:::
+
+
+To avoid unintended page reloads when using singleton computed properties, consider the following strategies:
+
+- **Minimize State Changes**: Avoid binding state conditions to Qodly Sources that are frequently updated by singleton computed properties. This helps reduce unnecessary re-renders.
+
+- **Proper Navigation Handling**: If you use a qodly source for navigation purposes, ensure its value is correctly updated during navigation events. This prevents unintended reloads due to outdated qodly source values.
\ No newline at end of file
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/PreviewDisabled.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/PreviewDisabled.png
new file mode 100644
index 000000000..be1522c93
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/PreviewDisabled.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/accessJsonEditor.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/accessJsonEditor.png
new file mode 100644
index 000000000..f0ecffb5c
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/accessJsonEditor.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/addCssClass.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/addCssClass.png
new file mode 100644
index 000000000..88e02e156
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/addCssClass.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/addLocalCondition1.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/addLocalCondition1.png
new file mode 100644
index 000000000..185ea6ec9
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/addLocalCondition1.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/addLocalCondition2.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/addLocalCondition2.png
new file mode 100644
index 000000000..32a6f67c1
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/addLocalCondition2.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_json.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_json.png
new file mode 100644
index 000000000..5cdb083dd
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_json.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_savedConditions.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_savedConditions.png
new file mode 100644
index 000000000..f60632053
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_savedConditions.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema.png
new file mode 100644
index 000000000..76e290b58
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema0.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema0.png
new file mode 100644
index 000000000..44571837b
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema0.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema1.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema1.png
new file mode 100644
index 000000000..7bfd118ba
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema1.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema2.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema2.png
new file mode 100644
index 000000000..4c65be9c1
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema2.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema3.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema3.png
new file mode 100644
index 000000000..5d7be2e18
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema3.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema4.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema4.png
new file mode 100644
index 000000000..68ad84a40
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema4.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema5.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema5.png
new file mode 100644
index 000000000..72e55a06f
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema5.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema6.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema6.png
new file mode 100644
index 000000000..a9b283184
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema6.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema7.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema7.png
new file mode 100644
index 000000000..5c0dac7b7
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_schema7.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_states.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_states.png
new file mode 100644
index 000000000..5d87131e9
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/conditionsInterface_states.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/defaultState.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/defaultState.png
new file mode 100644
index 000000000..17d9c17ba
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/defaultState.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/defaultStateWconditionalState.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/defaultStateWconditionalState.png
new file mode 100644
index 000000000..6df87d563
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/defaultStateWconditionalState.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/duplicateCondition1.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/duplicateCondition1.png
new file mode 100644
index 000000000..1cfb25490
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/duplicateCondition1.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/duplicateCondition2.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/duplicateCondition2.png
new file mode 100644
index 000000000..944599018
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/duplicateCondition2.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/editSavedCondition.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/editSavedCondition.png
new file mode 100644
index 000000000..f21134ab4
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/editSavedCondition.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/removeCondition.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/removeCondition.png
new file mode 100644
index 000000000..a9fc31f93
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/removeCondition.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/removeCondition2.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/removeCondition2.png
new file mode 100644
index 000000000..7177a7d72
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/removeCondition2.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/renameCondition.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/renameCondition.png
new file mode 100644
index 000000000..1cfa2166c
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/renameCondition.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/renameCondition2.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/renameCondition2.png
new file mode 100644
index 000000000..3f6100a9d
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/renameCondition2.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/saveCondition.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/saveCondition.png
new file mode 100644
index 000000000..da6c17fa2
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/saveCondition.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/saveCondition2.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/saveCondition2.png
new file mode 100644
index 000000000..f7aa3d746
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/saveCondition2.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/savedConditionValidationRule1.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/savedConditionValidationRule1.png
new file mode 100644
index 000000000..d4de4bab9
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/savedConditionValidationRule1.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/savedConditionValidationRule2.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/savedConditionValidationRule2.png
new file mode 100644
index 000000000..b23c5763d
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/savedConditionValidationRule2.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/stateReset1.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/stateReset1.png
new file mode 100644
index 000000000..5e53125ba
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/stateReset1.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/stateReset2.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/stateReset2.png
new file mode 100644
index 000000000..57be75c81
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/stateReset2.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_add.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_add.png
new file mode 100644
index 000000000..323a0c379
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_add.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_create1.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_create1.png
new file mode 100644
index 000000000..5d11f1278
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_create1.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_create2.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_create2.png
new file mode 100644
index 000000000..2b8b99d75
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_create2.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_create3.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_create3.png
new file mode 100644
index 000000000..ea9c3c6e2
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_create3.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_create4.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_create4.png
new file mode 100644
index 000000000..4692069d4
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_create4.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_delete.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_delete.png
new file mode 100644
index 000000000..e68866b7a
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_delete.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_delete1.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_delete1.png
new file mode 100644
index 000000000..0223408c7
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_delete1.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_delete2.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_delete2.png
new file mode 100644
index 000000000..fab27bbe1
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_delete2.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_edit.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_edit.png
new file mode 100644
index 000000000..556b69438
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_edit.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_editing.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_editing.png
new file mode 100644
index 000000000..fd028ce5a
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_editing.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_rename1.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_rename1.png
new file mode 100644
index 000000000..46ae9611e
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_rename1.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_rename2.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_rename2.png
new file mode 100644
index 000000000..ccf9cf8d7
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_rename2.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_standardAction.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_standardAction.png
new file mode 100644
index 000000000..3e7eed0d6
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_standardAction.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_standardAction_add.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_standardAction_add.png
new file mode 100644
index 000000000..9b8e41a12
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_standardAction_add.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_standardAction_delete.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_standardAction_delete.png
new file mode 100644
index 000000000..f6aa8760b
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/state_standardAction_delete.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/statesConditions.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/statesConditions.png
new file mode 100644
index 000000000..dc622d43e
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/statesConditions.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typeCurrentState2.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typeCurrentState2.png
new file mode 100644
index 000000000..a61a2771d
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typeCurrentState2.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typeParentState.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typeParentState.png
new file mode 100644
index 000000000..1415ca48f
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typeParentState.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typeParentState2.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typeParentState2.png
new file mode 100644
index 000000000..9299cbc9a
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typeParentState2.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typePrivilege.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typePrivilege.png
new file mode 100644
index 000000000..9e7064b71
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typePrivilege.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typePrivilege2.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typePrivilege2.png
new file mode 100644
index 000000000..9db487d6e
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typePrivilege2.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typeQodlySource.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typeQodlySource.png
new file mode 100644
index 000000000..8db1c0b5c
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typeQodlySource.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typeQodlySource2.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typeQodlySource2.png
new file mode 100644
index 000000000..2fcdc6e56
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typeQodlySource2.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typeSavedCondition.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typeSavedCondition.png
new file mode 100644
index 000000000..5477670bd
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typeSavedCondition.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typeSavedCondition2.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typeSavedCondition2.png
new file mode 100644
index 000000000..1a39eace5
Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/img/typeSavedCondition2.png differ
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/nonConditionalState.md b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/nonConditionalState.md
new file mode 100644
index 000000000..42fadefb3
--- /dev/null
+++ b/versioned_docs/version-21/4DQodlyPro/pageLoaders/states/nonConditionalState.md
@@ -0,0 +1,250 @@
+---
+id: nonConditionalState
+title: Non-Conditional States
+---
+
+import Column from '@site/src/components/Column'
+
+## States Management
+
+### Creating a New State
+
+
+
+ To create a new state, one must click the
+
+
+
+
+
+
+ This action triggers the creation dialog, involving the assignment of a distinctive name to the state.
+
+
+
+
+
+
+
+ Upon creation, the new state becomes visible in the states section and automatically opens in the canvas, ready for modifications.
+
+
+
+
+
+
+:::info
+There is no restriction on the number of states that can be associated with a single Page.
+:::
+
+
+### Editing a State
+
+Start editing a state by selecting it from the states panel, which then opens it on the canvas for customization. Notably, the `Editing stateName` tag will appear at the far right of the Contextual panel's header, indicating the current state under modification.
+
+
+
+
+ To remove a state, click on the
+
+
+
+
+
+
+ Upon initiating deletion, a confirmation popup will appear, requiring user confirmation to proceed.
+
+
+
+
+
+:::tip
+Once a state is successfully deleted, it is automatically disassociated from any related standard actions it was previously involved in. This includes the removal of the state's tag from the states field.
+:::
+
+### Renaming a State
+
+
+
+ To rename a state, click on the
+
+
+
+
+
+
+ Upon initiating renaming, the state name switches to an editable input field.
+
+
+
+
+
+:::tip
+All references to the state in the events are automatically updated post-renaming, preserving the Page’s functional integrity.
+:::
+
+
+### Resetting State Changes
+
+
+
+ The Reset button allows users to revert any changes made to a component back to its original settings from the Base state.
+
+
+
+
+
+Steps to Reset a Component:
+
+
+
+
+ Locate the Component : Find the component in the Page outline.Click the Reset Button : This button appears as a circular arrow icon next to the component.Confirm Reset : When prompted, confirm the action to ensure changes are reverted.
+
+
+
+
+
+
+## Event and Function Handling
+
+
+### Standard Actions
+
+Standard actions in Page states are integral to defining the Page’s behavior in response to user interactions:
+
+
+
+ - Add Action : Utilized for incorporating modifications from selected states into the base state.
+
+
+
+
+
+
+
+
+ - Delete Action : This action facilitates the removal of selected states, along with their changes, in relation to the base state.
+
+
+
+
+
+
+:::tip
+When a new state is applied or removed as a user interacts with an input field, the interaction remains uninterrupted ensuring that the focus on the input field is not lost by the state change.
+:::
+
+
+
+
+ When triggering these actions, users can select from available states, which are then tagged in the state field.
+
+
+
+
+
+
+
+
+ Locate the State : In the "States" panel, find the state you want to set as the default..Set as Default Button : Next to the state's name, you will see a checkbox labeled "Set as default state". Check this box to set the state as the default.
+
+
+
+
+
+:::tip Applying Multiple Default States to a Page
+You can apply multiple default states to a single Page. This allows for dynamic and conditional displays based on user interactions or other conditions.
+:::
+
+:::warning
+When the Default State is used with a Conditional State that has an unmet condition (a condition that evaluates as false), the Default State will be overridden.
+
+
+
+ A warning icon appears next to the Default State icon when paired with a Conditional State with an unmet condition . Hovering over the icon displays: "Default state will be overridden when used with an unmet conditional state."
+
+
+
+
+
+:::
+
+
+### Base State vs. Default State
+
+The `Base State` contains all components and configurations that the Page could possibly display. In contrast, the `Default State` might hide certain components that should only appear under specific conditions. This strategy follows Qodly's best practices by keeping the `Base State` comprehensive and using the `Default State` for initial, conditional displays.
+
+:::tip
+If there are components that should not be visible until certain conditions are met, setting a different state as the default instead of the base state can help in tailoring the initial user experience.
+:::
\ No newline at end of file
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/styling.md b/versioned_docs/version-21/4DQodlyPro/pageLoaders/styling.md
new file mode 100644
index 000000000..ed69bfecf
--- /dev/null
+++ b/versioned_docs/version-21/4DQodlyPro/pageLoaders/styling.md
@@ -0,0 +1,477 @@
+---
+id: styling
+title: Styles Library
+---
+import Column from '@site/src/components/Column'
+
+After placing a component on the Canvas, you have the freedom to tailor its appearance using a variety of styling tools.
+
+## Overview
+
+The Styles Library provides a powerful way to style your components. You can do this by simply dragging CSS classes from the Styles Library and dropping them onto the components.
+
+The Styles Library provides three distinct types of CSS classes:
+
+
+
+
+ Local : These CSS classes are specific to the Pages in which they are created and do not have an icon next to them.Theme : Predefined CSS classes designed for standard themes, which can be applied across all Pages in your application. You can recognize them by this icon Shared : CSS classes that are shareable and can be used across all Pages within your application. These are identifiable by this unique icon
+
+
+
+
+
+## Properties Panel Styling Options
+
+Below is a comprehensive table that consolidates all styling options from the properties panel.
+
+| Category | Property | Definition | Types |
+|--------------------------|--------------|------------|----------------------|
+| **CSS** | Class | Specifies the CSS class applied to an element. | User-defined class names (Typed manually or selected from a list) |
+| **Color** | Text Color | Defines the color of the text. | Any RGB/HEX value (Can be manually entered or selected from a color panel) |
+| | Background | Specifies the element’s background color. | Any RGB/HEX value (Typed manually or selected from a color panel) |
+| | Box Shadow | Adds shadow effects to the element’s box. | Configurable properties:
+
+
+ For a local CSS class : Leave the "Create as Shared" option unchecked.
+ For a shared CSS class : Check the "Create as Shared" option.
+
+
+
+
+
+
+:::info
+
+
+ An alternative method to establish a new CSS class is through the properties panel, within the Style category. You can input your desired name, for example "newCssClass", into the CSS field.
+
+
+
+:::
+
+### Editing a CSS Class
+
+
+
+ To edit a CSS class code, click the edit button
+
+
+
+
+- Both **Local** and **Shared** CSS class codes can be modified in the [Contextual panel](../pageLoaders/pageLoaderOverview.md#contextual-panel) at the interface's bottom.
+
+
+
+ - Theme classes, however, are non-editable, they can only be viewed by clicking on the
+
+
+
+
+
+:::info
+
+
+ An alternative approach to edit a CSS class is to navigate to the Style category, where you can check which CSS classes affect your component and access them using the edit button
+
+
+
+:::
+
+### Renaming a CSS Class
+
+Inside the Contextual panel, you'll find a field with the class name
+
+ The Inspect option allows you to see where your CSS classes are used within your Pages.
+
+
+
+
+
+
+
+ Toggle the option by clicking the button, then hover over a CSS class to highlight its location in your Page.
+
+
+
+
+
+
+## Working with CSS
+
+### Using CSS Classes
+
+After selecting a component, you can adjust its properties using the properties panel. This involves style properties, and there is a clear distinction between component properties and styling.
+
+
+Associating a CSS class with a component can be accomplished in two ways:
+
+- Drag and drop a CSS class onto your component from the `Styles Library`.
+
+- Using the Properties panel, link a CSS class to the component through the `CSS` section under the `Style` category. This can be done either by
+
+
+
+```css
+
+self::before {
+ content: "\2606 \2606 \2606 \2606 \2606"; /* Unicode representation of empty star */
+ color: #ccc;
+}
+/* Fill the stars based on the 'aria-valuenow' attribute */
+self:has( [data-cy="cypress_slider_thumb"][aria-valuenow="1"] )::before{
+ content: "\2605 \2606 \2606 \2606 \2606";
+ color: #6d5dfc;
+}
+
+self:has( [data-cy="cypress_slider_thumb"][aria-valuenow="2"] )::before{
+ content: "\2605 \2605 \2606 \2606 \2606";
+ color: #6d5dfc;
+}
+
+self:has( [data-cy="cypress_slider_thumb"][aria-valuenow="3"] )::before{
+ content: "\2605 \2605 \2605 \2606 \2606";
+ color: #6d5dfc;
+}
+
+self:has( [data-cy="cypress_slider_thumb"][aria-valuenow="4"] )::before{
+ content: "\2605 \2605 \2605 \2605 \2606";
+ color: #6d5dfc;
+}
+
+self:has( [data-cy="cypress_slider_thumb"][aria-valuenow="5"] )::before{
+ content: "\2605 \2605 \2605 \2605 \2605";
+ color: #6d5dfc;
+}
+
+self [data-cy="cypress_slider"]{
+ position: absolute !important;
+ width: inherit;
+ opacity: 0;
+}
+```
+
+
+
+
+
+ Select a component on the canvas, triggering the appearance of the tooltip.
+ Click the CSS icon
+ If you wish to export a shared CSS class, enable the Create as Shared option.
+ Click the Export button.
+
+
+
+
+
+
+:::info
+This process exports only styles defined in the properties panel and not those from any other assigned CSS class.
+:::
+
+Exporting styles instantly assigns the new CSS class to the component, removing the styles from the properties panel that are now defined in the assigned CSS class.
+
+### CSS Class Naming Priority
+
+When assigning both a shared and a local CSS class with the same name:
+
+- The component is assigned both the local and shared CSS classes, regardless of the selection.
+
+- However, the shared CSS class takes precedence, and its styles are prioritized over those of the local class.
+
+- Consequently, if styles in the local CSS class are defined but not present in the shared class, they are still applied to the component.
+
+:::info
+
+
+ When both css classes are assigned, the icon of the CSS class changes to symbolize that it is both local and shared. You can choose which one to edit from the dropdown list.
+
+
+
+
+:::
+
+Qodly Studio permits the use of the same name for both a local and shared CSS class.
+
+:::info However
+
+
+ It does not allow the creation of CSS classes that resemble the name of a theme CSS class. More details can be found at Tailwind CSS .
+
+
+
+
+
+:::
+
+### Overriding Style Properties
+
+A priority-based scenario determines which styles take precedence over others:
+
+- When assigning the **theme** CSS class `bg-red-500` to a component, the `background` property displays `rgb(239,68,68)`.
+
+- Subsequently assigning a **shared** CSS class to the same component, featuring a different background color, will override the initial value set by the **theme** CSS class.
+
+- A **local** CSS class takes precedence, prioritizing its styles over those of the **shared** class, thereby overriding the initial value set by the **shared** CSS class.
+
+- Modifying this value with another background color from the **properties panel** will lead to the **theme**, **local** and **shared** CSS classes being overridden.
+
+## Progress Bar
+
+### Displaying the Progress Bar
+
+The Progress Bar is triggered when the front end anticipates at least one REST request response. This visual element is crafted to signify active server-side processes, offering a clear indication, particularly during the execution of REST queries.
+
+### Tailoring the Progress Bar
+
+Customizing the appearance of the progress bar is facilitated through the following methods:
+
+- Creating a shared CSS class named `qodly-progress`:
+
+ ```css
+ self {
+ background-color: blue;
+ height: 20px;
+ }
+ ```
+
+- Creating a custom named CSS class and targeting the div element with the class `qodly-progress`:
+
+ ```css
+ div.qodly-progress {
+ background-color: blue;
+ height: 20px;
+ }
+ ```
+
+## CSS Cascading in Page Loaders
+
+When components like a button in a Page loader and another in the main Page share the same local CSS class name, unexpected style mergers can occur. This is a result of CSS cascading, where styles from the parent Page combine with those of nested elements, causing design inconsistencies.
+
+```html
+
+```
+
+:::tip
+To prevent such issues, it's important to use unique class names, particularly in Pages with layered structures.
+:::
+
+This issue is also prevalent in more complex Page arrangements, such as dialogs within Page loaders, where CSS cascading can lead to similarly unexpected styling challenges.
+
+
+
+
+## See also
+
+If you're not familiar with CSS properties and styles, or you need a refresher, here are a few useful links and tools:
+
+* Learn CSS on the [MDN website](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
+* A guide to [flexbox properties](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) on css-tricks.com
+* [Box-shadow examples](https://getcssscan.com/css-box-shadow-examples), [box-shadow generator](https://cssgenerator.org/box-shadow-css-generator.html)
\ No newline at end of file
diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/templates.md b/versioned_docs/version-21/4DQodlyPro/pageLoaders/templates.md
new file mode 100644
index 000000000..08e7b765e
--- /dev/null
+++ b/versioned_docs/version-21/4DQodlyPro/pageLoaders/templates.md
@@ -0,0 +1,101 @@
+---
+id: templates
+title: Templates
+---
+import Column from '@site/src/components/Column'
+
+Templates serve as a dynamic resource, offering pre-designed structures to kickstart your Page building process. These templates are carefully crafted to cater to various design needs, from minimalist landing pages to intricate multi-page forms.
+
+These templates come ready-made, though they may require some customization to perfectly align with your project's unique needs.
+
+:::note
+The current list of available templates is not exhaustive and will continue to expand as Qodly Studio evolves.
+:::
+
+## Explore Templates
+
+Navigate to the Components section and locate the Templates tab to explore the available options:
+
+
+
+
+ Navigate to the Components Section : Find the Templates tab within the Components section.
+ Select a Category : Once in the Templates tab, browse through the available categories. Choose the category that aligns with your project's requirements. For example, you might opt for the Team management category
+
+
+
+
+
+
+:::info
+Quickly find categories by name using the search box
+
+
+
+ Explore Templates : Upon selection, a panel opens, presenting various templates.
+ Preview Image to visualize the template's content and a Title and Description to understand the template's purpose and functionality.
+
+
+
+
+
+
+
+
+## Using Templates
+
+To use a template from the selected category, for instance, the datatable category
+
+
+ Select a Category : Click on the desired category (e.g., Datatables, Travel, or Business). This will open a panel displaying all the templates available within that category.
+ Choose a Template : Browse the templates shown in the panel. Each template includes a preview image and a brief description.
+ Drag the Template (Not the Category!) : Click and drag a specific template from the panel directly onto the canvas.
+
+
+
+
+
+
+## Customizing Templates
+
+
+While templates provide a solid starting point, customization is essential for aligning your design with your unique vision and project requirements. Even in seemingly ready-to-use templates, like the datatable with the blue header, specific configurations may need adjustment. Here are key elements to customize:
+
+
+
+ - Qodly Source : Identify and set the appropriate qodlysource for the component.
+
+
+
+
+
+
+
+ - Properties Customization : Customize component properties, such as the column source, to accurately represent the data you want to showcase.
+
+
+
+
+
+
+
+ - Css class : Tailor the CSS class code to match your desired styling preferences.
+
+
+
+
+
diff --git a/versioned_docs/version-21/4DQodlyPro/qodlyStudioInterface.md b/versioned_docs/version-21/4DQodlyPro/qodlyStudioInterface.md
new file mode 100644
index 000000000..06dede723
--- /dev/null
+++ b/versioned_docs/version-21/4DQodlyPro/qodlyStudioInterface.md
@@ -0,0 +1,112 @@
+---
+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.
+
+
+
+ This option enables you to render the current page directly within the Page Editor window. Here, the Page is rendered by Qodly Studio's embedded web server.
+
+
+
+
+
+
+ This option allows you to display the current Page in a browser window tab, offering a convenient way to assess its appearance and functionality.
+
+
+
+
+
+
+#### Preview the Entire Site
+
+
+
+ The Preview button on the Qodly toolbar presents the start page, as defined in the Settings within a browser window tab. This option provides a holistic view of the application's initial landing page.
+
+
+
+
+
+:::info
+
+When the **Preview** button is clicked and unsaved changes are present in open Pages, a popup is displayed to ensure users are aware of their unsaved work. This popup prevents the application from rendering until the unsaved changes are addressed.
+
+
+
+
+ Its name appears below the initial privilege that included it.
+
+
+
+
+
+
+
+
+
+ The privilege is highlighted in the tags.
+
+
+
+
+
+
+
+ The
+
+
+
+
+
+ Hovering over the
+
+
+
+
+
+:::
+
+Upon successful inclusion, the `ManageFinancials` privilege inherits permissions from its counterpart, the `ManageReports` privilege, while retaining the delete permission exclusive to the `ManageFinancials` privilege.
+
+
+
+
diff --git a/versioned_docs/version-21/4DQodlyPro/roles/modelEditorApproach.md b/versioned_docs/version-21/4DQodlyPro/roles/modelEditorApproach.md
new file mode 100644
index 000000000..3050b2d22
--- /dev/null
+++ b/versioned_docs/version-21/4DQodlyPro/roles/modelEditorApproach.md
@@ -0,0 +1,99 @@
+---
+id: modelEditorApproach
+title: Model Editor Approach
+---
+
+import Column from '@site/src/components/Column'
+
+In the **Model Editor**, link privileges to permissions for Datastore, DataClass, Attribute, and Function ressources. Adding permissions is done by clicking on the
+
+
+ A purple tag signifies that the privilege is directly linked to that specific permission.
+
+
+
+
+
+
+
+
+
+ A dark grey tag suggests control over that permission by an unlinked privilege, reflecting a granularity hierarchy where the permission is governed by a higher-level resource. For instance, allowing read access to the entire Datastore for the Guest privilege would result in the Guest privilege tag being displayed when checking the read permission for all Dataclasses.
+
+
+
+
+
+
+
+
+
+
+ If a privilege is both purple-tagged and accompanied by the inclusion of an extra privilege .
+
+
+
+
+
+
+
+:::
+
+
+## Datastore Permissions
+
+
+
+ To configure Datastore permissions (e.g., Create, Read, Update, Delete and Execute), click on the Model for a streamlined dropdown selection to allocate desired privileges.
+
+
+
+
+
+
+## DataClass Permissions
+
+
+
+ To configure Dataclass permissions (e.g., Create, Read, Update, Delete and Execute), click on a Dataclass for a streamlined dropdown selection to allocate desired privileges.
+
+
+
+
+
+
+## Attribute Permissions
+
+
+
+ To configure Attribute permissions (e.g., Create, Read, Update and Delete), click on an Attribute within a Dataclass for a streamlined dropdown selection to allocate desired privileges.
+
+
+
+
+
+
+## Function Permissions
+
+
+
+ To configure Function permissions (e.g., Execute and Promote), click on a Function within a Dataclass for a streamlined dropdown selection to allocate desired privileges.
+
+
+
+
\ No newline at end of file
diff --git a/versioned_docs/version-21/4DQodlyPro/roles/permissionsFunctionLevel.md b/versioned_docs/version-21/4DQodlyPro/roles/permissionsFunctionLevel.md
new file mode 100644
index 000000000..cc5e770bd
--- /dev/null
+++ b/versioned_docs/version-21/4DQodlyPro/roles/permissionsFunctionLevel.md
@@ -0,0 +1,169 @@
+---
+id: functionPermissions
+title: Function Permissions
+---
+
+import Column from '@site/src/components/Column'
+
+## Purpose and Scope
+
+Function-level permissions control access to custom functions defined within the Model. These functions can perform actions such as managing bookings, generating invoices, and handling reservations.
+
+## Configuring Function Permissions
+
+To configure **Function** Permissions for a specific privilege, follow these steps:
+
+- Choose the resource name, like the `register` function, from the dropdown list.
+- Alternatively, type the resource name, such as the `register` function, directly into the search bar.
+
+:::info
+
+- The
+
+ If the Execute function permission checkbox has the function has been promoted by another privilege . Hover over the privilege name, and clicking on it will redirect you to the privilege promoting the function.
+
+
+
+
+
+:::
+
+### Promote Permission
+
+Promote permissions enable temporary privilege escalation during function execution
+
+ A function can be promoted from multiple privileges. In such cases, there's no hierarchy determining priority.
+
+
+
+
+
+
+
+ Hovering over the
+
+
+
+
+:::
+
+However, to accommodate scenarios where the `Agent` role needs to execute functions, such as the `book` function within the `roomOptions` Entity class, a gradual expansion involves adding the `book` function resource and checking the execute permission.
+
+
+
+ The
+
+
+
+:::
+
+This configuration explicitly specifies that when the `analyzePricing` function is executed within a session holding the `Agent` role, which lacks permission for the `Pricing` resource, it temporarily integrates the `ManageFinancials` privilege into that session during function execution. This temporary elevation allows the function to be executed without granting permanent access.
+
+:::tip
+Add the `Execute` permission in the privilege associated with the role that needs to directly perform the function. Meanwhile, the `Promote` permission is configured in the privilege that grants broader control over the resources involved in the function, providing a temporary elevation of privileges during the function's execution.
+:::
diff --git a/versioned_docs/version-21/4DQodlyPro/roles/permissionsOverview.md b/versioned_docs/version-21/4DQodlyPro/roles/permissionsOverview.md
new file mode 100644
index 000000000..d22050c05
--- /dev/null
+++ b/versioned_docs/version-21/4DQodlyPro/roles/permissionsOverview.md
@@ -0,0 +1,173 @@
+---
+id: permissionsOverview
+title: Overview
+---
+
+import Column from '@site/src/components/Column'
+
+In managing access control within your application, understanding the hierarchy and how permissions can override one another is crucial. Permissions can be set at various levels—**Datastore**, **DataClass**, and **Attribute**—each with the ability to override or supplement permissions set at higher levels. This hierarchical structure allows for granular control over user access to resources.
+
+
+## Permissions
+
+The permissions grid provides a comprehensive interface for managing access control.
+
+### Permission Types
+
+Permissions define essential actions on resources, covering tasks such as creation, reading, updating, deletion, description, execution (for functions), and promotion (also for functions).
+
+| Permission | Datastore | Dataclass | Attribute | Function |
+|------------|-----------|-----------|-----------|----------|
+| Create | Create an Entity in any Dataclass. | Create a new Entity in the chosen Dataclass. | Create a new Entity with a value different from the default allowed for the chosen Attribute. | n/a |
+| Read | Read Attributes in any Dataclass. | Read attributes in the chosen Dataclass. | Read the content of the chosen Attribute. | n/a |
+| Update | Update Attributes in any Dataclass. | Update attributes in the chosen Dataclass. | Update the content of the chosen Attribute. | n/a |
+| Delete | Delete data throughout the Model. | Delete data in the chosen Dataclass. | Delete a non-null value for the chosen Attribute. | n/a |
+| Execute | Execute all functions throughout the Model, including DataStore, Dataclasses, Entity selections, Entities, as well as Singleton functions| Execute any function on the chosen dataclass (Dataclass functions, entity functions, and entity selection functions). | n/a | Execute the selected function. |
+| Promote | n/a | n/a | n/a | Temporarily adds a specific privilege to the session during function execution, primarily for secure privilege escalation. |
+
+### Search Functionality
+
+The search bar
+
+ Available filters include:
+
+ Datastore
+ Dataclass
+ Singleton
+ Functions
+ Attribute
+
+
+
+
+
+
+Users can check the desired filter options to display only the relevant permissions.
+
+
+### Create a Permission
+
+To create a new permission in the current privilege:
+
+- Click on the `+ Create a permission` bar
+
+ Once the clean button is clicked, all permissions associated with non-existing resources will be deleted from the catalog across all privileges.
+
+
+
+
+
+:::info
+When all resources are available, the Clean button is disabled.
+
+ When managing permissions, you can toggle between showing and hiding inherited permissions. By default, inherited permissions are visible, allowing you to see which permissions a privilege has inherited from other privileges for a resource. You can toggle off this option to hide any inherited permissions and focus only on permissions explicitly defined within the current privilege.
+
+
+
+
+
+- **Enabled**: Displays all permissions defined for resources, including those inherited from other privileges.
+
+- **Disabled**: Hides inherited permissions defined for resources. If a resource's permissions are entirely inherited and no explicit permissions are defined in the current privilege, the entire resource row will be hidden. If an explicit permission exists (e.g., Execute) for a resource, only the inherited permissions (e.g., Create) are unchecked while the resource row remains visible.
+
+## Overrides
+
+### General Principle
+
+While permissions inherit from higher levels, you can override them at more specific levels. This means:
+
+- **Attribute-level permissions can override DataClass and datastore permissions for that attribute.**
+- **DataClass-level permissions can override datastore permissions for that DataClass and its attributes.**
+
+Overrides allow you to refine access control by setting exceptions to the inherited permissions.
+
+### Overrides Flow
+
+- **Override at DataClass Level**: If you need a DataClass to have different permissions from the datastore defaults, you can set permissions specifically for that DataClass.
+
+- **Override at Attribute Level**: For individual attributes that require different permissions from their DataClass, you can set permissions specifically for those attributes.
+
+:::info Example: Overriding Datastore Permissions at the DataClass Level
+- **Scenario**: You want to restrict access to the `Employee` DataClass, despite the datastore granting `Read` permission.
+
+- **Action**: At the DataClass level for `Employee`, remove the `Read` permission.
+
+- **Result**: Users cannot read data from the `Employee` DataClass, even though the datastore allows reading from other DataClasses.
+
+:::
\ No newline at end of file
diff --git a/versioned_docs/version-21/4DQodlyPro/roles/rolesPrivilegesOverview.md b/versioned_docs/version-21/4DQodlyPro/roles/rolesPrivilegesOverview.md
new file mode 100644
index 000000000..e3efe6308
--- /dev/null
+++ b/versioned_docs/version-21/4DQodlyPro/roles/rolesPrivilegesOverview.md
@@ -0,0 +1,210 @@
+---
+id: overview
+title: Configuring Roles and Privileges
+---
+import Column from '@site/src/components/Column'
+
+
+## Roles: Defining User Profiles
+
+### Understanding Roles
+
+Roles are essential in defining distinct user profiles within Qodly. Each role corresponds to a specific set of privileges, and access levels (Permissions).
+
+### Role Hierarchy
+
+Roles can be structured hierarchically, allowing for an organized and layered access control system. In Qodly, higher-level roles can inherit the **privileges** of lower-level roles, creating an efficient method of managing user access. This hierarchy enhances the granularity of access management and facilitates a streamlined approach.
+
+### Detailed Permission Review for Roles
+
+When a role is selected in the `Roles & Privileges` editor, a detailed permission review is displayed to provide insight into the final permissions resolution for that specific role. This feature helps developers fine-tune privileges more effectively by showing the impact of privilege configurations.
+
+
+
+ This representation can be accessed through a text editor by selecting the Roles and privileges in the Explorer and choosing Open With a Text Editor.
+
+
+
+
+
+?$method=release` | Releases an existing entity set stored in the server's cache |
+| [**$method=subentityset**](#methodsubentityset) | `GET /Employee(11)/staff?$expand=staff&$method=subentityset&$subOrderby=lastName ASC` | Creates an entity set based on the collection of related entities defined in the REST request |
+| [**$method=update**](#methodupdate) | `POST /Employee?$method=update` | Updates and/or creates one or more entities |
+
+
+
+
+
+
+## $method=delete
+
+### Description
+
+The `$method=delete` parameter allows you to delete an entity or an entire entity collection.
+
+:::tip
+You can define the collection of entities using `$filter` or specify one directly using `{dataClass}({key})` (e.g., `/Employee(22)`).
+:::
+
+You can also delete entities in an entity set by calling `$entityset/{entitySetID}`.
+
+### Examples
+
+- Delete a specific entity:
+
+ ```
+ POST /rest/Employee(22)?$method=delete
+ ```
+
+- Delete entities using a filter:
+
+ ```
+ POST /rest/Employee?$filter="ID=11"&$method=delete
+ ```
+
+- Delete an entity set:
+
+ ```
+ POST /rest/Employee/$entityset/?$method=delete
+ ```
+
+### Response
+
+```json
+{
+ "ok": true
+}
+```
+
+
+
+
+
+
+## $method=entityset
+
+### Description
+
+When you create a collection of entities in REST, you can save this collection as an entity set in the server's cache.
+
+:::tip
+The entity set will have a reference number that you can use to access it later. By default, it is valid for two hours, but you can modify this duration by setting the `$timeout` parameter.
+:::
+
+### Examples
+
+- Create an entity set with the default timeout:
+
+ ```
+ GET /rest/Employee?$filter="ID>320"&$method=entityset
+ ```
+
+- Create an entity set with a custom timeout:
+
+ ```
+ GET /rest/Employee?$filter="ID>320"&$method=entityset&$timeout=600
+ ```
+
+### Response
+
+After creating an entity set, the first element, `__ENTITYSET`, is added to the object returned and indicates the URI to use to access the entity set:
+
+```json
+{
+ "__ENTITYSET": "/rest/Employee/$entityset/207BE8235EC24623B98082CAA84CCB7C",
+ ...
+}
+```
+
+
+
+## $method=release
+
+### Description
+
+You can release an entity set, which you created using `$method=entityset`, from the server's cache.
+
+### Example
+
+Release an existing entity set:
+
+```
+GET /rest/Employee/$entityset/4C51204DD8184B65AC7D79F09A077F24?$method=release
+```
+
+### Response
+
+If the request was successful:
+
+```json
+{
+ "ok": true
+}
+```
+
+If the entity set wasn't found:
+
+```json
+{
+ "__ERROR": [
+ {
+ "message": "The \"207BE8235EC24623B982CAA84CCB7C\" entity set cannot be found",
+ "componentSignature": "dbmg",
+ "errCode": 1802
+ }
+ ]
+}
+```
+
+
+
+## $method=subentityset
+
+Creates an entity set in the server's cache based on the collection of related entities defined in the REST request.
+
+### Description
+
+The `$method=subentityset` parameter allows you to sort the data returned by the relation attribute defined in the REST request.
+
+:::tip
+You can sort the data using the `$subOrderby` property. By default, the data is sorted in ascending order.
+:::
+
+### Example
+
+Retrieve only the related entities for a specific entity:
+
+```
+GET /rest/Users(4)/Orders?$expand=Orders&$method=subentityset
+```
+
+### Response
+
+```json
+{
+ "__ENTITYSET": "/rest/Orders/$entityset/6F245BB22D294281B9D394B876D4A6EE",
+ "__DATACLASS": "Orders",
+ "__entityModel": "Orders",
+ "__GlobalStamp": 0,
+ "__COUNT": 1,
+ "__FIRST": 0,
+ "__ENTITIES": [
+ {
+ "__KEY": "10",
+ "__TIMESTAMP": "2024-05-09T17:01:36.990Z",
+ "__STAMP": 1,
+ "ID": 10,
+ "Quantity": 2,
+ "Purchaser": {
+ "__deferred": {
+ "uri": "/rest/Users[4]",
+ "__KEY": "4"
+ }
+ },
+ "OrderedProduct": {
+ "__deferred": {
+ "uri": "/rest/Products[1]",
+ "__KEY": "1"
+ }
+ },
+ "paymentsSelection": {
+ "__deferred": {
+ "uri": "/rest/Orders[10]/paymentsSelection?$expand=paymentsSelection"
+ }
+ }
+ }
+ ],
+ "__SENT": 1
+}
+```
+
+
+
+
+## $method=update
+
+
+### Description
+
+The `$method=update` parameter allows you to update and/or create one or more entities in a single **POST** request.
+
+:::warning
+If updating an entity, you must include the `__KEY` and `__STAMP` parameters. If these parameters are missing, a new entity will be created.
+:::
+
+### Examples
+
+- Update a specific entity:
+
+ **Request URL:**
+ ```
+ POST /rest/Person?$method=update
+ ```
+
+ **POST Data:**
+ ```json
+ {
+ "__KEY": "340",
+ "firstName": "Pete",
+ "lastName": "Miller"
+ }
+ ```
+
+- Create a new entity:
+
+ **Request URL:**
+ ```
+ POST /rest/Person?$method=update
+ ```
+
+ **POST Data:**
+ ```json
+ {
+ "firstName": "John",
+ "lastName": "Smith"
+ }
+ ```
+
+- Update and create multiple entities at the same time:
+
+ **Request URL:**
+ ```
+ POST /rest/Person?$method=update
+ ```
+
+ **POST Data:**
+ ```json
+ [
+ {
+ "__KEY": "309",
+ "firstName": "Penelope",
+ "lastName": "Miller"
+ },
+ {
+ "firstName": "Ann",
+ "lastName": "Jones"
+ }
+ ]
+ ```
+
+### Response
+
+When adding or modifying an entity, the server returns the updated entity with the attributes that were modified:
+
+```json
+{
+ "__STATUS": {
+ "success": true
+ },
+ "__KEY": "622",
+ "__STAMP": 1,
+ "uri": "/rest/Employee(622)",
+ "__TIMESTAMP": "!!2024-05-23!!",
+ "ID": 622,
+ "firstName": "John",
+ "lastName": "Smith"
+}
+```
+
+If there is an error, such as an incorrect key:
+
+```json
+{
+ "__ERROR": [
+ {
+ "message": "Error code: 1542 (dbmg)\nCannot find entity with \"98712764\" key in the \"Employee\" dataclass\nDatabase Engine\nDatabase Engine\ntask 87, name: 'REST Handler: '\n",
+ "componentSignature": "dbmg",
+ "errCode": 1542
+ }
+ ]
+}
+```
+
+
+## Combining with Other Parameters
+
+The `$method` parameter can be combined with other parameters to perform various operations on entities or entity sets effectively:
+
+- **$filter**: Apply filters to select specific entities before performing the method operation.
+
+- **$orderby**: Sort the entities before performing the method operation.
+
+- **$top/$limit** and **$skip**: Limit the number of entities and skip a certain number of entities before performing the method operation.
+
+- **$expand**: Include related data in the operation.
+
+- **$attributes**: Specify which attributes to include in the response after performing the method operation.
+
+- **$lock**: Lock entities before performing the method operation to ensure data integrity.
+
+- **$compute**: Perform calculations on related data before executing the method operation.
+
+- **$entityset**: Create, modify, or release entity sets as part of the method operation.
+
+- **$savedfilter**: Save filter criteria for recreating entity sets.
+
+- **$savedorderby**: Save order by criteria for recreating entity sets.
+
+
+## Best Practices
+
+- **Use the Appropriate Method:** Choose the correct method (`delete`, `entityset`, `release`, `subentityset`, `update`) based on the operation you need to perform.
+
+- **Check Responses:** Always check the response to ensure that the operation was successful and handle any errors gracefully.
+
+- **Manage Timeouts:** When creating entity sets, manage timeouts appropriately to avoid unintended data retention or loss.
\ No newline at end of file
diff --git a/versioned_docs/version-21/Integrations/api/$orderby.md b/versioned_docs/version-21/Integrations/api/$orderby.md
new file mode 100644
index 000000000..7dc25fc73
--- /dev/null
+++ b/versioned_docs/version-21/Integrations/api/$orderby.md
@@ -0,0 +1,204 @@
+---
+id: $orderby
+title: $orderby
+---
+
+## Functionality
+
+### Definition
+
+The `$orderby` endpoint sorts the data returned by the REST request based on specified attributes and sorting order. You can specify the order as ASC (or asc) for ascending and DESC (or desc) for descending.
+
+
+### Syntax
+
+To sort data using `$orderby`, use the following syntax:
+
+```
+GET /rest/{{dataClass}}?$orderby="{{attribute}} {{order}}, {{attribute2}} {{order2}}, ..."
+```
+
+:::tip
+The `$orderby` endpoint accepts one or more attributes for sorting in ascending or descending order. For example, `$orderby="lastName desc, salary asc"` sorts entities by last name in descending order and salary in ascending order.
+:::
+
+
+## Detailed Behavior
+
+### Default Sorting
+
+Data is sorted in ascending order by default.
+
+### Using the `$orderby` Parameter
+
+When `$orderby` is specified, the following occurs:
+
+- Entities returned by the REST request are sorted according to the attributes and sorting order provided.
+
+### Using Sorting by Multiple Attributes
+
+To sort entities by multiple attributes, separate the attributes with a comma and specify the sorting order (ASC or DESC) for each attribute.
+
+:::tip
+You can specify multiple attributes for sorting. The attributes are processed in the order they are listed.
+:::
+
+
+## Combining with Other Parameters
+
+The `$orderby` parameter can be combined with other parameters:
+
+- **$filter**: Narrow down the dataset before applying sorting.
+
+- **$top/$limit** and **$skip**: Limit and navigate through the sorted dataset.
+
+- **$expand**: Include related data in the sorted results.
+
+- **$attributes**: Specify which attributes to include in the sorted response.
+
+- **$method=entityset**: Create an entity set with sorted results and save it in the server's cache.
+
+
+## Use Cases
+
+### Retrieving and Sorting Entities
+
+Retrieve entities and sort them by salary in descending order, last name in ascending order, and first name in ascending order:
+
+**Request:**
+
+```
+GET /rest/Employee?$filter="salary!=0"&$orderby="salary DESC,lastName ASC,firstName ASC"
+```
+
+**Response:**
+
+```json
+{
+ "__DATACLASS": "Employee",
+ "__entityModel": "Employee",
+ "__GlobalStamp": 0,
+ "__COUNT": 10,
+ "__SENT": 10,
+ "__FIRST": 0,
+ "__ENTITIES": [
+ {
+ "__KEY": "1",
+ "__TIMESTAMP": "2024-05-09T16:50:24.072Z",
+ "__STAMP": 1,
+ "firstName": "Alice",
+ "lastName": "Adams",
+ "salary": 90000
+ },
+ {
+ "__KEY": "2",
+ "__TIMESTAMP": "2024-05-09T16:50:24.072Z",
+ "__STAMP": 2,
+ "firstName": "Bob",
+ "lastName": "Brown",
+ "salary": 80000
+ },
+ {
+ "__KEY": "3",
+ "__TIMESTAMP": "2024-05-09T16:50:24.072Z",
+ "__STAMP": 3,
+ "firstName": "Carol",
+ "lastName": "Clark",
+ "salary": 55000
+ }
+ ]
+}
+```
+
+### Sorting by a Single Attribute
+
+Sort entities by the lastName attribute in ascending order:
+
+**Request:**
+
+```
+GET /rest/Employee/$entityset/CB1BCC603DB0416D939B4ED379277F02?$orderby="lastName"
+```
+
+**Response:**
+
+```json
+{
+ "__entityModel": "Users",
+ "__COUNT": 10,
+ "__SENT": 10,
+ "__FIRST": 0,
+ "__ENTITIES": [
+ {
+ "__KEY": "1",
+ "__TIMESTAMP": "2024-05-09T16:50:24.072Z",
+ "__STAMP": 1,
+ "firstName": "John",
+ "lastName": "Smith",
+ "salary": 90000
+ },
+ {
+ "__KEY": "2",
+ "__TIMESTAMP": "2024-05-09T16:50:24.072Z",
+ "__STAMP": 2,
+ "firstName": "Susan",
+ "lastName": "O'Leary",
+ "salary": 80000
+ }
+ ...
+ ]
+}
+```
+
+### Sorting an Entity Set
+
+Sort an entity set by the `lastName` attribute in ascending order:
+
+**Request:**
+
+```
+GET /rest/Employee/$entityset/CB1BCC603DB0416D939B4ED379277F02?$orderby="lastName"
+```
+
+**Response:**
+
+```json
+{
+ "__DATACLASS": "Employee",
+ "__entityModel": "Employee",
+ "__COUNT": 10,
+ "__SENT": 10,
+ "__FIRST": 0,
+ "__ENTITIES": [
+ {
+ "__KEY": "1",
+ "__TIMESTAMP": "2024-05-09T16:50:24.072Z",
+ "__STAMP": 1,
+ "firstName": "John",
+ "lastName": "Smith",
+ "salary": 90000
+ },
+ {
+ "__KEY": "2",
+ "__TIMESTAMP": "2024-05-09T16:50:24.072Z",
+ "__STAMP": 2,
+ "firstName": "Susan",
+ "lastName": "O'Leary",
+ "salary": 80000
+ }
+ ...
+ ]
+}
+```
+
+
+
+## Best Practices
+
+- **Specify Attributes Clearly**: Ensure that the attributes you are sorting by exist in the data model.
+
+- **Use Multiple Attributes for Sorting**: Combine multiple attributes to achieve more precise sorting.
+
+- **Combine with Filtering**: Use `$filter` to narrow down the dataset before applying sorting for better performance and relevance.
+
+- **Monitor Performance**: Be aware that sorting large datasets can impact performance, especially if combined with complex filtering and expansions.
\ No newline at end of file
diff --git a/versioned_docs/version-21/Integrations/api/$querypath.md b/versioned_docs/version-21/Integrations/api/$querypath.md
new file mode 100644
index 000000000..60e061022
--- /dev/null
+++ b/versioned_docs/version-21/Integrations/api/$querypath.md
@@ -0,0 +1,231 @@
+---
+id: $querypath
+title: $querypath
+---
+
+## Functionality
+
+### Definition
+
+The `$querypath` endpoint allows developers to understand how queries are executed in the backend. It provides a step-by-step breakdown of the query execution, showing each operation, its performance, and the results obtained at each stage. It also reveales optimization techniques and the exact path taken by the server to fetch the required data.
+
+:::info
+For additional information, please consult the ["About queryPlan and queryPath"](../../QodlyinCloud/qodlyScript/DataClassClass.md#about-queryplan-and-querypath) documentation.
+:::
+
+### Syntax
+
+To use the `$querypath` parameter, use the following syntax:
+
+```
+GET /rest/{{dataClass}}/?$querypath=true
+```
+
+
+
+## Properties Returned
+
+### General Properties
+
+The response from the `$querypath` endpoint is structured to provide a detailed insight into the query execution process:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `__queryPath` | Object | Contains the detailed steps taken to execute the query. |
+| `__extendedQueryPath` | Object | Provides an advanced, detailed logical structure of the query execution. |
+| `__DATACLASS` | String | The data class targeted by the query. |
+| `__entityModel` | String | The entity model used during the query. |
+| `__GlobalStamp` | Integer | Global modification timestamp indicating the last update across the server. |
+| `__COUNT` | Integer | Number of entities returned by the query. |
+| `__FIRST` | Integer | Index of the first returned entity. |
+| `__ENTITIES` | Array | Detailed information about the entities affected by the query. |
+
+### `__queryPath` Details
+
+Detailed information about the steps involved in the query:
+
+| Key | Type | Description |
+|-----------|-------|----------------------------------------------------------|
+| [`steps`](#within-steps-array) | Array | An array containing detailed steps of the query execution process. |
+
+#### Within `steps` Array
+
+Each step within the query execution path is detailed:
+
+| Key | Type | Description |
+|-----|------|-------------|
+| `description` | String | Describes the action taken, e.g., a join or filter operation. |
+| `time` | Number | Time in milliseconds taken to execute this part of the query. |
+| `recordsfounds` | Number | Number of records found as a result of this step. |
+| `steps` | Array | Nested steps detailing sub-operations or subsequent actions in the query path. |
+
+### `__extendedQueryPlan` Details
+
+Provides a more intricate view of the query execution strategy:
+
+
+| Key | Type | Description |
+|---------------|--------|-----------------------------------------------------|
+| `type` | String | Type of node in the query plan, e.g., `LogicOperatorNode`. |
+| `logicOper` | String | Logical operator used, e.g., `And`. |
+| [`parts`](#within-parts-array) | Array | Details of operations performed in the query plan. |
+
+#### Within `parts` Array
+
+Each element in the `parts` array represents a detailed aspect of the query execution:
+
+| Key | Type | Description |
+|-----|------|-------------|
+| `type` | String | Specifies the type of operation, like `JoinNode` or `SeqNode`. |
+| `field` | String | Field involved in this part of the query. |
+| `table` | String | Table that the field belongs to. |
+| `instance` | Integer | Instance identifier for complex queries involving multiple uses of the same table. |
+| `oper` | String | Operator used in the query, such as `>` or `===`. |
+| `value` | Various | The value used in the operation, reflecting the filter or condition applied. |
+| `timeTaken` | Number | Execution time for this part of the query. |
+| `foundRecords` | Number | Number of records that matched this part of the query. |
+
+### `__ENTITIES` Details
+
+Information about the entities affected by the query:
+
+
+| Key | Type | Description |
+|---------------|--------|----------------------------------------------------------|
+| `__KEY` | String | Unique key for the entity. |
+| `__TIMESTAMP` | String | Timestamp of the last update to the entity. |
+| `__STAMP` | Integer| Version stamp for the entity. |
+| `ID` | Integer| Identifier of the entity. |
+| `Quantity` | Integer| Example attribute, e.g., quantity in an order. |
+| `Purchaser` | Object | Example attribute, e.g., details about the purchaser, using deferred loading. |
+
+
+
+## Combining with Other Parameters
+
+The `$querypath` parameter can be combined with other parameters to trace the execution path of a query, providing insights into the query's performance and optimization opportunities:
+
+- **$filter**: Apply filters to the dataset and trace the path to see how they affect the query execution.
+
+- **$orderby**: Observe how sorting impacts the execution path.
+
+- **$top/$limit** and **$skip**: Check the effect of limiting and skipping records on the query execution path.
+
+- **$expand**: Include related data and trace how joining related tables or collections influences the execution path.
+
+- **$attributes**: Specify which attributes are included in the query and understand their impact on the execution path.
+
+- **$method**: Combine with various method operations to analyze their execution paths.
+
+- **$compute**: Evaluate the impact of computations on the query execution path.
+
+- **$entityset**: Analyze the execution path for operations involving entity sets.
+
+- **$savedfilter**: Save and reuse filters to analyze their impact on the query execution path.
+
+- **$savedorderby**: Save and reuse sorting criteria to analyze their impact on the query execution path.
+
+
+## Sample Usage in Postman
+
+How to Use:
+
+- **Method**: GET
+- **URL**: `/rest/Orders?$filter="Quantity > 4 AND Purchaser.Name = user2"&$querypath=true`
+
+
+
+
+ Open the Model Editor.
+ Access the properties panel of the dataclass you intend to modify.
+ Enable the Do not Expose as REST option within the Scope property.
+
+
+
+
+
+
+
+### Managing Attribute Exposure
+
+By default, attributes within these dataclasses are also exposed. To limit exposure of specific attributes:
+
+
+
+
+ In the Model Editor, select the attribute you intend to hide.
+ Enable the Do not Expose as REST option in the Scope property.
+
+
+
+
+
+
+:::tip
+Attributes can only be accessed via REST if their parent dataclass is also exposed. Hiding the dataclass will restrict access to all its attributes.
+:::
+
+
+## REST Requests
+
+### Structure
+
+REST requests are structured to provide flexibility in accessing and manipulating data:
+
+- Base URL followed by specific parameters: `{{APIEndpoint}}/rest/{{dataClass}}`
+
+- Common Operations: [$filter](./$filter), [$attributes](./$attributes), [$skip](./$skip), [$method](./$method)...
+
+### Parameters
+
+REST request parameters follow a structured format, beginning with the base URL and appending query parameters to tailor the request.
+
+Parameters start with a `?` symbol, followed by additional parameters separated by `&`:
+
+```
+GET {{APIEndpoint}}/rest/Person/?$filter="lastName!=Jones"&$method=entityset&$timeout=600
+```
+
+In the above example:
+
+- [**$filter**](./$filter): Narrows the returned data based on specific criteria.
+- [**$method**](./$method): Determines the type of operation to be performed.
+- [**$timeout**](./$timeout): Sets a limit on the time the server should wait before aborting the request.
+
+
+### Handling Ambiguities
+
+To avoid ambiguities, particularly with string values, it is advisable to enclose parameters in quotes. For instance, if querying a last name that includes an apostrophe, you might specify it as `"lastName='O'Connor'"` to ensure the query is parsed correctly.
+
+### Data Modifications
+
+While `GET` methods are primarily used for retrieving data, `POST` methods can be employed to add, update, or delete entities within a dataclass:
+
+- **POST** to create new entities.
+- **PUT** or **PATCH** to update existing entities.
+- **DELETE** to remove entities.
+
+### Data Formatting
+
+By default, REST APIs return data in JSON format. If an array format is preferred, the [`$asArray`](./$asArray) parameter can be used. This is particularly useful when integrating with frontend frameworks that may expect data in a specific format.
+
+### Server Responses Codes
+
+Each REST request is met with a server response that includes a status code indicating the result of the request—ranging from successful operations to various errors that might have occurred during the process. This feedback is vital for error handling and ensuring robust API integration:
+
+| Status Code | Type | Message | Description |
+|-------------|-------------------------------------|---------------------------------------------------------------|------------------------------------------------------------------------------------------------|
+| 200 | **Success** | | Request processed without error. |
+| 400 | **Missing API Key** | Some headers are missing, required headers [api-key] | If the API key is not included, you will encounter an "Authentication Token Missing" message. |
+| 401 | **Invalid API Key** | Api-key Not Valid | This response occurs when an incorrect API key is provided. |
+| | **Expired API Key** | Api-key expired | If the API key has expired, the error message "Authentication Token Expired" is returned. |
+| | **Unauthorized** | No permission to read for the Users dataclass | Permissions error (check user's permissions). |
+| | **No permission to access Dataclass** | No permission to read for the Users dataclass | Permissions error (check user's permissions). |
+| | **No permission to access Attributes** | No permission to read for "Name" attribute in the Users dataclass | Permissions error (check user's permissions). |
+| 402 | **No Session** | | Maximum number of sessions has been reached. |
+| 403 | **Access Denied** | 403 - Forbidden | The `403` error surfaces when the API key is valid but lacks necessary permissions. |
+| 404 | **Resource Not Found** | Appid or env not found in Table. | The `404` error is shown if the endpoint URL is incorrect or the endpoint does not exist. |
+| | **Dataclass Not Exposed** | The "Users" dataclass cannot be found | A `404` error occurs if the dataclass does not exist on the server or is not exposed as REST. |
+| | **Attribute Not Exposed** | The "Name" attribute cannot be found in The "Users" dataclass | If an attribute is not exposed in REST, this also results in a `404` error. |
+| 500 | **Server Error** | | The `500` error indicates server-side issues; contacting the API provider is recommended. |
+| 502 | **Request Not Processed** | 502 Bad Gateway | Server might not be started. |
+
+
+## API Endpoint Usage Example in Postman
+
+
+### Setting Up Postman for API Requests
+
+To use Postman for testing REST APIs:
+
+1. Launch Postman and initiate a new API request setup.
+
+2. Enter the appropriate API endpoint URL from the Qodly Cloud application.
+
+3. Select the desired HTTP method (GET, POST, etc.) for your API call.
+
+
+
+
+
+Basic usage:
+```tsx
+import { useEnhancedNode } from '@ws-ui/webform-editor';
+import { useState, useEffect } from 'react';
+
+const ExampleDelayedState = () => {
+ // highlight-next-line
+ const { actions, connectors, linkedNodes } = useEnhancedNode((node) => ({
+ nodes: node.data.nodes,
+ linkedNodes: node.data.linkedNodes,
+ node,
+ }));
+
+ const [delayedState, setDelayedState] = useState(null);
+
+ useEffect(() => {
+ const fetchData = async () => {
+ // Fetch your data, e.g., from an API
+ const result = await fetch('https://api.example.com/data');
+ const data = await result.json();
+
+ setDelayedState(data);
+
+ actions.setDatasourceValue({ key: 'yourDatasourceKey', value: data });
+ };
+
+ fetchData();
+ }, [actions]);
+
+ return (
+
+
+ {delayedState && (
+
+ {JSON.stringify(delayedState)}
+
+ )}
+
+
+
+Handling drop events:
+
+
+```tsx
+import { useEnhancedNode } from '@ws-ui/webform-editor';
+
+const DraggableComponent = () => {
+ // highlight-next-line
+ const { actions, connectors, linkedNodes } = useEnhancedNode((node) => ({
+ nodes: node.data.nodes,
+ linkedNodes: node.data.linkedNodes,
+ node,
+ }), {
+ onDrop: (event) => {
+ console.log('Dropped:', event);
+ },
+ });
+
+ return (
+ {
+ event.dataTransfer.setData('text', 'your data here');
+ }}
+ >
+
+
+ );
+ };
+```
+
+
+
+
+
+
+:::info
+
+The `useEnhancedNode` function returns an object with the following structure:
+
+- **id**: The ID of the node.
+- **store**: The store associated with the node.
+- ***connectors***: Object containing connectors to interact with the Craft.js editor.
+- **...collected**: Additional data collected by the collector function.
+- **actions**: An object containing methods for manipulating node values, including `setProp`, `setStyle`, `setDatasource`, and `setIterator`.
+
+
+:::
+
+
+## useEnhancedEditor
+
+A Hook that provides methods and state information associated with the entire editor.
+
+### *Parameters*
+
+
+| param | description |
+|-------|-------------|
+|collect|A function that collects relevant state information from the editor state. The component will re-render when the values returned by this function changes.|
+### *Returns*
+
+
+`{useEditorReturnType}`
+
+
+
+
+
+
+Basic usage:
+
+```tsx
+import { useEnhancedEditor } from "@ws-ui/webform-editor";
+
+const BasicUsageExample = () => {
+// highlight-next-line
+const { isActive, enabled, canvas } = useEnhancedEditor();
+
+ // Your component logic based on the editor state
+ return (
+
+
Is Active: {isActive ? 'Yes' : 'No'}
+
Editor Enabled: {enabled ? 'Yes' : 'No'}
+
Canvas Element: {canvas}
+
+ // Additional logic and components based on the editor state
+
+
+
+
+Basic usage with collector:
+
+```tsx
+import { useEnhancedEditor } from "@ws-ui/webform-editor";
+
+const CollectorUsageExample = () => {
+ const collect = (state, query) => ({
+ enabled: state.options.enabled,
+ isActive: query.getEvent('selected').some(),
+ });
+ // highlight-next-line
+ const { isActive, enabled, actions } = useEnhancedEditor(collect);
+
+ // Your component logic based on the collected data
+ return (
+
+
Is Active: {isActive ? 'Yes' : 'No'}
+
Editor Enabled: {enabled ? 'Yes' : 'No'}
+
+ // Additional logic and components based on the collected data
+
+
+
+
+Usage with a custom collector function:
+
+```tsx
+import { useEnhancedEditor } from "@ws-ui/webform-editor";
+
+const CustomUsageExample = ({ id }) => {
+ const { hidden, selected, hovered, topLevel } =
+ useEnhancedEditor((state, query) => {
+ const node = state.nodes[id];
+ const nodeActions = query.node(id);
+
+ return {
+ hidden: node?.data.hidden,
+ selected: state.events.selected.has(id),
+ topLevel: node ? nodeActions.isTopLevelCanvas() : false,
+ hovered: state.events.hovered.has(id),
+ };
+});
+
+// Your component logic based on the useEnhancedEditor results
+return (
+
+
Is Hidden: {hidden ? 'Yes' : 'No'}
+
Is Selected: {selected ? 'Yes' : 'No'}
+
Is Top Level: {topLevel ? 'Yes' : 'No'}
+
Is Hovered: {hovered ? 'Yes' : 'No'}
+
+
+
+
+
+
+
+
+
diff --git a/versioned_docs/version-21/Integrations/customComponent/api-reference/webform-editor/v0.2.24.mdx b/versioned_docs/version-21/Integrations/customComponent/api-reference/webform-editor/v0.2.24.mdx
new file mode 100644
index 000000000..ea7f1629a
--- /dev/null
+++ b/versioned_docs/version-21/Integrations/customComponent/api-reference/webform-editor/v0.2.24.mdx
@@ -0,0 +1,529 @@
+---
+id: v0.2.24
+title: v0.2.24
+---
+
+
+# Hooks
+
+## useNavigation
+
+Allows navigating when we are inside a Page loader, or it can be simply used to know if the component is inside a Page loader
+
+
+
+## useStudioPanel
+
+A hook that provides state information and actions for managing Qodly Studio panel in a web form editor. Qodly Studio panel represents a dynamic side panel that displays information related to the selected element or component.
+
+### *Returns*
+
+
+`{StudioPanelReturnType}` - An object containing the type, open state, current state, and actions to manipulate Qodly Studio panel.
+:::info
+The `useStudioPanel` function returns an object with properties `type`, `isOpen`, `current`, and `actions` to manipulate Qodly Studio panel state.
+
+The `actions` object includes methods for `updating the state`, `setting the current type and value`, `closing`, `opening`, and `opening with a specific type and current value`.
+
+:::
+
+
+
+## useRenderer
+
+A hook that facilitates rendering and event handling for a Craft.js node. It manages server-side references (ssRef) and auto-binds events to the corresponding DOM element.
+
+### *Parameters*
+
+
+| param | description |
+|-------|-------------|
+|autoBindEvents|Specifies whether events should be auto-bound.|
+|omittedEvents|An array of event names to be omitted.|
+### *Returns*
+
+
+`{[HTMLElement | null, { connectRenderer, eventsToHandle, emit} ] }` - An object with methods for connecting, handling events, and emitting custom events.
+:::info
+The `useRenderer` function returns a tuple with two elements:
+
+- `HTMLElement | null`: The current DOM element or null. This represents the element to which the renderer is currently connected.
+- An object providing methods to:
+
+- Connect the renderer
+
+- `eventsToHandle`: An object mapping event names to their corresponding handler functions.
+
+- `emit`: A function to emit a custom event with the specified name and payload.
+:::
+
+
+
+## useLayout
+
+A hook that provides methods and properties related to the layout mode of a Page.
+
+### *Returns*
+
+
+`{LayoutReturnType}` - An object containing properties and methods related to the layout mode.
+
+:::info
+The useLayout function returns an object with properties `layout` and `isAiryMode`, along with methods `getClassName` and `toggle`.
+:::
+
+
+
+
+
+Basic usage:
+
+```tsx
+import { useLayout } from "@ws-ui/webform-editor";
+
+const Example = () => {
+highlight-next-line
+const { layout, isAiryMode, getClassName } = useLayout();
+
+return (
+
+
Current Layout: {layout}
+
Is Airy Mode: {isAiryMode ? 'Yes' : 'No'}
+
Modified Class Name: {getClassName('my-container')}
+
+
+
+
+
+
+## useDatasourceSub
+
+A hook that subscribes to changes in datasources and performs replacements in the webform based on specified actions.
+
+
+
+
+
+
+```tsx
+import useDatasourceSub from "@ws-ui/webform-editor"
+
+const ExampleComponent = () => {
+highlight-next-line
+useDatasourceSub();
+};
+```
+
+
+
+
+
+
+
+## useSources
+
+A hook that facilitates managing datasources and current elements associated with a web form. It provides methods for setting, fetching, and listening to changes in datasource values.
+
+### *Parameters*
+
+
+| param | description |
+|-------|-------------|
+|options|`UseSourcesOptions` An object allowing configuration of the hook behavior. Includes options such as `datasourceChange`, `currentElementChange` and `acceptIteratorSel`.|
+
+### *Returns*
+
+
+`{UseSourcesReturnType}` - An object containing datasources, current elements, and methods for manipulating their values.
+
+:::info
+The `useSources` function returns an object with the following structure:
+- `sources`: An object containing `datasource` and `currentElement`, representing the current values of datasources and current elements.
+- `actions`: An object containing methods for manipulating datasource values, including `setDatasourceValue`, `setCurrentElementValue`, `fetchDatasourceValue`, and `fetchCurrentElementValue`.
+:::
+
+
+
+## useEnhancedNode
+
+A hook that enhances the functionality of a Craft.js node, providing features for handling data transfer, managing datasources, and styling components.
+
+### *Parameters*
+
+
+| param | description |
+|-------|-------------|
+|collector|(optional) `(args: Node) => K` | A function to collect additional information from the node.|
+|options|(optional) `{ stopPropagation?: (data: IDataTransfer) => boolean; onDrop?: (e: any) => void; }` | An object with optional properties (`stopPropagation`and `onDrop`) to customize the hook's behavior.|
+### *Returns*
+
+
+`{UseEnhancedNodeReturnType}` - An object containing enhanced node information, connectors, and actions.
+
+
+
+
+
+
+Basic usage:
+```tsx
+import { useEnhancedNode } from '@ws-ui/webform-editor';
+import { useState, useEffect } from 'react';
+
+const ExampleDelayedState = () => {
+ // highlight-next-line
+ const { actions, connectors, linkedNodes } = useEnhancedNode((node) => ({
+ nodes: node.data.nodes,
+ linkedNodes: node.data.linkedNodes,
+ node,
+ }));
+
+ const [delayedState, setDelayedState] = useState(null);
+
+ useEffect(() => {
+ const fetchData = async () => {
+ // Fetch your data, e.g., from an API
+ const result = await fetch('https://api.example.com/data');
+ const data = await result.json();
+
+ setDelayedState(data);
+
+ actions.setDatasourceValue({ key: 'yourDatasourceKey', value: data });
+ };
+
+ fetchData();
+ }, [actions]);
+
+ return (
+
+
+ {delayedState && (
+
+ {JSON.stringify(delayedState)}
+
+ )}
+
+
+
+Handling drop events:
+
+
+```tsx
+import { useEnhancedNode } from '@ws-ui/webform-editor';
+
+const DraggableComponent = () => {
+ // highlight-next-line
+ const { actions, connectors, linkedNodes } = useEnhancedNode((node) => ({
+ nodes: node.data.nodes,
+ linkedNodes: node.data.linkedNodes,
+ node,
+ }), {
+ onDrop: (event) => {
+ console.log('Dropped:', event);
+ },
+ });
+
+ return (
+ {
+ event.dataTransfer.setData('text', 'your data here');
+ }}
+ >
+
+
+ );
+ };
+```
+
+
+
+
+
+
+:::info
+
+The `useEnhancedNode` function returns an object with the following structure:
+
+- **id**: The ID of the node.
+- **store**: The store associated with the node.
+- ***connectors***: Object containing connectors to interact with the Craft.js editor.
+- **...collected**: Additional data collected by the collector function.
+- **actions**: An object containing methods for manipulating node values, including `setProp`, `setStyle`, `setDatasource`, and `setIterator`.
+
+
+:::
+
+
+## useEnhancedEditor
+
+A Hook that provides methods and state information associated with the entire editor.
+
+### *Parameters*
+
+
+| param | description |
+|-------|-------------|
+|collect|A function that collects relevant state information from the editor state. The component will re-render when the values returned by this function changes.|
+### *Returns*
+
+
+`{useEditorReturnType}`
+
+
+
+
+
+
+Basic usage:
+
+```tsx
+import { useEnhancedEditor } from "@ws-ui/webform-editor";
+
+const BasicUsageExample = () => {
+// highlight-next-line
+const { isActive, enabled, canvas } = useEnhancedEditor();
+
+ // Your component logic based on the editor state
+ return (
+
+
Is Active: {isActive ? 'Yes' : 'No'}
+
Editor Enabled: {enabled ? 'Yes' : 'No'}
+
Canvas Element: {canvas}
+
+ // Additional logic and components based on the editor state
+
+
+
+
+Basic usage with collector:
+
+```tsx
+import { useEnhancedEditor } from "@ws-ui/webform-editor";
+
+const CollectorUsageExample = () => {
+ const collect = (state, query) => ({
+ enabled: state.options.enabled,
+ isActive: query.getEvent('selected').some(),
+ });
+ // highlight-next-line
+ const { isActive, enabled, actions } = useEnhancedEditor(collect);
+
+ // Your component logic based on the collected data
+ return (
+
+
Is Active: {isActive ? 'Yes' : 'No'}
+
Editor Enabled: {enabled ? 'Yes' : 'No'}
+
+ // Additional logic and components based on the collected data
+
+
+
+
+Usage with a custom collector function:
+
+```tsx
+import { useEnhancedEditor } from "@ws-ui/webform-editor";
+
+const CustomUsageExample = ({ id }) => {
+ const { hidden, selected, hovered, topLevel } =
+ useEnhancedEditor((state, query) => {
+ const node = state.nodes[id];
+ const nodeActions = query.node(id);
+
+ return {
+ hidden: node?.data.hidden,
+ selected: state.events.selected.has(id),
+ topLevel: node ? nodeActions.isTopLevelCanvas() : false,
+ hovered: state.events.hovered.has(id),
+ };
+});
+
+// Your component logic based on the useEnhancedEditor results
+return (
+
+
Is Hidden: {hidden ? 'Yes' : 'No'}
+
Is Selected: {selected ? 'Yes' : 'No'}
+
Is Top Level: {topLevel ? 'Yes' : 'No'}
+
Is Hovered: {hovered ? 'Yes' : 'No'}
+
+
+
+
+
+
+## useDataLoader
+
+Returns an easy to use API to fecth a page(s) of data
+
+### *Parameters*
+
+
+| param | description |
+|-------|-------------|
+|props|An object containing source i.e the datasource and the initial step|
+### *Returns*
+
+
+`{page: IPage; entities: datasources.IEntity[]; setStep: (step: IStep) => void; fetchIndex: (index: number) => void; }` - DataLoader return type
+
+
+
+
+
+
+This example is using useSource and useDataloader to fetch simple list of people with `firstName` and `lastName`
+
+```tsx
+import {
+ useDataLoader,
+ useSources,
+} from "@ws-ui/webform-editor";
+import { FC } from "react";
+
+type Person = {
+ firstName: string;
+ lastName: string;
+ id: string
+}
+
+const Example: FC = () => {
+ const {
+ sources: { datasource: ds },
+ } = useSources();
+ const { entities } = useDataLoader({
+ source: ds,
+ });
+
+ // assuming that the source has two attributes firstName and lastName
+ return (
+
+ {entities.map((entity, index) => (
+
+ {entity.firstName} -
+ {entity.lastName}
+
+ ))}
+
+
+
+
+This example is using useSource and useDataloader and fetches the initial entities for the first Index
+
+```tsx
+import {
+ useDataLoader,
+ useSources,
+} from "@ws-ui/webform-editor";
+import { FC, useEffect } from "react";
+
+type Person = {
+ firstName: string;
+ lastName: string;
+ id: string
+}
+
+const Example: FC = () => {
+ const {
+ sources: { datasource: ds },
+ } = useSources();
+ const { entities } = useDataLoader({
+ source: ds,
+ });
+
+ // fetch the first page of entities on component mount
+ useEffect(() => {
+ fetchIndex(0)
+ }, [])
+
+ return (
+
+ {entities.map((entity, index) => (
+
+ {entity.firstName} -
+ {entity.lastName}
+
+ ))}
+
+
+
+
+
+
+## useEntity
+
+Gets current entity context from parant Element
+
+### *Returns*
+
+
+`{EntityContextType}` - Entity information including index, selection, current, iterator and parent
+
+
+
+
+
+
diff --git a/versioned_docs/version-21/Integrations/customComponent/api-reference/webform-editor/v0.3.20.mdx b/versioned_docs/version-21/Integrations/customComponent/api-reference/webform-editor/v0.3.20.mdx
new file mode 100644
index 000000000..750c9286f
--- /dev/null
+++ b/versioned_docs/version-21/Integrations/customComponent/api-reference/webform-editor/v0.3.20.mdx
@@ -0,0 +1,575 @@
+---
+id: v0.3.20
+title: v0.3.20
+---
+
+
+# Hooks
+
+## useNavigation
+
+Allows navigating when we are inside a webform loader, or it can be simply used to know if the component is inside a webform loader
+
+
+
+## useStudioPanel
+
+A hook that provides state information and actions for managing the studio panel in a web form editor. The studio panel represents a dynamic side panel that displays information related to the selected element or component.
+
+### *Returns*
+
+
+`{StudioPanelReturnType}` - An object containing the type, open state, current state, and actions to manipulate the studio panel.
+:::info
+The `useStudioPanel` function returns an object with properties `type`, `isOpen`, `current`, and `actions` to manipulate the studio panel state.
+
+The `actions` object includes methods for `updating the state`, `setting the current type and value`, `closing`, `opening`, and `opening with a specific type and current value`.
+
+:::
+
+
+
+## useRenderer
+
+A hook that facilitates rendering and event handling for a Craft.js node. It manages server-side references (ssRef) and auto-binds events to the corresponding DOM element.
+
+### *Parameters*
+
+
+| param | description |
+|-------|-------------|
+|autoBindEvents|Specifies whether events should be auto-bound.|
+|omittedEvents|An array of event names to be omitted.|
+### *Returns*
+
+
+`{[HTMLElement | null, { connectRenderer, eventsToHandle, emit} ] }` - An object with methods for connecting, handling events, and emitting custom events.
+:::info
+The `useRenderer` function returns a tuple with two elements:
+
+- `HTMLElement | null`: The current DOM element or null. This represents the element to which the renderer is currently connected.
+- An object providing methods to:
+
+- Connect the renderer
+
+- `eventsToHandle`: An object mapping event names to their corresponding handler functions.
+
+- `emit`: A function to emit a custom event with the specified name and payload.
+:::
+
+
+
+## useLayout
+
+A hook that provides methods and properties related to the layout mode of a webform.
+
+### *Returns*
+
+
+`{LayoutReturnType}` - An object containing properties and methods related to the layout mode.
+
+:::info
+The useLayout function returns an object with properties `layout` and `isAiryMode`, along with methods `getClassName` and `toggle`.
+:::
+
+
+
+
+
+Basic usage:
+
+```tsx
+import { useLayout } from "@ws-ui/webform-editor";
+
+const Example = () => {
+// highlight-next-line
+const { layout, isAiryMode, getClassName } = useLayout();
+
+return (
+
+
Current Layout: {layout}
+
Is Airy Mode: {isAiryMode ? 'Yes' : 'No'}
+
Modified Class Name: {getClassName('my-container')}
+
+
+
+
+
+
+## useDatasourceSub
+
+A hook that subscribes to changes in datasources and performs replacements in the webform based on specified actions.
+
+
+
+
+
+
+```tsx
+import { useDatasourceSub } from "@ws-ui/webform-editor"
+
+const ExampleComponent = () => {
+// highlight-next-line
+useDatasourceSub();
+};
+```
+
+
+
+
+
+
+
+## useSources
+
+A hook that facilitates managing datasources and current elements associated with a web form. It provides methods for setting, fetching, and listening to changes in datasource values.
+
+### *Parameters*
+
+
+| param | description |
+|-------|-------------|
+|options|`UseSourcesOptions` An object allowing configuration of the hook behavior. Includes options such as `datasourceChange`, `currentElementChange` and `acceptIteratorSel`.|
+
+### *Returns*
+
+
+`{UseSourcesReturnType}` - An object containing datasources, current elements, and methods for manipulating their values.
+
+:::info
+The `useSources` function returns an object with the following structure:
+- `sources`: An object containing `datasource` and `currentElement`, representing the current values of datasources and current elements.
+- `actions`: An object containing methods for manipulating datasource values, including `getDatasource`, `setDatasourceValue`, `setCurrentElementValue`, `fetchDatasourceValue`, and `fetchCurrentElementValue`.
+:::
+
+
+
+
+
+
+This example is using useSources and useMemo to get the value of a datasource called `usernameDatasource`.
+
+```tsx
+import { useSources } from "@ws-ui/webform-editor";
+import { FC, useMemo, useState } from "react";
+
+type ExampleProps = {
+ usernameDatasource: string;
+}
+
+const Example: FC = ({ usernameDatasource }) => {
+ const {
+ actions: { getDatasource }
+ } = useSources();
+ const datasource = useMemo(() => getDatasource(usernameDatasource), [usernameDatasource]);
+ const [value, setValue] = useState('');
+
+ useEffect(() => {
+ if (!datasource) return;
+ const getValue = async () => {
+ const val = await datasource.getValue();
+ setValue(val);
+ };
+ datasource.addListener('changed', getValue);
+ return () => {
+ datasource.removeListener('changed', getValue);
+ };
+ }, [datasource]);
+
+ return {value} ;
+};
+
+export default Example;
+
+```
+
+
+
+
+
+
+
+
+## useEnhancedNode
+
+A hook that enhances the functionality of a Craft.js node, providing features for handling data transfer, managing datasources, and styling components.
+
+### *Parameters*
+
+
+| param | description |
+|-------|-------------|
+|collector|(optional) `(args: Node) => K` | A function to collect additional information from the node.|
+|options|(optional) `{ stopPropagation?: (data: IDataTransfer) => boolean; onDrop?: (e: any) => void; }` | An object with optional properties (`stopPropagation`and `onDrop`) to customize the hook's behavior.|
+### *Returns*
+
+
+`{UseEnhancedNodeReturnType}` - An object containing enhanced node information, connectors, and actions.
+
+
+
+
+
+
+Basic usage:
+```tsx
+import { useEnhancedNode } from '@ws-ui/webform-editor';
+import { useState, useEffect } from 'react';
+
+const ExampleDelayedState = () => {
+ // highlight-next-line
+ const { actions, connectors, linkedNodes } = useEnhancedNode((node) => ({
+ nodes: node.data.nodes,
+ linkedNodes: node.data.linkedNodes,
+ node,
+ }));
+
+ const [delayedState, setDelayedState] = useState(null);
+
+ useEffect(() => {
+ const fetchData = async () => {
+ // Fetch your data, e.g., from an API
+ const result = await fetch('https://api.example.com/data');
+ const data = await result.json();
+
+ setDelayedState(data);
+
+ actions.setDatasourceValue({ key: 'yourDatasourceKey', value: data });
+ };
+
+ fetchData();
+ }, [actions]);
+
+ return (
+
+
+ {delayedState && (
+
+ {JSON.stringify(delayedState)}
+
+ )}
+
+
+
+Handling drop events:
+
+
+```tsx
+import { useEnhancedNode } from '@ws-ui/webform-editor';
+
+const DraggableComponent = () => {
+ // highlight-next-line
+ const { actions, connectors, linkedNodes } = useEnhancedNode((node) => ({
+ nodes: node.data.nodes,
+ linkedNodes: node.data.linkedNodes,
+ node,
+ }), {
+ onDrop: (event) => {
+ console.log('Dropped:', event);
+ },
+ });
+
+ return (
+ {
+ event.dataTransfer.setData('text', 'your data here');
+ }}
+ >
+
+
+ );
+ };
+```
+
+
+
+
+
+
+:::info
+
+The `useEnhancedNode` function returns an object with the following structure:
+
+- **id**: The ID of the node.
+- **store**: The store associated with the node.
+- ***connectors***: Object containing connectors to interact with the Craft.js editor.
+- **...collected**: Additional data collected by the collector function.
+- **actions**: An object containing methods for manipulating node values, including `setProp`, `setStyle`, `setDatasource`, and `setIterator`.
+
+
+:::
+
+
+## useEnhancedEditor
+
+A Hook that provides methods and state information associated with the entire editor.
+
+### *Parameters*
+
+
+| param | description |
+|-------|-------------|
+|collect|A function that collects relevant state information from the editor state. The component will re-render when the values returned by this function changes.|
+### *Returns*
+
+
+`{useEditorReturnType}`
+
+
+
+
+
+
+Basic usage:
+
+```tsx
+import { useEnhancedEditor } from "@ws-ui/webform-editor";
+
+const BasicUsageExample = () => {
+// highlight-next-line
+const { isActive, enabled, canvas } = useEnhancedEditor();
+
+ // Your component logic based on the editor state
+ return (
+
+
Is Active: {isActive ? 'Yes' : 'No'}
+
Editor Enabled: {enabled ? 'Yes' : 'No'}
+
Canvas Element: {canvas}
+
+ // Additional logic and components based on the editor state
+
+
+
+
+Basic usage with collector:
+
+```tsx
+import { useEnhancedEditor } from "@ws-ui/webform-editor";
+
+const CollectorUsageExample = () => {
+ const collect = (state, query) => ({
+ enabled: state.options.enabled,
+ isActive: query.getEvent('selected').some(),
+ });
+ // highlight-next-line
+ const { isActive, enabled, actions } = useEnhancedEditor(collect);
+
+ // Your component logic based on the collected data
+ return (
+
+
Is Active: {isActive ? 'Yes' : 'No'}
+
Editor Enabled: {enabled ? 'Yes' : 'No'}
+
+ // Additional logic and components based on the collected data
+
+
+
+
+Usage with a custom collector function:
+
+```tsx
+import { useEnhancedEditor } from "@ws-ui/webform-editor";
+
+const CustomUsageExample = ({ id }) => {
+ const { hidden, selected, hovered, topLevel } =
+ useEnhancedEditor((state, query) => {
+ const node = state.nodes[id];
+ const nodeActions = query.node(id);
+
+ return {
+ hidden: node?.data.hidden,
+ selected: state.events.selected.has(id),
+ topLevel: node ? nodeActions.isTopLevelCanvas() : false,
+ hovered: state.events.hovered.has(id),
+ };
+});
+
+// Your component logic based on the useEnhancedEditor results
+return (
+
+
Is Hidden: {hidden ? 'Yes' : 'No'}
+
Is Selected: {selected ? 'Yes' : 'No'}
+
Is Top Level: {topLevel ? 'Yes' : 'No'}
+
Is Hovered: {hovered ? 'Yes' : 'No'}
+
+
+
+
+
+
+## useDataLoader
+
+Returns an easy to use API to fecth a page(s) of data
+
+### *Parameters*
+
+
+| param | description |
+|-------|-------------|
+|props|An object containing source i.e the datasource and the initial step|
+### *Returns*
+
+
+`{page: IPage; entities: datasources.IEntity[]; setStep: (step: IStep) => void; fetchIndex: (index: number) => void; }` - DataLoader return type
+
+
+
+
+
+
+This example is using useSources and useDataloader to fetch simple list of people with `firstName` and `lastName`
+
+```tsx
+import {
+ useDataLoader,
+ useSources,
+} from "@ws-ui/webform-editor";
+import { FC } from "react";
+
+type Person = {
+ firstName: string;
+ lastName: string;
+ id: string
+}
+
+const Example: FC = () => {
+ const {
+ sources: { datasource: ds },
+ } = useSources();
+ const { entities } = useDataLoader({
+ source: ds,
+ });
+
+ // assuming that the source has two attributes firstName and lastName
+ return (
+
+ {entities.map((entity, index) => (
+
+ {entity.firstName} -
+ {entity.lastName}
+
+ ))}
+
+
+
+
+This example is using useSources and useDataloader and fetches the initial entities for the first Index
+
+```tsx
+import {
+ useDataLoader,
+ useSources,
+} from "@ws-ui/webform-editor";
+import { FC, useEffect } from "react";
+
+type Person = {
+ firstName: string;
+ lastName: string;
+ id: string
+}
+
+const Example: FC = () => {
+ const {
+ sources: { datasource: ds },
+ } = useSources();
+ const { entities, fetchIndex } = useDataLoader({
+ source: ds,
+ });
+
+ // fetch the first page of entities on component mount
+ useEffect(() => {
+ fetchIndex(0)
+ }, [])
+
+ return (
+
+ {entities.map((entity, index) => (
+
+ {entity.firstName} -
+ {entity.lastName}
+
+ ))}
+
+
+
+
+
+
+## useEntity
+
+Gets current entity context from parant Element
+
+### *Returns*
+
+
+`{EntityContextType}` - Entity information including index, selection, current, iterator and parent
+
+
+
+
+
+
diff --git a/versioned_docs/version-21/Integrations/customComponent/img/APIAdministration.png b/versioned_docs/version-21/Integrations/customComponent/img/APIAdministration.png
new file mode 100644
index 000000000..46eeeca92
Binary files /dev/null and b/versioned_docs/version-21/Integrations/customComponent/img/APIAdministration.png differ
diff --git a/versioned_docs/version-21/Integrations/customComponent/img/envDevelopment.png b/versioned_docs/version-21/Integrations/customComponent/img/envDevelopment.png
new file mode 100644
index 000000000..db54e69d7
Binary files /dev/null and b/versioned_docs/version-21/Integrations/customComponent/img/envDevelopment.png differ
diff --git a/versioned_docs/version-21/Integrations/customComponent/overview.md b/versioned_docs/version-21/Integrations/customComponent/overview.md
new file mode 100644
index 000000000..81c59b703
--- /dev/null
+++ b/versioned_docs/version-21/Integrations/customComponent/overview.md
@@ -0,0 +1,42 @@
+---
+id: overview
+title: Overview
+---
+
+Qodly Studio supports the concept of **Custom Components**, empowering developers to extend the capabilities of the platform and tailor Pages to their specific needs.
+
+## What Are Custom Components?
+
+**Custom Components** user-created building blocks developed to address unique requirements or introduce specific features not covered by the default set of Qodly built-in components. These components are crafted using React, providing a flexible and powerful foundation for developers.
+
+## Benefits of Custom Components
+
+The integration of Custom Components into Qodly Studio offers a range of advantages:
+
+- **Extensibility**: Tailor Pages precisely to meet specific project requirements, providing a flexible and customizable solution.
+
+- **Reusability**: Share Custom Components seamlessly across diverse projects or within the Qodly community. This fosters collective enhancement and collaboration among developers.
+
+- **Efficiency**: Enhance development efficiency by utilizing pre-built Custom Components. This approach streamlines the development process, reducing time and costs associated with building components from scratch.
+
+## Key Distinctions from Built-in Components
+
+While Qodly Studio offers a variety of built-in components, Custom Components provide developers with the freedom to design and implement functionalities tailored to their projects. Key distinctions include:
+
+| **Aspect** | **Built-in Components** | **Custom Components** |
+|--------------------------|--------------------------------------------------------------|--------------------------------------------------------------|
+| **Ease of Use** | Easily accessible through drag-and-drop functionality. | Requires manual development and implementation. |
+| **Customization** | Covers common use cases. | Enables fine-tuning and specific adaptations. |
+| **Unique Features** | Offers a standard set of features. | Introduces new features or variations beyond the standard set.|
+| **Tailored Appearance** | Standardized visual design. | Developers have full control over visual design for cohesive integration. |
+| **Performance** | Managed for optimal performance. | Performance depends on Qodler practices and maintenance. |
+| **Long-Term Advancement**| Regularly updated and managed internally. | Relies on the Qodler for updates, maintenance, and best practices adherence. |
+| **Deprecation Risk** | No risk of deprecation. | Risk depends on Qodler's commitment to maintaining the component. |
+
+:::info
+Custom components are managed in Qodly Studio to match the performance of built-in components, mitigating any potential drawbacks associated with response and interaction times.
+:::
+
+## Community's Custom Components
+
+The Qodly developer community is actively expanding, with members continuously crafting innovative custom components. These components are generously shared for free download within the community. If you're interested in contributing your custom components to this collective effort, we invite you to do so on the [**Custom Components for Qodly Studio page**](https://github.com/qodly/custom-components).
\ No newline at end of file
diff --git a/versioned_docs/version-21/Integrations/customComponent/setup.md b/versioned_docs/version-21/Integrations/customComponent/setup.md
new file mode 100644
index 000000000..3cce6b603
--- /dev/null
+++ b/versioned_docs/version-21/Integrations/customComponent/setup.md
@@ -0,0 +1,218 @@
+---
+id: setup
+title: Project Setup
+---
+
+import Column from '@site/src/components/Column'
+
+Qodly's API simplifies the creation of **Custom Components** using **React** through its dedicated CLI tool, [**@qodly/cli**](https://www.npmjs.com/package/@qodly/cli). This API streamlines the initiation of the **React** project, allowing developers to build and share reusable custom components within the Qodly community, providing a user-friendly integration into Pages through a straightforward drag-and-drop mechanism.
+
+## Initial Setup
+
+### Prerequisites
+
+Before setting up your React project, make sure your development environment meets the following prerequisites:
+
+- [Node.js](https://nodejs.org/en/) version 20 or above.
+- npm version 10 or above.
+
+### Project Initialization
+
+Open your terminal and execute the following command to initiate a new project:
+
+```bash
+npx @qodly/cli init
+```
+
+This command utilizes the [Qodly CLI](https://www.npmjs.com/package/@qodly/cli) tool to set up the initial project structure.
+
+:::info
+Follow the prompts to name your project, e.g., "qodly-example".
+:::
+
+### Installing Dependencies
+
+Navigate to the generated project folder (e.g., "qodly-example") using the terminal:
+
+```bash
+cd /folderPath/qodly-example
+```
+
+Then install the necessary npm dependencies:
+
+```bash
+npm i
+```
+
+## Configuring Environment
+
+
+To ensure the smooth operation of the Standalone Page Editor, you can choose between running a Cloud instance or a 4D instance. Each setup has specific requirements for setting up and running your development environment.
+
+### Run a Cloud Instance
+
+To utilize a Cloud instance of the Qodly platform, it's essential to configure environment variables that allow your custom components to communicate securely:
+
+- API_KEY: Bound to the Administration port, crucial for accessing administrative features securely.
+
+- PROXY_SERVER: Specifies the API endpoint, critical for connecting your application to the backend services.
+
+
+These variables should be set within environment configuration files located at the root of your project, adjacent to package.json. Here's how to do it:
+
+1. **Create Environment Files**: Depending on your deployment stage, you might have `.env.development` for development settings and `.env.production` for production settings.
+
+
+ PROXY_SERVER=
+ ```
+
+Ensure to keep your API_KEY secure and never expose it in client-side code where unauthorized users could access it.
+
+:::tip
+
+
+
+ Ensure the API_KEY is of type "Administration" to access administrative features securely. This key should never be exposed in client-side code to prevent unauthorized access.
+
+
+
+
+
+:::
+
+
+### Run a 4D Instance
+
+To operate a 4D instance effectively, you need to run a 4D Web Server alongside your React project. Failing to do so can lead to connection issues that prevent the Page Editor from functioning correctly.
+
+
+:::info
+
+If the 4D Web Server is not running, you might encounter the following error in your terminal:
+
+```bash
+[vite] http proxy error: /rest/$catalog/$all
+Error: connect ECONNREFUSED 127.0.0.1:7443
+ at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1595:16)
+```
+
+This error indicates that your local server setup is trying to connect to a 4D instance at 127.0.0.1:7443 but cannot establish a connection, resulting in the Standalone Page Editor not loading.
+
+:::
+
+
+
+## Dependencies Overview
+
+### Production Dependencies
+
+Below is an overview of the production dependencies listed in the `package.json` file:
+
+| Dependency | Description |
+| ------------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| `@ws-ui/webform-editor` | Provides the Page Editor functionality for Qodly, allowing developers to create and edit Pages. |
+| `react` | A JavaScript library for building user interfaces, used in the project for creating custom components. |
+| `react-dom` | ReactDOM provides DOM-specific methods for React, enabling interaction with the DOM and rendering components.|
+
+### Development Dependencies
+
+Below is an overview of the development dependencies listed in the `package.json` file:
+
+| Dependency | Description |
+| ---------------------------------------------| ---------------------------------------------------------------------------------------------------------------------- |
+| `@qodly/cli` | Command-line interface tool for [initializing](#project-initialization) and managing Qodly projects. |
+| `@types/react` | TypeScript type definitions for React, providing type information for React when using TypeScript. |
+| `@types/react-dom` | TypeScript type definitions for ReactDOM, providing type information for ReactDOM when using TypeScript. |
+| `@typescript-eslint/eslint-plugin` | ESLint plugin for TypeScript, identifying and reporting patterns found in TypeScript code. |
+| `@typescript-eslint/parser` | TypeScript parser for ESLint, allowing ESLint to lint TypeScript code. |
+| `@vitejs/plugin-react-swc` | Vite plugin for React with SWC, facilitating fast web development with React. SWC is a JavaScript/TypeScript compiler. |
+| `@ws-ui/webform-editor-standalone` | Standalone version of the Qodly Page editor, used for local development and testing. |
+| `eslint` | ESLint is a linter tool for identifying and reporting patterns found in ECMAScript/JavaScript code. |
+| `eslint-config-prettier` | ESLint configuration that turns off rules unnecessary or conflicting with Prettier. |
+| `eslint-plugin-prettier` | ESLint plugin for Prettier, allowing ESLint to run Prettier as an ESLint rule. |
+| `eslint-plugin-react-hooks` | ESLint plugin for React hooks, providing ESLint rules specific to React hooks. |
+| `eslint-plugin-react-refresh` | ESLint plugin for React refresh, offering ESLint rules related to the React refresh feature. |
+| `typescript` | TypeScript is a superset of JavaScript that adds static typing to the language. |
+| `vite` | Vite is a fast web development build tool supporting modern JavaScript and React. Used for local development and builds.|
+
+
+## Development Workflow
+
+### Running the Development Server
+
+Launch Qodly Studio in local mode with only the **Standalone Page Editor** using the following command:
+
+```bash
+npm run dev
+```
+
+Used when actively developing your project. It provides a local environment where you can make changes and test components.
+
+When you run npm run dev, it runs the server locally at:
+
+```bash
+Local: http://localhost:5001/
+```
+
+The project utilizes **Vite** for rapid development and efficient serving of the project in dev mode.
+
+### Building the Project
+
+Build your project for production using the following command:
+
+```bash
+npm run build
+```
+
+Used to generate a production-ready build of your entire project, the build process creates a compressed folder named `qodly_ID.zip` with a uniquely generated ID.
+
+:::info
+The ID generated is established during the [initialization of a new project](#project-initialization) and remains consistent throughout the project's lifecycle. As a result, each execution of the build ensures that the `qodly_ID.zip` folder contains the same generated ID.
+:::
+
+Locate this compressed folder in your project directory, ready for drag-and-drop onto the [upload feature](../../4DQodlyPro/pageLoaders/components/uploadCustomComponents.md) in Qodly Studio for installation.
+
+## Generating a New Component
+
+Add a new component to your project with the following command:
+
+```bash
+npm run generate:component
+```
+
+Follow the prompts to name the new component.
+
+:::info
+A project can contain multiple custom components, as in a custom `Chart` project with various components contributing to the final custom `Chart`.
+:::
+
+The `generate:component` command internally executes `qodly new component`, which then generates the necessary files and folders for the component within the `components` directory.
+
+:::danger
+Custom components must use unique names to avoid conflicts with Qodly Studio's built-in components. If a custom component shares the same name as a built-in component, the custom component will take precedence when dragged and dropped onto the Page editor.
+:::
+
+The `components` directory serves as the repository for custom components:
+
+```
+- components
+ - ExampleComponent
+ - ExampleComponent.build.tsx
+ - ExampleComponent.render.tsx
+ - ExampleComponent.settings.tsx
+ - ExampleComponent.config.tsx
+ - index.tsx
+```
+
+:::tip
+While developers have the flexibility to implement their initial component in their preferred manner, adhering to the suggested structure is recommended
+:::
+
+Refer to the [custom component structure](./structure.md#custom-component-repository) section for detailed information.
diff --git a/versioned_docs/version-21/Integrations/customComponent/structure.md b/versioned_docs/version-21/Integrations/customComponent/structure.md
new file mode 100644
index 000000000..450d48744
--- /dev/null
+++ b/versioned_docs/version-21/Integrations/customComponent/structure.md
@@ -0,0 +1,951 @@
+---
+id: structure
+title: Project Structure
+---
+
+## Overview
+
+The project structure is organized to facilitate the development and maintenance of Qodly custom components. Below is an outline of the main directories and files in a typical project:
+
+- **node_modules**: Contains project dependencies installed via npm.
+- **public**: Contains static assets like images, fonts, or any files that should be publicly accessible.
+- **src**: The main source code directory.
+ - [**components**](#custom-component-repository): The directory for custom components.
+ - **ExampleComponent**: An example custom component directory.
+ - [**ExampleComponent.build.tsx**](#examplecomponentbuildtsx): Component build logic.
+ - [**ExampleComponent.render.tsx**](#examplecomponentrendertsx): Component rendering logic.
+ - [**ExampleComponent.settings.tsx**](#examplecomponentsettingstsx): Component settings.
+ - [**ExampleComponent.config.tsx**](#examplecomponentconfigtsx): Configuration for the component.
+ - [**index.tsx**](#indextsx): Entry point for the component.
+ - [**index.tsx**](#indextsx): The entry point for the components directory.
+ - [**App.tsx**](#apptsx): Main application component.
+ - **index.css**: Global CSS styles.
+ - [**main.tsx**](#maintsx): Entry point for the application.
+ - **vite-env.d.ts**: TypeScript declaration file for Vite.
+- **.eslintrc.cjs**: ESLint configuration file.
+- **.gitignore**: Specifies intentionally untracked files that Git should ignore.
+- **.prettierignore**: Specifies files and directories to ignore for formatting using Prettier.
+- **.prettierrc**: Configuration file for Prettier.
+- [**index.html**](#indexhtml): Main HTML file for the application.
+- **package-lock.json**: Lock file for npm dependencies.
+- **package.json**: Project metadata and npm dependencies.
+- [**proxy.config.ts**](#proxyconfigts): Configuration for the development server proxy.
+- **README.md**: Project documentation.
+- **tsconfig.json**: TypeScript configuration file.
+- **tsconfig.node.json**: TypeScript configuration file for Node.js.
+- [**vite.config.ts**](#viteconfigts): Vite configuration file.
+
+
+
+
+## vite.config.ts
+
+This file configures Vite for the project, incorporating React support and a custom redirection middleware. It defines the development server settings, including the host, port, and proxy configurations. The use of environment variables allows flexibility, and the redirection middleware enhances the development server's behavior.
+
+Let's break down the contents of `vite.config.ts`:
+
+ #### 1. **Imports**:
+
+ ```typescript
+ import { PluginOption, defineConfig } from 'vite';
+ import react from '@vitejs/plugin-react-swc';
+ import proxy from './proxy.config';
+ ```
+
+ The file begins by importing necessary modules. `PluginOption` and `defineConfig` are components from Vite, while `react` is a Vite plugin that adds support for React. Additionally, `proxy` is imported from [`proxy.config.ts`](#proxyconfigts) to set up server proxy configurations.
+
+
+ #### 2. **Environment Variables**:
+
+ ```typescript
+ const port = process.env.PORT || 5001;
+ const host = process.env.HOST || '0.0.0.0';
+ ```
+
+ These lines check for the existence of environment variables `PORT` and `HOST` and assign default values (5001 and '0.0.0.0', respectively) if they are not provided.
+
+ #### 3. **Redirect Middleware**:
+
+ ```typescript
+ const redirect = (opts: { from: string; to: string }): PluginOption => {
+ return {
+ name: 'redirect',
+ configureServer(server) {
+ server.middlewares.use((req, res, next) => {
+ if (req.url.startsWith(opts.from)) {
+ res.statusCode = 307;
+ res.setHeader('Location', opts.to);
+ res.setHeader('Content-Length', '0');
+ return res.end();
+ }
+
+ return next();
+ });
+ },
+ };
+ };
+ ```
+
+ This section defines a function named `redirect` that returns a Vite plugin (`PluginOption`). The plugin is designed to configure the development server with a redirection middleware. If a request URL starts with `opts.from`, it responds with a redirect to `opts.to`.
+
+ #### 4. **Vite Configuration**:
+
+ ```typescript
+ export default defineConfig({
+ plugins: [
+ react(),
+ redirect({
+ from: '/studio/',
+ to: '/',
+ }),
+ ],
+ define: {
+ 'process.env': {},
+ },
+ server: {
+ host,
+ proxy,
+ port: +port,
+ },
+ });
+ ```
+
+ The main Vite configuration is defined using `defineConfig`. Here are the key parts:
+ - Plugins:
+ - The `react` plugin is included to enable React support.
+ - The custom `redirect` plugin is added to handle URL redirections (from `/studio/` to `/`).
+ - Define:
+ - An empty object is defined under `define`, which allows you to specify global constants accessible in your code.
+ - Server:
+ - The development server configurations are set, including the `host`, `proxy` settings, and `port`.
+
+
+
+
+## proxy.config.ts
+
+This file serves the crucial role of configuring the development server proxy, enabling efficient routing of requests during the development phase.
+
+:::info
+It is an integral part of the project configuration and is imported and utilized within the [`vite.config.ts`](#viteconfigts) file.
+:::
+
+Let's break down the contents of `proxy.config.ts`:
+
+ #### 1. **Imports**:
+
+ ```typescript
+ /* eslint-disable @typescript-eslint/no-explicit-any */
+ import { ProxyOptions } from 'vite';
+ ```
+
+ The file starts by importing the `ProxyOptions` type from Vite. Additionally, it disables TypeScript explicit any rule (`@typescript-eslint/no-explicit-any`) since it deals with dynamic objects often encountered in proxy configurations.
+
+
+ #### 2. **Constants**:
+
+ ```typescript
+ const TARGET = process.env.PROXY_SERVER || 'https://127.0.0.1:7443';
+ ```
+
+ The `TARGET` constant is defined to store the target URL for the proxy. It defaults to `https://127.0.0.1:7443` but can be overridden by the `PROXY_SERVER` environment variable.
+
+ #### 3. **Function**:
+
+ ```typescript
+ function sanitizeSetCookie(cookie = '') {
+ return cookie.replace(/; secure/i, '');
+ }
+ ```
+
+ The `sanitizeSetCookie` function is created to remove the "secure" attribute from cookies. It is used during the proxy response handling.
+
+ #### 4. **Proxy Configuration Options**:
+
+ ```typescript
+ const proxyOpts = {
+ target: TARGET,
+ secure: false,
+ ws: true,
+ onProxyReq(proxyReq: any, req: any) {
+ // Request handling logic...
+ },
+ onProxyRes(proxyRes: any) {
+ // Response handling logic...
+ },
+ };
+ ```
+
+ The `proxyOpts` object contains various configuration options for the development server proxy:
+
+ - target: The target URL to which requests will be proxied.
+
+ - secure: Boolean indicating whether the target server uses HTTPS.
+
+ - ws: Boolean indicating whether to proxy WebSocket connections.
+
+ Two functions (`onProxyReq` and `onProxyRes` explained in points 4 & 5 below) are provided as options for handling request and response events during proxying.
+
+
+ #### 5. **Request Handling Logic**:
+
+ ```typescript
+ onProxyReq(proxyReq: any, req: any) {
+ let body = '';
+
+ req.setEncoding('utf-8');
+ req.on('data', (data: string) => (body += data));
+ req.on('end', () => {
+ req.body = body;
+ });
+
+ proxyReq.setHeader('Host', new URL(TARGET).host);
+ proxyReq.setHeader('Origin', TARGET);
+ proxyReq.setHeader('Referer', TARGET);
+ },
+ ```
+
+ This code defines the logic executed when handling a request during the proxying process. Let's break it down step by step:
+
+ - `onProxyReq` is an event triggered when a request is being sent to the target server through the proxy. It takes as parameters:
+
+ - `proxyReq` is the HTTP request object being sent to the target server.
+
+ - `req` is the original HTTP request object received from the client.
+
+ - The code reads the data from the original request (`req`) and assembles it into the `body`. It sets the encoding to `utf-8` for proper character handling and attaches the assembled `body` to `req.body`.
+
+ - Additional headers are set on the `proxyReq` object to ensure the target server correctly interprets the request. Specifically, it sets the 'Host', 'Origin', and 'Referer' headers based on the target URL.
+
+
+ #### 6. **Response Handling Logic**:
+
+ ```typescript
+ onProxyRes(proxyRes: any) {
+ if (proxyRes.headers['Set-Cookie']) {
+ if (Array.isArray(proxyRes.headers['Set-Cookie'])) {
+ proxyRes.headers['Set-Cookie'] = proxyRes.headers['Set-Cookie'].map(sanitizeSetCookie);
+ } else {
+ proxyRes.headers['Set-Cookie'] = sanitizeSetCookie(proxyRes.headers['Set-Cookie']);
+ }
+ }
+ },
+ ```
+
+ This code defines the logic executed when handling a response during the proxying process:
+
+ - `onProxyRes` is an event triggered when a response is received from the target server through the proxy. It takes `proxyRes` as a parameter, which is the HTTP response object received from the target server.
+
+ - The code checks if the response headers contain 'Set-Cookie'. If it is present:
+
+ - It checks if 'Set-Cookie' is an array. If it is, it applies the `sanitizeSetCookie` function to each element using `map`.
+
+ - If 'Set-Cookie' is not an array, it applies the `sanitizeSetCookie` function directly.
+
+ - The `sanitizeSetCookie` function is responsible for removing the 'secure' flag from the 'Set-Cookie' header, ensuring it is compatible with non-secure connections.
+
+ :::info
+ This logic ensures that the 'Set-Cookie' header in the response is appropriately processed and modified before being sent back to the client, addressing security considerations related to cookie handling.
+ :::
+
+
+ #### 7. **Proxy Configuration Object**:
+
+ ```typescript
+ const proxy: Record = [
+ '/rest',
+ '/$lib',
+ '/api',
+ '/login.html',
+ '/css',
+ '/img',
+ '/js',
+ '/LSP',
+ '/remoteDebugger',
+ '/dataexplorer',
+ '/$shared',
+ ].reduce(
+ (prev, cur) => ({
+ ...prev,
+ [cur]: proxyOpts,
+ }),
+ {
+ '/rest/$upload': {
+ target: TARGET,
+ secure: false,
+ },
+ },
+ );
+ ```
+
+ A proxy configuration object is created by applying `proxyOpts` to specified paths. It utilizes the `reduce` function to accumulate the proxy configurations for various paths.
+
+
+ #### 8. **Export**:
+
+ ```typescript
+ export default proxy;
+ ```
+
+ The `proxy` object, containing the proxy configurations, is exported as the default export of the `proxy.config.ts` file.
+
+
+
+
+
+## index.html
+
+This file serves as the main HTML file for the application, defining the structure and essential elements necessary for the web page. It acts as the entry point for the application when loaded in a web browser.
+
+```html
+
+
+
+
+ qodly-example
+
+
+
+
+
+
+
+
+```
+
+Within the body section, the following key components are present:
+
+- **Root Div**: A div element with the ID `root` is defined. This div typically serves as the mounting point for React components.
+
+- **Script for Application Entry**: The main TypeScript module for the application ([`main.tsx`](#maintsx)), serving as the entry point to initialize and execute the core logic of the application.
+
+
+
+
+
+
+## main.tsx
+
+This file functions as the entry point for the application, initializing the React app by rendering the main application component. Let's break down the contents of `main.tsx`:
+
+
+ #### 1. **React Imports**:
+
+ ```typescript
+ import React from 'react';
+ import ReactDOM from 'react-dom';
+ ```
+
+ These imports bring in the necessary `React` and `ReactDOM` libraries for building and rendering React components.
+
+
+ #### 2. **Styling Import**:
+
+ ```typescript
+ import './index.css';
+ ```
+
+ This line imports the styles from `index.css`, providing styling for the components in the application.
+
+
+ #### 3. **Application Component Import**:
+
+ ```typescript
+ import App from './App.tsx';
+ ```
+
+ The main application component, `App`, is imported from the [`App.tsx`](#apptsx) file. This component serves as the root component for the entire application.
+
+
+
+ #### 4. **Rendering the App**:
+
+ ```typescript
+ ReactDOM.render(
+
+ ,
+ document.getElementById('root')!,
+ );
+ ```
+
+ The `ReactDOM.render` function is called to render the `App` component. The entire application is enclosed in `React.StrictMode`, which performs additional runtime checks for potential issues. The rendered content is then injected into the HTML element with the ID `root`. This `root` element is the div specified in the [`index.html`](#indexhtml) file, where the React components will be mounted.
+
+
+
+
+
+## App.tsx
+
+This file serves as the core application component, employing the `WebformEditorStandalone` component and integrating custom components from the `components` directory. This underscores that the core functionality and user interface of the application reside within the `WebformEditorStandalone`.
+
+
+Let's break down the contents of `App.tsx`:
+
+#### 1. **Imports**:
+
+ ```typescript
+ import { WebformEditorStandalone } from '@ws-ui/webform-editor-standalone';
+ import components from './components';
+ ```
+
+ - The `WebformEditorStandalone` component is imported from the `@ws-ui/webform-editor-standalone` library, serving as a specialized editor for web forms.
+
+ - The `components` import from the `./components` directory indicates the presence of custom components defined within that directory.
+
+#### 2. **App Function Component**:
+
+ ```typescript
+ function App() {
+ return = (props) => {
+ ```
+
+ - Declares a constant variable `ExampleComponent` of type `T4DComponent`, indicating that it is a custom component for the Page Editor.
+
+ - The component is a functional component that receives `props` of type `IExampleComponentProps`.
+
+#### 3. **Enhanced Editor State Check**:
+
+ ```typescript
+ const { enabled } = useEnhancedEditor((state) => ({
+ enabled: state.options.enabled,
+ }));
+ ```
+
+ - Utilizes the `useEnhancedEditor` hook to access the enhanced editor state.
+
+ - The `state` object is destructured to obtain the `enabled` property, which represents whether the enhanced editor is enabled or not.
+
+#### 4. **Conditional Rendering**:
+
+ ```typescript
+ return enabled ? = ({ name, style, className, classNames = [] }) => {
+ ```
+
+ - Declares a constant variable `ExampleComponent` as a functional component (`FC`) that takes `IExampleComponentProps` as its props type.
+
+ - Destructures the props into individual variables (`name`, `style`, `className`, `classNames`), providing default values where necessary.
+
+#### 3. **Enhanced Node Connector**:
+
+ ```typescript
+ const {
+ connectors: { connect },
+ } = useEnhancedNode();
+ ```
+
+ Uses the `useEnhancedNode` hook to obtain a set of `connectors`, and by destructuring `{ connectors: { connect } }`, it specifically extracts the `connect` connector. This connector is then utilized to establish a connection between the `ExampleComponent` and the enhanced features of the web form editor. It's a way for the component to integrate and interact with the editor's functionality.
+
+
+#### 4. **Component Rendering**:
+
+ ```typescript
+ return (
+
+ Hello {name}!
+
+ );
+ ```
+
+ - Returns JSX to render the component.
+
+ - The `span` element is connected to the enhanced node using `ref={connect}`, allowing it to leverage enhanced node features.
+
+ - Applies the provided inline styles (`style`) and combines the class names (`className` and `classNames`) using the `classnames` library.
+
+ - Displays a simple greeting message (`Hello {name}!`) inside the `span`.
+
+#### 5. **Export Statement**:
+
+ ```typescript
+ export default ExampleComponent;
+ ```
+
+ Exports the `ExampleComponent` as the default export from the file, making it accessible for use in other parts of the project.
+
+
+
+
+
+### ExampleComponent.config.tsx
+
+The `ExampleComponent.config.tsx` file provides essential details for crafting, displaying information, and setting default props for the `ExampleComponent`. It plays a crucial role in defining how the component behaves within the web form editor.
+
+
+#### 1. **Imports**:
+
+ ```typescript
+ import { EComponentKind, T4DComponentConfig } from '@ws-ui/webform-editor';
+ import { Settings } from '@ws-ui/webform-editor';
+ import { MdOutlineTextSnippet } from 'react-icons/md';
+ import ExampleComponentSettings, { BasicSettings } from './ExampleComponent.settings';
+ ```
+
+ - `EComponentKind` and `T4DComponentConfig`: Imports types from `@ws-ui/webform-editor` for defining component kind and configuration.
+
+ - `Settings`: Imports a function from `@ws-ui/webform-editor` for managing component settings.
+
+ - `MdOutlineTextSnippet`: Imports the icon component from `react-icons/md` for displaying an icon associated with the component.
+
+ - `ExampleComponentSettings` and `BasicSettings` from './ExampleComponent.settings' for additional component settings.
+
+#### 2. **Default Export (Configuration Object)**:
+
+ ```typescript
+ export default {
+ // ... configuration properties ...
+ } as T4DComponentConfig;
+ ```
+
+ Exports a configuration object as the default export. This object conforms to the `T4DComponentConfig` type and specifies the configuration for the `ExampleComponent` with properties related to crafting, information, default props, and more.
+
+
+#### 3. **Craft Configuration**:
+
+ ```typescript
+ craft: {
+ displayName: 'ExampleComponent',
+ kind: EComponentKind.BASIC,
+ props: {
+ name: '',
+ classNames: [],
+ events: [],
+ },
+ related: {
+ settings: Settings(ExampleComponentSettings, BasicSettings),
+ },
+ },
+ ```
+
+ Defines the crafting configuration for the `ExampleComponent`:
+
+ - `displayName`: The display name of the component.
+
+ - `kind`: The kind of component, which is set to `EComponentKind.BASIC`, categorizes the `ExampleComponent` as a `BASIC` type within the web form editor. This classification determines its behavior, capabilities, and how it interacts with the editor, providing a foundation for customization and extensibility.
+
+ - `props`: Default values for component props (`name`, `classNames`, `events`).
+
+ - `related`: Establishes a connection to supplementary settings for the `ExampleComponent`. Within the `related` section, the `settings` property employs the `Settings` function to combine `ExampleComponentSettings` (specific settings) and `BasicSettings` (common settings). This facilitates a structured and modular strategy for managing different aspects of the component's behavior and visual presentation within the web form editor.
+
+#### 4. **Info Configuration**:
+
+ ```typescript
+ info: {
+ displayName: 'ExampleComponent',
+ exposed: true,
+ icon: MdOutlineTextSnippet,
+ events: [
+ // ... event configurations ...
+ ],
+ datasources: {
+ accept: ['string'],
+ },
+ },
+ ```
+
+ - Defines information configuration for the `ExampleComponent`:
+
+ - `displayName`: Specifies the display name of the component.
+
+ - `exposed`: Indicates whether the component is exposed or not.
+
+ - `icon`: Specifies the display name of the component.
+
+ - `events`: Defines a list of supported events for the component.
+
+ - `datasources`: Describes the types of data sources accepted by the component.
+
+#### 5. **Default Props Configuration**:
+
+ ```typescript
+ defaultProps: {
+ name: 'Qodly',
+ },
+ ```
+
+ Specifies default props for the `ExampleComponent`. In this case, the default value for the `name` prop is set to 'Qodly'.
+
+:::tip Iterable Components
+ For custom components within iterable structures such as matrices or data tables, incorporating the `iterableChild` property into the `defaultProps` in the configuration file can resolve rendering issues. This property enables proper data binding and rendering in these contexts. Update the component's configuration as follows:
+
+ ```ts
+ export default {
+ // ... other configurations ...
+ defaultProps: {
+ name: 'Qodly',
+ iterableChild: true
+ },
+ }
+ ```
+
+ This addition ensures that custom components function correctly in iterable environments, addressing common data handling and rendering issues.
+:::
+
+#### 6. **Props Interface**:
+
+ ```typescript
+ export interface IExampleComponentProps extends webforms.ComponentProps {
+ name?: string;
+ }
+ ```
+
+ Defines an interface `IExampleComponentProps` that extends `webforms.ComponentProps` and includes an optional `name` prop. This interface represents the props that `ExampleComponent` can receive.
+
+
+
+
+
+### ExampleComponent.render.tsx
+
+The `ExampleComponent.render.tsx` file defines the rendering logic for the `ExampleComponent`, incorporating state management, data source access, and dynamic value updates based on changes in the web form editor.
+
+#### 1. **Imports**:
+
+ ```typescript
+ import { useRenderer, useSources } from '@ws-ui/webform-editor';
+ import cn from 'classnames';
+ import { FC, useEffect, useState } from 'react';
+ import { IExampleComponentProps } from './ExampleComponent.config';
+ ```
+
+ - `useRenderer` and `useSources`: Hooks provided by `@ws-ui/webform-editor` for interacting with the web form renderer and accessing data sources.
+
+ - `cn`: A utility for conditionally joining class names.
+
+ - `FC`, `useEffect`, `useState`: React utilities for defining functional components, handling side effects, and managing state.
+
+ - `IExampleComponentProps`: Import of the props interface defined in `ExampleComponent.config.tsx`.
+
+#### 2. **Functional Component Definition**:
+
+ ```typescript
+ const ExampleComponent: FC = ({ name, style, className, classNames = [] }) => {
+ // ... component logic ...
+ };
+ ```
+
+ Defines a functional component named `ExampleComponent` that takes props conforming to the `IExampleComponentProps` interface.
+
+#### 3. **Renderer Connection**:
+
+ ```typescript
+ const { connect } = useRenderer();
+ ```
+
+ Uses the `useRenderer` hook to obtain a `connect` function, which establishes a connection between the component and the web form renderer.
+
+
+#### 4. **State Management**:
+
+ ```typescript
+ const [value, setValue] = useState(() => name);
+ ```
+
+ Initializes a state variable `value` with an initial value derived from the `name` prop. This state manages the content dynamically displayed by the component.
+
+#### 5. **Data Source Access**:
+
+ ```typescript
+ const {
+ sources: { datasource: ds },
+ } = useSources();
+ ```
+
+ Uses the `useSources` hook to obtain a data source (`ds`) from the web form editor. This data source allows dynamic updates to the displayed content.
+
+#### 6. **Effect for Data Source Changes**:
+
+ ```typescript
+ useEffect(() => {
+ // ... effect logic ...
+ }, [ds]);
+ ```
+
+ Utilizes the `useEffect` hook to perform side effects. In this case, it listens for changes in the data source (`ds`). The effect runs when `ds` changes.
+
+#### 7. **Data Source Listener Logic**:
+
+ ```typescript
+ const listener = async (/* event */) => {
+ const v = await ds.getValue();
+ setValue(v || name);
+ };
+ ```
+
+ Defines a listener function that asynchronously retrieves the current value from the data source (`ds`) and updates the component state (`setValue`) accordingly.
+
+#### 8. **Effect Cleanup**:
+
+ ```typescript
+ return () => {
+ ds.removeListener('changed', listener);
+ };
+ ```
+
+ Provides a cleanup function to remove the listener when the component is unmounted, ensuring efficient resource management.
+
+#### 9. **Render JSX**:
+
+ ```typescript
+ return (
+
+ Hello {value}!
+
+ );
+ ```
+
+ Returns JSX to render the component. The `span` element is connected to the web form renderer (`ref={connect}`) and displays the dynamically updated content (`Hello {value}!`).
+
+#### 10. **Export**:
+
+ ```typescript
+ export default ExampleComponent;
+ ```
+
+ Exports the `ExampleComponent` as the default export from the file, making it available for use in other parts of the project.
+
+
+
+
+
+### ExampleComponent.settings.tsx
+
+The `ExampleComponent.settings.tsx` file defines the configurable properties of the `ExampleComponent`. It plays a crucial role in customizing and managing the settings associated with the component within the web form editor.
+
+#### 1. **Imports**:
+
+ ```typescript
+ import { ESetting, TSetting } from '@ws-ui/webform-editor';
+ import { BASIC_SETTINGS, DEFAULT_SETTINGS, load } from '@ws-ui/webform-editor';
+ ```
+
+ - `ESetting` and `TSetting`: Imported types from `@ws-ui/webform-editor` for defining setting types and configurations.
+
+ - `BASIC_SETTINGS`, `DEFAULT_SETTINGS`, `load`: Imported constants and functions from `@ws-ui/webform-editor` for managing default and basic settings.
+
+#### 2. **Common Settings**:
+
+ ```typescript
+ const commonSettings: TSetting[] = [
+ {
+ key: 'name',
+ label: 'Name',
+ type: ESetting.TEXT_FIELD,
+ defaultValue: 'Qodly',
+ },
+ ];
+ ```
+
+ Defines an array `commonSettings` containing a `TEXT_FIELD` setting for the component's name. It includes properties such as `key`, `label`, `type`, and `defaultValue`.
+
+#### 3. **Component Settings**:
+
+ ```typescript
+ const Settings: TSetting[] = [
+ {
+ key: 'properties',
+ label: 'Properties',
+ type: ESetting.GROUP,
+ components: commonSettings,
+ },
+ ...DEFAULT_SETTINGS,
+ ];
+ ```
+
+ Creates an array `Settings` that includes a `GROUP` setting named `Properties`. This group encapsulates the common settings defined earlier (`commonSettings`). Additionally, it spreads `DEFAULT_SETTINGS` to include default settings provided by the `webform-editor` library.
+
+#### 4. **Basic Settings**:
+
+ ```typescript
+ export const BasicSettings: TSetting[] = [
+ ...commonSettings,
+ ...load(BASIC_SETTINGS).filter('style.overflow'),
+ ];
+ ```
+
+ Exports an array `BasicSettings` that includes the common settings and additional settings loaded from `BASIC_SETTINGS`. It also filters out settings related to `style.overflow`, providing a subset of basic settings specific to the `ExampleComponent`.
+
+#### 5. **Default Export**:
+
+ ```typescript
+ export default Settings;
+ ```
+
+ Exports the `Settings` array as the default export of the module. This array serves as the complete set of settings for the `ExampleComponent`, encompassing both common and default settings.
\ No newline at end of file
diff --git a/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/IFrameComponentSandboxSettings.png b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/IFrameComponentSandboxSettings.png
new file mode 100644
index 000000000..b70020d82
Binary files /dev/null and b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/IFrameComponentSandboxSettings.png differ
diff --git a/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/QodlyLookerModel.png b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/QodlyLookerModel.png
new file mode 100644
index 000000000..996dc68c8
Binary files /dev/null and b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/QodlyLookerModel.png differ
diff --git a/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/apiKeysInterface.png b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/apiKeysInterface.png
new file mode 100644
index 000000000..57a05a5e5
Binary files /dev/null and b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/apiKeysInterface.png differ
diff --git a/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerAddChartButton.png b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerAddChartButton.png
new file mode 100644
index 000000000..ff6d81815
Binary files /dev/null and b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerAddChartButton.png differ
diff --git a/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerAddDataToReport.png b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerAddDataToReport.png
new file mode 100644
index 000000000..d5b50df4a
Binary files /dev/null and b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerAddDataToReport.png differ
diff --git a/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerConfigureChartData.png b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerConfigureChartData.png
new file mode 100644
index 000000000..7655b33dc
Binary files /dev/null and b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerConfigureChartData.png differ
diff --git a/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerCreateNewReport.png b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerCreateNewReport.png
new file mode 100644
index 000000000..c876e41f3
Binary files /dev/null and b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerCreateNewReport.png differ
diff --git a/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerCreateNewReport2.png b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerCreateNewReport2.png
new file mode 100644
index 000000000..1fffbfd3f
Binary files /dev/null and b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerCreateNewReport2.png differ
diff --git a/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerCustomizeChartAppearance.png b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerCustomizeChartAppearance.png
new file mode 100644
index 000000000..73660044f
Binary files /dev/null and b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerCustomizeChartAppearance.png differ
diff --git a/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerEmbedURLLink.png b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerEmbedURLLink.png
new file mode 100644
index 000000000..2482b45a8
Binary files /dev/null and b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerEmbedURLLink.png differ
diff --git a/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerEmbedURLQodlySource.png b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerEmbedURLQodlySource.png
new file mode 100644
index 000000000..5fbc45cc2
Binary files /dev/null and b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerEmbedURLQodlySource.png differ
diff --git a/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerEmbedURLReport.png b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerEmbedURLReport.png
new file mode 100644
index 000000000..87294935b
Binary files /dev/null and b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerEmbedURLReport.png differ
diff --git a/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerQodlyAPICredentials.png b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerQodlyAPICredentials.png
new file mode 100644
index 000000000..1b3bb2477
Binary files /dev/null and b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerQodlyAPICredentials.png differ
diff --git a/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerQodlyPartnerConnector.png b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerQodlyPartnerConnector.png
new file mode 100644
index 000000000..41709f0a0
Binary files /dev/null and b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerQodlyPartnerConnector.png differ
diff --git a/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerReportEmbeddedinQodly.png b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerReportEmbeddedinQodly.png
new file mode 100644
index 000000000..c7f43d1c5
Binary files /dev/null and b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerReportEmbeddedinQodly.png differ
diff --git a/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerShareReport.png b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerShareReport.png
new file mode 100644
index 000000000..e979f89ce
Binary files /dev/null and b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/lookerShareReport.png differ
diff --git a/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/newApiKeysInterface.png b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/newApiKeysInterface.png
new file mode 100644
index 000000000..58ae6068d
Binary files /dev/null and b/versioned_docs/version-21/Integrations/qodlyLookerStudio/img/newApiKeysInterface.png differ
diff --git a/versioned_docs/version-21/Integrations/qodlyLookerStudio/qodlyLookerStudioConnector.md b/versioned_docs/version-21/Integrations/qodlyLookerStudio/qodlyLookerStudioConnector.md
new file mode 100644
index 000000000..e89ebb7ef
--- /dev/null
+++ b/versioned_docs/version-21/Integrations/qodlyLookerStudio/qodlyLookerStudioConnector.md
@@ -0,0 +1,337 @@
+---
+id: qodlyLookerStudioConnector
+title: Qodly Looker Studio Connector
+---
+
+import Column from '@site/src/components/Column'
+
+## Overview
+
+The Qodly Looker Studio Connector enables seamless integration between your **Qodly application** and **Google Looker Studio**, a powerful data visualization tool. This allows you to create interactive dashboards, track real-time business metrics, and generate custom reports using your Qodly application data.
+
+## Why Use Looker Studio?
+
+Understanding and analyzing your data is essential for making informed decisions. With this connector, you can:
+
+- Visualize and analyze your Qodly data in a user-friendly interface.
+
+- Monitor business performance using interactive charts and graphs.
+
+- Combine Qodly data with other sources for a comprehensive view.
+
+- Enable real-time insights with automatic data syncing and caching.
+
+- Embed reports into your Qodly application for seamless access.
+
+## How Does It Work?
+
+The Qodly Looker Studio Connector acts as a bridge between your Qodly application and Looker Studio, pulling structured data from Qodly’s REST API and making it available for visualization in Looker Studio.
+
+The integration process consists of:
+
+- Authenticating your Qodly app using an API key.
+
+- Defining the data classes and relationships in Qodly.
+
+- Configuring Looker Studio to retrieve and display Qodly data.
+
+- Building reports that provide valuable business insights.
+
+- Embedding reports within your Qodly application.
+
+By structuring your data effectively, you ensure that Looker Studio presents accurate and meaningful visualizations.
+
+
+## Setting Up the Qodly Looker Studio Connector
+
+### Structuring Your Data in Qodly
+
+If you already have existing data in Qodly, you can skip this section and move to the next step on connecting Qodly to Looker Studio. However, for the purpose of this guide, we will go through the step-by-step process of structuring the data for testing and demonstration.
+
+Below is the data model that we will use in Qodly:
+
+
+
+ - Open the Qodly Console from your browser.
+ - Navigate to the API Keys section in the settings menu.
+
+
+
+
+
+2. **Retrieve the API Endpoint**:
+
+ - The API Endpoint is a URL that Looker Studio will use to request data from your Qodly app.
+ - Copy this URL and store it somewhere accessible, as you will need it in the next step.
+
+3. **Create a New API Key**:
+
+ - Click the "New API Key" button.
+
+
+
+ - Enter a descriptive name, such as "Looker API Key", to help you identify it.
+ - Set the type to Standard, which provides the necessary permissions for data access.
+ - Assign the Admin role to ensure that Looker Studio has the proper authorization to read data.
+ - Click Submit and copy the API key.
+
+
+
+
+
+
+
+#### Step 2: Connect Qodly to Looker Studio
+
+With the API credentials ready, you can now establish the connection in Looker Studio.
+
+1. **Open Looker Studio**:
+
+ - Navigate to [Google Looker Studio](https://lookerstudio.google.com/u/0/navigation/reporting).
+ - Sign in with your Google account if prompted.
+
+2. **Create a New Report**:
+
+ - If you're new to Looker Studio, click the Create button
+
+ - In the search bar, search for "Qodly".
+ - It will be displayed under the Partner Connector section.
+ - Click on the Qodly connector to proceed.
+
+
+
+
+
+4. **Enter Your API Credentials**:
+
+
+
+ - Looker Studio will ask for the API Endpoint and API Key that you retrieved earlier.
+ - Paste them in the respective fields.
+ - Click Next to continue to the configuration screen.
+
+
+
+
+
+5. **Verify the Connection**:
+
+ - Once the connection is established, Looker Studio will list the available data classes from your Qodly application.
+ - If the connection fails, ensure that the API key is correct and that your Qodly app allows external API access.
+
+Now that your Qodly data is connected to Looker Studio, you can start building reports and visualizing your business data.
+
+
+### Configure the Data Configuration Settings
+
+Once your Qodly Looker Studio Connector is connected, you need to configure key settings to ensure efficient data retrieval and proper visualization in Looker Studio. These settings define how your data will be fetched and structured.
+
+1. **Enter a Dataclass Name**:
+
+ - Example Value: Order
+ - Explanation: This is the main data class you want to report on. Since we're analyzing customer orders, Order is the logical choice. Looker Studio will use this class to fetch and structure the data shown in your report.
+
+2. **Enter a Dataclass Attribute (of type date) to be used by Looker Studio as the main date range**:
+
+ - Example Value: date
+ - Explanation: This setting determines the primary date field used for filtering reports. In this case, date represents the order date, which is the most logical date for tracking transactions over time. When you apply a date range filter in Looker Studio (e.g., “Last 30 days”), this is the field it will use.
+
+3. **Pagination Top**:
+
+ - Default Value: 10000
+ - Explanation: Sets the number of records fetched per API request. A higher value means fewer API calls but can slow down performance if you're dealing with a lot of data.
+
+
+4. **Cache TTL (Time-To-Live)**:
+
+ - Default Value: 900 (in seconds)
+ - Explanation: This setting controls how long the connector reuses previous query results before sending the same query to Qodly again. It's part of the connector’s internal cache (not Looker Studio’s cache) and helps reduce unnecessary requests to Qodly.
+ - Use a lower value (e.g., 300) if your data changes frequently.
+ - Use a higher value (e.g., 3600) if your data is more static — this can improve performance and reduce load.
+
+5. **Custom Query Filter (Optional)**:
+
+ - Example Value: amount > 500
+ - Explanation: Allows you to filter the data before Looker Studio retrieves it. (Example: If you only want to analyze high-value customers, you can set a condition to exclude orders under $500.). You can also filter by country: country = 'USA' to analyze only US-based customers.
+
+6. **Add Additional Attributes to Query (such as relations)**:
+
+ - Example Value: customer.firstName, customer.lastName, customer.email, country, city, amount
+ - Explanation: This setting allows you to retrieve related fields from the Customer entity. Since customer is a relation in the Order table, you need to explicitly include attributes like customer.firstName, customer.lastName, and customer.email. Also, include country and city to analyze customer distribution geographically.
+
+
+:::info
+All Looker Studio partner connectors have a **6-minute timeout per query**. If fetching data takes longer than that, the query will fail. Tuning Pagination Top, applying filters, and reducing data volume help ensure queries stay within that limit.
+
+To avoid this:
+- Lower the Pagination Top to reduce the load per request (e.g., try 5,000 or 2,000).
+- Add filters in Looker Studio to limit how much data is being fetched.
+- Narrow the date range if possible.
+
+These adjustments can help keep data retrieval efficient and within the allowed time limit.
+:::
+
+Click "Add" to apply the settings and fetch the data.
+
+### Creating Reports in Looker Studio
+
+Now that the Qodly Looker Studio Connector is properly configured, you can create insightful reports using Looker Studio’s built-in visualization tools. Follow the steps below to add charts, configure data, add descriptive titles, and style your visualizations clearly and effectively.
+
+#### Step 1: Add a Chart
+
+In your Looker Studio report:
+
+1. Click the Add a chart button
+
+ 1. Data Source: Select your configured Qodly data source.
+
+
+
+
+You may add optional filters or comparison dates to further refine your visualization.
+
+#### Step 3: Customize Chart Appearance
+
+Enhance readability and visual appeal:
+
+
+
+ 1. Select your chart and click the Style tab in the right panel.
+ 2. Adjust color schemes, font styles, line thicknesses, and background colors.
+ 3. For maps, configure color gradients to effectively highlight differences in data values.
+ 4. Enable or disable legends, axis labels, and tooltips as needed to simplify interpretation.
+
+
+
+
+
+
+:::info Additional Charting Resources
+For detailed guidance and advanced configuration options for different types of charts, refer to the official Looker Studio documentation [Chart references](https://cloud.google.com/looker/docs/studio/area-chart-reference).
+:::
+
+### Embedding Looker Studio Reports in Qodly
+
+To embed Looker Studio reports directly into your Qodly application, you'll need to use the IFrame custom component. An iframe represents a nested browsing context, allowing another HTML page to be displayed seamlessly within your Qodly app page.
+
+#### Step 1: Install the IFrame Custom Component
+
+You can obtain the IFrame custom component directly from the [Custom Components list for Qodly Studio](https://github.com/qodly/custom-components?tab=readme-ov-file) in GitHub:
+
+1. Navigate to the [IFrame custom component repository](https://github.com/TihounaNasrallah/qodly-iframe).
+2. Download the [latest release](https://github.com/TihounaNasrallah/qodly-iframe/releases/tag/0.1.2) (qodly_IFrame_version.zip) from the Releases page.
+
+Once downloaded, follow these steps:
+
+1. Open Qodly Studio.
+2. Locate and click the dedicated [Upload button](../../4DQodlyPro/pageLoaders/components/uploadCustomComponents.md#uploading-custom-component) in the Component bar.
+3. Upload the downloaded qodly_IFrame_version.zip file.
+4. [Install the custom component](../../4DQodlyPro/pageLoaders/components/uploadCustomComponents.md#installing-custom-component) when prompted.
+
+After successful installation, refresh your Qodly Studio page. The new IFrame component will now appear in your components bar, ready for drag-and-drop onto your canvas.
+
+#### Step 2: Get the Looker Studio Embed URL
+
+In Looker Studio, open your desired report:
+
+1. Click Share
+
+ 2. Ensure "embed URL" is checked, then copy the provided link.
+
+
+
+
+
+#### Step 3: Embed the Report into Qodly
+
+Return to your Qodly app page in Qodly Studio.
+
+
+
+ 1. Create a new Qodly source of type String.
+
+
+
+3. Drag the newly installed IFrame component onto your canvas.
+4. Assign the Qodly source (containing the embed URL) to the IFrame component.
+5. Adjust the iframe dimensions to 600x450 pixels (or as needed).
+
+#### Step 4: Configure Sandbox Settings
+
+The IFrame custom component uses sandbox attributes to apply security restrictions to embedded content. To ensure your embedded Looker Studio report displays correctly, you must include appropriate sandbox attributes. Without these attributes, your report might not render or function properly.
+
+
+
+ - allow-storage-access-by-user-activation: Experimental—enables embedded pages to request access to cookies via the Storage Access API.
+
+
+
+
+
+### Conclusion
+
+Now you're ready to see your report directly embedded within your Qodly application.
+
+underlined indicates the primary key attribute
+ - a name in _italics_ indicates a not exposed attribute
+- **Primary Key**: Indicates the primary key attribute for the datastore class. This attribute is mandatory, you can rename it but not delete it.
+- **Type Icon**: Displays the datastore entity type as an icon.
+- **Type**: Attribute type that you can change by double-clicking on it to render the area enterable. An attribute type can be [scalar](#data-types) or based upon a [relation](#create-a-relation-attribute), in which case it can be of the _classNameEntity_ or _classNameSelection_ type.
+
+All attributes of a datastore class are also listed in the [Outline area](model-editor-interface.md#outline) of the model editor.
+
+### Attribute name
+
+Attribute names are case-sensitive: "firstName" and "firstNAME" are not equal. The attribute name must be unique, start with a letter, and can contain only numbers and letters. You cannot include accented and non-Roman letters. For more information, please refer to the [Identifiers](../../qodlyScript/basics/lang-identifiers.md) section. If you enter an invalid character, you will not be able to save the name.
+
+B-tree: Standard B-Tree type index. This multipurpose index type meets most indexing requirements. Cluster: B-Tree type index using clusters. This architecture is more efficient when the index does not contain a large number of keys, i.e., when the same values occur frequently in the data. Automatic: Qodly automatically selects an index according to the attribute type. | All except Calculated |
+| Keyword index | This index is intended to facilitate fast searching of individual words inside of these attributes | string, text, image |
+| Mandatory | Specifies that the attribute is mandatory and cannot be saved with the `null` value | All storage attributes |
+| Max value | Minimum value allowed for the attribute. If the value entered is more than this property, an error is returned. | long, number |
+| Min value | Minimum value allowed for the attribute. If the value entered is less than this property, an error is returned. | long, number |
+| Reverse path | This option must be selected for a 1->N relation attribute | related 1->N |
+| Scope | "Expose as REST" or "Do not expose as REST". An exposed attribute can be used from anywhere and its value can be displayed using REST requests. A not-exposed attribute can only be used by code called from inside the datastore class, including calculated attributes, functions, methods, and events, executed on the server. Select "Do not expose as REST" for attributes that should not be accessed directly, e.g. "salary". This property can be selected at the [datastore class level](datastore-classes.md#scope), and attributes inherit from this level. An attribute can override the parent dataclass level with "Do not expose as REST" if the parent was exposed; however, it the parent dataclass property is "Do not expose as REST", the attribute cannot override it. | All |
+| Unique | Verifies that the value entered be unique. If not, an error is returned | string |
+
+## Permissions
+
+This area allows you to define the permissions at the attribute level. Permissions can also be set at the dataclass and datastore levels.
+
+Attribute permissions are described in [this section](../../../4DQodlyPro/roles/attributesPermissions.md).
diff --git a/versioned_docs/version-21/QodlyinCloud/cloudOnlyFeatures/model/datastore-classes.md b/versioned_docs/version-21/QodlyinCloud/cloudOnlyFeatures/model/datastore-classes.md
new file mode 100644
index 000000000..49997a4fe
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/cloudOnlyFeatures/model/datastore-classes.md
@@ -0,0 +1,129 @@
+---
+id: datastore-classes
+title: Datastore Classes
+---
+
+The datastore class is a specialized structure designed to encapsulate both attributes and relational attributes, effectively modeling the data and its interactions within the system. Additionally, it provides functions for data manipulation within your model.
+
+
+
+ The Outline includes a search bar that allows filtering of datastore classes, attributes, and functions by entering keywords.
+
+
+
+
+
+
+### Datastore Classes and Attributes
+
+
+
+ Datastore classes represent the entities in the model and are listed in the Outline. Attributes of each class can be expanded to display their details, including data types such as text, date, and image. Attributes are visually distinct with icons indicating their respective data types.
+
+
+
+
+
+
+
+This representation can be accessed through a text editor by selecting the Model in the Explorer and choosing Open With a Text Editor.
+
+
+
+
+
+
+### Dissection
+
+The model is opened in JSON format in the text editor:
+
+
+ dataClasses : An array containing definitions for each data class in the model. Each data class definition includes:
+ name : The display name of the data class.className : The actual class name used internally.collectionName : The name of the collection associated with this data class.scope : The visibility scope of the data class (public, private, etc.).attributes : An array containing detailed definitions of each attribute of the data class.extraProperties : Additional properties specific to this data class, such as position and panel color for visualization purposes.
+ attributes : Within the attributes array, each attribute definition includes:
+ name : The name of the attribute.kind : The kind of attribute (storage, relatedEntity, etc.).type : The data type of the attribute (long, string, date, etc.).scope : The visibility scope of the attribute (public, private, etc.).indexKind : The index type for the attribute (auto, manual, etc.).unique : Indicates whether the attribute values must be unique (true or false).not_null : Indicates whether the attribute values cannot be null (true or false).autosequence : Indicates whether the attribute should auto-increment (true or false).primKey : Indicates whether the attribute is the primary key (true or false).
+
+
+### Syntax Check
+
+The syntax check feature identifies and corrects syntax errors and formatting issues within the JSON representation. Errors are highlighted and accompanied by descriptive messages that help pinpoint the exact problem. Below are some common examples of syntax errors that can be detected:
+
+
+
+ - Expected comma : This error typically occurs when a comma , is absent between key-value pairs in an object or elements in an array.
+
+
+
+
+
+
+ - Expected closing brace : This error occurs when the parser anticipates a closing curly brace } to conclude an object but does not find it.
+
+
+
+
+
+
+
+ - Value expected : This error arises when an object key is succeeded by a colon, but the corresponding value is missing, indicating an incomplete JSON representation.
+
+
+
+
+
+
+
+ - Colon expected : This error suggests that a colon : is required to separate the key and value in an object, but it is missing from the code.
+
+
+
+
+
+
+
+ - Unexpected end of string json : This error is triggered when the parser encounters the end of a string without coming across a closing double quote ", indicating an unfinished string value or when the opening double quote is missing at the beginning of the string.
+
+
+
+
+
+:::warning
+
+Editing the model through the JSON code must be done with care since data model integrity rules are not checked in the Text Editor. In particular, you must pay attention to [naming rules](attributes.md#attribute-name), or [renaming issues](datastore-classes.md#renaming-a-datastore-class).
+
+:::
diff --git a/versioned_docs/version-21/QodlyinCloud/cloudOnlyFeatures/model/modelEditorApproach.md b/versioned_docs/version-21/QodlyinCloud/cloudOnlyFeatures/model/modelEditorApproach.md
new file mode 100644
index 000000000..c5d6f9589
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/cloudOnlyFeatures/model/modelEditorApproach.md
@@ -0,0 +1,99 @@
+---
+id: modelPermissions
+title: Assigning Permissions
+---
+
+import Column from '@site/src/components/Column'
+
+In the **Model Editor**, link privileges to permissions for Datastore, DataClass, Attribute, and Function ressources. Adding permissions is done by clicking on the
+
+
+ A purple tag signifies that the privilege is directly linked to that specific permission.
+
+
+
+
+
+
+
+
+
+ A dark grey tag suggests control over that permission by an unlinked privilege, reflecting a granularity hierarchy where the permission is governed by a higher-level resource. For instance, allowing read access to the entire Datastore for the Guest privilege would result in the Guest privilege tag being displayed when checking the read permission for all Dataclasses.
+
+
+
+
+
+
+
+
+
+
+ If a privilege is both purple-tagged and accompanied by the inclusion of an extra privilege .
+
+
+
+
+
+
+
+:::
+
+
+## Datastore Permissions
+
+
+
+ To configure Datastore permissions (e.g., Create, Read, Update, Delete and Execute), click on the Model for a streamlined dropdown selection to allocate desired privileges.
+
+
+
+
+
+
+## DataClass Permissions
+
+
+
+ To configure Dataclass permissions (e.g., Create, Read, Update, Delete and Execute), click on a Dataclass for a streamlined dropdown selection to allocate desired privileges.
+
+
+
+
+
+
+## Attribute Permissions
+
+
+
+ To configure Attribute permissions (e.g., Create, Read, Update and Delete), click on an Attribute within a Dataclass for a streamlined dropdown selection to allocate desired privileges.
+
+
+
+
+
+
+## Function Permissions
+
+
+
+ To configure Function permissions (e.g., Execute and Promote), click on a Function within a Dataclass for a streamlined dropdown selection to allocate desired privileges.
+
+
+
+
\ No newline at end of file
diff --git a/versioned_docs/version-21/QodlyinCloud/cloudOnlyFeatures/qodlyEventsClassInterface.md b/versioned_docs/version-21/QodlyinCloud/cloudOnlyFeatures/qodlyEventsClassInterface.md
new file mode 100644
index 000000000..05ad7f1a3
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/cloudOnlyFeatures/qodlyEventsClassInterface.md
@@ -0,0 +1,73 @@
+---
+id: qodlyEventsClass
+title: QodlyEvents Class Interface
+---
+
+import Column from '@site/src/components/Column'
+
+## Overview
+
+The QodlyEvents class interface provides a structured way to define application lifecycle logic in Qodly Server. It allows developers to implement startup and shutdown logic that is executed automatically when the server starts or stops.
+
+## Accessing QodlyEvents
+
+
+
+ The QodlyEvents class is visible under the classes folder in the explorer structure. By default, it appears greyed out until activated. Once activated, the class is created with predefined methods to handle application events.
+
+
+
+
+
+When activated, QodlyEvents is initialized with the following structure:
+
+```qs
+shared singleton Class constructor()
+
+shared function onStartup()
+
+shared function onStop()
+```
+
+These methods enable the execution of custom logic when the application starts or stops.
+
+
+Developers can modify the onStartup() and onStop() functions inside the QodlyEvents class interface to define custom behavior. For example:
+
+```qs
+shared singleton Class constructor()
+
+shared function onStartup()
+ logEvent("Application startup completed successfully.", 0)
+
+shared function onStop()
+ logEvent("Application is shutting down.", 0)
+```
+
+
+## Automatic Execution of QodlyEvents
+
+The onStartup() and onStop() functions execute automatically as part of the Qodly Server lifecycle.
+
+### Execution at Server Startup
+
+When the Qodly Server starts, it automatically triggers the onStartup() function logic defined inside the QodlyEvents class interface by calling `cs.QodlyEvents.me.onStartup()`:
+
+- This ensures that any initialization logic inside the onStartup() function is executed at startup.
+
+- Developers do not need to manually call cs.QodlyEvents.me.onStartup() in normal operations.
+
+:::info
+The `onStartup()` function is executed automatically before any remote connections can occur.
+:::
+
+### Execution at Server Shutdown
+
+When the Qodly Server stops, it automatically triggers the onStop() function logic defined inside the QodlyEvents class interface by calling `cs.QodlyEvents.me.onStop()`:
+
+- This ensures that any cleanup logic inside the onStop() function is executed at shutdown.
+
+- Developers do not need to manually call cs.QodlyEvents.me.onStop() in normal operations.
+
+
diff --git a/versioned_docs/version-21/QodlyinCloud/console/apiKeys.md b/versioned_docs/version-21/QodlyinCloud/console/apiKeys.md
new file mode 100644
index 000000000..8b4ac1c0a
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/console/apiKeys.md
@@ -0,0 +1,125 @@
+---
+id: apiKeys
+title: API Keys
+---
+
+import Column from '@site/src/components/Column'
+
+
+## Overview
+
+The API Keys tab in Qodly allows you to create and manage API keys for secure, programmatic access to your application’s resources. These keys enable external systems or scripts to interact with your application in a controlled and secure manner.
+
+
+### API Endpoint
+
+The API endpoint serves as a gateway, allowing developers to interact with Qodly applications programmatically. Using standard HTTP methods, the endpoint can facilitate data access, trigger actions, or retrieve information by integrating with Qodly’s [`openDatastore`](../qodlyScript/commands/openDatastore.md) command or [REST requests](../../Integrations/api/overview.md).
+
+### API Key
+
+An API key acts as a unique identifier for authenticating external clients. Each key is linked to a specific [**role**](../../4DQodlyPro/roles/rolesPrivilegesOverview.md), controlling the scope of access and actions permitted within the application. It must be included in the HTTP headers of all REST requests to validate the requester’s permissions. [See below](#using-api-keys) for more information.
+
+
+## Managing API Keys
+
+To set up secure access, generate API keys and retrieve the relevant endpoint.
+
+### Accessing API Keys
+
+
+
+ In your environment setup, navigate to the API keys tab, where you’ll see the API endpoint and a list of any previously created keys.
+
+
+
+
+
+
+
+ Click the
+
+
+
+
+
+| Property | Description |
+|--------------------|------------------------------------------------------------------------------------------------------------------------|
+| **Description** | A brief identifier for the key to help recognize its purpose. |
+| **API Type** | Choose between two types:
+
+ This API key is initially configured for public access, allowing usage from any host. To specify restrictions to specific hosts, add their IP addresses.
+
+
+
+
+
+:::
+
+Once complete, click `Submit` to create the API key.
+
+
+### Copying API Endpoint
+
+Click the copy button beside the endpoint URL to use it in your application's REST calls.
+
+
+
+
+ Show API Key : This button Delete API Key : Positioned next to the API key, this button Edit API Key : Also adjacent to the API display, the edit button
+
+
+
+
+
+
+## Using API Keys
+
+To authenticate REST requests to the Server, the API key must be included in the **HTTP header**. Here are two ways to handle API key integration:
+
+- **Using the [`openDatastore`](../qodlyScript/commands/openDatastore.md) Command**: When connecting to another Qodly application, use the `openDatastore` command. Simply pass the API endpoint and key through the `hostname` and `api-key` properties in the `connectionInfo` parameter. This method automatically includes the API key in the HTTP headers for underlying REST requests.
+
+- **Using the REST API Directly**: Insert the `api-key` into the HTTP header with the API endpoint URL in all REST requests. For a practical example, refer to the [API endpoint usage example in Postman](../../Integrations/api/overview.md#api-endpoint-usage-example-in-postman).
+
+
+## How to Manage Your API Access - Tutorial Video
+
+This tutorial video provides a step-by-step guide on managing API access:
+
+- Accessing the API Key in the Qodly Console.
+- Authenticating requests with role-based permissions.
+- Reading data based on user permissions.
+- Creating new records via the API.
+
+VIDEO
diff --git a/versioned_docs/version-21/QodlyinCloud/console/billingSubscriptionManagement.md b/versioned_docs/version-21/QodlyinCloud/console/billingSubscriptionManagement.md
new file mode 100644
index 000000000..b62ca633e
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/console/billingSubscriptionManagement.md
@@ -0,0 +1,201 @@
+---
+id: billingSubscriptionManagement
+title: Billing Subscription Management
+---
+
+import Column from '@site/src/components/Column'
+
+The **Billing** and **Subscription** pages in Qodly offer comprehensive tools for managing payments, invoices, and environment-specific subscriptions.
+
+## Billing Page
+
+The **Billing Page** provides a detailed overview of your current subscription, payment methods, and past invoices. It is designed to give you control over payment details and an understanding of upcoming charges.
+
+
+
+
+ Amount : The total cost of the upcoming invoice.Billing Date : The scheduled date for the next payment.View Details : Opens a breakdown of the invoice, showing the following details:
+
+
+
+
+
+
+
+
+
+ Description : Items included in the subscription, such as: Qodly Power (computing resources), Storage extensions, and the Internet outbound data transfer packs.Quantity : Amount of each resource being billed.Unit Price : The price per unit of each resource.Total : The cost for each resource and the total sum of all charges.
+
+
+
+
+
+
+ Status : Indicates whether the subscription is active or inactive.Start Date : The date your subscription began.Billing Cycle Start/End : Defines the current subscription cycle's start and end dates.Payment Method : Displays the card currently linked to your subscription.
+
+
+
+
+
+### Change Payment Method
+
+Clicking the Change Payment Method card
+
+
+ Email : The associated email address.Card Number : The new payment card details.Expiration Date and Security Code (CVC) .Country : The billing country for the card.
+
+
+
+
+
+Updating the payment method ensures the next payment is processed without interruptions.
+
+
+### Invoices
+
+The **Invoices** section lists past invoices with downloadable options for receipts and invoice details:
+
+ - **Date**: When the invoice was issued.
+ - **Status**: Displays whether the invoice has been paid.
+ - **Invoice Number**: A unique identifier for each invoice.
+ - **Total Amount**: The total charge for that invoice.
+
+
+
+ Clicking the Download Invoice
+ Download Invoice : Get a PDF copy of the invoice for record-keeping.Download Receipt : Obtain a receipt for accounting or reimbursement purposes.
+
+
+
+
+
+
+### Manage Subscription
+
+The **Manage Subscription**
+
+
+ Available for all environments except Development.
+ Requires entering the environment name in a confirmation dialog to prevent accidental deletions.
+ Once deleted, the environment and its associated resources are removed, and the subscription is updated.
+
+
+
+
+
+
diff --git a/versioned_docs/version-21/QodlyinCloud/console/consoleOverview.md b/versioned_docs/version-21/QodlyinCloud/console/consoleOverview.md
new file mode 100644
index 000000000..f5514a185
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/console/consoleOverview.md
@@ -0,0 +1,251 @@
+---
+id: consoleOverview
+title: Console Overview
+---
+
+import Column from '@site/src/components/Column'
+
+## Overview
+
+The Console homepage provides a centralized view of all applications associated with your Qodly account. Here, you can access, manage, and monitor various types of applications, including your Sandbox, paid applications, and applications shared with you by other users.
+
+
+ An Edit Alert button is available in this section, allowing you to configure threshold alerts for outbound data usage. This feature ensures that you are notified before reaching critical levels of bandwidth consumption.
+
+ Click Edit alert next to the outbound data section.
+ Enter the percentage threshold at which you want to receive an email notification.
+ Click Confirm to save the alert, or Cancel to discard changes.
+
+
+
+
+
+ :::
+
+- **Users**: Indicates the number of active users who have access to the environment.
+
+
+- **Version**: Displays the current version of Qodly running in the environment, with updates logged in the Activity section.
+
+ :::info Upgrade to the Latest Version
+
+
+ If a new version is available, a (Upgrade to latest version) link will appear beside the version number. Clicking this link initiates the upgrade process.
+
+
+
+
+ :::
+
+ :::danger
+ Upgrading may cause temporary downtime depending on the changes being applied, so plan upgrades during non-critical hours if possible.
+ :::
+
+### Activity History
+
+Below the instance information, the **Activity** section logs recent actions and events within the application. This is particularly useful for tracking system changes and monitoring user activities over time, like:
+
+- **Update Version**: Logs version updates of Qodly for the environment, including the user who performed the update.
+
+- **Sandbox Wake Up**: Indicates when the sandbox was reactivated after a period of inactivity or sleep mode.
+
+- **Start Server**: Records each instance of the server being started, providing an audit trail of server uptime.
+
+
+
+
+ Each entry in the Activity history includes:
+
+ Event Description : Details the action taken, such as updating the version or starting the server.
+ User : Shows which user initiated the action.
+ Timestamp : Displays the date and time when the event occurred.
+
+
+
+
+
+
+
+### Accessing Qodly Studio
+
+To begin working on your application, you can click the **Open Studio** button located in the top-right corner of the Overview page. This button provides direct access to Qodly Studio, where you can build, configure, and customize your application.
+
+
+
+ My Account : Directs you to the account details page where you can view and update your account information or change your password.Invoices : Redirects you to the invoices page, displaying all invoices for applications you own or manage.Log Out : Logs you out of the Qodly platform.
+
+
+
+
+
+
+### My Account Page
+
+The **My Account Page** displays an overview of the user's account details:
+
+- **Company Name**: The company associated with the account.
+- **Name**: The user’s name.
+- **Email**: The email address used to access the account.
+- **Role**: The user’s assigned role in Qodly.
+- **Country**: The user’s country.
+
+
+
+
+ First Name
+ Last Name
+ Company Name
+ Role
+ Country
+
+ Update to save the changes or Cancel to discard them.
+
+
+
+
+
+2. **Change Password**: Clicking on **Change Password** opens a form requiring:
+
+
+
+
+ Old Password
+ New Password
+ Confirmation of the New Password
+
+ Update to apply the changes or Cancel to discard them.
+
+
+
+
+
+
+### Invoices Page
+
+The **Invoices Page** provides a comprehensive view of all application invoices, offering detailed financial information and download options.
+
+- Displays all invoices related to your applications in a tabular format. Columns include:
+ - **Date**: The invoice issue date.
+ - **Status**: Payment status (e.g., Paid).
+ - **Invoice Number**: Unique identifier for the invoice.
+ - **Total Amount**: Total cost covered by the invoice.
+ - **Download Invoice**: Allows you to download the invoice as a PDF.
+
+
+
+
+ Click the Access files button : Navigate to the specific environment you want to manage and click the Access files button.Open your FTP Client : Use your preferred FTP client (e.g., Filezilla). This client will allow you to manage and transfer files securely.
+
+
+
+
+
+3. **Enter Connection Details**: Use the following details to establish the connection:
+
+ - Host: The unique SFTP URL assigned to your account.
+ - Port: The designated port number for your FTP connection.
+ - User: Your username.
+ - Password: The temporary password provided to you.
+
+
+### File Contents
+
+
+
+
+ Upon accessing your server via SFTP, you will find a variety of files and folders, each serving a distinct purpose. Below is a summary of the contents you may encounter:
+
+
+
+
+
+#### General Files
+
+| Contents | Format | Description |
+| ------------------- | -------- | ------------------------------------------------------------------------------------------ |
+| Shared | `Folder` | The shared resources, such as visuals, custom components, shared css, shared qodlysource... |
+| catalog.4DCatalog | `XML` | Table and field definitions |
+| folders.json | `JSON` | Explorer folder definitions |
+| menus.json | `JSON` | Menu definitions |
+| model.4DModel | `JSON` | Custom positions and colors of tables, fields, and links in the Model editor. |
+| qodlyApp.json | `JSON` | Configuration settings |
+| roles.json | `JSON` | The user roles and permissions within the application. |
+| settings.4DSettings | `XML` | Structure database settings. |
+
+
+#### Classes
+
+| Contents | Format | Description |
+| ------------- | ------ | ---------------------------------------------------------- |
+| className.4qs | `Text` | Project classes defined in the project. One file per class |
+
+
+#### Methods
+
+| Contents | Format | Description |
+| -------------- | ------ | ----------------------------------------------------------- |
+| methodName.4qs | `Text` | Project methods defined in the project. One file per method |
+
+
+#### Pages
+
+| Contents | Format | Description |
+| ------------------- | ------ | -------------------------------------- |
+| pageName.page | `JSON` | The JSON representation of the Page |
+
+:::info
+While it is possible to download all folders and files, some restrictions apply to modifying them. Due to Permissions issues, some folders/files cannot be modified or replaced directly. For instance, attempting to delete or replace the Catalog may result in denial, accompanied by a message prompting you to contact your web hosting service provider for assistance.
+:::
\ No newline at end of file
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/+Environment.png b/versioned_docs/version-21/QodlyinCloud/console/img/+Environment.png
new file mode 100644
index 000000000..2398ef687
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/+Environment.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/GeneralActivity.png b/versioned_docs/version-21/QodlyinCloud/console/img/GeneralActivity.png
new file mode 100644
index 000000000..260a8d7cb
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/GeneralActivity.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/GeneralApplicationAccess.png b/versioned_docs/version-21/QodlyinCloud/console/img/GeneralApplicationAccess.png
new file mode 100644
index 000000000..5133b7c0e
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/GeneralApplicationAccess.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/GeneralApplicationAccessAuthenticated.png b/versioned_docs/version-21/QodlyinCloud/console/img/GeneralApplicationAccessAuthenticated.png
new file mode 100644
index 000000000..bfe122862
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/GeneralApplicationAccessAuthenticated.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/GeneralApplicationAccessCustomDomain.png b/versioned_docs/version-21/QodlyinCloud/console/img/GeneralApplicationAccessCustomDomain.png
new file mode 100644
index 000000000..4b6db3dab
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/GeneralApplicationAccessCustomDomain.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/GeneralApplicationAccessCustomDomain2.png b/versioned_docs/version-21/QodlyinCloud/console/img/GeneralApplicationAccessCustomDomain2.png
new file mode 100644
index 000000000..9f6084bf1
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/GeneralApplicationAccessCustomDomain2.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/GeneralApplicationAccessCustomDomain3.png b/versioned_docs/version-21/QodlyinCloud/console/img/GeneralApplicationAccessCustomDomain3.png
new file mode 100644
index 000000000..c6a6bf052
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/GeneralApplicationAccessCustomDomain3.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/GeneralApplicationAccessPublic.png b/versioned_docs/version-21/QodlyinCloud/console/img/GeneralApplicationAccessPublic.png
new file mode 100644
index 000000000..349f5f217
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/GeneralApplicationAccessPublic.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/GeneralApplicationAccessStudio.png b/versioned_docs/version-21/QodlyinCloud/console/img/GeneralApplicationAccessStudio.png
new file mode 100644
index 000000000..da2933644
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/GeneralApplicationAccessStudio.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/GeneralEnvironmentInfo.png b/versioned_docs/version-21/QodlyinCloud/console/img/GeneralEnvironmentInfo.png
new file mode 100644
index 000000000..aaea0de63
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/GeneralEnvironmentInfo.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/GeneralEnvironmentInfoServer.png b/versioned_docs/version-21/QodlyinCloud/console/img/GeneralEnvironmentInfoServer.png
new file mode 100644
index 000000000..93e172b99
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/GeneralEnvironmentInfoServer.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/GeneralEnvironmentInfoUsage.png b/versioned_docs/version-21/QodlyinCloud/console/img/GeneralEnvironmentInfoUsage.png
new file mode 100644
index 000000000..5655eeb6b
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/GeneralEnvironmentInfoUsage.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/GeneralEnvironmentInfoUsers.png b/versioned_docs/version-21/QodlyinCloud/console/img/GeneralEnvironmentInfoUsers.png
new file mode 100644
index 000000000..e296cd4f4
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/GeneralEnvironmentInfoUsers.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/NewRelease.png b/versioned_docs/version-21/QodlyinCloud/console/img/NewRelease.png
new file mode 100644
index 000000000..0a9e3c99c
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/NewRelease.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/accountDropdown.png b/versioned_docs/version-21/QodlyinCloud/console/img/accountDropdown.png
new file mode 100644
index 000000000..6641d37dd
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/accountDropdown.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/activityHistory.png b/versioned_docs/version-21/QodlyinCloud/console/img/activityHistory.png
new file mode 100644
index 000000000..f5568bcfd
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/activityHistory.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/addUser1.png b/versioned_docs/version-21/QodlyinCloud/console/img/addUser1.png
new file mode 100644
index 000000000..c5d417bc5
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/addUser1.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/addUser2.png b/versioned_docs/version-21/QodlyinCloud/console/img/addUser2.png
new file mode 100644
index 000000000..9cef8b3cd
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/addUser2.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/addUser3.png b/versioned_docs/version-21/QodlyinCloud/console/img/addUser3.png
new file mode 100644
index 000000000..f6f3dc2f2
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/addUser3.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/addUser4.png b/versioned_docs/version-21/QodlyinCloud/console/img/addUser4.png
new file mode 100644
index 000000000..1b3c1b7ef
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/addUser4.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/addUser5.png b/versioned_docs/version-21/QodlyinCloud/console/img/addUser5.png
new file mode 100644
index 000000000..361fc4d8c
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/addUser5.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/addUser6.png b/versioned_docs/version-21/QodlyinCloud/console/img/addUser6.png
new file mode 100644
index 000000000..9aac91347
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/addUser6.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/addUserToEnvironement1.png b/versioned_docs/version-21/QodlyinCloud/console/img/addUserToEnvironement1.png
new file mode 100644
index 000000000..98378886b
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/addUserToEnvironement1.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/api-copy.png b/versioned_docs/version-21/QodlyinCloud/console/img/api-copy.png
new file mode 100644
index 000000000..af3903cc4
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/api-copy.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/api-delete.png b/versioned_docs/version-21/QodlyinCloud/console/img/api-delete.png
new file mode 100644
index 000000000..cce8a495e
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/api-delete.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/api-edit.png b/versioned_docs/version-21/QodlyinCloud/console/img/api-edit.png
new file mode 100644
index 000000000..bfd4ff267
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/api-edit.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/api-ip.png b/versioned_docs/version-21/QodlyinCloud/console/img/api-ip.png
new file mode 100644
index 000000000..fb1b7c733
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/api-ip.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/api-show.png b/versioned_docs/version-21/QodlyinCloud/console/img/api-show.png
new file mode 100644
index 000000000..51e54c36f
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/api-show.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/api1.png b/versioned_docs/version-21/QodlyinCloud/console/img/api1.png
new file mode 100644
index 000000000..aea29dc21
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/api1.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/api2.png b/versioned_docs/version-21/QodlyinCloud/console/img/api2.png
new file mode 100644
index 000000000..26caa2c53
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/api2.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/api3.png b/versioned_docs/version-21/QodlyinCloud/console/img/api3.png
new file mode 100644
index 000000000..0c1edb7de
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/api3.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/api4.png b/versioned_docs/version-21/QodlyinCloud/console/img/api4.png
new file mode 100644
index 000000000..3e246f7f0
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/api4.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/api5.png b/versioned_docs/version-21/QodlyinCloud/console/img/api5.png
new file mode 100644
index 000000000..5ce006fd1
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/api5.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/apiNothing.png b/versioned_docs/version-21/QodlyinCloud/console/img/apiNothing.png
new file mode 100644
index 000000000..477d7a955
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/apiNothing.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/applicationOverview.png b/versioned_docs/version-21/QodlyinCloud/console/img/applicationOverview.png
new file mode 100644
index 000000000..732a1bd75
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/applicationOverview.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/billingChangePayement.png b/versioned_docs/version-21/QodlyinCloud/console/img/billingChangePayement.png
new file mode 100644
index 000000000..0d45ba032
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/billingChangePayement.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/billingChangePayement2.png b/versioned_docs/version-21/QodlyinCloud/console/img/billingChangePayement2.png
new file mode 100644
index 000000000..2aff45724
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/billingChangePayement2.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/billingDownloadInvoice.png b/versioned_docs/version-21/QodlyinCloud/console/img/billingDownloadInvoice.png
new file mode 100644
index 000000000..0f40c7aca
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/billingDownloadInvoice.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/billingDownloadInvoice2.png b/versioned_docs/version-21/QodlyinCloud/console/img/billingDownloadInvoice2.png
new file mode 100644
index 000000000..dc4a08fc3
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/billingDownloadInvoice2.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/billingInvoices.png b/versioned_docs/version-21/QodlyinCloud/console/img/billingInvoices.png
new file mode 100644
index 000000000..7b6689755
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/billingInvoices.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/billingManageSubscription.png b/versioned_docs/version-21/QodlyinCloud/console/img/billingManageSubscription.png
new file mode 100644
index 000000000..2ef3b4892
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/billingManageSubscription.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/billingNextInvoice.png b/versioned_docs/version-21/QodlyinCloud/console/img/billingNextInvoice.png
new file mode 100644
index 000000000..c01973ffd
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/billingNextInvoice.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/billingNextInvoiceDetails.png b/versioned_docs/version-21/QodlyinCloud/console/img/billingNextInvoiceDetails.png
new file mode 100644
index 000000000..ac9a2e31f
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/billingNextInvoiceDetails.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/billingOverview.png b/versioned_docs/version-21/QodlyinCloud/console/img/billingOverview.png
new file mode 100644
index 000000000..60a16b166
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/billingOverview.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/billingSubscriptionOverview.png b/versioned_docs/version-21/QodlyinCloud/console/img/billingSubscriptionOverview.png
new file mode 100644
index 000000000..f88240f5f
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/billingSubscriptionOverview.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/cancel.png b/versioned_docs/version-21/QodlyinCloud/console/img/cancel.png
new file mode 100644
index 000000000..827ae854b
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/cancel.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/changePassword.png b/versioned_docs/version-21/QodlyinCloud/console/img/changePassword.png
new file mode 100644
index 000000000..a92fe46ac
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/changePassword.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/configureAddEnvironment.png b/versioned_docs/version-21/QodlyinCloud/console/img/configureAddEnvironment.png
new file mode 100644
index 000000000..174831c56
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/configureAddEnvironment.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/configureAdditionalEnvironment.png b/versioned_docs/version-21/QodlyinCloud/console/img/configureAdditionalEnvironment.png
new file mode 100644
index 000000000..db8525849
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/configureAdditionalEnvironment.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/configureDevelopmentEnvironment.png b/versioned_docs/version-21/QodlyinCloud/console/img/configureDevelopmentEnvironment.png
new file mode 100644
index 000000000..5b2f9dee3
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/configureDevelopmentEnvironment.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/configureGeneralInfo.png b/versioned_docs/version-21/QodlyinCloud/console/img/configureGeneralInfo.png
new file mode 100644
index 000000000..4c5f10a43
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/configureGeneralInfo.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/configureSummary.png b/versioned_docs/version-21/QodlyinCloud/console/img/configureSummary.png
new file mode 100644
index 000000000..c3f6aa9b8
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/configureSummary.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/consoleMyApps.png b/versioned_docs/version-21/QodlyinCloud/console/img/consoleMyApps.png
new file mode 100644
index 000000000..a7fe6bee1
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/consoleMyApps.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/consoleOverview.png b/versioned_docs/version-21/QodlyinCloud/console/img/consoleOverview.png
new file mode 100644
index 000000000..be27face1
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/consoleOverview.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/consoleSandbox.png b/versioned_docs/version-21/QodlyinCloud/console/img/consoleSandbox.png
new file mode 100644
index 000000000..55f396944
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/consoleSandbox.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/consoleSharedApplications.png b/versioned_docs/version-21/QodlyinCloud/console/img/consoleSharedApplications.png
new file mode 100644
index 000000000..70bc4d521
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/consoleSharedApplications.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/declinePayement.png b/versioned_docs/version-21/QodlyinCloud/console/img/declinePayement.png
new file mode 100644
index 000000000..615dd3aa1
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/declinePayement.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/delete.png b/versioned_docs/version-21/QodlyinCloud/console/img/delete.png
new file mode 100644
index 000000000..432202ffa
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/delete.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/deleteUser.png b/versioned_docs/version-21/QodlyinCloud/console/img/deleteUser.png
new file mode 100644
index 000000000..213133fb8
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/deleteUser.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/deploy.png b/versioned_docs/version-21/QodlyinCloud/console/img/deploy.png
new file mode 100644
index 000000000..50a312b69
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/deploy.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/deployed.png b/versioned_docs/version-21/QodlyinCloud/console/img/deployed.png
new file mode 100644
index 000000000..ea99bea8b
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/deployed.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/discard.png b/versioned_docs/version-21/QodlyinCloud/console/img/discard.png
new file mode 100644
index 000000000..e70d4ae3f
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/discard.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/edit.png b/versioned_docs/version-21/QodlyinCloud/console/img/edit.png
new file mode 100644
index 000000000..cab57a155
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/edit.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/editAlert.png b/versioned_docs/version-21/QodlyinCloud/console/img/editAlert.png
new file mode 100644
index 000000000..3257c20bb
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/editAlert.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/editUser1.png b/versioned_docs/version-21/QodlyinCloud/console/img/editUser1.png
new file mode 100644
index 000000000..df0802f90
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/editUser1.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/environementUserList.png b/versioned_docs/version-21/QodlyinCloud/console/img/environementUserList.png
new file mode 100644
index 000000000..b37f404d0
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/environementUserList.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/environments.png b/versioned_docs/version-21/QodlyinCloud/console/img/environments.png
new file mode 100644
index 000000000..bc83867fe
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/environments.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/expand.png b/versioned_docs/version-21/QodlyinCloud/console/img/expand.png
new file mode 100644
index 000000000..fe96ae8c6
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/expand.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/filename.png b/versioned_docs/version-21/QodlyinCloud/console/img/filename.png
new file mode 100644
index 000000000..655a50571
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/filename.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/instanceInformation.png b/versioned_docs/version-21/QodlyinCloud/console/img/instanceInformation.png
new file mode 100644
index 000000000..cc4817bcb
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/instanceInformation.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/invitationsAwaitingResponse.png b/versioned_docs/version-21/QodlyinCloud/console/img/invitationsAwaitingResponse.png
new file mode 100644
index 000000000..80aaf20bd
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/invitationsAwaitingResponse.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/invoices.png b/versioned_docs/version-21/QodlyinCloud/console/img/invoices.png
new file mode 100644
index 000000000..1551907b3
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/invoices.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/myAccount.png b/versioned_docs/version-21/QodlyinCloud/console/img/myAccount.png
new file mode 100644
index 000000000..adf52d89d
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/myAccount.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/newApp.png b/versioned_docs/version-21/QodlyinCloud/console/img/newApp.png
new file mode 100644
index 000000000..0c31a92f0
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/newApp.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/newSandbox.png b/versioned_docs/version-21/QodlyinCloud/console/img/newSandbox.png
new file mode 100644
index 000000000..0ca6ecdcb
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/newSandbox.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/openStudio.png b/versioned_docs/version-21/QodlyinCloud/console/img/openStudio.png
new file mode 100644
index 000000000..0de0f584a
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/openStudio.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/payOnYourOwn.png b/versioned_docs/version-21/QodlyinCloud/console/img/payOnYourOwn.png
new file mode 100644
index 000000000..18ecd93e4
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/payOnYourOwn.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/refresh.png b/versioned_docs/version-21/QodlyinCloud/console/img/refresh.png
new file mode 100644
index 000000000..1f7d10e0c
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/refresh.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/release.png b/versioned_docs/version-21/QodlyinCloud/console/img/release.png
new file mode 100644
index 000000000..3e5be756d
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/release.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/releaseCantBeDeleted1.png b/versioned_docs/version-21/QodlyinCloud/console/img/releaseCantBeDeleted1.png
new file mode 100644
index 000000000..c5edf45dc
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/releaseCantBeDeleted1.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/releaseCantBeDeleted2.png b/versioned_docs/version-21/QodlyinCloud/console/img/releaseCantBeDeleted2.png
new file mode 100644
index 000000000..63d3200d9
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/releaseCantBeDeleted2.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/releaseCouldBeDeleted1.png b/versioned_docs/version-21/QodlyinCloud/console/img/releaseCouldBeDeleted1.png
new file mode 100644
index 000000000..d6a8076b6
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/releaseCouldBeDeleted1.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/releaseCouldBeDeleted2.png b/versioned_docs/version-21/QodlyinCloud/console/img/releaseCouldBeDeleted2.png
new file mode 100644
index 000000000..f09baf941
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/releaseCouldBeDeleted2.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/removeUser.png b/versioned_docs/version-21/QodlyinCloud/console/img/removeUser.png
new file mode 100644
index 000000000..56bab4beb
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/removeUser.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/removeUserfromEnvironments.png b/versioned_docs/version-21/QodlyinCloud/console/img/removeUserfromEnvironments.png
new file mode 100644
index 000000000..467169ad7
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/removeUserfromEnvironments.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/saveChanges.png b/versioned_docs/version-21/QodlyinCloud/console/img/saveChanges.png
new file mode 100644
index 000000000..4e7bfb48f
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/saveChanges.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/sftp.png b/versioned_docs/version-21/QodlyinCloud/console/img/sftp.png
new file mode 100644
index 000000000..444198c86
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/sftp.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/sftpDialog.png b/versioned_docs/version-21/QodlyinCloud/console/img/sftpDialog.png
new file mode 100644
index 000000000..c7653cd9a
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/sftpDialog.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/submit.png b/versioned_docs/version-21/QodlyinCloud/console/img/submit.png
new file mode 100644
index 000000000..f6613a648
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/submit.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionAddEnvironement.png b/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionAddEnvironement.png
new file mode 100644
index 000000000..439085500
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionAddEnvironement.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionAddEnvironement2.png b/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionAddEnvironement2.png
new file mode 100644
index 000000000..b85bc74be
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionAddEnvironement2.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionDelete.png b/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionDelete.png
new file mode 100644
index 000000000..28bc4bcff
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionDelete.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionDelete2.png b/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionDelete2.png
new file mode 100644
index 000000000..d18ea9018
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionDelete2.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionOpen.png b/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionOpen.png
new file mode 100644
index 000000000..9d68a623c
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionOpen.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionOverview.png b/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionOverview.png
new file mode 100644
index 000000000..ba9b0a105
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionOverview.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionOverview2.png b/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionOverview2.png
new file mode 100644
index 000000000..4f44f5825
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionOverview2.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionUpgrade.png b/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionUpgrade.png
new file mode 100644
index 000000000..6562177a1
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionUpgrade.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionUpgradePanel.png b/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionUpgradePanel.png
new file mode 100644
index 000000000..1fbf90e42
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/subscriptionUpgradePanel.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/templateMoreInfo.png b/versioned_docs/version-21/QodlyinCloud/console/img/templateMoreInfo.png
new file mode 100644
index 000000000..3eb84fedd
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/templateMoreInfo.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/templates.png b/versioned_docs/version-21/QodlyinCloud/console/img/templates.png
new file mode 100644
index 000000000..2cc371120
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/templates.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/transferOwnership.png b/versioned_docs/version-21/QodlyinCloud/console/img/transferOwnership.png
new file mode 100644
index 000000000..204f3836f
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/transferOwnership.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/transferOwnership2.png b/versioned_docs/version-21/QodlyinCloud/console/img/transferOwnership2.png
new file mode 100644
index 000000000..0a9e922bd
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/transferOwnership2.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/updateAccount.png b/versioned_docs/version-21/QodlyinCloud/console/img/updateAccount.png
new file mode 100644
index 000000000..506ac9bbc
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/updateAccount.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/upgradeToLatestVersion.png b/versioned_docs/version-21/QodlyinCloud/console/img/upgradeToLatestVersion.png
new file mode 100644
index 000000000..023a2a47d
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/upgradeToLatestVersion.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/userCard.png b/versioned_docs/version-21/QodlyinCloud/console/img/userCard.png
new file mode 100644
index 000000000..401284bbf
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/userCard.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/img/userList.png b/versioned_docs/version-21/QodlyinCloud/console/img/userList.png
new file mode 100644
index 000000000..a576a807d
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/console/img/userList.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/console/myApps.md b/versioned_docs/version-21/QodlyinCloud/console/myApps.md
new file mode 100644
index 000000000..6c32e9f85
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/console/myApps.md
@@ -0,0 +1,175 @@
+---
+id: myApps
+title: My Apps
+---
+
+import Column from '@site/src/components/Column'
+
+## Overview
+
+The **My Apps** area is where you can manage all the applications you’ve created in Qodly, including paid applications and any cloned from the Sandbox environment. This area provides access to essential management options, configuration settings, and monitoring tools, enabling you to control every aspect of your applications.
+
+
+## Creating a New Application
+
+To create an app in the Console, follow the steps below, using the provided screenshots for guidance. Each step includes specific details on the configuration options available during setup.
+
+### Step 1: Navigate to "My Apps"
+
+
+
+
+ Go to the My Apps section in the Console.
+ Click the New App button on the right side of the page or in the sidebar to begin the application creation process.
+
+
+
+
+
+
+
+### Step 2: Choose a Template
+
+After selecting **New App**, you’ll be directed to the **Template Selection** page, where a variety of templates are available to serve as starting points.
+
+1. Browse through the list of templates to find one that fits your project needs. Templates come with pre-configured code and settings suited for different types of projects.
+
+
+ As you make selections for each environment resource, the total estimated cost will be displayed on the upper-right side of the page, allowing you to budget effectively.
+
+
+
+
+
+
+#### Adding Additional Environments
+
+1. Click the **Add Environment** button if you want to configure deployment environments like Staging or Production.
+
+
+
+ For each new environment, provide a Name and a Description .
+ Customize the configuration separately for each environment, allowing you to tailor resources to specific development stages.
+
+
+
+
+
+
+
+### Step 4: Finalize Billing
+
+Upon creating an app, you are prompted to finalize billing by choosing one of two options:
+
+- **Option 1: Pay on Your Own**: Cover the app’s expenses using your own payment method.
+
+
+ If the recipient chooses to decline:
+
+ They are shown a Decline Payment page, allowing them to reject the invitation.
+ Upon declining, the app is permanently deleted, and both parties are notified.
+
+
+
+
+
+:::
+
+
+### Step 5: Access Your New App
+
+After completing the configuration and payment steps:
+
+1. Your development environment will be created, and the app will be listed under **My Apps**.
+2. **Studio Access**: You’ll see an option to open the app in Qodly Studio, where you can start building and customizing your application.
+
+
+Once created, the application will appear in the My Apps list. This list, displays all applications you have created, excluding the Sandbox environment.
\ No newline at end of file
diff --git a/versioned_docs/version-21/QodlyinCloud/console/releaseManagementDeployment.md b/versioned_docs/version-21/QodlyinCloud/console/releaseManagementDeployment.md
new file mode 100644
index 000000000..786bd2a1e
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/console/releaseManagementDeployment.md
@@ -0,0 +1,58 @@
+---
+id: deployManagement
+title: Deploy Management
+---
+
+import Column from '@site/src/components/Column'
+
+
+## Overview
+
+The **Deploy** tab offers crucial tools for managing and deploying application versions in a controlled and organized way. Each step in the deployment process helps ensure your application’s integrity and functionality before it reaches end-users. This tab is typically used to manage staging and production environments, where stable and tested versions are essential.
+
+The key difference between development and deployment environments is the availability of Qodly Studio:
+
+
+
+ The Usage card contains:
+
+ Disk Usage : Shows the percentage of disk storage currently used by the environment, useful for tracking storage limits and understanding data volume.Memory Usage : Displays the memory consumption percentage, allowing you to monitor memory use and scale resources as needed.
+
+
+
+
+
+#### 2. **Users**:
+
+
+
+ The Users card indicates the number of users with access to this environment.
+
+
+
+
+
+#### 3. **Server Status**:
+
+
+
+ The Server Status card contains:
+
+ Status : Whether the server is operational and accessible.Control Buttons :
+ Stop : Stops the server, making it unavailable temporarily.Restart : Restarts the server, which can be useful for troubleshooting or applying configurations.Refresh : Updates the server status display, allowing you to check the latest status.
+
+
+
+
+
+
+
+### Application Access
+
+This section provides links for accessing the application through different URLs, depending on the environment's authentication and access configuration:
+
+
+
+ Qodly Studio URL directs to the environment directly in Qodly Studio, where you can develop and configure the application. You can either open this in a new tab or copy the URL.
+
+
+
+
+
+#### 2. **Authenticated URL**:
+
+
+
+ The Authenticated URL directs to a login-protected version of the application, where only users in the application’s user registry have access. This link ensures that only authorized users can access this environment securely. You can either open this in a new tab or copy the URL.
+
+
+
+
+
+#### 3. **Public URL (Development Environment Only)**:
+
+
+
+ The Authenticated URL provides a publicly accessible URL, allowing anyone to access the application without authentication. This is useful for exposing specific pages to the public or setting up custom login management.
+
+
+
+
+
+ - **Activate Public Access**: Click to enable public access. A confirmation dialog will appear to verify your choice.
+
+ - **Deactivate Public Access**: Click to remove public access, making the environment private again.
+
+ - **Copy Link**: Copies the URL for easy sharing.
+
+ :::note
+ By default, the public URL is disabled. You can **Activate public access** to make the environment publicly accessible, suitable for applications that don't require authentication for end users.
+ :::
+
+#### 4. **Custom Domain (Deployment Environment Only)**:
+
+Allows you to use a custom domain for the application in deployment environments (such as Staging or Production) to create a professional, branded experience.
+
+
+
+
+ Add Custom Domain :
+
+ Click the Add Custom Domain button, which opens a dialog for setting up your custom domain.
+ In the Set Custom Domain dialog, enter your domain name.
+
+
+
+
+
+
+
+
+
+
+ Using Your Own SSL Certificate : For enhanced security, you can add a custom SSL certificate by selecting "I want to use my own certificate file," which opens fields to enter.
+
+ Certificate Body : Paste the content of your SSL certificate.Certificate Chain (optional) : Provide the certificate chain if required by your SSL provider.Private Key : Input the private key associated with your certificate.
+
+
+
+
+
+
+### Activity
+
+The **Activity** section logs significant events and actions taken within the environment, offering an audit trail for tracking changes. Typical entries include:
+
+- **Create Application**: Logs the creation of the environment.
+- **Server Actions**: Logs actions like server start, stop, or restart.
+- **Updates**: Tracks version updates and configuration changes.
+
+
+
+ Each activity entry includes:
+
+ Description : Summarizes the action taken (e.g., server start).
+ Timestamp : Provides the date and time the action occurred.
+ User : Indicates which user performed the action.
+
+
+
+
+
+
+## Metrics Tab
+
+In the **Metrics** tab, you have access to detailed monitoring graphs for various performance metrics in your application environment. This tab allows you to visualize resource consumption over time, enabling effective tracking and optimization.
+
+At the top of the Metrics tab, there is a date range selector where you can specify the time period you want to analyze. The refresh button allows you to reload the metrics for the most up-to-date data. Also, each graph includes an export icon, allowing you to save the graph as an image. This feature is helpful for reporting or further analysis outside the Console.
+
+### CPU Usage (%)
+This chart displays the percentage of CPU capacity utilized by the application over a selected time period. It helps you identify peaks in CPU demand, allowing you to understand processing load and optimize your application’s performance accordingly.
+
+### Memory Usage (%)
+The memory usage graph shows the percentage of RAM currently being used by the application. Monitoring memory helps ensure your application has sufficient resources and can inform you if additional memory allocation is needed.
+
+### Disk Usage (%)
+This metric illustrates the percentage of disk storage currently occupied. Disk usage monitoring is crucial for applications with large datasets or significant storage requirements.
+
+### Network RX IN (Bytes)
+Network RX IN shows the incoming data received by your environment, measured in bytes. This metric is useful for tracking inbound data, which can help identify if your application is receiving high volumes of data at any given time.
+
+### Network TX OUT (Bytes)
+Network TX OUT displays the outgoing data transmitted from your environment. This metric is essential for monitoring outbound data usage, particularly if your application regularly sends data to external sources.
+
+### Network Transmitted (Kilobytes)
+This metric indicates the total data transmitted over the network, aggregated over time in kilobytes. It provides a broader view of your network usage, helping you manage data transmission and avoid potential network bottlenecks.
+
+
+## Logs Tab
+
+The **Logs Tab** in the Console provides access to detailed log records for monitoring, debugging, and tracking system events within your application environments. This tab allows you to filter and download logs based on a specific date range and log file type.
+
+:::tip
+The Date Range Selection feature allows you to filter log entries to a specific period:
+
+- Start Date: Select the beginning date and time for the logs you want to view.
+
+- End Date: Select the ending date and time for the logs.
+
+Using the date range filter helps focus on specific periods, which is especially helpful when investigating incidents or tracking performance over time.
+:::
+
+### Log File Type
+
+This section provides a drop-down menu where you can select the type of logs to view. The available log types include:
+
+ - **qodlySTDOUTLog**: Contains standard output logs from the application, capturing routine system and application messages.
+
+ - **4DDiagnosticLogServer**: Includes diagnostic data related to server performance and behavior, useful for more technical troubleshooting and server analysis.
+
+:::note
+
+You can write custom information in the diagnostic log file thanks to the [`logEvent()`](../qodlyScript/commands/logEvent.md) command.
+
+:::
+
+Once you select a log type, click Refresh to update the log data based on the selected type and date range.
+
+:::info
+The Refresh Button updates the log display with the latest entries that match your selected date range and log type. This is especially useful after changing filters or when logs are dynamically updated during active monitoring.
+:::
+
+### Log Entries Display
+
+The Log Entries Display shows a list of log events that match your selected filters. Each entry contains:
+
+- **Date**: The date and time of the log event.
+- **Log Details**: Describes the event or action, including any associated identifiers, error messages, and user actions. Like:
+ - `INFO - New user connected`: Indicates a successful user connection to the system, along with specific identifiers like task ID and hostname.
+ - `ERROR - cannot create socket`: Shows an error with details on the task attempting the action, which helps in diagnosing network or socket issues.
+
+
+### Downloading Logs
+
+The Download Button enables you to export the filtered log entries:
+
+- After specifying the date range and log type, click Download to save the log data as a file.
+
+- This file is useful for offline analysis, reporting, or archiving log data for future reference.
diff --git a/versioned_docs/version-21/QodlyinCloud/console/sandbox.md b/versioned_docs/version-21/QodlyinCloud/console/sandbox.md
new file mode 100644
index 000000000..3c8ee006c
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/console/sandbox.md
@@ -0,0 +1,83 @@
+---
+id: sandbox
+title: Sandbox
+---
+
+import Column from '@site/src/components/Column'
+
+## Overview
+
+The Sandbox in Qodly is a free environment designed for exploring, testing, and learning. It’s ideal for trying out new templates, previewing Qodly features, and experimenting with the platform without any cost or commitment. However, it has limitations to ensure it's used for trial purposes only:
+
+:::info
+The Sandbox environment is restricted and has specific limitations to prevent long-term use or complex deployment scenarios.
+:::
+
+## Usage Rules
+
+Using the Sandbox environment comes with certain rules and limitations:
+
+- **Trial Usage**: Ideal for trying out Qodly features, familiarizing yourself with the platform, or creating a demo for stakeholders.
+
+- **Limited to One Sandbox per User**: Each user can only create one Sandbox application. However, if needed, you can delete your current Sandbox and create a new one at any time.
+
+- **Single Development Environment**: Unlike regular applications, the Sandbox only includes a single development environment. Additional environments cannot be added.
+
+- **No Backup or Support**: The Sandbox environment is not backed up, and no official support is provided. It is designed for exploration and testing.
+
+- **Watermarked Pages**: All pages within the Sandbox display a watermark, indicating that it is a trial environment.
+
+- **Resource Restrictions**: The Sandbox environment is set to the default configuration, similar to the lowest-tier paid environment (Power 1, 100GB storage, and 1GB data outbound).
+
+
+## Creating the Sandbox
+
+To create a new Sandbox, follow these steps:
+
+
+
+
+ Access the Console : Open the Console.
+ Click on "New Sandbox" : Select the "New Sandbox" button to initiate the creation process.
+
+
+
+
+
+
+
+- **Select a Template**:
+
+ 1. Browse through the list of templates to find one that fits your project needs. Templates come with pre-configured code and settings suited for different types of projects.
+
+
+
+ First Name and Last Name (optional).Email Address (mandatory).Select an Environment to associate the user with.
+ Assign a Profile (e.g., Admin, Viewer).
+
+
+
+
+
+
+4. Click **Submit**.
+
+Users added via the Users Page are listed as individual cards on the page. Each card displays the user’s email address and tags indicating their assigned environments.
+
+
+
+
+ Navigate to the Users Page and identify the user whose details you want to edit.
+ Expand
+ Click the
+
+
+
+
+
+
+
+
+
+ Modify the following fields as needed:
+
+ First Name and Last Name .Profile for the selected environment.
+ Click Update .
+
+
+
+
+
+
+:::tip Outcome:
+
+The updated details will immediately reflect in:
+- The Users Page for the corresponding environment tag.
+- The Team Tab of the associated environment.
+:::
+
+
+### Delete User
+
+To completely delete a user from the application, removing them from all environments where they are assigned, follow the steps below:
+
+
+
+
+ Navigate to the Users Page and identify the user you want to delete.
+ Click the Delete User
+
+
+
+
+
+
+
+
+
+ In the confirmation dialog, confirm the deletion to finalize the action.
+
+
+
+
+
+
+:::tip Outcome:
+The user is permanently removed from the app:
+- Their entry is deleted from the Users Page.
+- They are unassigned from all environments.
+- They lose all access to the app and its environments.
+:::
+
+### Remove User from a Specific Environment
+
+Removing a user from a specific environment can be done through the Users Page, while keeping their assignments to other environments intact. Follow these steps:
+
+
+
+
+ Navigate to the Users Page and identify the user you want to remove.
+ Expand
+ Click the
+
+
+
+
+
+
+
+
+
+ In the confirmation dialog, confirm the removal to finalize the action.
+
+
+
+
+
+
+:::tip Outcome:
+
+If the User:
+
+- Has Multiple Environments, the user remains listed in the Users Page and is still assigned to other environments.
+
+- Has Only One Environment, removing the user from their only assigned environment results in their complete deletion from the app.
+
+The removal action ensures data consistency across the Users Page and the corresponding Team Tab of the environment.
+:::
+
+### Add User to a Specific Environment
+
+Adding a user to a specific environment from the **Users Page** is straightforward and ensures that the user gains the appropriate access based on the environment.
+
+
+
+
+ Navigate to the Users Page and identify the user you want to assign to another environment.
+ Click the + Environment
+
+
+
+
+
+
+
+
+
+ Fill in the details in the Add User to Environment dialog:
+
+ The Email Address field will auto-populate with the selected user's email.
+ Optionally, update the First Name and Last Name .
+ Select the desired Environment (e.g., Staging, Production) from the dropdown. The Environment dropdown menu will only display the environments that the user is not yet assigned to. Environments where the user is already added will not appear in the dropdown.
+ Assign a Profile for the selected environment (e.g., Admin, Viewer).
+
+ Click Submit to confirm and finalize the action.
+
+
+
+
+
+
+:::tip Outcome:
+- The user is now assigned to the newly selected environment.
+- The updated assignment is reflected in the user's card on the **Users Page**.
+- The user will also appear in the **Team Tab** of the newly assigned environment.
+:::
+
+
+## Team Tab (Environment-specific)
+
+The Team Tab provides environment-specific user management and is accessible within each environment. This tab is ideal for handling users assigned to a particular environment.
+
+### Add New User to a Specific Environment
+
+
+To add a new user or assign an existing user to the environment you’re managing:
+
+1. Open the **Team Tab** from the selected environment (e.g., Dev, Staging, Production).
+2. Click on the **Add User** button
+
+
+ Existing User :
+ Choose a user from the dropdown, which lists all users previously added to the Users Page.
+ These users could have been added through the Users Page or other environments’ Team Tabs.
+
+ New User :
+ Enter the Email Address of the user you want to add for the first time.
+
+
+
+
+
+
+
+
+
+
+ Fill in the following details:
+
+ First Name and Last Name (optional).Assign a Profile (e.g., Admin, Viewer).
+
+
+
+
+
+
+
+4. Click **Submit**.
+
+:::tip Outcome:
+Users added through the Team Tab for a specific environment are displayed in the user list of that environment.
+
+
+
+ Open the Team Tab from the selected environment (e.g., Dev, Staging, Production.
+ Click the
+
+
+
+
+
+
+
+
+
+ Modify the following fields as needed:
+
+ First Name and Last Name .Profile for the selected environment.
+ Click Update .
+
+
+
+
+
+
+:::tip Outcome:
+
+The updated details will immediately reflect in:
+
+- The Team Tab for the environment where the edits were made.
+
+- The Users Page, showing the updated information for the corresponding environment.
+:::
+
+:::info
+Changes made in the Team Tab do not affect the user’s details in other environments.
+:::
+
+
+### Remove User from a Specific Environment
+
+The Team Tab allows you to remove a user from a specific environment without affecting their assignments in other environments. Follow these steps for an environment-specific user removal:
+
+
+
+
+ Navigate to the Team Tab from the selected environment (e.g., Dev, Staging, Production) and identify the user you want to remove.
+ Click the
+
+
+
+
+
+
+
+
+
+ In the confirmation dialog, confirm the removal to finalize the action.
+
+
+
+
+
+
+:::tip Outcome:
+
+If the User:
+
+- Has Multiple Environments, the user remains listed in the Users Page and is still assigned to other environments.
+
+- Has Only One Environment, removing the user from their only assigned environment results in their complete deletion from the app.
+
+The removal action ensures data consistency across the Users Page and the corresponding Team Tab of the environment.
+:::
+
+
+## Summary of Behavior
+
+| **Action** | **Users Page** | **Team Tab** |
+|-----------------------------|--------------------------------------------|---------------------------------------------|
+| **Add New Users** | Globally add and assign to environments. | Add to the current environment. |
+| **Edit User Details** | Edit for specific environments globally. | Edit for the current environment. |
+| **Delete Users Entirely** | Remove from all environments. | Remove users from the app entirely if the current environment is their only assigned environment. |
+| **Remove from Environment** | Remove from a specific environment only. | Remove from the current environment only. |
\ No newline at end of file
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/access.md b/versioned_docs/version-21/QodlyinCloud/getStarted/access.md
new file mode 100644
index 000000000..2ce80680b
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/getStarted/access.md
@@ -0,0 +1,21 @@
+---
+id: access
+title: User access
+---
+
+Users can connect to Qodly applications through two distinct access modes: **authenticated access** or **public access**.
+
+## Authenticated access
+
+For the authenticated access, the user must be registered in the **Qodly directory** (relying on [Amazon Cognito](https://aws.amazon.com/fr/cognito/) for authentication and storage). You add users to the Qodly directory using the [**Users management page**](../console/userAccountManagement.md) of the Console. In this page, the user is assigned a specific profile, i.e. a [role](../../4DQodlyPro/roles/rolesPrivilegesOverview.md) and allowed to access one or more [enviromnents](../console/environmentsOverview.md) (such as the Development environment).
+
+The user connects to the application via the [**Authenticated URL**](../console/resourceMonitoring.md#application-access) (screen mode) or the [**Endpoint URL**](../console/apiKeys.md) (API mode) of the allowed environment. The [user session](../qodlyScript/SessionClass.md) gets automatically the privileges corresponding to its role at authentication step.
+
+
+## Public access
+
+For the public access, the user connects to the application through the **Public URL** (must be [activated explicitely](../console/resourceMonitoring.md#application-access) in the Console).
+
+The user only has [Guest privilege](../../4DQodlyPro/roles/datastorePermissions.md#introducing-the-guest-privilege) by default ([`Session.isGuest`](../qodlyScript/SessionClass.md#isguest) returns true).
+
+It's up to the Qodly developer to [authenticate the user](../qodlyScript/guides/login.md) and grant them a privilege or role using the [Session class API](../qodlyScript/SessionClass.md). For example, you can get the list of privileges associated to the session using the [`getPrivileges()`](../qodlyScript/SessionClass.md#getprivileges) function, or store user information in the session's [`storage`](../qodlyScript/SessionClass.md#storage) property.
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/community.md b/versioned_docs/version-21/QodlyinCloud/getStarted/community.md
new file mode 100644
index 000000000..fae181380
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/getStarted/community.md
@@ -0,0 +1,25 @@
+---
+id: community
+title: Community and Resources
+---
+
+
+## Join the Community
+
+Participate in forums and user groups:
+
+- [Qodly Community forum](https://community.qodly.com/)
+- [Slack](https://qodly.slack.com/join/shared_invite/zt-20ieeffts-NU57SOXcbakmWgIMnJpStQ#/shared-invite/email)
+- [Facebook](https://www.facebook.com/qodlyby4d)
+- [X](https://x.com/qodlyby4d)
+- [Youtube](https://www.youtube.com/channel/UCLNHKvjJQZ_5D1ziskba6jg)
+- [Linkedin](https://www.linkedin.com/showcase/qodly)
+
+## Documentation
+
+Refer to the [official documentation](https://developer.qodly.com/docs) for detailed guides.
+
+
+## Training and Tutorials
+
+Take advantage of training sessions and [tutorials](https://qodly.com/tutorials).
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/data.md b/versioned_docs/version-21/QodlyinCloud/getStarted/data.md
new file mode 100644
index 000000000..8dc82ddcb
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/getStarted/data.md
@@ -0,0 +1,20 @@
+---
+id: data-management
+title: Data Management
+---
+
+Qodly offers various tools and services to manage and back up your data. You can use different assets for your app, such as icons, photos, videos, and documents, as well as your database data. In this section, you'll find everything you need to manage these types of data.
+
+## Data Explorer
+
+The [Data Explorer](https://developer.4d.com/docs/Admin/dataExplorer) allows you to access and manage your application data seamlessly. From within your studio, you can explore your environment comprehensively, view entities by DataClass, and perform updates or deletions as necessary.
+
+## Automatic backup
+
+In the Qodly Console you can activate the [backup option](../console/dataManagement.md). You can choose the frequency of your full backup. Incremental backup is created every hour in between. You can restore any backup at any time.
+
+Your data are transferred from your environment and backed up in [AWS S3 services](https://aws.amazon.com/s3/). This process ensures that your information is securely stored in the cloud, protecting it from potential data loss or system failures. Using AWS S3, your data benefits from high durability and availability. The service employs advanced encryption methods to safeguard your information both in transit and at rest.
+
+## sFTP access
+
+For downloading or uploading your assets, you have a secure access to your environment via sFTP. For additional information, please refer to the [provided documentation](../console/environmentsOverview.md#access-files-via-sftp).
\ No newline at end of file
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/deployment.md b/versioned_docs/version-21/QodlyinCloud/getStarted/deployment.md
new file mode 100644
index 000000000..aec464043
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/getStarted/deployment.md
@@ -0,0 +1,33 @@
+---
+id: deployment
+title: Deployment
+---
+
+## Publish Your App: Deploy your app to a live environment
+
+When you're ready to deploy your application, you need to do two things: [add a deployment environment](../console/myApps.md#adding-additional-environments) and [create a release](../console/releaseManagementDeployment.md#creating-a-release-in-development) for your application.
+
+To add a new environment, go to the Subscription page and click the "New Environment" button.
+
+To create a new release, go to the Deploy tab in your development environment and click "Create New Release."
+
+Once your new environment is ready, go to its Deploy tab and [deploy the release](../console/releaseManagementDeployment.md#deploying-a-release). Your app will be live in this environment. You can [add your own domain](../console/resourceMonitoring.md#application-access) and configure it with your DNS to make your app accessible with your custom domain. [Data](../console/dataManagement.md) and [users](../console/userAccountManagement.md) are managed by the environment.
+
+
+## Version Control: Manage different versions of your app
+
+In the [Deploy section](../console/releaseManagementDeployment.md), you'll find all the releases you've created. You can organize them however you like: by feature version, client, environment, etc. It's very flexible. You can also restore any release at any time and by environment.
+
+## Monitor Performance
+
+In the ["Metrics" tab](../console/resourceMonitoring.md#metrics-tab), you can track important metrics for each environment. Monitor your application's CPU and memory usage to understand its behavior. You'll receive an email alert if consumption reaches 80%. This helps you decide if you need to upgrade your environment's power. You can upgrade anytime on the Subscription page.
+
+Another key metric is data transfer to the Internet, which includes all data your application sends online. Data consumption is billed per GB each month. You can optimize your budget by selecting an Internet data pack on the Subscription page. You can also set a specific email for notifications here.
+
+## Multi-environments App
+
+For each app, you start with the Development environment. You can then add as many environments as you want without any limitations. For each environment, you can choose the power and storage size, and you can upgrade them at any time. This flexibility allows you to organize your application according to your needs and context.
+
+If you're working alone, your app might only need a single [deployment environment](../console/releaseManagementDeployment.md). If you need a staging environment for testing a new release, simply [add an additional environment](../console/myApps.md#adding-additional-environments) and delete it when you're done testing. If you have one release per client, you can add one environment per client. For a SaaS, you might have one environment per release.
+
+Define your architecture as you like.
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/first-app.md b/versioned_docs/version-21/QodlyinCloud/getStarted/first-app.md
new file mode 100644
index 000000000..b98496f6f
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/getStarted/first-app.md
@@ -0,0 +1,17 @@
+---
+id: first-app
+title: Creating an Application
+---
+
+Here are the main steps in creating a Qodly application:
+
+1. [Clone](../console/consoleOverview.md#managing-applications) an existing app by clicking on "Clone" or start a new app and choose an [application template](../console/myApps.md#creating-a-new-application).
+2. [Set Up App Details](../console/myApps.md#step-3-configure-application-details): Enter the project name, description, and other details.
+3. Choose the [resources](../console/myApps.md#environment-configuration) you need for your development environment.
+4. Add your [billing details](../console/myApps.md#step-4-finalize-billing). You can add your own card or invite someone else to add theirs.
+5. Subscribe.
+6. Your development environment is installed. You can [go to Studio](../../4DQodlyPro/qodlyStudioInterface.md) and start building your app.
+7. A welcome tour will begin for a quick overview of Qodly Studio.
+8. Start from the frontend by [dragging and dropping components](../../4DQodlyPro/pageLoaders/pageLoaderOverview.md) (or widgets) or use [pre-made templates](../../4DQodlyPro/pageLoaders/templates.md). Alternatively, begin by preparing your data using the [Data Model](../cloudOnlyFeatures/model/model-editor-interface.md), [code](../../4DQodlyPro/coding.md) your functions, and then bind them with [Qodly Sources](../../4DQodlyPro/pageLoaders/qodlySources.md) to the frontend.
+9. Manage [roles and privileges](../../4DQodlyPro/roles/rolesPrivilegesOverview.md) in the editor.
+10. Your app is ready for [testing](../../4DQodlyPro/pageLoaders/pageLoaderOverview.md#preview) or [deployment](../console/releaseManagementDeployment.md).
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/img/ClassDiagramImage.png b/versioned_docs/version-21/QodlyinCloud/getStarted/img/ClassDiagramImage.png
new file mode 100644
index 000000000..ba29e2db0
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/getStarted/img/ClassDiagramImage.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/img/alias1.png b/versioned_docs/version-21/QodlyinCloud/getStarted/img/alias1.png
new file mode 100644
index 000000000..1ae9ca757
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/getStarted/img/alias1.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/img/cloud-archi.svg b/versioned_docs/version-21/QodlyinCloud/getStarted/img/cloud-archi.svg
new file mode 100644
index 000000000..dcf9f4121
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/getStarted/img/cloud-archi.svg
@@ -0,0 +1,248 @@
+
+
+
+
+
+
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/img/cloud-schema.png b/versioned_docs/version-21/QodlyinCloud/getStarted/img/cloud-schema.png
new file mode 100644
index 000000000..50082b302
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/getStarted/img/cloud-schema.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/img/cloud.png b/versioned_docs/version-21/QodlyinCloud/getStarted/img/cloud.png
new file mode 100644
index 000000000..a3c92495a
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/getStarted/img/cloud.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/img/console.png b/versioned_docs/version-21/QodlyinCloud/getStarted/img/console.png
new file mode 100644
index 000000000..c0475ece5
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/getStarted/img/console.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/img/entityRef1.png b/versioned_docs/version-21/QodlyinCloud/getStarted/img/entityRef1.png
new file mode 100644
index 000000000..d10f86657
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/getStarted/img/entityRef1.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/img/entityRef2.png b/versioned_docs/version-21/QodlyinCloud/getStarted/img/entityRef2.png
new file mode 100644
index 000000000..6c72b2b14
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/getStarted/img/entityRef2.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/img/full-stack.png b/versioned_docs/version-21/QodlyinCloud/getStarted/img/full-stack.png
new file mode 100644
index 000000000..8dc923e75
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/getStarted/img/full-stack.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/img/functions-schema.png b/versioned_docs/version-21/QodlyinCloud/getStarted/img/functions-schema.png
new file mode 100644
index 000000000..1aefea5fd
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/getStarted/img/functions-schema.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/img/optimisticLock1.png b/versioned_docs/version-21/QodlyinCloud/getStarted/img/optimisticLock1.png
new file mode 100644
index 000000000..26a56f140
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/getStarted/img/optimisticLock1.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/img/optimisticLock2.png b/versioned_docs/version-21/QodlyinCloud/getStarted/img/optimisticLock2.png
new file mode 100644
index 000000000..e0afef860
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/getStarted/img/optimisticLock2.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/img/optimisticLock3.png b/versioned_docs/version-21/QodlyinCloud/getStarted/img/optimisticLock3.png
new file mode 100644
index 000000000..c1df35199
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/getStarted/img/optimisticLock3.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/img/orda-schema.png b/versioned_docs/version-21/QodlyinCloud/getStarted/img/orda-schema.png
new file mode 100644
index 000000000..921987247
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/getStarted/img/orda-schema.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/img/orda-schema3.png b/versioned_docs/version-21/QodlyinCloud/getStarted/img/orda-schema3.png
new file mode 100644
index 000000000..b03aeffb6
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/getStarted/img/orda-schema3.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/img/qodlydb.png b/versioned_docs/version-21/QodlyinCloud/getStarted/img/qodlydb.png
new file mode 100644
index 000000000..7bb49ddc9
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/getStarted/img/qodlydb.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/img/qodlydb2.png b/versioned_docs/version-21/QodlyinCloud/getStarted/img/qodlydb2.png
new file mode 100644
index 000000000..b534a58c5
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/getStarted/img/qodlydb2.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/img/structure.png b/versioned_docs/version-21/QodlyinCloud/getStarted/img/structure.png
new file mode 100644
index 000000000..d2ab5c750
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/getStarted/img/structure.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/img/structure2.png b/versioned_docs/version-21/QodlyinCloud/getStarted/img/structure2.png
new file mode 100644
index 000000000..1bc843d98
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/getStarted/img/structure2.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/img/structure3.png b/versioned_docs/version-21/QodlyinCloud/getStarted/img/structure3.png
new file mode 100644
index 000000000..a1ee9e574
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/getStarted/img/structure3.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/img/structure4.png b/versioned_docs/version-21/QodlyinCloud/getStarted/img/structure4.png
new file mode 100644
index 000000000..2ddb1e338
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/getStarted/img/structure4.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/img/structure5.png b/versioned_docs/version-21/QodlyinCloud/getStarted/img/structure5.png
new file mode 100644
index 000000000..6d424bb85
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/getStarted/img/structure5.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/img/structure6.png b/versioned_docs/version-21/QodlyinCloud/getStarted/img/structure6.png
new file mode 100644
index 000000000..432467615
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/getStarted/img/structure6.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/payments.md b/versioned_docs/version-21/QodlyinCloud/getStarted/payments.md
new file mode 100644
index 000000000..ae5cd37e8
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/getStarted/payments.md
@@ -0,0 +1,10 @@
+---
+id: payments
+title: Payments and Invoices
+---
+
+
+On the [Billing page](../console/billingSubscriptionManagement.md), you can view all your invoices, the amount of your next invoice, and your credit card information. Qodly uses Stripe to handle payments. If you have a Stripe account, you can use it, or you can add your own card. You can change your card at any time.
+
+If there's an issue with the credit card during renewal, you will automatically receive email alerts from [Stripe](https://stripe.com). You will have very limited access for one month, after which your application will be automatically deleted. Please address the problem promptly as soon as you receive the Stripe notification.
+
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/refunds.md b/versioned_docs/version-21/QodlyinCloud/getStarted/refunds.md
new file mode 100644
index 000000000..25ad08a0e
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/getStarted/refunds.md
@@ -0,0 +1,9 @@
+---
+id: refunds
+title: Refunds
+---
+
+
+If you're not happy with your Qodly subscription, you can cancel at any time. For any more information, please contact our Sales team at [contact@qodly.com](mailto:contact@qodly.com)
+
+No refunds are given for cancellations. If the Company suspends or terminates your Account or these Terms, you will not receive any refund for unused subscription time, fees, content, data, or anything else.
\ No newline at end of file
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/subscriptions.md b/versioned_docs/version-21/QodlyinCloud/getStarted/subscriptions.md
new file mode 100644
index 000000000..dff0fc83b
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/getStarted/subscriptions.md
@@ -0,0 +1,36 @@
+---
+id: subscriptions
+title: Subscriptions
+---
+
+
+## Pricing Model
+
+The pricing model in Qodly is simple and flexible. It is based on the environment, the configuration of the environment, and the data transferred to the internet.
+
+Fixed price plan by environment includes standard settings for power, storage, and a pack of internet data. The price per environment increases if you upgrade the power or storage. At the beginning of the next month, we will calculate the data transferred, and you will be billed for any overage data consumed.
+
+If you can estimate your data usage in advance, we recommend upgrading your data plan. The cost per GB is lower, which will save you money. You can decrease the plan at any time.
+
+## Pricing & Account Management
+
+For our most up-to-date information, please visit [Qodly pricing](https://qodly.com/pricing).
+
+## Subscription & Upgrade (coming soon)
+
+Once you created your new application, on the [Subscription page](../console/billingSubscriptionManagement.md), you can manage all your subscriptions, including creating new environments, upgrading, or deleting them. It provides a global view for each application.
+
+The billing cycle starts at the beginning of the month. Depending on the day you subscribe or upgrade, the difference will be calculated and invoiced.
+
+## Downgrade (coming soon)
+
+## Cancelation
+
+You can cancel at any time in any environment, except the development one, or even cancel the entire application. Your subscription is canceled immediately.
+
+:::warning
+
+We highly recommend downloading your assets and exporting your backup before canceling.
+
+:::
+
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/support.md b/versioned_docs/version-21/QodlyinCloud/getStarted/support.md
new file mode 100644
index 000000000..217dbbd74
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/getStarted/support.md
@@ -0,0 +1,18 @@
+---
+id: support
+title: Developer Support Policy
+---
+
+
+
+## Bug Reports
+
+To submit a bug, visit [support.qodly.com](https://support.qodly.com) and open a ticket. Our Support and engineering teams will handle it, and you can track the progress.
+
+## Support Hours
+
+Our support team is available from 9 AM to 6 PM Central European Time (CET), from Monday to Friday.
+
+## How To Reach Us
+
+Developers may contact us through our [Slack channels](https://qodly.slack.com/join/shared_invite/zt-20ieeffts-NU57SOXcbakmWgIMnJpStQ#/shared-invite/email) or arrange a meeting with our [Qodly Developer Success Team](https://calendly.com/ametwalli/meet-ayoub). We are also available via email at [contact@qodly.com](mailto:contact@qodly.com).
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/test-debug.md b/versioned_docs/version-21/QodlyinCloud/getStarted/test-debug.md
new file mode 100644
index 000000000..b390622e4
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/getStarted/test-debug.md
@@ -0,0 +1,13 @@
+---
+id: test-debug
+title: Testing and Debugging
+---
+
+Different tools are available for testing at any time during your development, integration, and staging phases.
+
+During development, you have two levels of preview: [page level](../../4DQodlyPro/rendering.md#preview-in-qodly-studio) and [application level](../../4DQodlyPro/rendering.md#preview-the-entire-site). During creating your page, you can preview it at any time.
+
+The previewer lets you view the entire application, making it easy to test all behaviors. If you find a bug, you can activate the [debugger](../../4DQodlyPro/debugging.md), which will guide you step by step to fix it.
+To check your data, use the [Data Explorer](https://developer.4d.com/docs/Admin/dataExplorer) to navigate or edit it.
+
+You can also [invite users](../console/userAccountManagement.md#add-user-to-a-specific-environment) with specific roles to test the application externally, which is the best way to gather their feedback.
diff --git a/versioned_docs/version-21/QodlyinCloud/getStarted/updates.md b/versioned_docs/version-21/QodlyinCloud/getStarted/updates.md
new file mode 100644
index 000000000..f92abd5ca
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/getStarted/updates.md
@@ -0,0 +1,41 @@
+---
+id: updates
+title: Updates and Versioning
+---
+
+
+
+## Releases
+
+Qodly uses Semantic versioning (also known as *SemVer*) with the format (Major.Minor.Patch).
+
+
+### Major Releases
+
+A major release brings significant changes to Qodly, posing potential risks to your application. Verify compatibility before upgrading is highly recommended.
+
+These updates are made every one or two years and include core changes such as the evolution of ORDA or QodlyScript, the addition of a new technology, and/or significant changes in Qodly Server.
+
+We support two major releases at a time.
+
+### Minor Releases
+
+A minor release introduces new features that enhance productivity and efficiency, resulting in a second number increment.
+
+
+### Patch Releases
+
+A patch release fixes bugs without adding new features, incrementing the third number.
+
+## How to Upgrade
+
+The following steps are required to upgrade your Qodly application:
+
+1. Create a [new release](../console/releaseManagementDeployment.md)
+2. Update the Development environment
+3. [Test the app](test-debug.md)
+4. Fix any bugs
+5. Once tests are successful, create a new release
+6. Deploy to the QA environment
+7. If everything is fine, deploy to Production environment
+8. Notify users if necessary.
diff --git a/versioned_docs/version-21/QodlyinCloud/img/qs1.png b/versioned_docs/version-21/QodlyinCloud/img/qs1.png
new file mode 100644
index 000000000..90acbfd64
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/img/qs1.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/img/qs2.png b/versioned_docs/version-21/QodlyinCloud/img/qs2.png
new file mode 100644
index 000000000..65f93e245
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/img/qs2.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/img/qs3.png b/versioned_docs/version-21/QodlyinCloud/img/qs3.png
new file mode 100644
index 000000000..c6b088dc7
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/img/qs3.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/img/qs4.png b/versioned_docs/version-21/QodlyinCloud/img/qs4.png
new file mode 100644
index 000000000..98de1a497
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/img/qs4.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/img/qs5.png b/versioned_docs/version-21/QodlyinCloud/img/qs5.png
new file mode 100644
index 000000000..0fb366125
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/img/qs5.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/img/qs5bis.png b/versioned_docs/version-21/QodlyinCloud/img/qs5bis.png
new file mode 100644
index 000000000..ac9bc35f6
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/img/qs5bis.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/img/qs6.png b/versioned_docs/version-21/QodlyinCloud/img/qs6.png
new file mode 100644
index 000000000..529a1a6b6
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/img/qs6.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/img/qs7.png b/versioned_docs/version-21/QodlyinCloud/img/qs7.png
new file mode 100644
index 000000000..6959e5b62
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/img/qs7.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/img/qs8.png b/versioned_docs/version-21/QodlyinCloud/img/qs8.png
new file mode 100644
index 000000000..e2c13b4c9
Binary files /dev/null and b/versioned_docs/version-21/QodlyinCloud/img/qs8.png differ
diff --git a/versioned_docs/version-21/QodlyinCloud/qodlyScript/BlobClass.md b/versioned_docs/version-21/QodlyinCloud/qodlyScript/BlobClass.md
new file mode 100644
index 000000000..36e74f142
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/qodlyScript/BlobClass.md
@@ -0,0 +1,82 @@
+---
+id: BlobClass
+title: Blob
+---
+
+The Blob class lets you create and manipulate [blob objects](basics/lang-blob.md#blob-types) (`4D.Blob`).
+
+### Summary
+
+||
+|---|
+|[](#4dblobnew) |
+|[](#size) |
+|[](#slice) |
+
+## 4D.Blob.new()
+
+
+**4D.Blob.new**() : 4D.Blob`](basics/lang-classes.md#extends-classname) keyword.
+
+This property is **read-only**.
+
+#### Examples
+
+```qs
+var sup: variant
+sup = 4D.File.superclass //Document
+sup = 4D.Document.superclass //Object
+sup = 4D.Object.superclass //null
+
+// If you created a MyFile class
+// with `extends File`
+sup = cs.MyFile.superclass //File
+
+```
+
+
+
+**See also:** [Super](basics/lang-classes.md#super)
+
diff --git a/versioned_docs/version-21/QodlyinCloud/qodlyScript/CollectionClass.md b/versioned_docs/version-21/QodlyinCloud/qodlyScript/CollectionClass.md
new file mode 100644
index 000000000..22962b306
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/qodlyScript/CollectionClass.md
@@ -0,0 +1,3140 @@
+---
+id: CollectionClass
+title: Collection
+---
+
+
+The Collection class manages [collection](basics/lang-collection.md) type elements.
+
+
+
+### Example
+
+```qs
+ var c : collection //declaration of collection type variable
+ c = newCollection() //initialization of the collection and assignment to the variable
+ c.push("Hello",42,{o : "World"}) // c contains [Hello,42,{"o":"World"}]
+```
+
+
+### Functions and properties
+
+
+||
+|---|
+|[](#at) |
+|[](#average) |
+|[](#clear) |
+|[](#combine) |
+|[](#concat) |
+|[](#copy) |
+|[](#count) |
+|[](#countvalues) |
+|[](#distinct) |
+|[](#equal) |
+|[](#every) |
+|[](#extract) |
+|[](#fill) |
+|[](#filter) |
+|[](#find) |
+|[](#find) |
+|[](#first) |
+|[](#flat) |
+|[](#flatmap) |
+|[](#includes) |
+|[](#indexof) |
+|[](#indices) |
+|[](#insert) |
+|[](#join) |
+|[](#last) |
+|[](#lastindexof) |
+|[](#length) |
+|[](#map) |
+|[](#max) |
+|[](#min) |
+|[](#multisort) |
+|[](#orderby) |
+|[](#orderbymethod) |
+|[](#pop) |
+|[](#push) |
+|[](#query) |
+|[](#reduce) |
+|[](#reduceright) |
+|[](#remove) |
+|[](#resize) |
+|[](#reverse) |
+|[](#shift) |
+|[](#slice) |
+|[](#some) |
+|[](#sort) |
+|[](#sum) |
+|[](#unshift) |
+
+
+
+
+## .at()
+
+**.at**( *index* : integer ) : any
+
+
+
+|Parameter|Type||Description|
+|---------|--- |:---:|------|
+|index|integer|→|Index of element to return|
+|Result|any |←|The element at that index|
+
+
+#### Description
+
+The `.at()` function returns the item at position *index*, allowing for positive and negative integers.
+
+
+
+>This function does not modify the original collection.
+
+Negative integers count back from the last item in the collection.
+
+The function returns Undefined if *index* is beyond collection limits.
+
+#### Example
+
+
+
+```qs
+var col : collection
+col = newCollection(10, 20, 30, 40, 50)
+element = col.at(0) // 10
+element = col.at(1) // 20
+element = col.at(-1) // 50
+element = col.at(-2) // 40
+element = col.at(10) // undefined
+```
+
+
+
+
+
+## .average()
+
+**.average**( \{*propertyPath* : string \} ) : number
+
+
+
+|Parameter|Type||Description|
+|---------|--- |:---:|------|
+|propertyPath|string|→|object property path to be used for calculation|
+|Result|number, undefined|←|Arithmetic mean (average) of collection values|
+
+
+
+#### Description
+
+The `.average()` function returns the arithmetic mean (average) of defined values in the collection instance.
+
+
+
+Only numerical elements are taken into account for the calculation (other element types are ignored).
+
+If the collection contains objects, pass the *propertyPath* parameter to indicate the object property to take into account.
+
+`.average()` returns `undefined` if:
+
+* the collection is empty,
+* the collection does not contain numerical elements,
+* *propertyPath* is not found in the collection.
+
+
+#### Example 1
+
+```qs
+ var col : collection
+ var vAvg : integer
+ col = newCollection(10,20,"Monday",true,6)
+ vAvg = col.average() //12
+```
+
+#### Example 2
+
+```qs
+ var col : collection
+ var vAvg : integer
+ col = newCollection()
+ col.push(newObject("name","Smith","salary",10000))
+ col.push(newObject("name","Wesson","salary",50000))
+ col.push(newObject("name","Gross","salary",10500))
+ vAvg = col.average("salary") //23500
+```
+
+
+
+
+
+
+## .clear()
+
+**.clear**() : collection
+
+
+
+|Parameter|Type||Description|
+|---------|--- |:---:|------|
+|Result|collection|←|Original collection with all elements removed|
+
+
+#### Description
+
+The `.clear()` function removes all elements from the collection instance and returns an empty collection.
+
+>This function modifies the original collection.
+
+#### Example
+
+```qs
+var col : collection
+col = newCollection(1,2,5)
+col.clear()
+//col.length: 0
+```
+
+
+
+
+
+
+
+
+## .combine()
+
+**.combine**( *col2* : collection \{, *index* : integer \} ) : collection
+
+
+
+|Parameter|Type||Description|
+|---------|--- |:---:|------|
+|col2|collection|→|collection to combine|
+|index|integer|→|Position to which insert elements to combine in collection (default = length+1)|
+|Result|collection|←|Original collection containing combined element(s)|
+
+
+#### Description
+
+The `.combine()` function inserts *col2* elements at the end or at the specified *index* position in the collection instance and returns the edited collection. Unlike the `.insert()` function, `.combine()` adds each value of *col2* in the original collection, and not as a single collection element.
+
+>This function modifies the original collection.
+
+By default, *col2* elements are added at the end of the orginal collection. You can pass in *index* the position where you want the *col2* elements to be inserted in the collection.
+
+>**Warning**: Keep in mind that collection elements are numbered from 0.
+
+* If *index* > the length of the collection, the actual starting *index* will be set to the length of the collection.
+* If *index* < 0, it is recalculated as *index = index+length* (it is considered as the offset from the end of the collection).
+* If the calculated value is negative, *index* is set to 0.
+
+
+#### Example
+
+```qs
+var c, fruits : collection
+c = newCollection(1,2,3,4,5,6)
+fruits = newCollection("Orange","Banana","Apple","Grape")
+c.combine(fruits,3) //[1,2,3,"Orange","Banana","Apple","Grape",4,5,6]
+```
+
+
+
+
+
+
+
+
+## .concat()
+
+**.concat**( *value* : any \{ *,...valueN* \} ) : collection
+
+
+
+|Parameter|Type||Description|
+|---------|--- |:---:|------|
+|value|integer, number, string, object, collection, date, time, boolean, picture|→|Value(s) to concatenate. If *value* is a collection, all collection elements are added to the original collection|
+|Result|collection|←|New collection with value(s) added to the original collection|
+
+
+#### Description
+
+The `.concat()` function returns a new collection containing the elements of the original collection with all elements of the *value* parameter added to the end.
+
+>This function does not modify the original collection.
+
+If *value* is a collection, all its elements are added as new elements at the end of the original collection. If *value* is not a collection, it is added itself as a new element.
+
+
+#### Example
+
+```qs
+var c,c2, fruits : collection
+c = newCollection(1,2,3,4,5)
+fruits = newCollection("Orange","Banana","Apple","Grape")
+fruits.push(newObject("Intruder","Tomato"))
+c2 = c.concat(fruits) //[1,2,3,4,5,"Orange","Banana","Apple","Grape",{"Intruder":"Tomato"}]
+c2 = c.concat(6,7,8) //[1,2,3,4,5,6,7,8]
+```
+
+
+
+
+
+
+
+## .copy()
+
+**.copy**() : collectionlength(string($1.value2))))
+ //c2:[Passion fruit,Blackberry,Orange,Banana,Apple,Grape,pear,fig]
+```
+
+#### Example 3
+
+You want to sort a collection by character code or language:
+
+```qs
+var strings1, strings2 : collection
+strings1 = newCollection("Alpha","Charlie","alpha","bravo","Bravo","charlie")
+
+//using the character code:
+strings2 = strings1.orderByMethod(formula(sortcollection),sk character codes)
+// result : ["Alpha","Bravo","Charlie","alpha","bravo","charlie"]
+
+//using the language:
+strings2 = strings1.orderByMethod(formula(sortcollection),sk strict)
+// result : ["alpha","Alpha","bravo","Bravo","charlie","Charlie"]
+```
+
+The ***sortcollection*** method:
+
+```qs
+var $1: object
+var $2: integer // sort option
+
+$1.result = (compareStrings($1.value,$1.value2,$2)<0)
+```
+
+
+
+
+
+
+
+
+## .pop()
+
+
+**.pop**() : any
+
+
+
+|Parameter|Type||Description|
+|---------|--- |:---:|------|
+|Result|any |←|Last element of collection|
+
+
+#### Description
+
+The `.pop()` function removes the last element from the collection and returns it as the function result.
+
+>This function modifies the original collection.
+
+When applied to an empty collection, `.pop()` returns ***undefined***.
+
+#### Example
+
+`.pop()`, used in conjunction with [`.push()`](#push), can be used to implement a first-in, last-out stack feature:
+
+```qs
+ var stack : collection
+ var result : variant
+ stack = newCollection() //stack:[]
+ stack.push(1,2) //[1,2]
+ result = stack.pop() //[1], returns 2
+ stack.push(newCollection(4,5)) //[1,[4,5]]
+ result = stack.pop() //[1], returns [4,5]
+ result = stack.pop() //[], returns 1
+```
+
+
+
+
+
+
+
+
+
+## .push()
+
+**.push**( *element* : any \{ ,...*elementN* \} ) : collection
+
+
+
+|Parameter|Type||Description|
+|---------|--- |:---:|------|
+|element|any|→|Element(s) to add to the collection|
+|Result|collection |←|Original collection containing added elements|
+
+
+#### Description
+
+The `.push()` function appends one or more *element*(s) to the end of the collection instance and returns the edited collection.
+
+>This function modifies the original collection.
+
+
+#### Example 1
+
+```qs
+ var col : collection
+ col = newCollection(1,2) //col:[1,2]
+ col.push(3) //[1,2,3]
+ col.push(6,newObject("firstname","John","lastname","Smith"))
+ //col:[1,2,3,6,{firstname:John,lastname:Smith}
+```
+
+
+
+#### Example 2
+
+You want to sort the resulting collection:
+
+```qs
+ var col, sortedCol : collection
+ col = newCollection(5,3,9) //col:[5,3,9]
+ sortedCol = col.push(7,50).sort()
+ //col:[5,3,9,7,50]
+ //sortedCol:[3,5,7,9,50]
+```
+
+
+
+
+
+
+
+
+
+
+## .query()
+
+**.query**( *queryString* : string , *...value* : any ) : collectionType Description string attributePath expressed using the dot notation, e.g. "name" or "user.address.zipCode" collection of strings Each string of the collection represents a level of attributePath, e.g. \["name"] or \["user","address","zipCode"]. Using a collection allows querying on attributes with names that are not compliant with dot notation, e.g. \["Qodly1.1","en/fr"]
You can mix indexed placeholders (values directly passed in *value* parameters) and named placeholder values in the same query.|
+
+> Using this parameter is mandatory if you want to query a collection [using a **collection reference** or **object reference**](#object-or-collection-reference-as-value).
+
+
+
+
+#### Example 1
+
+
+
+```qs
+ var c, c2, c3 : collection
+ c = newCollection()
+ c.push(newObject("name","Cleveland","zc",35049))
+ c.push(newObject("name","Blountsville","zc",35031))
+ c.push(newObject("name","Adger","zc",35006))
+ c.push(newObject("name","Clanton","zc",35046))
+ c.push(newObject("name","Clanton","zc",35045))
+ c2 = c.query("name = :1","Cleveland") //c2:[{name:Cleveland,zc:35049}]
+ c3 = c.query("zc > 35040") //c3:[{name:Cleveland,zc:35049},{name:Clanton,zc:35046},{name:Clanton,zc:35045}]
+```
+
+
+#### Example 2
+
+
+
+```qs
+ var c : collection
+ c = newCollection()
+ c.push(newObject("name","Smith","dateHired",!22-05-2002!,"age",45))
+ c.push(newObject("name","Wesson","dateHired",!30-11-2017!))
+ c.push(newObject("name","Winch","dateHired",!16-05-2018!,"age",36))
+
+ c.push(newObject("name","Sterling","dateHired",!10-5-1999!,"age",null))
+ c.push(newObject("name","Mark","dateHired",!01-01-2002!))
+```
+
+This example returns persons whose name contains "in":
+
+```qs
+ col = c.query("name = :1","@in@")
+ //col:[{name:Winch...},{name:Sterling...}]
+```
+
+This example returns persons whose name does not begin with a string from a variable (entered by the user, for example):
+
+```qs
+ col = c.query("name != :1",aString+"@")
+ //if astring = "W"
+ //col:[{name:Smith...},{name:Sterling...},{name:Mark...}]
+```
+
+This example returns persons whose age is not known (property set to null or undefined):
+
+```qs
+ col = c.query("age = null") //placeholders not allowed with "null"
+ //col:[{name:Wesson...},{name:Sterling...},{name:Mark...}]
+```
+
+This example returns persons hired more than 90 days ago:
+
+```qs
+ col = c.query("dateHired < :1",(currentDate-90))
+ //col:[{name:Smith...},{name:Sterling...},{name:Mark...}] if today is 01/10/2018
+```
+
+:::info
+
+More examples of queries can be found in the [`dataClass.query()`](DataClassClass.md#query) section.
+
+:::
+
+
+
+
+
+
+
+
+## .reduce()
+
+
+**.reduce**( *formula* : 4D.Function \{ , *initValue* : any \{ , *...param* : expression \}} ) : any
+
+
+
+
+
+## .sum()
+
+
+**.sum**( \{ *propertyPath* : string \} ) : number
+
+
+
+|Parameter|Type||Description|
+|---------|--- |:---:|------|
+|propertyPath |string |→|object property path to be used for calculation|
+|Result|number|←|Sum of collection values|
+
+
+#### Description
+
+The `.sum()` function returns the sum for all values in the collection instance.
+
+Only numerical elements are taken into account for the calculation (other element types are ignored).
+
+If the collection contains objects, pass the *propertyPath* parameter to indicate the object property to take into account.
+
+`.sum()` returns 0 if:
+
+* the collection is empty,
+* the collection does not contain numerical elements,
+* *propertyPath* is not found in the collection.
+
+#### Example 1
+
+
+```qs
+ var col : collection
+ var vSum : number
+ col = newCollection(10,20,"Monday",true,2)
+ vSum = col.sum() //32
+```
+
+#### Example 2
+
+```qs
+ var col : collection
+ var vSum : number
+ col = newCollection()
+ col.push(newObject("name","Smith","salary",10000))
+ col.push(newObject("name","Wesson","salary",50000))
+ col.push(newObject("name","Gross","salary",10500,5))
+ vSum = col.sum("salary") //vSum:70500,5
+```
+
+
+
+
+
+
+
+
+
+## .unshift()
+
+**.unshift**( *value* : any \{ ,...*valueN* : any \} ) : collection
+
+
+
+|Parameter|Type||Description|
+|---------|--- |:---:|------|
+|value |string, Number, object, collection, date |→|Value(s) to insert at the beginning of the collection|
+|Result|number|←|collection containing added element(s)
+|
+
+
+#### Description
+
+The `.unshift()` function inserts the given *value*(s) at the beginning of the collection and returns the modified collection.
+
+>This function modifies the original collection.
+
+If several values are passed, they are inserted all at once, which means that they appear in the resulting collection in the same order as in the argument list.
+
+
+#### Example
+
+
+```qs
+ var c : collection
+ c = newCollection(1,2)
+ c.unshift(4) // c:[4,1,2]
+ c.unshift(5) //c:[5,4,1,2]
+ c.unshift(6,7) // c:[6,7,5,4,1,2]
+```
+
+
diff --git a/versioned_docs/version-21/QodlyinCloud/qodlyScript/CryptoKeyClass.md b/versioned_docs/version-21/QodlyinCloud/qodlyScript/CryptoKeyClass.md
new file mode 100644
index 000000000..b4f698a60
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/qodlyScript/CryptoKeyClass.md
@@ -0,0 +1,323 @@
+---
+id: CryptoKeyClass
+title: CryptoKey
+---
+
+
+The `CryptoKey` class in QodlyScript encapsulates an asymmetric encryption key pair.
+
+This class is available from the `4D` class store.
+
+### Example
+
+The following sample code signs and verifies a message using a new ECDSA key pair, for example in order to make a ES256 JSON Web token.
+
+```qs
+ // Generate a new ECDSA key pair
+var key : 4D.CryptoKey
+key = 4D.CryptoKey.new(newobject("type","ECDSA","curve","prime256v1"))
+
+ // Get signature as base64
+var message, signature : string
+message = "hello world"
+signature = key.sign(message,newobject("hash","SHA256"))
+
+ // Verify signature
+var status : object
+status = key.verify(message,signature,newobject("hash","SHA256"))
+assert(status.success)
+```
+
+### Functions and properties
+
+||
+|---|
+|[](#4dcryptokeynew) |
+|[](#curve) |
+|[](#decrypt) |
+|[](#encrypt) |
+|[](#getprivatekey) |
+|[](#getpublickey) |
+|[](#sign) |
+|[](#size) |
+|[](#type) |
+|[](#verify) |
+
+## 4D.CryptoKey.new()
+
+
+
+**4D.CryptoKey.new**( *settings* : object ) : 4D.CryptoKey
+
+
+
+|Parameter|Type||Description|
+|---|---|----|---|
+|settings|object|→|Settings to generate or load a key pair|
+|result|4D.CryptoKey|←|object encapsulating an encryption key pair|
+
+The `4D.CryptoKey.new()` function creates a new `4D.CryptoKey` object encapsulating an encryption key pair, based upon the *settings* object parameter. It allows to generate a new RSA or ECDSA key, or to load an existing key pair from a PEM definition.
+
+#### *settings*
+
+|Property|Type|Description|
+|---|---|---|
+|[type](#type)|string|Defines the type of the key to create: "RSA": generates a RSA key pair, using [.size](#size) as size. "ECDSA": generates an Elliptic Curve Digital Signature Algorithm key pair, using [.curve](#curve) as curve. Note that ECDSA keys cannot be used for encryption but only for signature. "PEM": loads a key pair definition in PEM format, using [.pem](#pem). |
+|[curve](#curve)|string|Name of ECDSA curve|
+|[pem](#pem)|string|PEM definition of an encryption key to load|
+|[size](#size)|integer|Size of RSA key in bits|
+
+
+#### *CryptoKey*
+
+The returned `CryptoKey` object encapsulates an encryption key pair. It is a shared object and can therefore be used by multiple processes simultaneously.
+
+
+## .curve
+
+**.curve** : string
+
+
+Defined only for ECDSA keys: the normalised curve name of the key. Usually "prime256v1" for ES256 (default), "secp384r1" for ES384, "secp521r1" for ES512.
+
+
+
+## .decrypt()
+
+
+
+**.decrypt**( *message* : string , *options* : object ) : object
+
+
+
+|Parameter|Type||Description|
+|---|---|----|---|
+|message|string|→|Message string to be decoded using `options.encodingEncrypted` and decrypted.|
+|options|object|→|Decoding options|
+|Result|object|←|Status|
+
+The `.decrypt()` function decrypts the *message* parameter using the **private** key. The algorithm used depends on the type of the key.
+
+The key must be a RSA key, the algorithm is RSA-OAEP (see [RFC 3447](https://tools.ietf.org/html/rfc3447)).
+
+#### *options*
+
+|Property|Type|Description|
+|---|---|---|
+|hash|string|Digest algorithm to use. For example: "SHA256", "SHA384", or "SHA512". |
+|encodingEncrypted|string|Encoding used to convert the `message` parameter into the binary representation to decrypt. Can be "Base64" or "Base64URL". Default is "Base64".|
+|encodingDecrypted|string|Encoding used to convert the binary decrypted message into the result string. Can be "UTF-8", "Base64", or "Base64URL". Default is "UTF-8".|
+
+#### *Result*
+
+The function returns a status object with `success` property set to `true` if the *message* could be successfully decrypted.
+
+|Property|Type|Description|
+|---|---|---|
+|success|boolean|True if the message has been successfully decrypted|
+|result|string|Message decrypted and decoded using the `options.encodingDecrypted`|
+|errors|collection|If `success` is `false`, may contain a collection of errors|
+
+In case the *message* couldn't be decrypted because it was not encrypted with the same key or algorithm, the `status` object being returned contains an error collection in `status.errors`.
+
+
+
+## .encrypt()
+
+
+
+**.encrypt**( *message* : string , *options* : object ) : string
+
+
+
+|Parameter|Type||Description|
+|---|---|----|---|
+|message|string|→|Message string to be encoded using `options.encodingDecrypted` and encrypted.|
+|options|object|→|Encoding options|
+|Result|string|←|Message encrypted and encoded using the `options.encodingEncrypted`|
+
+The `.encrypt()` function encrypts the *message* parameter using the **public** key. The algorithm used depends on the type of the key.
+
+The key must be a RSA key, the algorithm is RSA-OAEP (see [RFC 3447](https://tools.ietf.org/html/rfc3447)).
+
+##### *options*
+
+|Property|Type|Description|
+|---|---|---|
+|hash|string|Digest algorithm to use. For example: "SHA256", "SHA384", or "SHA512". |
+|encodingEncrypted|string|Encoding used to convert the binary encrypted message into the result string. Can be "Base64", or "Base64URL". Default is "Base64".|
+|encodingDecrypted|string|Encoding used to convert the `message` parameter into the binary representation to encrypt. Can be "UTF-8", "Base64", or "Base64URL". Default is "UTF-8".|
+
+#### *Result*
+
+The returned value is an encrypted message.
+
+
+
+## .getPrivateKey()
+
+
+
+**.getPrivateKey**() : string
+
+
+
+|Parameter|Type||Description|
+|---|---|----|---|
+|Result|string|←|Private key in PEM format|
+
+The `.getPrivateKey()` function returns the private key of the `CryptoKey` object in PEM format, or an empty string if none is available.
+
+#### *Result*
+
+
+The returned value is the private key.
+
+
+
+## .getPublicKey()
+
+
+
+**.getPublicKey**() : string
+
+
+
+|Parameter|Type||Description|
+|---|----|---|---|
+|Result|string|←|Public key in PEM format|
+
+The `.getPublicKey()` function returns the public key of the `CryptoKey` object in PEM format, or an empty string if none is available.
+
+#### *Result*
+
+The returned value is the public key.
+
+
+---
+
+## .pem
+
+
+
+**.pem** : string
+
+
+
+PEM definition of an encryption key to load. If the key is a private key, the RSA or ECDSA public key will be deduced from it.
+
+
+
+## .sign()
+
+.**sign** (*message* : string , *options* : object) : string
+History
+
+|Release|Changes|
+|---|---|
+|1.1.0|Support of message as Blob|
+
+
+
+
+|Parameter|Type||Description|
+|---|----|---|---|
+|message|string OR blob|→|Message to sign|
+|options|object|→|Signing options|
+|Result|string|←|Signature in Base64 or Base64URL representation, depending on "encoding" option|
+
+The `.sign()` function signs the utf8 representation of a *message* string or Blob using the `CryptoKey` object keys and provided *options*. It returns its signature in base64 or base64URL format, depending on the value of the `options.encoding` attribute you passed.
+
+The `CryptoKey` must contain a valid **private** key.
+
+#### *options*
+
+|Property|Type|Description|
+|---|---|---|
+|hash|string|Digest algorithm to use. For example: "SHA256", "SHA384", or "SHA512". When used to produce a JWT, the hash size must match the PS@, ES@, RS@, or PS@ algorithm size|
+|encodingEncrypted|string|Encoding used to convert the binary encrypted message into the result string. Can be "Base64", or "Base64URL". Default is "Base64".|
+|pss|boolean|Use Probabilistic Signature Scheme (PSS). Ignored if the key is not an RSA key. Pass `true` when producing a JWT for PS@ algorithm|
+|encoding|string|Representation to be used for result signature. Possible values: "Base64" or "Base64URL". Default is "Base64".|
+
+#### *Result*
+
+The utf8 representation of the *message*.
+
+
+
+## .size
+
+
+
+**.size** : integer
+
+
+Defined only for RSA keys: the size of the key in bits. Typically 2048 (default).
+
+
+## .type
+
+
+
+**.type** : string
+
+
+Contains the name of the key type - "RSA", "ECDSA", "PEM" .
+
+
+- "RSA": an RSA key pair, using `settings.size` as [.size](#size).
+- "ECDSA": an Elliptic Curve Digital Signature Algorithm key pair, using `settings.curve` as [.curve](#curve). Note that ECDSA keys cannot be used for encryption but only for signature.
+- "PEM": a key pair definition in PEM format, using `settings.pem` as [.pem](#pem).
+
+
+
+
+## .verify()
+
+
+
+**.verify**( *message* : string , *signature* : string , *options* : object) : object
+History
+
+|Release|Changes|
+|---|---|
+|1.1.0|Support of message as Blob|
+
+
+
+
+
+|Parameter|Type||Description|
+|---|---|---|---|
+|message|string OR blob|→|Message that was used to produce the signature|
+|signature|string|→|Signature to verify, in Base64 or Base64URL representation, depending on `options.encoding` value|
+|options|object|→|Signing options|
+|Result|object|←|Status of the verification|
+
+
+The `.verify()` function verifies the base64 signature against the utf8 representation of *message* using the `CryptoKey` object keys and provided *options*.
+
+The `CryptoKey` must contain a valid **public** key.
+
+#### *options*
+
+|Property|Type|Description|
+|---|---|---|
+|hash|text|Digest algorithm to use. For example: "SHA256", "SHA384", or "SHA512". When used to produce a JWT, the hash size must match the PS@, ES@, RS@, or PS@ algorithm size|
+|pss|boolean|Use Probabilistic Signature Scheme (PSS). Ignored if the key is not an RSA key. Pass `true` when verifying a JWT for PS@ algorithm|
+|encoding|text|Representation of provided signature. Possible values are "Base64" or "Base64URL". Default is "Base64".
+
+#### *Result*
+
+The function returns a status object with `success` property set to `true` if `message` could be successfully verified (i.e. the signature matches).
+
+In case the signature couldn't be verified because it was not signed with the same *message*, key or algorithm, the `status` object being returned contains an error collection in `status.errors`.
+
+|Property|Type|Description|
+|---|---|---|
+|success|boolean|True if the signature matches the message|
+|errors|collection|If `success` is `false`, may contain a collection of errors|
diff --git a/versioned_docs/version-21/QodlyinCloud/qodlyScript/DataClassClass.md b/versioned_docs/version-21/QodlyinCloud/qodlyScript/DataClassClass.md
new file mode 100644
index 000000000..5290a4150
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/qodlyScript/DataClassClass.md
@@ -0,0 +1,1174 @@
+---
+id: DataClassClass
+title: DataClass
+---
+
+
+
+A [DataClass](../qodlyScript/guides/data-model.md#dataclass) provides an object interface to a database table. All dataclasses in a Qodly application are available as a property of the `ds` [datastore](../qodlyScript/guides/data-model.md#datastore).
+
+
+
+### Functions and properties
+
+||
+|---|
+|[](#all) |
+|[](#attributename) |
+|[](#fromcollection) |
+|[](#get) |
+|[](#getcount) |
+|[](#getdatastore) |
+|[](#getinfo) |
+|[](#new) |
+|[](#newselection) |
+|[](#query) |
+
+
+
+## .all()
+
+
+**.all**() : 4D.EntitySelection
+
+
+|Parameter|Type||Description|
+|---------|--- |:---:|------|
+|Result|4D.EntitySelection|←|References on all entities related to the Dataclass|
+
+
+
+#### Description
+
+The `.all()` function queries the datastore to find all the entities related to the dataclass and returns them as an entity selection.
+
+The entities are returned in the default order, which is initially the order in which they were created. Note however that, if entities have been deleted and new ones added, the default order does not reflect the creation order anymore.
+
+If no corresponding entity is found, an empty entity selection is returned.
+
+Lazy loading is applied.
+
+
+#### Example
+
+```qs
+ var allEmp : cs.EmployeeSelection
+ allEmp = ds.Employee.all()
+```
+
+
+
+
+
+## .*attributeName*
+
+
+***.attributeName*** : object
+
+#### Description
+
+The attributes of dataclasses are objects that are available directly as properties of these classes.
+
+The returned objects have properties that you can read to get information about your dataclass attributes.
+
+>Dataclass attribute objects can be modified, but the underlying model will not be altered.
+
+#### Returned object
+
+Returned attribute objects contain the following properties:
+
+|Property|Type|Description|
+|---|---|---|
+|autoFilled|boolean|True if the attribute value is automatically filled by Qodly. Corresponds to the **autosequence** model attribute property. Not returned if `.kind` = "relatedEntity" or "relatedEntities". |
+|exposed|boolean|True if the attribute is exposed in REST|
+|fieldNumber|integer|Internal Qodly database field number of the attribute. Not returned if `.kind` = "relatedEntity" or "relatedEntities". |
+|fieldType|integer|Qodly database field type of the attribute. Depends on the attribute `kind`. Possible values: if `.kind` = "storage": corresponding Qodly database field type, see [`valueType`](./commands/valueType.md) if `.kind` = "relatedEntity": 38 (`is object`) if `.kind` = "relatedEntities": 42 (`is collection`) if `.kind` = "calculated": same as above, depending on the result |
+|indexed|boolean|True if there is a B-tree or a Cluster B-tree index on the attribute. Not returned if `.kind` = "relatedEntity" or "relatedEntities". |
+|inverseName|string|Name of the attribute which is at the other side of the relation. Returned only when `.kind` = "relatedEntity" or "relatedEntities".|
+|keywordIndexed|boolean|True if there is a keyword index on the attribute. Not returned if `.kind` = "relatedEntity" or "relatedEntities". |
+|kind|string|Category of the attribute. Possible values:"storage": storage (or scalar) attribute, i.e. attribute storing a value, not a reference to another attribute "calculated": computed attribute, i.e. defined through a [`get` function](./basics/lang-classes.md#function-get-and-function-set). "relatedEntity": N -> 1 relation attribute (reference to an entity) "relatedEntities": 1 -> N relation attribute (reference to an entity selection) |
+|mandatory|boolean|True if null value input is rejected for the attribute. Not returned if `.kind` = "relatedEntity" or "relatedEntities". |
+|name|string|Name of the attribute as string|
+|readOnly|boolean|True if the attribute is read-only. For example, computed attributes without [`set` function](./basics/lang-classes.md#function-get-and-function-set) are read-only.|
+|relatedDataClass|string|Name of the dataclass related to the attribute. Returned only when `.kind` = "relatedEntity" or "relatedEntities".|
+|type|string|Conceptual value type of the attribute, useful for generic programming. Depends on the attribute `kind`. Possible values: if `.kind` = "storage": "blob", "bool", "date", "image", "number", "object", or "string". "number" is returned for any numeric types including duration; "string" is returned for uuid, string and text attribute types; "blob" attributes are [blob objects](basics/lang-blob.md). if `.kind` = "relatedEntity": related dataClass name if `.kind` = "relatedEntities": related dataClass name + "Selection" suffix if `.kind` = "calculated": same as above, depending on the result |
+|unique|boolean|True if the attribute value must be unique. Not returned if `.kind` = "relatedEntity" or "relatedEntities".|
+
+:::tip
+
+For generic programming, use `bool(attributeName.property)` or `num(attributeName.property)` or `string(attributeName.property)` (depending on the property type) to get a valid value even if the property is not returned.
+
+:::
+
+#### Example 1
+
+```qs
+salary = ds.Employee.salary //returns the salary attribute in the Employee dataclass
+compCity = ds.Company["city"] //returns the city attribute in the Company dataclass
+```
+
+#### Example 2
+
+Considering the following database structure:
+
+
+
+```qs
+var firstnameAtt,employerAtt,employeesAtt : object
+
+ firstnameAtt = ds.Employee.firstName
+ //{name:firstName,kind:storage,fieldType:0,type:string,fieldNumber:2,indexed:true,
+ //keyWordIndexed:false,autoFilled:false,mandatory:false,unique:false}
+
+ employerAtt = ds.Employee.employer
+ //{name:employer,kind:relatedEntity,relatedDataClass:Company,
+ //fieldType:38,type:Company,inverseName:employees}
+ //38 = Is object
+
+ employeesAtt = ds.Company.employees
+ //{name:employees,kind:relatedEntities,relatedDataClass:Employee,
+ //fieldType:42,type:EmployeeSelection,inverseName:employer}
+ //42 = Is collection
+```
+
+
+
+
+
+
+
+
+## .fromCollection()
+
+
+
+**.fromCollection**( *objectCol* : collection ) : 4D.EntitySelection
+
+
+
+|Parameter|Type||Description|
+|---------|--- |:---:|------|
+|objectCol |collection|→|collection of objects to be mapped with entities|
+|Result|4D.EntitySelection|←|Entity selection filled from the collection|
+
+
+
+#### Description
+
+The `.fromCollection()` function updates or creates entities in the dataclass according to the *objectCol* collection of objects, and returns the corresponding entity selection.
+
+In the *objectCol* parameter, pass a collection of objects to create new or update existing entities of the dataclass. The property names must be the same as attribute names in the dataclass. If a property name does not exist in the dataclass, it is ignored. If an attribute value is not defined in the collection, its value is null.
+
+The mapping between the objects of the collection and the entities is done on the **attribute names** and **matching types**. If an object's property has the same name as an entity's attribute but their types do not match, the entity's attribute is not filled.
+
+**Create or update mode**
+
+For each object of *objectCol*:
+
+* If the object contains a boolean property "\_\_NEW" set to false (or does not contain a boolean "\_\_NEW" property), the entity is updated or created with the corresponding values of the properties from the object. No check is performed in regards to the primary key:
+ * If the primary key is given and exists, the entity is updated. In this case, the primary key can be given as is or with a "\_\_KEY" property (filled with the primary key value).
+ * If the primary key is given (as is) and does not exist, the entity is created
+ * If the primary key is not given, the entity is created and the primary key value is assigned with respect to standard database rules.
+* If the object contains a boolean property "\_\_NEW" set to **true**, the entity is created with the corresponding values of the attributes from the object. A check is performed in regards to the primary key:
+ * If the primary key is given (as is) and exists, an error is sent
+ * If the primary key is given (as is) and does not exist, the entity is created
+ * If the primary is not given, the entity is created and the primary key value is assigned with respect to standard database rules.
+
+ >The "\_\_KEY" property containing a value is taken into account only when the "\_\_NEW" property is set to **false** (or is omitted) and a corresponding entity exists. In all other cases, the "\_\_KEY" property value is ignored, primary key value must be passed "as is".
+
+**Related entities**
+
+The objects of *objectCol* may contain one or more nested object(s) featuring one or more related entities, which can be useful to create or update links between entities.
+
+The nested objects featuring related entities must contain a "\_\_KEY" property (filled with the primary key value of the related entity) or the primary key attribute of the related entity itself. The use of a \_\_KEY property allows independence from the primary key attribute name.
+
+>The content of the related entities cannot be created/updated through this mechanism.
+
+**Stamp**
+
+If a \_\_STAMP attribute is given, a check is performed with the stamp in the datastore and an error can be returned ("Given stamp does not match current one for record# XX of table XXXX"). For more information, see [Entity locking](../qodlyScript/guides/data.md#entity-locking).
+
+
+#### Example 1
+
+We want to update an existing entity. The \_\_NEW property is not given, the employee primary key is given and exists:
+
+```qs
+ var empsCollection : collection
+ var emp : object
+ var employees : cs.EmployeeSelection
+
+ empsCollection = newCollection()
+ emp = newObject()
+ emp.ID = 668 //Existing PK in Employee table
+ emp.firstName = "Arthur"
+ emp.lastName = "Martin"
+ emp.employer = newObject("ID",121) //Existing PK in the related dataClass Company
+ // For this employee, we can change the Company by using another existing PK in the related dataClass Company
+ empsCollection.push(emp)
+ employees = ds.Employee.fromCollection(empsCollection)
+```
+
+#### Example 2
+
+We want to update an existing entity. The \_\_NEW property is not given, the employee primary key is given with the \_\_KEY attribute and exists:
+
+```qs
+ var empsCollection : collection
+ var emp : object
+ var employees : cs.EmployeeSelection
+
+ empsCollection = newCollection()
+ emp = newObject()
+ emp.__KEY = 1720 //Existing PK in Employee table
+ emp.firstName = "John"
+ emp.lastName = "Boorman"
+ emp.employer = newObject("ID";121) //Existing PK in the related dataClass Company
+ // For this employee, we can change the Company by using another existing PK in the related dataClass Company
+ empsCollection.push(emp)
+ employees = ds.Employee.fromCollection(empsCollection)
+```
+
+#### Example 3
+
+We want to simply create a new entity from a collection:
+
+```qs
+ var empsCollection : collection
+ var emp : object
+ var employees : cs.EmployeeSelection
+
+ empsCollection = newCollection()
+ emp = newObject()
+ emp.firstName = "Victor"
+ emp.lastName = "Hugo"
+ empsCollection.push(emp)
+ employees = ds.Employee.fromCollection(empsCollection)
+```
+
+#### Example 4
+
+We want to create an entity. The \_\_NEW property is True, the employee primary key is not given:
+
+```qs
+ var empsCollection : collection
+ var emp : object
+ var employees : cs.EmployeeSelection
+
+ empsCollection: = newCollection()
+ emp = newObject()
+ emp.firstName = "Mary"
+ emp.lastName = "Smith"
+ emp.employer = newObject("__KEY";121) //Existing PK in the related dataClass Company
+ emp.__NEW = true
+ empsCollection.push(emp)
+ employees = ds.Employee.fromCollection(empsCollection)
+
+
+```
+
+#### Example 5
+
+We want to create an entity. The \_\_NEW property is omitted, the employee primary key is given and does not exist:
+
+```qs
+ var empsCollection : collection
+ var emp : object
+ var employees : cs.EmployeeSelection
+
+ empsCollection = newCollection()
+ emp = newObject()
+ emp.ID = 10000 //Unexisting primary key
+ emp.firstName = "Françoise"
+ emp.lastName = "Sagan"
+ empsCollection.push(emp)
+ employees = ds.Employee.fromCollection(empsCollection)
+```
+
+#### Example 6
+
+In this example, the first entity will be created and saved but the second will fail since they both use the same primary key:
+
+```qs
+ var empsCollection : collection
+ var emp, emp2 : object
+ var employees : cs.EmployeeSelection
+
+ empsCollection = newCollection()
+ emp = newObject()
+ emp.ID = 10001 // Unexisting primary key
+ emp.firstName = "Simone"
+ emp.lastName = "Martin"
+ emp.__NEW = true
+ empsCollection.push(emp)
+
+ emp2 = newObject()
+ emp2.ID = 10001 // Same primary key, already existing
+ emp2.firstName = "Marc"
+ emp2.lastName = "Smith"
+ emp2.__NEW = true
+ empsCollection.push(emp2)
+ employees = ds.Employee.fromCollection(empsCollection)
+ //first entity is created
+ //duplicated key error for the second entity
+```
+
+#### See also
+
+[**.toCollection()**](EntitySelectionClass.md#tocollection-)
+
+
+
+
+
+## .get()
+
+
+**.get**( *primaryKey* : integer ) : 4D.Entity
Type Description String attributePath expressed using the dot notation, e.g. "name" or "user.address.zipCode" collection of strings Each string of the collection represents a level of attributePath, e.g. \["name"] or \["user","address","zipCode"]. Using a collection allows querying on attributes with names that are not compliant with dot notation, e.g. \["4Dv17.1","en/fr"]
You can mix indexed placeholders (values directly passed in *value* parameters) and named placeholder values in the same query.|
+|args|object|Parameter(s) to pass to formulas, if any. The **args** object will be received in $1 within formulas and thus its values will be available through *$1.property* (see example 3).|
+|allowFormulas| Boolean|True to allow the formula calls in the query (default). Pass false to disallow formula execution. If set to false and `query()` is given a formula, an error is sent (1278 - formula not allowed in this member method).|
+|queryPlan| Boolean |In the resulting entity selection, returns or does not return the detailed description of the query just before it is executed, i.e. the planned query. The returned property is an object that includes each planned query and subquery (in the case of a complex query). this option is useful during the development phase of an application. It is usually used in conjunction with queryPath. Default if omitted: false. **Note**: this property is supported only by the `entitySelection.query( )` and `dataClass.query( )` functions.|
+|queryPath|Boolean| In the resulting entity selection, returns or does not return the detailed description of the query as it is actually performed. The returned property is an object that contains the actual path used for the query (usually identical to that of the queryPlan, but may differ if the engine manages to optimize the query), as well as the processing time and the number of records found. this option is useful during the development phase of an application. Default if omitted: false. **Note**: this property is supported only by the `entitySelection.query( )` and `dataClass.query( )` functions.|
+
+#### About *queryPlan* and *queryPath*
+
+The information recorded in `queryPlan`/`queryPath` include the query type (indexed and sequential) and each necessary subquery along with conjunction operators. Query paths also contain the number of entities found and the time required to execute each search criterion. You may find it useful to analyze this information while developing your application(s). Generally, the description of the query plan and its path are identical but they can differ because 4D can implement dynamic optimizations when a query is executed in order to improve performance. For example, the 4D engine can dynamically convert an indexed query into a sequential one if it estimates that it is faster. this particular case can occur when the number of entities being searched for is low.
+
+For example, if you execute the following query:
+
+```qs
+ sel = ds.Employee.query("salary < :1 and employer.name == :2 or employer.revenues > :3",\
+ 50000,"Lima West Kilo",10000000,newObject("queryPath",true,"queryPlan",true))
+```
+
+queryPlan:
+
+```
+{Or:[{And:[{item:[index : Employee.salary ] < 50000},
+ {item:Join on Table : Company : Employee.employerID = Company.ID,
+ subquery:[{item:[index : Company.name ] = Lima West Kilo}]}]},
+ {item:Join on Table : Company : Employee.employerID = Company.ID,
+ subquery:[{item:[index : Company.revenues ] > 10000000}]}]}
+```
+
+queryPath:
+
+```
+{steps:[{description:OR,time:63,recordsfounds:1388132,
+ steps:[{description:AND,time:32,recordsfounds:131,
+ steps:[{description:[index : Employee.salary ] < 50000,time:16,recordsfounds:728260},{description:Join on Table : Company : Employee.employerID = Company.ID,time:0,recordsfounds:131,
+ steps:[{steps:[{description:[index : Company.name ] = Lima West Kilo,time:0,recordsfounds:1}]}]}]},{description:Join on Table : Company : Employee.employerID = Company.ID,time:31,recordsfounds:1388132,
+ steps:[{steps:[{description:[index : Company.revenues ] > 10000000,time:0,recordsfounds:933}]}]}]}]}
+```
+
+#### Example 1
+
+this section provides various examples of queries.
+
+Query on a string:
+
+```qs
+entitySelection = ds.Customer.query("firstName == 'S@'")
+```
+
+Query with a NOT statement:
+
+```qs
+entitySelection = ds.Employee.query("not(firstName == Kim)")
+```
+
+Queries with dates:
+
+```qs
+entitySelection = ds.Employee.query("birthDate > :1","1970-01-01")
+entitySelection = ds.Employee.query("birthDate <= :1",currentDate-10950)
+```
+
+Query with indexed placeholders for values:
+
+```qs
+entitySelection = ds.Customer.query("(firstName == :1 or firstName == :2) and (lastName == :3 or lastName == :4)","D@","R@","S@","K@")
+```
+
+Query with indexed placeholders for values on a related dataclass:
+
+```qs
+entitySelection = ds.Employee.query("lastName == :1 and manager.lastName == :2","M@","S@")
+```
+
+Query with indexed placeholder including a descending order by statement:
+
+```qs
+entitySelection = ds.Student.query("nationality == :1 order by campus.name desc, lastname","French")
+```
+
+Query with named placeholders for values:
+
+```qs
+var querySettings : object
+var managedCustomers : cs.CustomerSelection
+querySettings = newObject()
+querySettings.parameters = newObject("userId",1234,"extraInfo",newObject("name","Smith"))
+managedCustomers = ds.Customer.query("salesperson.userId == :userId and name == :extraInfo.name",querySettings)
+```
+
+Query that uses both named and indexed placeholders for values:
+
+```qs
+var querySettings : object
+var managedCustomers : cs.CustomerSelection
+querySettings.parameters = newObject("userId",1234)
+managedCustomers = ds.Customer.query("salesperson.userId == :userId and name == :1","Smith",querySettings)
+```
+
+Query with queryPlan and queryPath objects:
+
+```qs
+entitySelection = ds.Employee.query("(firstName == :1 or firstName == :2) and (lastName == :3 or lastName == :4)","D@","R@","S@","K@",newObject("queryPlan",true,"queryPath",true))
+
+ //you can then get these properties in the resulting entity selection
+var queryPlan, queryPath : object
+queryPlan = entitySelection.queryPlan
+queryPath = entitySelection.queryPath
+```
+
+Query with an attribute path of collection type:
+
+```qs
+entitySelection = ds.Employee.query("extraInfo.hobbies[].name == :1","horsebackriding")
+```
+
+Query with an attribute path of collection type and linked attributes:
+
+```qs
+entitySelection = ds.Employee.query("extraInfo.hobbies[a].name == :1 and extraInfo.hobbies[a].level == :2","horsebackriding",2)
+```
+
+Query with an attribute path of collection type and multiple linked attributes:
+
+```qs
+entitySelection = ds.Employee.query("extraInfo.hobbies[a].name == :1 and
+ extraInfo.hobbies[a].level == :2 and extraInfo.hobbies[b].name == :3 and
+ extraInfo.hobbies[b].level == :4","horsebackriding",2,"Tennis",5)
+```
+
+Query with an attribute path of object type:
+
+```qs
+entitySelection = ds.Employee.query("extra.eyeColor == :1","blue")
+```
+
+Query with an IN statement:
+
+```qs
+entitySelection = ds.Employee.query("firstName in :1",newCollection("Kim","Dixie"))
+```
+
+Query with a NOT (IN) statement:
+
+```qs
+entitySelection = ds.Employee.query("not (firstName in :1)",newCollection("John","Jane"))
+```
+
+Query with indexed placeholders for attributes:
+
+```qs
+var es : cs.EmployeeSelection
+es = ds.Employee.query(":1 == 1234 and :2 == 'Smith'","salesperson.userId","name")
+ //salesperson is a related entity
+```
+
+Query with indexed placeholders for attributes and named placeholders for values:
+
+```qs
+var es : cs.EmployeeSelection
+var querySettings : object
+querySettings = newObject()
+querySettings.parameters = newObject("customerName","Smith")
+es = ds.Customer.query(":1 == 1234 and :2 == :customerName","salesperson.userId","name",querySettings)
+ //salesperson is a related entity
+```
+
+Query with indexed placeholders for attributes and values:
+
+
+```qs
+var es : cs.EmployeeSelection
+es = ds.Clients.query(":1 == 1234 and :2 == :3","salesperson.userId","name","Smith")
+ //salesperson is a related entity
+```
+
+#### Example 2
+
+this section illustrates queries with named placeholders for attributes.
+
+Given an Employee dataclass with 2 entities:
+
+Entity 1:
+
+```qs
+name: "Marie"
+number: 46
+softwares:{
+"Word 10.2": "Installed",
+"Excel 11.3": "To be upgraded",
+"Powerpoint 12.4": "Not installed"
+}
+```
+
+Entity 2:
+
+```qs
+name: "Sophie"
+number: 47
+softwares:{
+"Word 10.2": "Not installed",
+"Excel 11.3": "To be upgraded",
+"Powerpoint 12.4": "Not installed"
+}
+```
+
+Query with named placeholders for attributes:
+
+```qs
+ var querySettings : object
+ var es : cs.EmployeeSelection
+ querySettings = newObject()
+ querySettings.attributes = newObject("attName","name","attWord",newCollection("softwares","Word 10.2"))
+ es = ds.Employee.query(":attName == 'Marie' and :attWord == 'Installed'",querySettings)
+ //es.length = 1 (Employee Marie)
+```
+
+Query with named placeholders for attributes and values:
+
+```qs
+ var querySettings : object
+ var es : cs.EmployeeSelection
+ var name : string
+ querySettings = newObject()
+ //Named placeholders for values
+ querySettings.parameters = newObject("givenName",name)
+ //Named placeholders for attribute paths
+ querySettings.attributes = newObject("attName","name")
+ es = ds.Employee.query(":attName == :givenName",querySettings)
+```
+
+#### Example 3
+
+These examples illustrate the various ways to use formulas with or without parameters in your queries.
+
+The formula is given as text with `eval()` in the *queryString* parameter:
+
+```qs
+ var es : cs.StudentsSelection
+ es = ds.Students.query("eval(length(this.lastname) >= 30) and nationality == 'French'")
+```
+
+The formula is given as a `formula` object through a placeholder:
+
+```qs
+ var es : cs.StudentsSelection
+ var aform : object
+ aform = formula(length(this.lastname)>= 30)
+ es = ds.Students.query(":1 and nationality == 'French'",aform)
+```
+
+Only a `formula` object is given as criteria:
+
+```qs
+ var es : cs.StudentsSelection
+ var aform : object
+ aform = formula(length(this.lastname)>= 30)
+ es: = ds.Students.query(aform)
+```
+
+Several formulas can be applied:
+
+```qs
+ declare(formula1 : 4D.Function) -> result : cs.StudentsSelection
+ var formula2 : 4D.Function
+ formula2 = formula(length(this.firstname)>= 30)
+ result = ds.Students.query(":1 and :2 and nationality == 'French'",formula1,formula2)
+```
+
+
+A text formula in *queryString* receives a parameter:
+
+```qs
+ var es : cs.StudentsSelection
+ var settings : object
+ settings = newObject()
+ settings.args = newObject("filter";"-")
+ es = ds.Students.query("eval(checkName($1.filter)) and nationality == :1","French",settings)
+```
+
+```qs
+ //checkName method
+ declare(exclude : string) -> result : Boolean
+ result = (Position(exclude,this.lastname) = 0)
+```
+
+Using the same **checkName** method, a `formula` object as placeholder receives a parameter:
+
+```qs
+ var es : cs.StudentsSelection
+ var settings : object
+ var aformula : 4D.Function
+ aformula = formula(checkName($1.filter))
+ settings = newObject()
+ settings.args = newObject("filter","-")
+ es = ds.Students.query(":1 and nationality == :2",aformula,"French",settings)
+ settings.args.filter = "*" // change the parameters without updating the aformula object
+ es = ds.Students.query(":1 and nationality == :2",aformula,"French",settings)
+```
+
+We want to disallow formulas, for example when the user enters their query:
+
+```qs
+ var es : cs.StudentsSelection
+ var settings : object
+ var queryString : string
+ // queryString is entered by the user
+ settings = newObject("allowFormulas",false)
+ es = ds.Students.query(queryString,settings) //An error is raised if queryString contains a formula
+```
+
+#### See also
+
+[`.query()`](EntitySelectionClass.md#query) for entity selections
+
diff --git a/versioned_docs/version-21/QodlyinCloud/qodlyScript/DataStoreClass.md b/versioned_docs/version-21/QodlyinCloud/qodlyScript/DataStoreClass.md
new file mode 100644
index 000000000..b02e877e5
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/qodlyScript/DataStoreClass.md
@@ -0,0 +1,246 @@
+---
+id: DataStoreClass
+title: DataStore
+---
+
+A [Datastore](../qodlyScript/guides/data-model.md#datastore) is the interface object provided by ORDA to reference and access a database. A `Datastore` object is returned by the [`ds`](commands/ds.md) command (a shortcut to the main datastore) or the [`openDatastore`](commands/openDatastore.md) command.
+
+
+
+### Functions and properties
+
+||
+|---|
+|[](#canceltransaction) |
+|[](#dataclassname) |
+|[](#isadminprotected) |
+|[](#setadminprotection) |
+|[](#starttransaction) |
+|[](#validatetransaction) |
+
+
+
+
+
+
+## .cancelTransaction()
+
+
+
+**.cancelTransaction**()
+
+
+|Parameter|Type||Description|
+|---------|--- |:---:|------|
+||||Does not require any parameters|
+
+
+
+#### Description
+
+The `.cancelTransaction()` function cancels the transaction opened by the [`.startTransaction()`](#starttransaction) function at the corresponding level in the current process for the specified datastore.
+
+The `.cancelTransaction()` function cancels any changes made to the data during the transaction.
+
+You can nest several transactions (sub-transactions). If the main transaction is cancelled, all of its sub-transactions are also cancelled, even if they were validated individually using the [`.validateTransaction()`](#validatetransaction) function.
+
+
+#### Example
+
+See example for the [`.startTransaction()`](#starttransaction) function.
+
+
+
+
+
+
+## *.dataclassName*
+
+
+***.dataclassName*** : 4D.DataClass
+
+
+#### Description
+
+Each dataclass in a datastore is available as a property of the [DataStore object](../qodlyScript/guides/data-model.md#datastore). The returned cs.object contains all attributes of the dataclass as objects.
+
+
+#### Example
+
+
+```qs
+ var emp : cs.Employee
+ var sel : cs.EmployeeSelection
+ emp = ds.Employee //emp contains the Employee dataclass
+ sel = emp.all() //gets an entity selection of all employees
+
+ //you could also write directly:
+ sel = ds.Employee.all()
+```
+
+
+
+
+
+
+
+
+
+
+## .isAdminProtected()
+
+
+**.isAdminProtected**() : boolean
+
+
+|Parameter|Type||Description|
+|---------|--- |:---:|------|
+|Result|boolean|←|true if the Data Explorer access is disabled, false if it is enabled (default)|
+
+
+
+#### Description
+
+The `.isAdminProtected()` function returns `true` if Data Explorer access has been disabled for the working session.
+
+By default, the Data Explorer access is granted for `webAdmin` sessions, but it can be disabled to prevent any data access from administrators (see the [`.setAdminProtection()`](#setadminprotection) function).
+
+#### See also
+
+[`.setAdminProtection()`](#setadminprotection)
+
+
+
+
+
+
+## .setAdminProtection()
+
+
+**.setAdminProtection**( *status* : boolean )
+
+
+
+|Parameter|Type||Description|
+|---|---|---|---|
+|status|boolean|→|true to disable Data Explorer access to data on the `webAdmin` port, false (default) to grant access|
+
+
+
+#### Description
+
+The `.setAdminProtection()` function allows disabling any data access on the [web admin port](https://developer.4d.com/docs/en/Admin/webAdmin.html#webadmin-settings), including for the [Data Explorer](https://developer.4d.com/docs/en/Admin/dataExplorer.html) in `WebAdmin` sessions.
+
+By default when the function is not called, access to data is always granted on the web administration port for a session with `WebAdmin` privilege using the Data Explorer. In some configurations, for example when the application server is hosted on a third-party machine, you might not want the administrator to be able to view your data, although they can edit the server configuration, including the [access key](https://developer.4d.com/docs/en/Admin/webAdmin.html#access-key) settings.
+
+In this case, you can call this function to disable the data access from Data Explorer on the web admin port of the machine, even if the user session has the `WebAdmin` privilege. When this function is executed, the data file is immediately protected and the status is stored on disk: the data file will be protected even if the application is restarted.
+
+
+#### Example
+
+You create a *protectDataFile* project method to call before deployments for example:
+
+```qs
+ ds.setAdminProtection(true) //Disables the Data Explorer data access
+```
+
+#### See also
+
+[`.isAdminProtected()`](#isadminprotected)
+
+
+
+
+
+
+
+
+## .startTransaction()
+
+
+
+**.startTransaction**()
+
+
+|Parameter|Type||Description|
+|---|---|---|---|
+||||Does not require any parameters|
+
+
+
+#### Description
+
+The `.startTransaction()` function starts a transaction in the current process on the database matching the datastore to which it applies. Any changes made to the datastore's entities in the transaction's process are temporarily stored until the transaction is either validated or cancelled.
+
+>If this method is called on the main datastore (i.e. the datastore returned by the `ds` command), the transaction is applied to all operations performed on the main datastore and on the underlying database.
+
+You can nest several transactions (sub-transactions). Each transaction or sub-transaction must eventually be cancelled or validated. Note that if the main transaction is cancelled, all of its sub-transactions are also cancelled even if they were validated individually using the `.validateTransaction()` function.
+
+
+:::info
+
+ A transaction represents a series of changes made within a context on interconnected data. A transaction is only permanently saved in the datastore when the transaction is validated as a whole by calling [`.validateTransaction()`](#validatetransaction). If a transaction has not been validated, whether it was cancelled or because of some external event, the changes are not saved.
+
+:::
+
+
+#### Example
+
+
+
+```qs
+ var connect,status : object
+ var person : cs.PersonsEntity
+ var ds : cs.DataStore
+ var choice : string
+ var error : boolean
+
+ ds.startTransaction()
+ person = ds.Persons.query("lastname == :1","Peters").first()
+
+ if(person != null)
+ person.lastname = "Smith"
+ status = person.save()
+ end
+ ...
+ ...
+ if(lastErrors[0].errCode != 0)
+ ds.cancelTransaction()
+ else
+ ds.validateTransaction()
+ end
+```
+
+
+
+
+
+
+
+## .validateTransaction()
+
+
+
+**.validateTransaction**()
+
+
+|Parameter|Type||Description|
+|---|---|---|---|
+||||Does not require any parameters|
+
+
+
+#### Description
+
+The `.validateTransaction()` function accepts the transaction that was started with [`.startTransaction()`](#starttransaction) at the corresponding level.
+
+The function saves the changes to the data that occurred during the transaction.
+
+You can nest several transactions (sub-transactions). If the main transaction is cancelled, all of its sub-transactions are also cancelled, even if they were validated individually using this function.
+
+
+#### Example
+
+See example for [`.startTransaction()`](#starttransaction).
+
+
diff --git a/versioned_docs/version-21/QodlyinCloud/qodlyScript/Directory.md b/versioned_docs/version-21/QodlyinCloud/qodlyScript/Directory.md
new file mode 100644
index 000000000..6bba984e4
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/qodlyScript/Directory.md
@@ -0,0 +1,448 @@
+---
+id: Directory
+title: Directory Class
+---
+
+
+
+
+## .exists
+
+
+**.exists** : boolean
+
+#### Description
+
+The `.exists` property returns true if the folder exists on disk, and false otherwise.
+
+This property is **read-only**.
+
+
+
+---
+
+
+## .extension
+
+
+**.extension** : string
+
+#### Description
+
+The `.extension` property returns the extension of the folder name (if any). An extension always starts with ".". The property returns an empty string if the folder name does not have an extension.
+
+This property is **read-only**.
+
+
+
+
+
+---
+
+
+## .fullName
+
+**.fullName** : string
+
+#### Description
+
+The `.fullName` property returns the full name of the folder, including its extension (if any).
+
+This property is **read-only**.
+
+
+
+---
+
+
+## .hidden
+
+
+**.hidden** : boolean
+
+#### Description
+
+The `.hidden` property returns true if the folder is set as "hidden" at the system level, and false otherwise.
+
+This property is **read-only**.
+
+
+
+---
+
+
+## .isAlias
+
+**.isAlias** : boolean
+
+#### Description
+
+The `.isAlias` property returns always **false** for a `Folder` object.
+
+This property is **read-only**.
+
+
+
+---
+
+
+## .isFile
+
+
+**.isFile** : boolean
+
+#### Description
+
+The `.isFile` property returns always **false** for a folder.
+
+This property is **read-only**.
+
+
+
+---
+
+
+## .isFolder
+
+
+**.isFolder** : boolean
+
+#### Description
+
+The `.isFolder` property returns always **true** for a folder.
+
+This property is **read-only**.
+
+
+
+---
+
+
+## .isPackage
+
+
+**.isPackage** : boolean
+
+#### Description
+
+The `.isPackage` property returns true if the folder is a package on macOS (and exists on disk). Otherwise, it returns false.
+
+On Windows, `.isPackage` always returns **false**.
+
+This property is **read-only**.
+
+
+
+---
+
+
+## .modificationDate
+
+**.modificationDate** : date
+
+#### Description
+
+The `.modificationDate` property returns the date of the folder's last modification.
+
+This property is **read-only**.
+
+
+
+---
+
+
+## .modificationTime
+
+
+**.modificationTime** : time
+
+#### Description
+
+The `.modificationTime` property returns the time of the folder's last modification (expressed as a number of seconds beginning at 00:00).
+
+This property is **read-only**.
+
+
+
+---
+
+
+## .name
+
+
+**.name** : string
+
+#### Description
+
+The `.name` property returns the name of the folder, without extension (if any).
+
+This property is **read-only**.
+
+
+
+---
+
+
+## .original
+
+
+**.original** : 4D.Folder
+
+#### Description
+
+The `.original` property returns the same Folder object as the folder.
+
+This property is **read-only**.
+
+>This property is available on folders to allow generic code to process folders or files.
+
+
+
+---
+
+
+## .parent
+
+
+**.parent** : 4D.Folder
+
+#### Description
+
+The `.parent` property returns the parent folder object of the folder. If the path represents a system path (e.g., "/DATA/"), the system path is returned.
+
+If the folder does not have a parent (root), the null value is returned.
+
+This property is **read-only**.
+
+
+
+---
+
+
+## .path
+
+
+**.path** : string
+
+#### Description
+
+The `.path` property returns the POSIX path of the folder. If the path represents a filesystem (e.g., "/DATA/"), the filesystem is returned.
+
+This property is **read-only**.
+
+
+
+
+---
+
+
+## .copyTo()
+
+
+**.copyTo**( *destinationFolder* : 4D.Folder \{ , *newName* : string \} \{ , *overwrite* : integer \} ) : 4D.Folder
+
+
+
+|Parameter|Type||Description|
+|---------|--- |:---:|------|
+|destinationFolder |4D.Folder |→|Destination folder|
+|newName|string|→|Name for the copy|
+|overwrite|integer|→|`fk overwrite` to replace existing elements|
+|Result|4D.Folder|←|Copied file or folder|
+
+#### Description
+
+The `.copyTo()` function copies the `Folder` object into the specified *destinationFolder*.
+
+The *destinationFolder* must exist on disk, otherwise an error is generated.
+
+By default, the folder is copied with the name of the original folder. If you want to rename the copy, pass the new name in the *newName* parameter. The new name must comply with naming rules (e.g., it must not contain characters such as ":", "/", etc.), otherwise an error is returned.
+
+If a folder with the same name already exists in the *destinationFolder*, by default Qodly generates an error. You can pass the `kOverwrite` constant in the *overwrite* parameter to ignore and overwrite the existing file
+
+|Constant|Value|Comment|
+|---|---|---|
+|`kOverwrite`|4|Overwrite existing elements, if any|
+
+**Returned value**
+
+The copied `Folder` object.
+
+#### Example
+
+You want to copy a Pictures *folder* from the resources folder to the data folder:
+
+```qs
+var userImages, copiedImages : 4D.Folder
+userImages = folder("/SOURCES/Shared/Pictures/")
+copiedImages = userImages.copyTo(folder("/DATA"),kOverwrite)
+```
+
+
+
+---
+
+
+## .file()
+
+**.file**( *path* : string ) : 4D.File
+
+
+
+|Parameter|Type||Description|
+|---|----|---|---|
+|path|string|→|Relative POSIX file pathname|
+|Result|4D.File|←|`File` object (null if invalid path)|
+
+#### Description
+
+The `.file()` function creates a `File` object inside the `Folder` object and returns its reference.
+
+In *path*, pass a relative POSIX path to designate the file to return. The path will be evaluated from the parent folder as root.
+
+**Returned value**
+
+A `File` object or null if *path* is invalid.
+
+#### Example
+
+```qs
+var myPDF : 4D.File
+myPDF = folder("/DATA").file("Pictures/info.pdf")
+```
+
+
+
+---
+
+
+## .files()
+
+
+**.files**( \{ *options* : integer \} ) : collection
+
+
+
+|Parameter|Type||Description|
+|---|----|---|---|
+|options|integer|→|File list options|
+|Result|collection|←|collection of children file objects|
+
+#### Description
+
+The `.files()` function returns a collection of `File` objects contained in the folder.
+
+>Aliases or symbolic links are not resolved.
+
+By default, if you omit the *options* parameter, only the files at the first level of the folder are returned in the collection, as well as invisible files or folders. You can modify this by passing, in the *options* parameter, one or more of the following constants:
+
+|Constant| Value| Comment|
+|---|---|---|
+|`kRecursive`|1|The collection contains files of the specified folder and its subfolders|
+|`kIgnoreInvisible`| 8|Invisible files are not listed|
+
+**Returned value**
+
+Collection of `file` objects.
+
+#### Example 1
+
+You want to know if there are invisible files in the project folder:
+
+```qs
+ var all, noInvisible : collection
+ var info : string
+ all = folder("/PACKAGE").files()
+ noInvisible = folder("/PACKAGE").files(kIgnoreInvisible)
+ if(all.length != noInvisible.length)
+ info = "Project folder contains hidden files."
+ end
+```
+
+#### Example 2
+
+You want to get all files that are not invisible in the Resources folder:
+
+```qs
+ var recursive : collection
+ recursive = folder("/RESOURCES").files(kRecursive+kIgnoreInvisible)
+```
+
+
+
+---
+
+
+## .folder()
+
+
+**.folder**( *path* : string ) : 4D.Folder
+
+
+
+|Parameter|Type||Description|
+|---|----|---|---|
+|path|string|→|Relative POSIX file pathname|
+|Result|4D.Folder|←|Created folder object (null if invalid *path*)|
+
+#### Description
+
+The `.folder()` function creates a `folder` object inside the parent `folder` object and returns its reference.
+
+In *path*, pass a relative POSIX path to designate the folder to return. The path will be evaluated from the parent folder as root.
+
+**Returned value**
+
+A `folder` object or null if *path* is invalid.
+
+#### Example
+
+```qs
+ var mypicts : 4D.Folder
+ mypicts = folder("/RESOURCES").folder("Pictures")
+```
+
+
+
+---
+
+
+## .folders()
+
+
+**.folders**( \{ *options* : integer \} ) : collection
+
+
+
+|Parameter|Type||Description|
+|---|----|---|---|
+|options|integer|→|Folder list options|
+|Result|collection|←|Collection of children folder objects|
+
+#### Description
+
+The `.folders()` function returns a collection of `folder` objects contained in the parent folder.
+
+By default, if you omit the *options* parameter, only the folders at the first level of the folder are returned in the collection. You can modify this by passing, in the *options* parameter, one or more of the following constants:
+
+|Constant| Value| Comment|
+|---|---|---|
+|`kRecursive`| 1|The collection contains folders of the specified folder and its subfolders|
+|`kIgnoreInvisible`| 8|Invisible folders are not listed|
+
+**Returned value**
+
+collection of `folder` objects.
+
+#### Example
+
+You want the collection of all folders and subfolders of the database folder:
+
+```qs
+ var allFolders : collection
+ allFolders = folder("/PACKAGE").folders(kRecursive)
+```
+
+
+
+---
diff --git a/versioned_docs/version-21/QodlyinCloud/qodlyScript/Document.md b/versioned_docs/version-21/QodlyinCloud/qodlyScript/Document.md
new file mode 100644
index 000000000..6f3aa88f4
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/qodlyScript/Document.md
@@ -0,0 +1,402 @@
+---
+id: Document
+title: Document Class
+---
+
+## Description
+
+
+
+## .exists
+
+
+**.exists** : boolean
+
+#### Description
+
+The `.exists` property returns true if the file exists on disk, and false otherwise.
+
+This property is **read-only**.
+
+
+
+
+
+## .extension
+
+
+**.extension** : string
+
+#### Description
+
+The `.extension` property returns the extension of the file name (if any). An extension always starts with ".". The property returns an empty string if the file name does not have an extension.
+
+This property is **read-only**.
+
+
+
+
+## .fullName
+
+
+**.fullName** : string
+
+#### Description
+
+The `.fullName` property returns the full name of the file, including its extension (if any).
+
+This property is **read-only**.
+
+
+
+
+## .hidden
+
+
+
+**.hidden** : boolean
+
+#### Description
+
+The `.hidden` property returns true if the file is set as "hidden" at the system level, and false otherwise.
+
+This property is **read/write**.
+
+
+
+
+## .isAlias
+
+**.isAlias** : boolean
+
+#### Description
+
+The `.isAlias` property returns true if the file is an alias, a shortcut, or a symbolic link, and false otherwise.
+
+This property is **read-only**.
+
+
+
+
+## .isFile
+
+
+**.isFile** : boolean
+
+#### Description
+
+The `.isFile` property returns always true for a file.
+
+This property is **read-only**.
+
+
+
+
+## .isFolder
+
+
+**.isFolder** : boolean
+
+#### Description
+
+The `.isFolder` property returns always false for a file.
+
+This property is **read-only**.
+
+
+
+
+## .isWritable
+
+
+**.isWritable** : boolean
+
+#### Description
+
+The `.isWritable` property returns true if the file exists on disk and is writable.
+
+>The property checks the ability of the application to write on the disk (access rights), it does not solely rely on the *writable* attribute of the file.
+
+This property is **read-only**.
+
+**Example**
+
+```qs
+ myFile = file("/SOURCES/Shared/Archives/ReadMe.txt")
+ if(myFile.isWritable)
+ myNewFile = myFile.setText("Added text")
+ end
+```
+
+
+
+
+## .modificationDate
+
+
+**.modificationDate** : date
+
+#### Description
+
+The `.modificationDate` property returns the date of the file's last modification.
+
+This property is **read-only**.
+
+
+
+
+## .modificationTime
+
+
+**.modificationTime** : time
+
+##### Description
+
+The `.modificationTime` property returns the time of the file's last modification (expressed as a number of seconds beginning at 00:00).
+
+This property is **read-only**.
+
+
+
+
+## .name
+
+
+**.name** : string
+
+#### Description
+
+The `.name` property returns the name of the file without extension (if any).
+
+This property is **read-only**.
+
+
+
+
+## .original
+
+
+**.original** : 4D.FileI have the most brilliant plan. Let me tell you all about it.
"
+ }
+}
+```
+
+
+
+## .attachments
+
+**.attachments** : collection
+
+#### Description
+
+The `.attachments` property contains a collection of `4D.MailAttachment` object(s).
+
+Attachment objects are defined through the [`mailNewAttachment`](MailAttachmentClass.md#4dmailattachmentnew) command. Attachment objects have specific [properties and functions](MailAttachmentClass.md).
+
+## .bcc
+
+**.bcc** : stringthe entity has been dropped (the stamp has changed and the memory space is now free) the entity has been dropped and replaced by another one with another primary key (the stamp has changed and a new entity now uses the memory space). This error can be returned when `kForceDropIfStampChanged` option is used. **Associated statusText**: "Entity does not exist anymore"|
+|`kStatusLocked`|3|The entity is locked by a pessimistic lock.the entity has been dropped (the stamp has changed and the memory space is now free) the entity has been dropped and replaced by another one with another primary key (the stamp has changed and a new entity now uses the memory space). This error can only be returned when `kReloadIfStampChanged` option is used **Associated statusText**: "Entity does not exist anymore"|
+|`kStatusLocked`| 3 |The entity is locked by a pessimistic lock. **Associated statusText**: "Already locked"
+|`kStatusSeriousError`| 4 |A serious error is a low-level database error (e.g. duplicated key), a hardware error, etc. **Associated statusText**: "Other error"|
+|`kStatusStampHasChanged`|2|The internal stamp value of the entity does not match the one of the entity stored in the data (optimistic lock). This error occurs only if the `kReloadIfStampChanged` option is not usedthe entity has been dropped (the stamp has changed and the memory space is now free) the entity has been dropped and replaced by another one with another primary key (the stamp has changed and a new entity now uses the memory space). ***Associated statusText***: "Entity does not exist anymore"|
+|`kStatusSeriousError`|4| A serious error is a low-level database error (e.g. duplicated key), a hardware error, etc.the entity has been dropped (the stamp has changed and the memory space is now free) the entity has been dropped and replaced by another one with another primary key (the stamp has changed and a new entity now uses the memory space). **Associated statusText**: "Entity does not exist anymore"|
+|`kStatusLocked`| 3| The entity is locked by a pessimistic lock..key` = value (value can be a collection if the same key appears multiple times). Undefined if the headers have not been received yet. |
+|.status|number|Status code of the response|
+|.statusText|string|Message explaining the status code|
+|.rawHeaders|object|Headers of the response. Header names are returned untouched (with their original case). `.key` = value (value can be a collection if the same key appears multiple times). Undefined if the headers have not been received yet.|
+
+
+
+
+## .returnResponseBody
+
+**returnResponseBody** : boolean
+
+#### Description
+
+The `.returnResponseBody` property contains the `returnResponseBody` passed in the [`options`](#options-parameter) object when calling [new()](#4dhttprequestnew). If it was omitted, contains true.
+
+
+
+
+## .terminate()
+
+**.terminate**()
+
+
+
+|Parameter|Type||Description|
+|---------|--- |:---:|------|
+||||Does not require any parameters|
+
+#### Description
+
+The `.terminate()` function aborts the HTTP request. It triggers the `onTerminate` event.
+
+
+
+
+## .terminated
+
+**terminated** : boolean
+
+#### Description
+
+The `.terminated` property contains true if the request is terminated (after the call to `onTerminate`), false otherwise.
+
+
+
+
+## .timeout
+
+**timeout** : number
+
+#### Description
+
+The `.timeout` property contains the `timeout` passed in the [`options`](#options-parameter) object when calling [new()](#4dhttprequestnew). If it was omitted, contains undefined.
+
+
+
+
+## .url
+
+**url** : string
+
+#### Description
+
+The `.url` property contains the URL of the HTTP request.
+
+
+
+
+## .wait()
+
+**.wait**( \{ *time* : number \} ) : HTTPRequestClass
+
+
+
+|Parameter|Type||Description|
+|---------|--- |:---:|------|
+|time|number|→|Maximum time in seconds to wait for the response|
+|Result|4D.HTTPRequest|←|HTTPRequest object|
+
+#### Description
+
+The `wait()` function waits for the response from the server.
+
+If a *time* parameter is passed, the function will wait at most the defined number of seconds.
+
+If the response from the server has already arrived, the function returns immediately.
+
+:::note
+
+During the `.wait()` execution, callback functions are executed, whether they originate from other instances of the same class, or instances of any classes supporting the same callback mechanism (`HTTPRequest`, `TCPConnection`, `SystemWorker`). You can exit from a `.wait()` by calling `shutdown()` or [`terminate()`](#terminate) (depending on the API) from a callback.
+
+:::
+
+
diff --git a/versioned_docs/version-21/QodlyinCloud/qodlyScript/IMAPTransporterClass.md b/versioned_docs/version-21/QodlyinCloud/qodlyScript/IMAPTransporterClass.md
new file mode 100644
index 000000000..5a092deac
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/qodlyScript/IMAPTransporterClass.md
@@ -0,0 +1,1671 @@
+---
+id: IMAPTransporterClass
+title: IMAPTransporter
+---
+
+The `IMAPTransporter` class allows you to retrieve messages from an IMAP email server.
+
+
+
+### Functions and properties
+
+4D.IMAPTransporter objects provide the following properties and functions:
+
+||
+|---|
+|[](#4dimaptransporternew) |
+|[](#acceptunsecureconnection) |
+|[](#addflags) |
+|[](#append) |
+|[](#authenticationmode) |
+|[](#checkconnection) |
+|[](#checkconnectiondelay) |
+|[](#connectiontimeout) |
+|[](#copy) |
+|[](#createbox) |
+|[](#delete) |
+|[](#deletebox) |
+|[](#expunge) |
+|[](#getboxinfo) |
+|[](#getboxlist) |
+|[](#getdelimiter) |
+|[](#getmail) |
+|[](#getmails) |
+|[](#getmimeasblob) |
+|[](#host) |
+|[](#logfile) |
+|[](#move) |
+|[](#numtoid) |
+|[](#removeflags) |
+|[](#renamebox) |
+|[](#port) |
+|[](#searchmails) |
+|[](#selectbox) |
+|[](#subscribe) |
+|[](#unsubscribe) |
+|[](#user) |
+
+
+## 4D.IMAPTransporter.new()
+
+**4D.IMAPTransporter.new**( *server* : object ) : 4D.IMAPTransporter
+
+
+
+|Parameter|Type||Description|
+|---------|--- |:---:|------|
+|server|object|→|Mail server information|
+|Result|4D.IMAPTransporter|←|IMAP transporter object|
+
+#### Description
+
+The `4D.IMAPTransporter.new()` function configures a new IMAP connection according to the *server* parameter and returns a new *transporter* object. The returned transporter object will then usually be used to receive emails.
+
+In the *server* parameter, pass an object containing the following properties:
+
+|*server*|Default value (if omitted)|
+|---|---|
+|[](#acceptunsecureconnection)` |boolean | true to add the custom flag to the message|
+
+The custom flags names must respect this rule: the keyword must be a case-insensitive string excluding control chars and space and can not include any of these characters: `( ) { ] % * " \`
+
+>* For a keyword to be taken into account it has to be true.
+>* The interpretation of keyword flags may vary per mail client.
+
+**Returned object**
+
+The function returns an object describing the IMAP status:
+
+|Property|| Type| Description|
+|---|---|---|---|
+|success||boolean|true if the operation is successful, False otherwise
+|statusText || string|Status message returned by the IMAP server, or last error returned in the Qodly error stack |
+|errors ||collection|Qodly error stack (not returned if a IMAP server response is received)|
+| |\[].errcode|Number| Qodly error code|
+| |\[].message|string|Description of the Qodly error |
+| |\[].componentSignature|string|Signature of the internal component which returned the error|
+
+#### Example
+
+```qs
+var transporter : 4D.IMAPTransporter
+var options,boxInfo,status : object
+
+options = newObject()
+options.host = "imap.gmail.com"
+options.port = 993
+options.user = "qodly@gmail.com"
+options.password = "xxxxx"
+
+// Create transporter
+transporter = 4D.IMAPTransporter.new(options)
+
+// Select mailbox
+boxInfo = transporter.selectBox("INBOX")
+
+// Mark all messages from INBOX as read/seen
+flags = newObject
+flags["$seen"] = true
+status = transporter.addFlags(kIMAPAll,flags)
+```
+
+
+
+
+## .append()
+
+
+**.append**( *mailObj* : object , *destinationBox* : string , *options* : object ) : object
+
+
+
+|Parameter|Type||Description|
+|---------|--- |:---:|------|
+|mailObj|object|→|Email object|
+|destinationBox|string|→|Mailbox to receive Email object|
+|options|object|→|object containing charset info |
+|Result|object|←|Status of the append operation|
+
+#### Description
+
+The `.append()` function appends a `mailObj` to the `destinationBox`.
+
+In the `mailObj` parameter, pass an Email object. For a comprehensive description of mail properties, see [Email object](EmailObjectClass.md#properties). The `.append()` function supports keyword tags in the Email object's `keywords` attribute.
+
+The optional `destinationBox` parameter lets you pass the name of a mailbox where the `mailObj` will be appended. If omitted, the current mailbox is used.
+
+In the optional `options` parameter, you can pass an object to define the charset and encoding for specific parts of the email. Available properties:
+
+|Property|Type|Description|
+|---|---|---|
+|headerCharset|string|Charset and encoding used for the following parts of the email: subject, attachment filenames, and email name attribute(s). Possible values: See possible charsets table below|
+|bodyCharset|string|Charset and encoding used for the html and string body contents of the email. Possible values: See possible charsets table below |
+
+Possible charsets:
+
+|Constant|Value|Comment|
+|---|---|---|
+|kMailModeUTF8|US-ASCII_UTF8_QP|headerCharset & bodyCharset: US-ASCII if possible, otherwise UTF-8 & Quoted-printable (**default value**)|
+|kMailModeUTF8InBase64|US-ASCII_UTF8_B64|headerCharset & bodyCharset: US-ASCII if possible, otherwise UTF-8 & base64|
+
+**Returned object**
+
+The function returns an object describing the IMAP status:
+
+|Property|| Type| Description|
+|---|---|---|---|
+|success||boolean|true if the operation is successful, False otherwise
+|statusText || string|Status message returned by the IMAP server, or last error returned in the Qodly error stack |
+|errors ||collection|Qodly error stack (not returned if a IMAP server response is received)|
+| |\[].errcode|Number| Qodly error code|
+| |\[].message|string|Description of the Qodly error |
+| |\[].componentSignature|string|Signature of the internal component which returned the error|
+
+#### Example
+
+To save an email in the Drafts mailbox:
+
+```qs
+var imap : 4D.IMAPTransporter
+var settings, status, msg: object
+
+settings = newObject("host", "domain.com", "user", "xxxx", "password", "xxxx", "port", 993)
+
+imap = 4D.IMAPTransporter.new(settings)
+
+msg = newObject()
+msg.from = "xxxx@domain.com"
+msg.subject = "Lorem Ipsum"
+msg.stringBody = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+msg.keywords = newObject
+msg.keywords["$seen"] = true //flag the message as read
+msg.keywords["$draft"] = true //flag the message as a draft
+
+status = imap.append(msg, "Drafts")
+```
+
+
+
+
+
+
+
+
+
+## .checkConnectionDelay
+
+
+**.checkConnectionDelay** : integer
+
+#### Description
+
+The `.checkConnectionDelay` property contains the maximum time (in seconds) allowed prior to checking the connection to the server. If this time is exceeded between two method calls, the connection to the server will be checked. By default, if the property has not been set in the *server* object, the value is 300.
+
+>**Warning**: Make sure the defined timeout is lower than the server timeout, otherwise the client timeout will be useless.
+
+
+
+
+
+
+## .copy()
+
+
+**.copy**( *msgsIDs* : collection , *destinationBox* : string ) : object**true** to return only subscribed mailboxes **false** to return all available mailboxes |
+| names | collection | Collection of objects containing a "name" attribute or collection of texts containing the box names |
+| withBoxProperties| boolean | If true (default): adds the `selectable`, `inferior`, and `interesting` attributes to the result object. If false, these attributes are omitted.|
+| withBoxInfo| boolean | Default value is false. If true, adds the `mailCount`, `mailRecent`, and `id` attributes to the result object.|
+
+#### Result
+
+Each object of the returned collection contains the following properties:
+
+
+
+|Property| Type|Description |
+|---|---|---|
+|\[].name|string|Name of the mailbox. Returned if withBoxProperties=true or withBoxInfo=true|
+|\[].selectable |boolean |Indicates whether or not the access rights allow the mailbox to be selected: true - the mailbox can be selected false - the mailbox can not be selected true - a lower level can be created false - a lower level can not be created true - The mailbox has been marked "interesting" by the server. For example, it may contain new messages. false - The mailbox has not been marked "interesting" by the server. a collection of [Email objects](EmailObjectClass.md#properties) and a collection of IDs or numbers for missing messages, if any first syntax - previously passed message IDs that do not exist second syntax - sequence numbers of messages between startMsg and endMsg that do not exist ` |boolean | true to remove the custom flag from the message|
+
+Please refer to [.addFlags()](#addflags) for more information on custom flags.
+
+>* For a keyword to be taken into account it has to be true.
+
+**Returned object**
+
+The function returns an object describing the IMAP status:
+
+|Property|| Type| Description|
+|---|---|---|---|
+|success||boolean|true if the operation is successful, False otherwise
+|statusText || string|Status message returned by the IMAP server, or last error returned in the Qodly error stack |
+|errors ||collection|Qodly error stack (not returned if a IMAP server response is received)|
+| |\[].errcode|Number| Qodly error code|
+| |\[].message|string|Description of the Qodly error |
+| |\[].componentSignature|string|Signature of the internal component which returned the error|
+
+#### Example
+
+```qs
+var options,boxInfo,status : object
+var transporter : 4D.IMAPTransporter
+
+options = newObject()
+options.host = "imap.gmail.com"
+options.port = 993
+options.user = "qodly@gmail.com"
+options.password = "xxxxx"
+
+// Create transporter
+transporter = 4D.IMAPTransporter.new(options)
+
+// Select mailbox
+boxInfo = transporter.selectBox("INBOX")
+
+// Mark all messages from INBOX as unseen
+flags = newObject
+flags["$seen"] = true
+status = transporter.removeFlags(kIMAPAll,flags)
+```
+
+
+
+
+## .renameBox()
+
+
+**.renameBox**( *currentName* : string , *newName* : string ) : object
+
+
+
+|Parameter|Type||Description|
+|---------|--- |:---:|------|
+|currentName|string|→|Name of the current mailbox|
+|newName|string|→|New mailbox name|
+|Result|object|←|Status of the renaming operation|
+
+#### Description
+
+The `.renameBox()` function changes the name of a mailbox on the IMAP server. Attempting to rename a mailbox from a mailbox name that does not exist or to a mailbox name that already exists will generate an error.
+
+In the `currentName` parameter, pass the name of the mailbox to be renamed.
+
+Pass the new name for the mailbox in the `newName` parameter.
+
+**Returned object**
+
+The function returns an object describing the IMAP status:
+
+|Property|| Type| Description|
+|---|---|---|---|
+|success||boolean|true if the operation is successful, False otherwise
+|statusText || string|Status message returned by the IMAP server, or last error returned in the Qodly error stack |
+|errors ||collection|Qodly error stack (not returned if a IMAP server response is received)|
+| |\[].errcode|Number| Qodly error code|
+| |\[].message|string|Description of the Qodly error |
+| |\[].componentSignature|string|Signature of the internal component which returned the error|
+
+#### Example
+
+To to rename your "Invoices mailbox to "Bills":
+
+```qs
+var options, status : object
+var transporter : 4D.IMAPTransporter
+var info : string
+
+options = newObject()
+
+options.host = "imap.gmail.com"
+options.user = "test@gmail.com"
+options.password = "XXXXX"
+
+transporter = 4D.IMAPTransporter.new(options)
+
+// rename mailbox
+status = transporter.renameBox("Invoices", "Bills")
+
+if(status.success)
+ info = "Mailbox renaming successful!"
+else
+ info = "Error: "+status.statusText
+end
+```
+
+
+
+
+
+
+## .searchMails()
+
+**.searchMails**( *searchCriteria* : string ) : collection
+
+
+
+|Parameter|Type||Description|
+|---------|--- |:---:|------|
+|searchCriteria|string|→ |Search criteria|
+|Result|collection|←|collection of message numbers|
+
+#### Description
+
+> This function is based upon the specification for the [IMAP protocol](https://en.wikipedia.org/wiki/Internet_Message_Access_Protocol).
+
+The `.searchMails()` function searches for messages that match the given *searchCriteria* in the current mailbox. *searchCriteria* consists of one or more search keys.
+
+*searchCriteria* is a string parameter listing one or more search keys (see [Authorized search-keys](#authorized-search-keys) below) associated or not with values to look for. A search key may be a single or multiple items. For example:
+
+```
+SearchKey1 = FLAGGED
+SearchKey2 = NOT FLAGGED
+SearchKey3 = FLAGGED DRAFT
+```
+
+> Matching is usually not case-sensitive
+
+* If the *searchCriteria* is a null string, the search will be equivalent to a “select all”.
+* If the *searchCriteria* includes multiple search keys, the result is the intersection (AND function) of all the messages that match those keys.
+
+```
+searchCriteria = FLAGGED FROM "SMITH"
+```
+
+... returns all messages with \Flagged flag set AND sent by Smith.
+
+* You can use the **OR** or **NOT** operators as follows:
+
+```
+searchCriteria = OR SEEN FLAGGED
+```
+
+... returns all messages with \Seen flag set OR \Flagged flag set
+
+```
+searchCriteria = NOT SEEN
+```
+
+... returns all messages with \Seen flag not set.
+
+```
+searchCriteria = HEADER CONTENT-TYPE "MIXED" NOT HEADER CONTENT-TYPE "TEXT"...
+```
+
+... returns message whose content-type header contains “Mixed” and does not contain “string”.
+
+```
+searchCriteria = HEADER CONTENT-TYPE "E" NOT SUBJECT "o" NOT HEADER CONTENT-TYPE "MIXED"
+```
+
+... returns message whose content-type header contains “ e ” and whose Subject header does not contain “ o ” and whose content-type header is not “ Mixed ”.
+
+As concerns the last two examples, notice that the result of the search is different when you remove the parentheses of the first search key list.
+
+* The *searchCriteria* may include the optional \[CHARSET] specification. This consists of the "CHARSET" word followed by a registered \[CHARSET] (US ASCII, ISO-8859). It indicates the charset of the *searchCriteria* string. Therefore, you must convert the *searchCriteria* string into the specified charset if you use the \[CHARSET] specification (see the `CONVERT FROM TEXT` or `Convert to string` commands).
+By default, 4D encodes in Quotable Printable the searchCriteria string if it contains extended characters.
+
+```
+searchCriteria = CHARSET "ISO-8859" BODY "Help"
+```
+
+... means the search criteria uses the charset iso-8859 and the server will have to convert the search criteria before searching, if necessary.
+
+#### Search value types
+
+Search-keys may request the value to search for:
+
+* **Search-keys with a date value**: the date is a string that must be formatted as follows: *date-day+"-"+date-month+"-"+date-year* where date-day indicates the number of the day of the month (max. 2 characters), date-month indicates the name of the month (Jan/Feb/Mar/Apr/May/Jun/Jul/Aug/Sep/Oct/Dec) and date-year indicates the year (4 characters).
+Example: `searchCriteria = SENTBEFORE 1-Feb-2020` (a date does not usually need to be quoted since it does not contain any special characters)
+
+* **Search-keys with a string value**: the string may contain any character and must be quoted. If the string does not contain any special characters, like the space character for instance, it does not need to be quoted. Quoting such strings will ensure that your string value will be correctly interpreted.
+Example: `searchCriteria = FROM "SMITH"`
+For all search keys that use strings, a message matches the key if the string is a substring of the field. Matching is not case-sensitive.
+
+* **Search-keys with a field-name value**: the field-name is the name of a header field.
+Example: `searchCriteria = HEADER CONTENT-TYPE "MIXED"`
+
+* **Search-keys with a flag value**: the flag may accept one or several keywords (including standard flags), separated by spaces.
+Example: `searchCriteria = KEYWORD \Flagged \Draft`
+
+* **Search-keys with a message set value**: Identifies a set of messages. For message sequence numbers, these are consecutive numbers from 1 to the total number of messages in the mailbox. A comma delimits individual numbers, a colon delimits between two numbers inclusive.
+Examples:
+`2,4:7,9,12:*` is `2,4,5,6,7,9,12,13,14,15` for a mailbox with 15 messages.
+`searchCriteria = 1:5 ANSWERED` search in message selection from message sequence number 1 to 5 for messages which have the \Answered flag set.
+`searchCriteria = 2,4 ANSWERED` search in the message selection (message numbers 2 and 4) for messages which have the \Answered flag set.
+
+#### Authorized search-keys
+
+**ALL**: All messages in the mailbox.
+**ANSWERED**: Messages with the \Answered flag set.
+**UNANSWERED**: Messages that do not have the \Answered flag set.
+**DELETED**: Messages with the \Deleted flag set.
+**UNDELETED**: Messages that do not have the \Deleted flag set.
+**DRAFT**: Messages with the \Draft flag set.
+**UNDRAFT**: Messages that do not have the \Draft flag set.
+**FLAGGED**: Messages with the \Flagged flag set.
+**UNFLAGGED**: Messages that do not have the \Flagged flag set.
+**RECENT**: Messages that have the \Recent flag set.
+**OLD**: Messages that do not have the \Recent flag set.
+**SEEN**: Messages that have the \Seen flag set.
+**UNSEEN**: Messages that do not have the \Seen flag set.
+**NEW**: Messages that have the \Recent flag set but not the \Seen flag. This is functionally equivalent to “(RECENT UNSEEN)”.
+**KEYWORD *flag***: Messages with the specified keyword set.
+**UNKEYWORD *flag***: Messages that do not have the specified keyword set.
+**BEFORE *date***: Messages whose internal date is earlier than the specified date.
+**ON *date***: Messages whose internal date is within the specified date.
+**SINCE *date***: Messages whose internal date is within or later than the specified date.
+**SENTBEFORE *date***: Messages whose Date header is earlier than the specified date.
+**SENTON *date***: Messages whose Date header is within the specified date.
+**SENTSINCE *date***: Messages whose Date header is within or later than the specified date.
+**TO *string***: Messages that contain the specified string in the TO header.
+**FROM *string***: Messages that contain the specified string in the FROM header.
+**CC *string***: Messages that contain the specified string in the CC header.
+**BCC *string***: Messages that contain the specified string in the BCC header.
+**SUBJECT *string***: Messages that contain the specified string in the Subject header.
+**BODY *string***: Messages that contain the specified string in the message body.
+**TEXT *string***: Messages that contain the specified string in the header or in the message body.
+**HEADER *field-name* *string***: Messages that have a header with the specified field-name and that contain the specified string in the field-body.
+**UID *message-UID***: Messages with unique identifiers corresponding to the specified unique identifier set.
+**LARGER *n***: Messages with a size larger than the specified number of bytes.
+**SMALLER *n***: Messages with a size smaller than the specified number of bytes.
+**NOT *search-key***: Messages that do not match the specified search key.
+**OR *search-key1* *search-key2***: Messages that match either search key.
+
+
+
+
+## .selectBox()
+
+
+**.selectBox**( *name* : string \{ , *state* : integer \} ) : object
+
+
+
+|Parameter|Type||Description|
+|---------|--- |:---:|------|
+|name|string|→ |Name of the mailbox|
+|state|integer|→|Mailbox access status|
+|Result|object|←|boxInfo object|
+
+#### Description
+
+The `.selectBox()` function selects the *name* mailbox as the current mailbox. This function allows you to retrieve information about the mailbox.
+
+>To get the information from a mailbox without changing the current mailbox, use [`.getBoxInfo()`](#getboxinfo).
+
+In the *name* parameter, pass the name of the mailbox to access. The name represents an unambiguous left-to-right hierarchy with levels separated by a specific delimiter character. The delimiter can be found with the [`.getDelimiter()`](#getdelimiter) function.
+
+The optional *state* parameter defines the type of access to the mailbox. The possible values are:
+
+|Constant| Value| Comment|
+|---|---|---|
+|IMAP read only state|1|The selected mailbox is accessed with read only privileges. Messages with a "recent" flag (indicating new messages) remain unchanged.|
+|IMAP read write state|0|The selected mailbox is accessed with read and write privileges. Messages are considered "seen" and lose the "recent" flag (indicating new messages). (Default value)|
+
+>* The function generates an error and returns **Null** if *name* designates a non-existing mailbox.
+>* If there is no open connection, `.selectBox()` will open a connection.
+>* If the connection has not been used since the designated connection delay (see `4D.IMAPTransporter.new`), the [`.checkConnection()`](#checkconnection) function is automatically called.
+
+**Returned object**
+
+The `boxInfo` object returned contains the following properties:
+
+|Property | Type | Description |
+|---|---|---|
+|name| string|Name of the mailbox|
+|mailCount|number|Number of messages in the mailbox|
+|mailRecent|number|Number of messages with the "recent" flag |
+|id|string|Unique id of the mailbox |
+|flags|string|List of flags currently used for the mailbox, separated by spaces|
+|permanentFlags|string|List of flags that the client can change permanently (except for the \Recent flag, which is managed by the IMAP server), separated by spaces|
+
+:::info
+
+If `permanentFlags` string includes the special flag \*, it means that the server supports [custom flags](#addflags).
+
+:::
+
+#### Example
+
+```qs
+ var server, boxinfo : object
+ var transporter : 4D.IMAPTransporter
+ server = newObject()
+ server.host = "imap.gmail.com" //Mandatory
+ server.user = "4d@gmail.com"
+ server.password = "XXXXXXXX"
+
+ transporter = 4D.IMAPTransporter.new(server)
+ boxInfo = transporter.selectBox("INBOX")
+```
+
+
+
+
+## .subscribe()
+
+**.subscribe**( *name* : string ) : object
+
+
+
+|Parameter|Type||Description|
+|---------|--- |:---:|------|
+|name|string|→ |Name of the mailbox|
+|Result|object|←|Status of the subscribe operation|
+
+#### Description
+
+The `.subscribe()` function allows adding or removing of the specified mailbox to/from the IMAP server’s set of “subscribed” mailboxes. As such, you can choose to narrow down a large list of available mailboxes by subscribing to those you usually want to see.
+
+In the *name* parameter, pass the name of the mailbox to add (subscribe) to your "subscribed" mailboxes.
+
+**Returned object**
+
+The function returns an object describing the IMAP status:
+
+|Property|| Type| Description|
+|---|---|---|---|
+|success||boolean|true if the operation is successful, False otherwise
+|statusText || string|Status message returned by the IMAP server, or last error returned in the Qodly error stack |
+|errors ||collection|Qodly error stack (not returned if a IMAP server response is received)|
+| |\[].errcode|Number| Qodly error code|
+| |\[].message|string|Description of the Qodly error |
+| |\[].componentSignature|string|Signature of the internal component which returned the error|
+
+#### Example
+
+To subscribe to the "Atlas Corp" mailbox in the "Bills" hierarchy:
+
+```qs
+var name, info : string
+var options, status : object
+var transporter : 4D.IMAPTransporter
+
+options = newObject()
+
+options.host = "imap.gmail.com"
+options.user = "test@gmail.com"
+options.password = "XXXXXX"
+
+transporter = 4D.IMAPTransporter.new(options)
+
+name = "Bills"+transporter.getDelimiter()+"Atlas Corp"
+status = transporter.subscribe(name)
+
+if(status.success)
+ info = "Mailbox subscription successful!"
+else
+ info = "Error: "+status.statusText
+end
+```
+
+
+
+
+## .unsubscribe()
+
+
+**.unsubscribe**( *name* : string ) : object
+
+
+
+|Parameter|Type||Description|
+|---------|--- |:---:|------|
+|name|string|→ |Name of the mailbox|
+|Result|object|←|Status of the unsubscribe operation|
+
+#### Description
+
+The `.unsubscribe()` function removes a mailbox from a set of subscribed mailboxes. This allows you reduce the number of mailboxes you usually see.
+
+In the `name` parameter, pass the name of the mailbox to remove (unsubscribe) from your active mailboxes.
+
+**Returned object**
+
+The function returns an object describing the IMAP status:
+
+|Property|| Type| Description|
+|---|---|---|---|
+|success||boolean|true if the operation is successful, False otherwise
+|statusText || string|Status message returned by the IMAP server, or last error returned in the Qodly error stack |
+|errors ||collection|Qodly error stack (not returned if a IMAP server response is received)|
+| |\[].errcode|Number| Qodly error code|
+| |\[].message|string|Description of the Qodly error |
+| |\[].componentSignature|string|Signature of the internal component which returned the error|
+
+#### Example
+
+To unsubscribe from the "Atlas Corp” mailbox in the "Bills" hierarchy:
+
+```qs
+var info, name : string
+var options, status : object
+var transporter : 4D.IMAPTransporter
+
+options = newObject()
+
+
+options.host = "imap.gmail.com"
+options.user = "test@gmail.com"
+options.password = pw
+
+transporter = 4D.IMAPTransporter.new(options)
+
+name = "Bills"+transporter.getDelimiter()+"Atlas Corp"
+status = transporter.unsubscribe(name)
+
+if(status.success)
+ info = "Mailbox unsubscription successful!"
+else
+ info = "Error: "+status.statusText
+end
+```
+
+
+
+
diff --git a/versioned_docs/version-21/QodlyinCloud/qodlyScript/IncomingMessageClass.md b/versioned_docs/version-21/QodlyinCloud/qodlyScript/IncomingMessageClass.md
new file mode 100644
index 000000000..a4f3c3de6
--- /dev/null
+++ b/versioned_docs/version-21/QodlyinCloud/qodlyScript/IncomingMessageClass.md
@@ -0,0 +1,349 @@
+---
+id: IncomingMessageClass
+title: IncomingMessage
+---
+
+
+The `4D.IncomingMessage` class allows you to handle the object received by a custom [**HTTP request handler**](../../4DQodlyPro/httpHandlers.md). HTTP requests and their properties are automatically received as an instance of the `4D.IncomingMessage` class. Parameters given directly in the request with GET verb are handled by the [`.urlQuery`](#urlquery) property, while parameters passed in the body of the request are available through functions such as [`.getBlob()`](#getblob) or [`getText()`](#gettext).
+
+The HTTP request handler can return any value (or nothing). It usually returns an instance of the [`4D.OutgoingMessage`](OutgoingMessageClass.md) class.
+
+All properties of this class are read-only. They are automatically filled by the request handler.
+
+
+### Example
+
+The following HTTP handler configuration [has been defined in Qodly Studio](../../4DQodlyPro/httpHandlers.md#configuring-http-handlers):
+
+```json
+[
+ {
+ "class": "GeneralHandling",
+ "method": "gettingStarted",
+ "pattern": "start",
+ "verbs": "get, post"
+ }
+]
+```
+
+
+The `/start/example?param=demo&name=Qodly` request is run with a `GET` verb in a browser. It is handled by the *gettingStarted* function of the following *GeneralHandling* singleton class:
+
+```qs
+shared singleton constructor()
+
+function gettingStarted(request : 4D.IncomingMessage) : 4D.OutgoingMessage
+
+ var result=4D.OutgoingMessage.new()
+ var body : string
+
+ body="Called URL: "+request.url+"\n"
+
+ body+="The parameters are received as an object: \n"+jsonStringify(request.urlQuery, *)+"\n"
+
+ body+="The verb is: "+request.verb+"\n"
+
+ body+="There are "+string(request.urlPath.length)+" url parts - Url parts are: "\
+ +request.urlPath.join(" - ")+"\n\n"
+
+
+ result.setBody(body)
+ result.setHeader("Content-Type", "text/plain")
+
+ return result
+
+```
+
+The request is received on the server as *request*, an object instance of the 4D.IncomingMessage class.
+
+Here is the response:
+
+```json
+Called URL: /start/example? param=demo&name=Qodly
+The parameters are received as an object:
+{
+ "param": "demo",
+ "name": "Qodly"
+}
+The verb is: GET
+There are 2 url parts - Url parts are: start - example
+```
+
+
+### IncomingMessage Object
+
+
+4D.IncomingMessage objects provide the following properties and functions:
+
+||
+|---|
+|[](#getblob) .default})
in the header panel allows easy identification of the background color of qodlysources linked to a component.
+### Page Zoom Controls
+
+The Zoom controls in the header panel .default})
lets users adjust the page’s zoom level. This helps when positioning components precisely within complex or tightly spaced layouts. By increasing or decreasing the zoom, users can focus on fine details or get a broader overview of the page structure, making design and alignment tasks more efficient.
+
+### Events Report
+
+The Events Report button .default})
displays all the event interactions defined within a page. It provides a visual overview of how components define their events, helping developers understand and debug the application’s behavior.
+
+Each node in the report represents a component or a Qodly Source event definition. Developers can explore complex event logic at a glance, without navigating through multiple panels.
+
+.default})
+
+Users can also edit events directly within the report. Clicking the Edit .default})
an event block opens its configuration, allowing developers to modify the event’s logic, connected Qodly sources, or target components without leaving the Events Report view. This streamlines the process of fine-tuning event behavior while maintaining full visibility of related connections.
+
+The Events Report includes a Filter panel that allows users to refine the view and focus on specific types of connections:
+
+.default})
+
+Components: Displays events triggered directly by components (e.g., Button, Stylebox...).
+
+Local QodlySources: Shows events linked to Qodly sources defined locally within the current page.
+
+Shared QodlySources: Displays events associated with shared Qodly sources across pages.
+
+Users can switch back to the Page Editor at any time using the toolbar button in the top-right corner.
+
+.default})
+
+The Events Report is especially useful for reviewing the logic of complex pages, ensuring that event flows behave as intended, and quickly diagnosing unexpected actions or missing links.
+
### Preview
diff --git a/docs/4DQodlyPro/pageLoaders/qodlySources.md b/docs/4DQodlyPro/pageLoaders/qodlySources.md
index 35926cd22..41be0aa2d 100644
--- a/docs/4DQodlyPro/pageLoaders/qodlySources.md
+++ b/docs/4DQodlyPro/pageLoaders/qodlySources.md
@@ -93,16 +93,16 @@ The Location qodlysource is specifically designed to facilitate handling URL-rel
**Example:**
```javascript
- // URL: example.com/products/item
- Location.urlQuery // Output: ["products", "item"]
+ // URL: example.com/search?category=shoes&color=blue
+ Location.urlQuery // Output: { category: "shoes", color: "blue" }
```
- **urlPath** *(Object)*: Contains key-value pairs representing parameters that appear after the question mark (`?`) in URLs.
**Example:**
```javascript
- // URL: example.com/search?category=shoes&color=blue
- Location.urlPath // Output: { category: "shoes", color: "blue" }
+ // URL: example.com/products/item
+ Location.urlPath // Output: ["products", "item"]
```
- **anchor** *(String)*: Stores the part of the URL following the hash symbol (`#`). This is typically used for navigation within the same page or handling client-side routing.
diff --git a/docusaurus.config.js b/docusaurus.config.js
index b1c272c14..23fbdb96b 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -5,14 +5,16 @@ const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
const ghUrl = `${process.env.GITHUB_SERVER_URL || 'https://github.com'}/${process.env.GITHUB_REPOSITORY || 'qodly/docs'}`;
-const isProduction = process.env.GITHUB_REPOSITORY_OWNER === 'qodly';
+//const isProduction = process.env.GITHUB_REPOSITORY_OWNER === 'qodly';
+const isProduction = process.env.GITHUB_REPOSITORY_OWNER === '4d';
/** @type {import('@docusaurus/types').Config} */
const config = {
title: '4D Qodly Pro Documentation',
tagline: 'Easily build powerful, low-code web interfaces to elevate your 4D applications.',
url: isProduction ? "https://developer.qodly.com" : "https://docqodly.github.io",
- baseUrl: "/docQodlyPro/",
+ baseUrl: isProduction ? "/qodly/" : "/docQodlyPro/",
+ // baseUrl: "/qodly/",
onBrokenLinks: 'warn',
onBrokenMarkdownLinks: 'warn',
favicon: 'img/favicon.svg',
@@ -135,7 +137,7 @@ Thank you for helping us improve! 🚀
// },
metadata: [
{name: 'keywords', content: 'qodly documentation, qodly doc, documentation qodly, doc qodly, qodly Developer, qodly guide, qodly tutorial, qodly low-code development'},
- {name: 'description', content: 'Official documentation for Qodly developers. Learn how to use Qodly Studio, Qodlyscript, and more with detailed guides and tutorials.'},
+ {name: 'description', content: 'Official documentation for Qodly. Learn how to use Qodly Studio, desing Qodly pages and more with detailed guides and tutorials.'},
],
navbar: {
title: 'Docs', //Docs
@@ -188,6 +190,7 @@ Thank you for helping us improve! 🚀
versions:
{
current: {label: 'next'},
+ '21': {label: '21 BETA'},
'R10': {label: '20 R10'},
},
dropdownItemsAfter: [
diff --git a/sidebars.js b/sidebars.js
index 900690232..f9a73b4f1 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -19,6 +19,10 @@ const sidebars = {
type: 'doc',
id: '4DQodlyPro/gettingStarted'
},
+ {
+ type: 'doc',
+ id: '4DQodlyPro/release-notes'
+ },
],
// Qodly 4D Pro
Develop: [
diff --git a/versioned_docs/version-21/4DQodlyPro/coding.md b/versioned_docs/version-21/4DQodlyPro/coding.md
new file mode 100644
index 000000000..c35b6c9f1
--- /dev/null
+++ b/versioned_docs/version-21/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:
+
+.default})
.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](../../../QodlyinCloud/qodlyScript/commands/webEvent.md) 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/4DQodlyPro/pageLoaders/components/dialog.md b/versioned_docs/version-21/4DQodlyPro/pageLoaders/components/dialog.md
new file mode 100644
index 000000000..25c63379e
--- /dev/null
+++ b/versioned_docs/version-21/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/4DQodlyPro/pageLoaders/components/fileupload.md b/versioned_docs/version-21/4DQodlyPro/pageLoaders/components/fileupload.md
new file mode 100644
index 000000000..83ccc4b32
--- /dev/null
+++ b/versioned_docs/version-21/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/4DQodlyPro/pageLoaders/components/icon.md b/versioned_docs/version-21/4DQodlyPro/pageLoaders/components/icon.md
new file mode 100644
index 000000000..cc16aaab0
--- /dev/null
+++ b/versioned_docs/version-21/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/4DQodlyPro/pageLoaders/components/pageLoader.md b/versioned_docs/version-21/4DQodlyPro/pageLoaders/components/pageLoader.md
new file mode 100644
index 000000000..8c8faf16f
--- /dev/null
+++ b/versioned_docs/version-21/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/4DQodlyPro/pageLoaders/components/radio.md b/versioned_docs/version-21/4DQodlyPro/pageLoaders/components/radio.md
new file mode 100644
index 000000000..5dd1fa9b7
--- /dev/null
+++ b/versioned_docs/version-21/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/4DQodlyPro/pageLoaders/components/rangeinput.md b/versioned_docs/version-21/4DQodlyPro/pageLoaders/components/rangeinput.md
new file mode 100644
index 000000000..20812176c
--- /dev/null
+++ b/versioned_docs/version-21/4DQodlyPro/pageLoaders/components/rangeinput.md
@@ -0,0 +1,447 @@
+---
+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})
+