Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions docs/4DQodlyPro/gettingStarted.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
6 changes: 5 additions & 1 deletion docusaurus.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand All @@ -193,6 +195,7 @@ Thank you for helping us improve! 🚀
'21': {label: '21 BETA'},
'R10': {label: '20 R10'},
},
/*
dropdownItemsAfter: [
{
type: 'html',
Expand All @@ -212,6 +215,7 @@ Thank you for helping us improve! 🚀
href: 'https://developer.qodly.com/docs-archive/1.0.0/get-started/quickstart',
},
],
*/
},
],
},
Expand Down
2 changes: 2 additions & 0 deletions src/components/HomepageFeatures/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ const FeatureList = [
link: "Integrations/customComponents/overview"
},
*/
/*
{
title: 'Cloud',
Svg: require('@site/static/img/qodly-cloud.svg').default,
Expand All @@ -57,6 +58,7 @@ const FeatureList = [
),
link: "QodlyinCloud/quickstart"
}
*/
];

function Feature({Svg, title, description, link}) {
Expand Down
4 changes: 1 addition & 3 deletions versioned_docs/version-21/4DQodlyPro/gettingStarted.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
298 changes: 163 additions & 135 deletions versioned_docs/version-21/4DQodlyPro/pageLoaders/components/textinput.md

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ After binding a standard action to a qodlysource with an event, follow these ste
| | Set Value | ![SetValue](./img/standardAction_setValue.png) | 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 | ![Clear](./img/standardAction_clear.png) | Erase the content within the qodlysource |
| | Reset | ![Reset](./img/standardAction_reset.png) | Resets the qodlysource to its initial value |
| Scalar (Number) | Increment | ![Increment](./img/standardAction_increment.png) | Increments the qodlysource's value |
| | Decrement | ![Decrement](./img/standardAction_decrement.png) | Decrements the qodlysource's value |
| Entity Selection | Order By | ![Order By](./img/standardAction_orderBy.png) | Specify one or more attributes to sort and select direction |
| | Query | ![Query](./img/standardAction_query.png) | 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](./img/standardAction_reload.png) | Reload the entire entity selection from the server |
Expand Down Expand Up @@ -523,6 +525,45 @@ Consider a function called `product.productManual`, which is exposed with the `o
For further details, refer to the [Dialog](../components/dialog.md) section.
:::

## Binding Qodly Pro Actions

<Column.List align="center" justifyContent="between">
<Column.Item width="55%">
Components within a Page can be configured to trigger Qodly Pro events. By choosing the <code>Add a Qodly pro action</code> in a component's event configuration, you can define the following:
</Column.Item>
<Column.Item width="40%">
<img src={require('./img/qodlyProAction.png').default} style={{borderRadius: '6px'}} />
</Column.Item>
</Column.List>

<Column.List align="center" justifyContent="between">
<Column.Item width="55%">
The type of action:
<br/><br/>
<ul>
<li><strong>Authentication</strong>: This action logs the user out of the rendered app<br/></li>
<li><strong>4D Code</strong>: This action allows you to call 4D function shared through the [WA SET CONTEXT](https://developer.4d.com/docs/fr/commands/wa-set-context) when running the qodly page inside a Web Area in a 4D Form</li>
</ul>
</Column.Item>
<Column.Item width="40%">
<img src={require('./img/qodlyProAction2.png').default} style={{borderRadius: '6px'}} />
</Column.Item>
</Column.List>

### Authentication

<img src={require('./img/qodlyProActionLogout.png').default} style={{borderRadius: '6px'}} />

The Authentication type has the logout function to log the user out of the app.

### 4D Code

<img src={require('./img/qodlyProAction4dContext.png').default} style={{borderRadius: '6px'}} />

The user can type in the name of the function they want to execute and also add params and bind the result the same way they would do calling a [Class Functions](#class-functions)



## 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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ To bind class functions, navigation actions or standard actions with events, fol
- [Navigation Action](./bindingActionToEvents.md#binding-navigation-actions-to-events): Set up actions related to navigation within the application, such as opening another page or redirecting to an external URL.
- [Class Function](./bindingActionToEvents.md#binding-class-functions-to-events): Use a custom function to handle the event.
- [Dialog Action](./bindingActionToEvents.md#binding-dialog-actions-to-events): Configure to trigger dialog-related events.
- [Qodly Pro Action](./bindingActionToEvents.md#binding-dialog-actions-to-events): Configure to trigger Qodly Pro specific events.

4. **Action Bound to Event**: In the list of available events, you will notice a purple bullet <img src={require('./img/events_purpleBullet.png').default} style={{borderRadius: '6px', width: '22%'}} /> displayed on the left side of events that have already been configured (if any).

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,21 @@ When a shortcut is defined, the **Save** button becomes active.
If you want to discard changes or remove all shortcuts, click **Cancel**.
This will close the dialog without saving modifications.

### App events

#### onSessionExpired

Triggered when the session is no longer valid. This happens in the following situations:
• The server restarts
• The user has been inactive for a certain period of time
• A request fails due to an expired or invalid session

#### onSessionExpireReminder

Triggered after a configurable period of inactivity to warn the user before the session expires. The delay can be adjusted using a simple minute selector with plus and minus controls.

![OnSessionExpiredConfig](./img/onSessionExpired.png)

### Qodly Source events

Besides events triggered by end-user actions, events can also be automated to respond when qodlysources undergo changes. Qodly Sources support two distinct events: the `On Change` event and the `On Init` event.
Expand Down
2 changes: 0 additions & 2 deletions versioned_docs/version-R10/4DQodlyPro/gettingStarted.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ title: Getting Started

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).

Qodly Studio proposes a full-featured web UI, allowing you to:

- create Qodly pages by placing components on a canvas
Expand Down