4D 21 update

docs/4DQodlyPro/gettingStarted.md

@@ -34,9 +34,10 @@ The recommended resolution is 1920x1080.
 
 #### Project
 
-Qodly Studio only works with 4D projects (binary databases are not supported).
+Qodly Studio only works with 4D [projects](https://developer.4d.com/docs/Project/overview) (binary databases are not supported).
 
 - Web sessions (*aka* Scalable sessions) must [be enabled](https://developer.4d.com/docs/WebServer/sessions#enabling-web-sessions).
+- The ["forceLogin" mode](https://developer.4d.com/docs/REST/authUsers#force-login-mode) must be [activated](https://developer.4d.com/docs/settings/web#activate-rest-authentication-through-dsauthentify-function) to handle web sessions.
 - The 4D code called by Qodly forms must be [thread-safe](https://developer.4d.com/docs/WebServer/preemptiveWeb).
 
 
@@ -60,7 +61,8 @@ All the [configuration requirements](#requirements) can be automatically set for
 :::note
 
 - Only settings that need to be edited are listed in the dialog box. 
-- Since scalable sessions run in preemptive mode, enabling this setting might require that you evaluate the thread-safety property of your code. 
+- Since scalable sessions run in preemptive mode, enabling this setting might require that you evaluate the [thread-safety property](https://developer.4d.com/docs/Develop/preemptive-processes#writing-a-thread-safe-method) of your code. 
+- Activating the "forceLogin" mode might require that you reconfigure the REST accesses, [as explained in this blog post](https://blog.4d.com/force-login-becomes-default-for-all-rest-auth/). 
 
 :::
 
@@ -170,7 +172,7 @@ Qodly Studio encapsulates Qodly pages, including layout, data connections, and e
 
 :::info
 
-See [this page](../4DQodlyPro/rendering.md) for detailed information on how to render Qodly pages in Qodly.
+See [this section](../4DQodlyPro/rendering.md) for detailed information on how to render Qodly pages in Qodly.
 
 :::
 

docs/4DQodlyPro/notes.md

@@ -0,0 +1,56 @@
+---
+id: release-notes
+title: Release Notes
+---
+
+
+
+## 4D 21
+
+### Highlights
+
+- [Localization (i18n)](./localization.md): Launched built-in Localization support, allowing you to create multilingual applications visually—without coding. You can define supported locales, manage translation keys and literals, preview translations directly in the Studio, and allow users to switch languages at runtime using the [UserLanguage](pageLoaders/qodlySources.md#qodlysource-userlanguage) shared source.
+
+- [Page Zoom Controls](pageLoaders/pageLoaderOverview.md#page-zoom-controls): in the header panel, allowing users to adjust the page’s zoom level for more precise component placement and layout editing.
+
+- [Events Report](pageLoaders/pageLoaderOverview.md#events-report): Introduced the Events Report, a visual overview of all page events for components and Qodly sources complete with filtering, editing, and navigation options.
+
+... more to come...
+
+
+
+## 4D 20 R10
+
+### Highlights
+
+- [Qodly Looker Studio Connector](../Integrations/qodlyLookerStudio/qodlyLookerStudioConnector.md): Added integration between Qodly applications and Google Looker Studio, enabling users to create interactive dashboards, track real-time business metrics, and generate custom reports using Qodly data.
+
+- [Saved Condition Go To Button](pageLoaders/states/conditionalState.md#saved-condition-integration): When a saved condition is integrated into a state, a **Go to** button now appears next to its name. Clicking it opens the full saved condition in edit mode—so you can quickly review or update it without leaving the schema view.
+
+- [Interval Range Validation for Text Input](pageLoaders/components/textinput.md#intervals-for-date-input): For text inputs using the **interval type `Range`**, if the **start date is later than the end date**, an error message will be shown and the dates will be temporarily disabled until corrected. 
+
+- [Matrix Selection Behavior Options](pageLoaders/components/matrix.md#properties-customization): You can now control how the **Matrix** behaves after a data update (like reloading or filtering).
+
+- [Debugger Sidebar](./debugging.md#debugger-sidebar): A new sidebar in the code editor lets you monitor, group, enable/disable, delete, and jump to breakpoints across your entire app. It also shows a [Variables panel](./debugging.md#variables-panel) during debug sessions, so you can view local variables, current line variables, and method arguments—all in one place.
+
+- [Built-in Shared Qodly Namespace](pageLoaders/qodlySources.md#built-in-shared-qodly-namespace): Introduced a built-in Qodly namespace available across all application pages. It provides ready-to-use qodlysources for shared data handling, including a [Location shared qodlysource](pageLoaders/qodlySources.md#qodlysource-location) that simplifies working with URL segments, query parameters, and anchors. As well as, a [UserLanguage shared qodlysource](pageLoaders/qodlySources.md#qodlysource-userlanguage) that allows runtime management of user-selected languages and lists supported locales dynamically; and a [Title shared qodlysource](pageLoaders/qodlySources.md#qodlysource-title) that enables setting the browser tab title dynamically at runtime.
+
+- [Connection Status Handling in Renderer](rendering.md#connection-status-handling): The Renderer now displays connection status messages when the network is lost or restored during rendering. A red banner appears when disconnected, and a green banner confirms when the connection is restored.
+
+### Behavior Changes
+
+- **Renamed properties in the [intervals datasource](pageLoaders/components/textinput.md#params-object-properties)** of the text input component for consistency:
+
+    - `toDay` is now `today`
+    - `startingfrom` is now `startingFrom`
+    - `untilto` is now `until`
+
+- **Include Option and Interval Card Toggle**: Added visual controls to improve interval management. The [Include checkbox](pageLoaders/components/textinput.md#include-checkbox-within-the-card) lets users include or exclude specific date ranges, while the [card toggle](pageLoaders/components/textinput.md#card-toggle-top-right) allows enabling or disabling intervals without losing their configuration.
+
+- [HTTP Handlers UI Redesign](./httpHandlers.md): Updated the UI to provide a clearer and more intuitive layout, making it easier to configure and manage request handlers.
+
+- [Roles and Privileges UI – Button Label Update](./roles/permissionsOverview.md#clean-non-existing-resources): In the Roles and Privileges interface, the **Clear** button was renamed to **Clean** for clarity. This button appears when a resource (like an attribute) is no longer available, and lets users remove outdated permissions. 
+
+- [Initial Value Editing in Qodly Source](pageLoaders/qodlySources.md#editing-a-qodly-source): For qodlysources with editable properties, initial values now include a **Maximize** button for fields of type `object` or `array`. Clicking the maximize icon opens a popup editor, which can also be expanded to fill the contextual panel, making it easier to edit complex or long values.
+
+- [Date Picker Navigation in Text Input](pageLoaders/components/textinput.md#embedded-input): Users can now navigate to the next/previous month and next/previous year directly within the date picker for a smoother selection experience.

docs/4DQodlyPro/pageLoaders/pageLoaderOverview.md

@@ -156,6 +156,36 @@ The Sanity Check serves as an informative tool. Even if errors are present, a Pa
 
 The Qodly Sources Color button <img alt="Dialog Icon" src={require('./img/headerPanel_dtscolor.png').default} style={{borderRadius: '6px', width: '3%'}} /> 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 <img alt="Zoom Controls" src={require('./img/zoom-controls.png').default} style={{borderRadius: '6px', width: '12%'}} /> 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 <img alt="Dialog Icon" src={require('./img/events-report-switch.png').default} style={{borderRadius: '6px', width: '3%'}} /> 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.
+
+<img alt="Dialog Icon" src={require('./img/events-report.png').default} style={{borderRadius: '6px', width: '100%'}} />
+
+Users can also edit events directly within the report. Clicking the Edit <img alt="Dialog Icon" src={require('./img/edit-events-report.png').default} style={{borderRadius: '6px', width: '15%'}} /> 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:
+
+<img alt="Dialog Icon" src={require('./img/filter-events-report.png').default} style={{borderRadius: '6px', width: '15%'}} />
+
+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.
+
+<img alt="Dialog Icon" src={require('./img/switch-event-report.png').default} style={{borderRadius: '6px', width: '15%'}} />
+
+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
 

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.

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: [

sidebars.js

@@ -19,6 +19,10 @@ const sidebars = {
 			type: 'doc',
 			id: '4DQodlyPro/gettingStarted'
 		},
+		{
+			type: 'doc',
+			id: '4DQodlyPro/release-notes'
+		},
 	],
 	// Qodly 4D Pro
 	Develop: [