Unlocking Customization in QAD WebUI: A Guide to Front-End and Back-End Enhancements

Posted on: March 19, 2025 | By: Alexa Leitner | QAD Practice News, ERP Selection, QAD Business Process

As businesses continue their digital transformation, understanding and customizing enterprise resource planning (ERP) systems like QAD is essential. 

Understanding QAD Customization 

QAD has evolved through multiple user interfaces, from the character-based CHUI to the .NET UI and now to the web-based AUX WebUI. With this transition, customization approaches have also shifted, offering new opportunities and challenges. 

Customizations primarily occur during the design, development, validation, and testing phases. Key tasks include defining requirements, developing functional design documents (FDDs), executing changes, and validating results before deploying updates to production. 

A Historical Perspective on QAD Interfaces 

Over the years, QAD has utilized three primary interfaces:  

  1. CHUI (Character User Interface): A text-based interface directly interacting with the Progress database. 
  1. .NET UI: A graphical user interface (GUI) acting as a screen scraper for Progress Code while also introducing an early version of API-based customizations. 
  1. WebUI (AUX): A fully API-driven web-based interface designed for scalability and modernized user experience. 

Each of these platforms has its own approach to customization, with WebUI offering security and flexibility through its separation of front-end and back-end functionality. 

Breaking Down the WebUI Architecture 

QAD’s WebUI is built with a clear separation between the client-side (front-end) and the server-side (back-end).  

  • Front-end: The client side consists of a web-based interface utilizing JavaScript and TypeScript. This layer handles user interactions, displaying data retrieved from the server. 
  • Back-end: The server side involves Progress OpenEdge database operations, APIs, and business logic processing. Here, data transactions occur, ensuring system integrity and efficiency. 

APIs serve as the bridge between these layers, facilitating communication through HTTP requests (GET, POST, DELETE) and translating these into CRUD (Create, Read, Update, Delete) operations. 

Front-End Customization: Enhancing User Experience 

Front-end modifications focus on improving user interactions and visual enhancements. Some key customization options include: 

  • UI Adjustments: Changing layouts, adding/removing fields, or modifying screen elements. 
  • TypeScript Handlers: Scripts that trigger actions when users interact with specific fields, such as data validation or auto-filling values. 
  • API Calls: Fetching additional data from different business components or triggering automated workflows. 
  • Custom Business Components: Creating new UI components to extend existing functionality and improve usability. 

Front-end scripting is particularly useful for: 

  • Validating user inputs before submission. 
  • Manipulating datasets before sending them to the back-end.  
  • Interacting with multiple APIs to streamline workflows. 

Back-End Customization: Streamlining Data Processing 

Back-end modifications play a crucial role in managing data efficiently. These customizations often involve: 

  • Business Logic Adjustments: Applying rules to validate and manipulate data before it’s stored. 
  • Automated Workflows: Generating notifications, reports, or integrations with other business systems. 
  • Database Interactions: Direct manipulation of tables and structured data processing. 

Key back-end features include: 

  • Event Handlers: Executing logic before or after CRUD operations. 
  • Hooks for Data Processing: Modifying behavior based on API interactions. 
  • Integration with External Systems: Enabling seamless data transfer. 

Tools for Debugging and Mapping Data 

Understanding how WebUI communicates with the back-end is essential for effective customization. The training covered: 

  • Entity Mapping: Establishing relationships between virtual fields and database fields. 
  • Chrome Developer Tools: Inspecting elements, tracking API calls, and debugging data sets in real-time. 
  • QAD’s Data Reference Guide: A comprehensive resource for identifying data structures and relationships. 

Examples: Real-World Customization Scenarios 

Defaulting Site Codes Based on Generalized Rules 

  • Business Need: Automatically populate site codes based on predefined logic. 
  • Solution: Used an API function to modify site assignment dynamically. 
  • Customization Type: Back-end (utilizing handle item change function). 

Excluding Holidays and Weekends from Due Dates 

  • Business Need: Ensure that due dates do not fall on holidays or weekends. 
  • Solution: Implemented a back-end function to adjust dates dynamically. 
  • Customization Type: Back-end (leveraging API processing). 

Automated Email Notifications for Specific Orders 

  • Business Need: Send an alert when certain parts are ordered. 
  • Solution: Used an automated QAD Print process to generate and send email notifications. 
  • These email notifications will alert people out of the system. 
  • Customization Type: Back-end (triggered upon order entry). 

Looking Ahead: The Future of QAD Customization  

With QAD’s shift towards cloud-based infrastructure and the anticipated move to a Java-based API, organizations must adapt their customization strategies. Current customizations that are wholly progress-based will need to be migrated to the WebUI and will likely require both front-end and back-end development. Even though the progress API will need to be re-written in Java, transitioning to O3 will make it easier to re-write just the back-end instead of the whole conversion. Transitioning to an API model for customizations is better sooner rather than later. 

Predicted Changes: 

  • Database Migration: Moving from Progress to AWS-based database solutions. 
  • API Transition: Replacing Progress APIs with Java-based APIs. 
  • Customization Evolution: Front-end customizations in TypeScript will likely remain, but back-end logic will require rewriting in Java. 

Businesses should focus on: 

  • Developing flexible front-end solutions that can migrate seamlessly. 
  • Preparing for back-end code rewrites to align with Java APIs. 
  • Exploring new reporting tools as QAD transitions away from legacy browsers. 

Final Thoughts 

Understanding the customization capabilities of QAD WebUI is key to optimizing ERP functionalities for business needs. Whether adjusting user interfaces for better accessibility or enhancing back-end processes for efficiency, these modifications empower businesses to leverage QAD’s full potential. 

With ongoing advancements in QAD technology, staying informed and adapting customization strategies will be crucial for long-term success. We encourage teams to explore these customization options and prepare for future updates in the evolving QAD ecosystem. 

Stay tuned for more insights on QAD advancements and best practices for seamless ERP customization. 

Next Steps 

If you’re ready to elevate your team’s QAD expertise, we’re here to help. Logan Consulting specializes in QAD training tailored to your organization’s unique needs. Contact us today at info@loganconsulting.com or call (312) 345-8817 to learn more about how we can support your team’s growth and development.