App Builder Release: Load-on-Demand Hierarchical Grids, DevOps Integration, Input Validation & More!

The latest update of App Builder, released in May, delivers powerful new features designed to simplify development, enhance performance, and give developers and designers more control over app behavior and user experience. From smarter data loading in Hierarchical Grids to native Azure DevOps integration and advanced validation rules across components, this release is packed with productivity-enhancing capabilities.

Before diving into these new functionalities, if this is your first time learning about App Builder, let me quickly share why you should consider it a key tool in the application development process for your organization:

• A visual app builder – the unified platform for C-level executives, enterprise architects, dev team leaders, designers, developers, and stakeholders.
• Cloud-based WYSIWYG drag & drop tool that helps companies design and build complete business apps 80% faster than ever.
• A low-code tool generates production-ready code for Angular, React, Web Components, and Blazor, and converts Figma designs to code.

What’s New in This App Builder Release?

Hierarchical Grid with Load-on-Demand

You can now configure Load-on-Demand in the Hierarchical Grid through RowIslands, allowing child data to load only when needed. This makes working with large, nested datasets significantly faster and more efficient.

Key Highlights:

• Auto-generates nested RowIslands (up to 5 levels) when bound to hierarchical data.
• Each RowIsland is individually configurable — supports filtering, sorting, pagination, and editing.
• Child data loads only when the parent row is expanded, using separate data requests.
• Visual hierarchy appears in the Outline Panel, aiding intuitive navigation and design.

Example Use Case:

Define separate data sources for Customers, Orders, and OrderDetails. The grid loads only what’s needed when you expand a row, resulting in a faster and cleaner UI experience.

There are a few known limitations that one should be aware of -> copy-paste between child levels is disabled, reparenting is not supported, reordering is only allowed within the same parent, and CRUD, remote data binding, and operations on child grids are part of the roadmap for future releases.

Azure DevOps Integration

You can now connect App Builder directly to Azure DevOps, enabling seamless CI/CD pipelines and code handoffs with just a few clicks. Read the full help docs on the subject.

What You Can Do:

• Connect to an existing Azure DevOps project
• Create and publish source code (Angular, React, Blazor, or Web Components) directly to a DevOps repository
• Trigger automatic CI builds
• Submit follow-up changes via pull requests
• Get ready for live deployments (coming soon)

Authentication Tip: Only Work or School Microsoft accounts (Azure AD) are supported for authentication. Personal Microsoft accounts (e.g., @outlook.com) are not compatible without converting to a work account or adding them as a guest to your Azure AD tenant.

Input Validation for Forms, Grids, and Inputs

Validation just got a significant upgrade! App Builder now supports input validation rules across Forms, Grid components, and standalone Inputs.

Supported Rules:

• min, max (numeric/date inputs)
• minLength, maxLength
• pattern (e.g., email format, phone masks)
• required

These validations apply:

• Automatically when reading from a Swagger schema
• Manually through custom rule definitions (which override schema rules)
• During various input interactions (on blur, submit, edit, etc.)

Validation States per HTML5 Standard

Input Type	min/max	minLength/maxLength	pattern	Notes
Email	❌	✅	✅	Use pattern for custom formats
Search	❌	✅	✅	Works like free text
Phone (tel)	❌	✅	✅	Ideal for custom number formats
Text	❌	✅	✅	Most flexible input type
Password	❌	✅	✅	Use for strength rules
Number	✅	❌	❌	HTML5 limits pattern support
Date	✅	❌	❌	Uses strict YYYY-MM-DD

Multi-Column Headers & Collapsible Column Groups

This App Builder release introduces Multi-Column Headers and Collapsible Column Groups, allowing you to create more organized and responsive grid layouts.

Feature Highlights:

• Group multiple columns under a single parent header.
• Collapsible groups can be expanded/collapsed to control visible columns.
• Configure visibility, pinning, and state (expanded/collapsed) through the Properties Panel or Outline Panel.
• Backed by the igx-column-group component and properties like collapsible and visibleWhenCollapsed.

Technical Limitations:

• Only one level of grouping is currently supported due to Angular’s and Ignite UI’s limitations with recursive rendering and dynamic structure updates.
• Pinning: When pinning a child column, its parent group must also be pinned.

Key Capabilities:

• Add RouterOutlet containers in both master and child views.
• Enable 2-level deep navigation (e.g., Customers → Orders → Order Details).
• Prepare for up to 5 levels of routing, which will be introduced in a future release.
• Ideal for master-detail scenarios, dashboards, or progressive disclosure UIs.

Wrapping Up

May’s release reflects our ongoing commitment to delivering scalable, modern app experiences in App Builder. Whether you’re designing complex data grids, enforcing robust validation rules, or streamlining DevOps workflows, this update gives you the tools to move faster and build better.

Try the new features today at appbuilder.dev

In conclusion, App Builder is a game-changer in the app development process. With its cloud-based visual builder, low-code capabilities, and new features, it’s a must-have tool for any organization. Try it out today! If you need more details, we encourage you to check out our:

• Discord channel.
• GitHub discussions.
• Roadmap.

To experience everything in the latest App Builder updates, visit your customer portal and get the latest version. As usual, we are always excited to get your feedback and hear what you want to add or recommend. So please email me at zkolev@appbuilder.dev and let me know how we can help you continue delivering value to your customers with Infragistics.