Extend Your 4D Application to
the Web with the Built-in 4D Qodly Pro
4D Qodly Pro: Bring Your 4D Application to the Web Effortlessly
Give your users seamless web browser-based access to your 4D application with 4D Qodly Pro.
Fully integrated into 4D, 4D Qodly Pro lets you extend or move existing applications to the web, or create new web-enabled solutions, while maintaining your current environment unchanged.
Your business logic remains in 4D, your ORDA data model stays the same, and your project structure remains familiar. Web interfaces are built inside your 4D project and run on your existing 4D Server.
No new web frameworks. No migrations. No extra licensing.
Why Use 4D Qodly Pro?
Extend or Move Your 4D Application to the Web – Give users access from any modern desktop or mobile browser.
Leverage Your 4D Expertise - Build web interfaces using familiar 4D concepts and tools, focusing on application logic and data. No need of learning HTML, JavaScript, or web frameworks.
No Full Rewrite Required - Reuse your existing business logic, ORDA model, and database structure directly in web interfaces.
Use Your Existing 4D Licenses - If you are a Silver 4D Partner or higher, you're all set for development. Your current 4D Client licenses cover web deployment.
Reduce Development Time - Create web interfaces faster using a visual editor and ready-to-use components designed for business applications.
How It Works
4D Qodly Pro is built into 4D, offering a smooth unified development experience:
- Qodly Studio - A visual editor for designing web interfaces with drag-and-drop simplicity, similar to 4D forms.
- Qodly Pages - Structured web screens that define layout, data, and interactions without writing HTML or JavaScript, hosted and executed by 4D Server.
- Qodly Custom Components - Extend functionality with reusable UI elements tailored to your needs.
With these tools, you design and deploy web pages directly within 4D, while keeping your application logic and database intact.
Discover the Power of 4D Qodly Pro
Learn how to easily build web interfaces with 4D Qodly Pro, step-by-step.
Take the Tour
Maximize Your Code Investments
Effortlessly build Qodly Pages by leveraging your existing 4D code base. Web interfaces call the same Data model functions you already use, keeping business logic centralized and dramatically reducing development time. Your years of 4D work remain fully reusable.
Leverage Existing Licenses
Develop web applications at no extra cost when included in your 4D Partner silver contract or above. Deploy and run your applications using your existing 4D Client licenses without extra fees.
Harness the Power of ORDA Technology
4D Qodly Pro uses the Object Relational Data Access (ORDA) as the business abstraction layer. Work with data as objects instead of dealing with complex database queries. ORDA’s abstraction layer simplifies data management, making business logic implementation more intuitive and reducing maintenance efforts.
Design without Effort
Build functional web forms using drag-and-drop tools designed for business applications. Layout, styling, and behavior are configured visually, making web UI creation accessible even for developers new to the web.
Integrate Web Pages into 4D Forms
Enhance your desktop interfaces with rich web widgets by embedding Qodly Pages inside a 4D form. Share sessions, data, and actions between 4D forms and Qodly Pages so selections, updates, and interactions stay synchronized in real time without leaving the 4D environment.
Deliver a Personalized User Experience
Enhance user engagement by dynamically adjusting the UI based on data, privileges, and application context. With features like Page States, your application can automatically modify its layout, visibility, and styling in response to user interactions, ensuring a more intuitive experience.
Extend Application Capabilities
Expand the functionality of your application with custom components tailored to your needs. Whether it’s charts for analytics, date pickers for scheduling, or interactive forms, allowing you to build powerful, business-driven solutions tailored to your needs.
Boost Productivity
Work smarter, not harder. Reduce repetitive tasks and accelerate development with pre-built templates, form duplication, and reusable built-in components. Spend less time on repetitive tasks and more time delivering innovation and value.
Improve Development Efficiency
Make real-time adjustments without disrupting your workflow. The Qodly Page Preview feature allows you to instantly visualize your design and behavior without needing constant refreshes, helping you refine user interactions and perfect your application faster.
Keep Your Application Secure
Easily manage roles and privileges with the built-in security editor. Maintain full control over access rights and protect your applications from the ground up.
“We’ve relied on our 4D software for 10 years, and we needed to go mobile to grow our business. 4D Qodly Pro made it possible to extend our existing system to our technicians in the field. Now, they can access and update customer data remotely and in real-time, right from the job site. This success has given us the confidence to expand our web capabilities even further.”
Documentation
Everything you need to know about 4D Qodly Pro
Qodly Studio
Design web pages visually inside your 4D project, bringing layout, components, data binding, interactions, permissions, and live browser preview together in one focused workspace.
Drag & Drop
Build web forms visually on a drag-and-drop canvas that feels like 4D forms, keeping your focus on layout and behavior instead of front-end code.
Pre-built Components
Create business-ready web interfaces faster using built-in components like tables, select boxes, and matrices, so common screens come together without custom UI work.
Templates
Start from ready-made page structures that remove layout guesswork, accelerate page creation, keep interfaces consistent, and adapt easily as requirements evolve
Custom Components
Extend interfaces with reusable custom components shared by the 4D Qodly Pro community when standard ones aren’t enough.
CSS Editor
Tailor your application’s look and feel to match your brand by managing styles, colors, and layouts through CSS classes directly from the contextual and properties panels.
Crafted Components
Turn existing components into reusable building blocks that preserve layout, styles, events, and data bindings across pages in the same project.
Data Mapping
Bind UI components visually to ORDA data using Qodly Sources from the Catalog, so changes flow automatically and interfaces stay aligned.
Page States
Adapt layout and behavior visually based on data, privileges and context, so each page shows the right content instantly without server-side processing.
Dialogs
Create modal dialogs visually to handle confirmations, data entry, and guided actions, keeping users in context and completing actions without leaving the page.
Event Configuration
Connect user interactions to existing 4D logic by triggering class functions, standard behavior, navigation, states, and dialogs actions directly from the interface without front-end scripting.
Events Report
Visualize all interactions and execution flows in one clear view, so adjusting page behavior stays fast, predictable, and fully under control.
Navigation
Define navigation visually between Qodly Pages and external links so users move through workflows naturally, without confusion.
Read-Only Mode for Components
Guide users by controlling when data is editable or read-only based on role or state, reducing errors and maintaining clean workflows.
Qodly Page Preview
Preview pages live in the browser as you build, without stopping, restarting, or losing focus.
Roles and Privileges
Secure your application with a visual roles and privileges editor that controls access to data and actions in one consistent place.
Localization
Manage translations directly on screen, preview multiple languages, and adapt layouts per locale, without extra code.
Desktop Integration
Embed Qodly Pages inside 4D desktop forms and synchronize data both ways for a unified interface.
Session Control
Allow users to close web sessions when no longer needed, helping free licenses and keep multi-user environments clean and efficient.
Rich Content Delivery
Serve files and dynamic content with full HTTP control, including headers, body, and status codes.
HTTP Handlers
Expose server-side logic through visually configured HTTP endpoints that connect URLs and request methods to your existing 4D classes for external or multi-client access.
Visual Editing with JSON Access
Build visually by default and switch to a synchronized JSON view when needed, with pages, states, and permissions always staying aligned between visual and text views.
Debugger
Inspect, track, and troubleshoot your application in real-time with a dedicated debugging interface for analyzing variables, breakpoints, and execution flow.
Auto Cleanup
Automatically clean up unused assets, keeping your project lightweight and optimized.
