4D Blog

Home Product Embed Qodly pages in a 4D web area without extra cost

Embed Qodly pages in a 4D web area without extra cost

January 7, 2026

Product

With 4D 21, a new opportunity opens up: seamlessly embed a Qodly page inside a web area on a 4D form with no additional 4D Client license required. Powered by 4D Qodly Pro, you now have full access to a new generation of modern, dynamic user interfaces. No need to choose between desktop and web forms anymore: combine both, and evolve at your own pace.

HDI_Share_C-S_Web_Session

4D Qodly Pro is available out of the box inside 4D and provides all the tools you need to design, build, and run web forms for your 4D application. 

Creating Qodly Pages relies on scalable web sessions, which are required to use the Session command and retrieve the session object. This session object is a cornerstone of 4D Qodly Pro: it provides session storage for user-specific data and plays a pivotal role in managing user permissions.

On a client-server 4D application, 4D Server also manages a remote user session for each user. This is very convenient as this session also provides the session storage!

Starting with 4D 21, these remote user sessions can now also serve Qodly Pages. For developers, the immediate benefit is the ability to embed a Qodly Page inside a web area of a 4D form without requiring an additional 4D Client license. The license already used by the user to display the 4D form is reused to render the embedded Qodly Page, thanks to the remote user session.

a concrete example

On 4D forms, web areas can render Qodly pages, making it easy to introduce web content into your 4D Server application at your own pace. This allows you to take full advantage of 4D Qodly Pro, especially its modern, web-oriented design.

To access either a 4D form or a Qodly Page, a 4D Client license is required, the same licensing rules apply in both environments.

However, thanks to the OTP mechanism, a single license can be used for both a 4D form and an embedded Qodly Page within an internal web area.

The result? A 4D form that seamlessly combines traditional 4D UI components with modern 4D Qodly Pro widgets.

You can see that the session id is the same both in the 4D Form (using the remote user session) and in the web area displaying a Qodly page. 

how to do this

The otp mechanism

OTP stands for One-Time-Passcode. Until now in a 4D Qodly Pro application, using OTP allows you to recover an existing session when switching from one device or browser to another, or when implementing back and forth workflows with external systems (such as account creation via email, third party APIs, etc.)

In short:

  • Obtain an OTP for a given session by calling the Session.createOTP() function
  • Use it in any browser with a url such as https://my4Dapp/$lib/renderer/?w=myQodlyPage&$4DSID=”+OTP

 

The original session is retrieved using the provided OTP.

With 4D 21, Session.createOTP() is no longer limited to web sessions, it now also works with remote user sessions!

To retrieve and use an existing remote user session the mechanism is the same: provide the OTP value in the $4DSID parameter of the web request, and the corresponding remote user session will be used.

Implementation

Create a getOTP project method, or a singleton function, or an ORDA function. Just make sure this code is executed on the server. Executing the Session command on a client returns null.

// In Client Server:
// ----------------
// This method is executed on the server because the session object is on the server
// The Session object is Null on the client 
//

#DECLARE() : Text

return Session.createOTP()

Load a Qodly page (here below ‘Products’) in a web area.


Form.otp:=getOTP

Form.url:="http://localhost/$lib/renderer/?w=Products&$4DSID="+Form.otp

WA OPEN URL(*; "QodlyPage"; Form.url)

handling privileges

Any required privilege for your Qodly page can be set in the Session beforehand, before opening the URL in the Web area using the setPrivileges() function.

When called on a remote user session, it adds privileges to the Session for subsequent web accesses.

develop and test your Client-Server app in a 4D development environment

Because the OTP mechanism is also supported in a 4D development environment, your client-server application can be easily developed and tested in a 4D development environment.

In this development environment, there is now a true standalone session capable of generating an OTP to handle web access, just like a remote user session.

 

Play the attached HDI in both a client-server environment and a 4D development environment. There’s no difference, and the behaviour is the same.

As demonstrated above, the winning formula is: 4D Qodly Pro = 4D, making it a breeze to bring modern and dynamic interfaces to your 4D Server applications.

The path is wide open, nothing extra is needed, and getting started with 4D Qodly Pro is easier than ever.

Discuss

Tags 21, 4D Qodly Pro, Client/Server, ORDA, otp, Session, Web, Web area, Web server

Latest related posts

  • January 22, 2026

    Transform Static Documents into Actionable Knowledge with AIKit

  • January 22, 2026

    Deploy Fluent UI effortlessly in your 4D applications

  • January 21, 2026

    Searching Across Host Projects and Components in 4D

Avatar
Marie-Sophie Landrieu-Yvert
- Product Owner - Marie-Sophie Landrieu-Yvert joined the 4D Product team as a Product Owner in 2017. In this role, she is responsible for writing user stories and translating them into functional specifications. She also ensures that the delivered feature implementation meets the customer's needs. Marie-Sophie graduated from the engineering school ESIGELEC and began her career as an engineer at IBM in 1995. She took part in various projects (maintenance and development projects) and worked as a COBOL developer. She then moved on to work as a UML designer and Java developer. More recently, her main responsibilities included analyzing and writing functional requirements, and coordinating business and development teams.
  • Deutsch
  • Français
  • English
  • Português
  • Čeština
  • Español
  • Italiano
  • 日本語

Categories

Browse categories

  • AI
  • 4D View Pro
  • 4D Write Pro
  • 4D for Mobile
  • Email
  • Development Mode
  • 4D Language
  • ORDA
  • User Interface / GUI
  • Qodly Studio
  • Server
  • Maintenance
  • Deployment
  • 4D Tutorials
  • Generic
  • 4D Summit sessions and other online videos

Tags

4D-Analyzer 4D AIKit 4D for Android 4D for iOS 4D NetKit 4D Qodly Pro 4D View Pro 4D Write Pro 20 R10 21 21 R2 Administration AI Artificial Intelligence Build application Class Client/Server Code editor Collections Compatibility settings Formula Listbox Logs Mail Network Objects OpenAI ORDA PDF Pictures Preemptive Programming REST Scalability Security Session Source control Speed Spreadsheet Tutorial UI User Experience vscode Web Word processor

Tags

4D-Analyzer 4D AIKit 4D for Android 4D for iOS 4D NetKit 4D Qodly Pro 4D View Pro 4D Write Pro 20 R10 21 21 R2 Administration AI Artificial Intelligence Build application Class Client/Server Code editor Collections Compatibility settings Formula Listbox Logs Mail Network Objects OpenAI ORDA PDF Pictures Preemptive Programming REST Scalability Security Session Source control Speed Spreadsheet Tutorial UI User Experience vscode Web Word processor
Subscribe to 4D Newsletter

© 2026 4D SAS - All rights reserved
Terms & Conditions | Legal Notices | Data Policy | Cookie Policy | Contact us | Write for us


Subscribe to 4D Newsletter

* Your privacy is very important to us. Please click here to view our Policy

Contact us

Got a question, suggestion or just want to get in touch with the 4D bloggers? Drop us a line!

* Your privacy is very important to us. Please click here to view our Policy