Latest App Builder Updates: GitHub Pages Deployment & Hierarchical Grid

With 2025 approaching, we will rush into the latest App Builder updates so you can have every component and feature you need to build a differentiating user experience and high-performance apps! And in this App Builder release, we have added a new Hierarchical Grid to the component toolbox and GitHub Pages deployment for hosting static sites directly from a repository.

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 as a key tool in the application development process for your organization:

• A visual app builder – the unified platform for product managers, 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 generating production-ready Blazor code, Angular code, React code, and Web Components code from your Figma designs.

GitHub Pages Deployment as Part of the Latest App Builder Updates

The latest App Builder updates now provides a seamless experience for Site Hosting.

Overview of GitHub Pages – GitHub Pages offers an excellent solution for hosting websites directly from your GitHub repository. This service is perfect for developers looking to deploy project documentation, personal portfolios, or even blogs with minimal setup. Here’s how GitHub Pages works:

• Seamless Integration: Each GitHub repository can serve as the host for a website. Your content is instantly accessible via a URL like https://your-username.github.io/your-repo-name.
• Automatic Updates: Changes pushed to your repository are automatically reflected on your website, ensuring your site is always up-to-date.
• Static Site Generation: GitHub Pages includes support for Jekyll, which transforms Markdown into HTML, making content management straightforward.
• Customization: There’s a range of Jekyll themes available for customization, alongside the ability to apply custom CSS for unique styling.
• Custom Domains: While GitHub provides a subdomain, you can also link a custom domain to your site for a professional touch.

Integration with App Builder Platform

The App Builder, known for its low-code capabilities that generate Angular, React, Blazor, and Web Components, has now integrated with GitHub Pages to enhance the deployment options for developers. Here’s what this integration currently looks like:

For Free-Plan (Standard) GitHub Users:

• Automatic GitHub Pages Deployment: Upon picking the Deploy checkbox, It automatically enables GitHub Pages for your App Builder projects when deployed as public repositories. This means your client-side projects can go live directly from GitHub without additional configuration.
• Option to Opt-Out: Allows users to decide if they want GitHub Pages enabled for their project at deployment. This gives developers control over their project’s visibility and deployment strategy.

Note on Enterprise and Pro Plans:

The integration for enterprise and pro GitHub users to automatically deploy or choose deployment settings for GitHub Pages are delayed for future iterations. This means that at this stage, the current focus remains on enhancing the experience for standard users.

Actual User Stories in Action

• Deploying a Project: Imagine you’ve built a React application using the App Builder Platform. With the current integration, once you push your project to a public GitHub repo, GitHub Pages could automatically host your site, making it accessible to the world with minimal effort.
• Control Over Deployment: For those who might not want their projects publicly hosted or need to control the deployment timeline, the upcoming UI enhancements will allow toggling GitHub Pages on or off, giving you the flexibility to manage your project’s visibility.

In a nutshell, the integration of GitHub Pages with the App Builder Platform in the latest App Builder updates represents a significant step towards simplifying the deployment of static sites. Whether you’re a hobbyist, a professional developer, or part of a large enterprise, this integration aims to reduce the complexities associated with web hosting, allowing you to focus more on development rather than infrastructure management. Stay tuned for further updates as we continue to expand this integration to include more user control and broader plan support.

Hierarchical Grid Component in The Toolbox

Our WYSIWYG App Builder just got even better with a powerful new component that fills out the last Grid spot on the AB Grids bench of components. We now have Grid, HGrid, TreeGrid and PivotGrid, all of them part of AB’s toolbox.

The Hierarchical Grid, or HGrid, is a powerful tool for displaying and interacting with complex, nested data structures. Designed to handle up to 5 levels of depth, HGrid simplifies the visualization and management of hierarchical data through its intuitive RowIslands feature. Each RowIsland in the Hierarchical Grid is essentially a Flat Grid, packed with functionality like sorting and filtering but specifically tailored for nested data.

Important Note: Keep in mind that remote data operations such as paging, sorting, or filtering in RowIslands are currently disabled to maintain adherence to RESTful API principles, which advocate for sub-resources and associations rather than nested structures for managing data.

Key Features of Hierarchical Grid

• Automatic RowIsland Generation: When you bind HGrid to a hierarchical data source, it automatically generates RowIslands for each level of data up to 5 levels deep.
• Configurable RowIslands: Each RowIsland can be independently configured with features like column settings and templates, ensuring flexibility at each hierarchical level.
• Navigational Ease: Upon selecting HGrid, the first row automatically expands, showing child grids. Navigation through the hierarchy is made intuitive via the Outline panel. Users get tailored control over each RowIsland, customizing features like sorting and pagination, but note that group-by and remote operations are not supported. The grid expands to show child grids, and users can navigate through levels, selecting and configuring each RowIsland.
• Hierarchy Management: The Data Hierarchy component visually represents the parent-child relationships, allowing users to show or hide child grids as needed selectively. Users can choose which levels of data to display or hide, enhancing user experience by managing data complexity.

Extra Functionalities and Integration Scenarios

• Drop and Bind: Dropping HGrid from the toolbox automatically binds it to a sample dataset like Northwind.Orders, setting up the hierarchical structure.
• Design Surface Interaction: Select any child grid on the design canvas for detailed configuration.
• Data Hierarchy Visualization: A component displays the data structure, aiding in understanding and manipulating the grid’s hierarchy.
• Future Enhancements: Features like breadcrumb navigation for easier configuration across levels are planned for the next version.

Best Practices for Using HGrid

• Depth Limitation: Be mindful of the 5-level depth limit when organizing data.
• Configuration: Use the properties panel to customize each RowIsland without affecting others.
• Hierarchy Management: Utilize the Data Hierarchy selector to manage visibility and structure without altering the underlying data.

Other Release Improvements

• Angular apps are generated using Ignite UI for Angular 19.0.0
• Web Component apps are generated using Ignite UI for Web Components 5.1.2
• Blazor apps are generated using Ignite UI for Blazor 24.2.6
• React apps are generated using Ignite UI for React 18.7.4

Wrap Up

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.

• How Generative AI Low Code Will Change App Development?
• App Builder 2024 in Review: Highlights & Breakthroughs in Low-Code Innovation
• Latest App Builder Updates: GitHub Pages Deployment & Hierarchical Grid
• What’s The Low-Code Future for CTOs & Development?
• The Truth About The Impact of AI on Software Development