diff --git a/docs/4DQodlyPro/gettingStarted.md b/docs/4DQodlyPro/gettingStarted.md index 40f40045f..cd8e2bd98 100644 --- a/docs/4DQodlyPro/gettingStarted.md +++ b/docs/4DQodlyPro/gettingStarted.md @@ -5,9 +5,7 @@ title: Welcome **Qodly Studio** is an interface builder for web applications. It provides developers with a graphical page editor to design applications running in web browsers or smartphones. It supports natively the [ORDA objects](https://developer.4d.com/docs/ORDA/overview). -You can use Qodly Studio directly from your **4D environment** to build modern and sophisticated interfaces that you can easily integrate to your existing 4D projects and deploy **on premise**. - -Qodly Studio can also be used in the [**Qodly Cloud platform**](https://qodly.com), dedicated to the development of web business applications (see the [**Qodly Cloud**](../QodlyinCloud/quickstart.md) section of the documentation for more information). +You use Qodly Studio directly from your [**4D environment**](https://developer.4d.com/docs) to build modern and sophisticated interfaces that you can easily integrate to and [deploy](../4DQodlyPro/deploy.md) with your existing 4D projects. Qodly Studio proposes a full-featured web UI, allowing you to: diff --git a/docusaurus.config.js b/docusaurus.config.js index 23fbdb96b..18dadacce 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -12,7 +12,7 @@ const isProduction = process.env.GITHUB_REPOSITORY_OWNER === '4d'; 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", + url: isProduction ? "https://developer.4d.com" : "https://doc4d.github.io", baseUrl: isProduction ? "/qodly/" : "/docQodlyPro/", // baseUrl: "/qodly/", onBrokenLinks: 'warn', @@ -175,12 +175,14 @@ Thank you for helping us improve! 🚀 label: 'Custom Components', }, // Qodly Cloud + /* { type: 'doc', docId: 'QodlyinCloud/quickstart', position: 'left', label: 'Qodly Cloud', }, + */ // { type: 'docsVersionDropdown', @@ -193,6 +195,7 @@ Thank you for helping us improve! 🚀 '21': {label: '21 BETA'}, 'R10': {label: '20 R10'}, }, + /* dropdownItemsAfter: [ { type: 'html', @@ -212,6 +215,7 @@ Thank you for helping us improve! 🚀 href: 'https://developer.qodly.com/docs-archive/1.0.0/get-started/quickstart', }, ], + */ }, ], }, diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js index d108ad82a..01f97e1fe 100644 --- a/src/components/HomepageFeatures/index.js +++ b/src/components/HomepageFeatures/index.js @@ -47,6 +47,7 @@ const FeatureList = [ link: "Integrations/customComponents/overview" }, */ + /* { title: 'Cloud', Svg: require('@site/static/img/qodly-cloud.svg').default, @@ -57,6 +58,7 @@ const FeatureList = [ ), link: "QodlyinCloud/quickstart" } + */ ]; function Feature({Svg, title, description, link}) { diff --git a/versioned_docs/version-21/4DQodlyPro/gettingStarted.md b/versioned_docs/version-21/4DQodlyPro/gettingStarted.md index 40f40045f..cd8e2bd98 100644 --- a/versioned_docs/version-21/4DQodlyPro/gettingStarted.md +++ b/versioned_docs/version-21/4DQodlyPro/gettingStarted.md @@ -5,9 +5,7 @@ title: Welcome **Qodly Studio** is an interface builder for web applications. It provides developers with a graphical page editor to design applications running in web browsers or smartphones. It supports natively the [ORDA objects](https://developer.4d.com/docs/ORDA/overview). -You can use Qodly Studio directly from your **4D environment** to build modern and sophisticated interfaces that you can easily integrate to your existing 4D projects and deploy **on premise**. - -Qodly Studio can also be used in the [**Qodly Cloud platform**](https://qodly.com), dedicated to the development of web business applications (see the [**Qodly Cloud**](../QodlyinCloud/quickstart.md) section of the documentation for more information). +You use Qodly Studio directly from your [**4D environment**](https://developer.4d.com/docs) to build modern and sophisticated interfaces that you can easily integrate to and [deploy](../4DQodlyPro/deploy.md) with your existing 4D projects. Qodly Studio proposes a full-featured web UI, allowing you to: diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/components/img/textInput24HourFormat.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/components/img/textInput24HourFormat.png new file mode 100644 index 000000000..9aaf53ecf Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/components/img/textInput24HourFormat.png differ diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/components/img/textInput_am_pm.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/components/img/textInput_am_pm.png new file mode 100644 index 000000000..b16e8b22d Binary files /dev/null and b/versioned_docs/version-21/4DQodlyPro/pageLoaders/components/img/textInput_am_pm.png differ diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/components/textinput.md b/versioned_docs/version-21/4DQodlyPro/pageLoaders/components/textinput.md index 6c5a70b07..255d5235c 100644 --- a/versioned_docs/version-21/4DQodlyPro/pageLoaders/components/textinput.md +++ b/versioned_docs/version-21/4DQodlyPro/pageLoaders/components/textinput.md @@ -2,13 +2,12 @@ id: textinput title: Text Input --- -import Column from '@site/src/components/Column' +import Column from '@site/src/components/Column' The **Text Input** component is an interactive UI element that enables user interactions by allowing the input of alphanumeric data within a Page. With support for various input types, this component accommodates diverse data entry scenarios. - -:::info +:::info The **Text Input** component contains an embedded **Input** and a **Label** element. This is of great importance as configuring the **Text Input** component may require adjusting properties within the embedded elements. This applies to the visual style, triggers, and actions as they may differ. @@ -24,9 +23,6 @@ The Text Input component provides a versatile solution for a wide range of scena - **Comments and Notes**: Employees can leave comments, feedback, or additional information on records, facilitating efficient communication and collaboration. - - - ## Properties Customization ### Text Input Component @@ -34,30 +30,31 @@ The Text Input component provides a versatile solution for a wide range of scena Enhance the **Text Input** component to align with your application's requirements using the following customization options: - - - - - - - + + + + + + + ### Embedded Label Within the **Text Input** component, an embedded **Label** allows for further customization of the following properties: - - - - - - + + + + + + + ### Embedded Input @@ -65,15 +62,16 @@ Within the **Text Input** component, an embedded **Label** allows for further cu Within the **Text Input** component, an embedded **Input** allows for further customization of the following properties: - - - - - - + + + + + + + +
- **Input Format**: Specify the desired format for the entered data.
-See Formats for a description of available formats. + See Formats for a description of available formats.
@@ -246,30 +267,31 @@ See Formats for a description of The **Text Input** component allows for seamless integration of Qodly Sources, enabling dynamic data binding and interaction within the Page. -:::info +:::info The qodlysource for the **Text Input** component should be of type `text`, `number`, `date`, or `duration`. ::: ### Data Binding + To associate data with the Text Input component, follow these steps: 1. **Navigate to the Properties Panel**: Access the Data Access category located within the Properties panel for the Text Input component. - -
    -
  1. Define the Qodly Source: Specify the appropriate qodlysource that contains the data you want to display within the Text Input or retrieve from user input. This can be an attribute from an entity, an array, or a direct qodlysource of type text. For instance, you can select an entity, such as package.
    2. -
- - - - + + +
    +
  1. Define the Qodly Source: Specify the appropriate qodlysource that contains the data you want to display within the Text Input or retrieve from user input. This can be an attribute from an entity, an array, or a direct qodlysource of type text. For instance, you can select an entity, such as package.
    2. +
+ + + + - 3. **Choose the Attribute**: Choose the specific attribute that you want to display within the component when using an entity or an array type qodlysource, such as package.name. -:::tip +:::tip Alternatively, you can establish the connection by dragging and dropping the qodlysource onto the Text Input component. ::: @@ -277,23 +299,22 @@ Alternatively, you can establish the connection by dragging and dropping the qod Retrieving user input data is equally effortless. By binding a Qodly Source to the **Text Input** component, you can access and employ user-entered content. - - - Imagine a search input where users type to find packages. Binding a qodlysource captures the input. - - - - + +Imagine a search input where users type to find packages. Binding a qodlysource captures the input. + + + + - - Consequently, you can utilize this input value in various ways, such as within a standard action to initiate a search with matching attribute values. - - - - + +Consequently, you can utilize this input value in various ways, such as within a standard action to initiate a search with matching attribute values. + + + + ## Customizing Text Input Styles @@ -304,18 +325,18 @@ The **Text Input** component consists of embedded elements that can be styled in The following HTML tags make up the structure of the **Text Input** component. Each tag can be individually styled to adjust its appearance and interaction. -| **Tag Name** | **Applies To** | **Description** | -|--------------|-----------------------------|----------------------------------------------------------------------------------------------------------------------------| +| **Tag Name** | **Applies To** | **Description** | +| ------------ | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `