Ever wanted to enrich your user interface with widgets known from websites, such as a navigation map? Not by learning JavaScript and dealing with CSS and HTML and fighting to pass data between these two worlds?
A new integration between Web Areas and 4D Qodly Pro allows you to deliver rich, dynamic interfaces within your 4D forms while keeping all your business logic inside 4D Server.
A Real Example: Warehouse Details in One Fluid Interface
Users want desktop apps that feel native yet evolve as quickly as the web. With 4D 21, this is no longer a tradeoff. A new integration between Web Areas and 4D Qodly Pro lets you deliver rich, dynamic interfaces inside your 4D forms while keeping all your business logic inside the 4D server.
The result is a unified hybrid experience where data flows instantly, UI updates feel natural, and your development workflow stays simple. This is a hybrid done right.
Web Area Setup for a Connected Experience
Imagine a 4D listbox on the left part of your screen, while on the right showing in a Web area details for the selected item, including map location and rating controls.
Select a different warehouse and the details update instantly without a page reload. Users feel like they are navigating a native panel, not a web view. This is the flexibility of 4D Qodly Pro paired with the reliability of 4D.
EASY CONFIGURATION
To enable this seamless interaction, the Web Area is configured with two simple properties: Use embedded web rendering engine and Access 4D methods. These settings give the embedded Qodly page full access to your data and server logic.
From there, the Web Area’s “On Load” event initializes the page, attaches the correct session, and passes a context that exposes your dataclass methods.
Wait, what session and why do I need a context?
While the 4D Qodly page is loaded in this case within a web area of the 4D application, it can also be run directly from a browser. Therefore, we need to prioritize security. And it talks directly to the 4D Server, so the server needs to know to which client session it belongs. Finally, we can share a context between the 4D desktop and Qodly page, allowing us to share data. Similar to how we use a context to share data between 4D and 4D Write Pro.
Whether your app runs locally or in client-server mode, the Qodly page must operate inside the correct 4D session. This provides secure method calls and ensures data stays consistent.
Here is the exact setup used in the demo:
var $otp : Text
var $url : Text
var $context : Variant
Case of
: (Form event code=On Load)
authentify("viewDetails")
$otp := getOtp
$url := "http://localhost/$lib/renderer/?w=warehouses&$4DSID="+ $otp
WA OPEN URL(warehouseDetails; $url)
$context:=ds.WareHouse
WA SET CONTEXT(warehouseDetails; $context)
End case the authentify is a project method that needs to have the “execute on server” property checked in order to have access to the Session Object
#DECLARE($privilege : Text)
Session.clearPrivileges()
Session.setPrivileges($privilege)and the same goes for getOTP
#DECLARE() : Text
return Session.createOTP(60)viewDetails is a permission configured in Qodly Studio like so:
where we can read the Warehouse entity and execute on Warehouse.getWarehouseById to get the corresponding entity when the ID changes, to retrieve The logic is simple. Session.setPrivileges ensures the user has the necessary rights.
getOTP() issues a one time token that binds the Web Area to the current 4D session.
The URL includes the $4DSID token so the Qodly page runs within that session.
Finally, WA SET CONTEXT gives the page access to your Warehouse dataclass, including methods like GetWarehouseById and Rate.
This creates a clean, secure connection between Qodly and your data layer.
Instant UI Updates from the 4D Listbox
on the Listbox’s object method we have:
var $result : Variant
Case of
: (Form event code=On Load)
LISTBOX SELECT ROW(*; "warehouseList"; 1)
: (Form event code=On Clicked)
: (Form event code=On Selection Change)
WA EXECUTE JAVASCRIPT FUNCTION(*; "warehouseDetails"; "Qodly.setSource"; $result; "warehouseId"; Form.WareHouse.ID)
End case The listbox completes the workflow. When the user selects a warehouse, 4D calls WA EXECUTE JAVASCRIPT FUNCTION to trigger Qodly.setSource inside the Web Area. The new warehouse ID is passed along and the Qodly page updates instantly.
The user does not see a web reload. They only see fresh data appearing in the details panel.
A Modern Qodly Page That Brings Data to Life
Inside Qodly Studio, the details page uses two custom components. A Map component that shows the exact warehouse location and a Rating component that lets users update the rating. Both components are bound to the warehouse entity source.
The page listens for changes in the warehouseId source. When that source changes, it calls getWarehouseById to load the correct entity and displays it immediately.
If the user changes the rating, the Rating component triggers the Rate method in the 4D context. Updates are saved instantly.
This is the kind of responsiveness users expect from modern tools.
Why Teams Love This Hybrid Approach
You keep the power, security, and structure of 4D on the backend. You get the design flexibility and component richness of 4D Qodly Pro on the front end. And your users get a fluid, modern application that responds instantly to their actions.