App Builder Release: AI, CSS Grid Layout, & More

In August we are marking another milestone for App Builder - a new release that now introduces App Builder AI, CSS Grid Layout, and other improvements. Read more in the blog post.

Zdravko Kolev Last Updated Aug 30, 2024 5min read

I am thrilled to announce another major milestone for App Builder this August! This App Builder release introduces powerful new features and enhancements that significantly accelerate app development, making it easier than ever to build robust applications. With cutting-edge capabilities like CSS Grid Layout and AI-driven image and data source generation, along with improvements to the overall user experience, App Builder continues to redefine what’s possible in low-code development.

Before diving into React Code Generation and all the 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, Web Components, and React code from your Figma and Sketch designs.

Try App Builder Try App Builder Try App Builder

App Builder AI

In today’s fast-paced development environment, staying ahead requires more than just expertise—it demands the right tools. Our new AI-driven features are designed to streamline the development process by automating tedious tasks. From generating images to creating data sources, App Builder AI enhances productivity and opens up new creative paths, allowing developers and designers to focus on what they do best—innovate.

App Builder release with AI image generation

Fill out our quick poll to share your thoughts on the latest AI features in App Builder and what else you would expect—your input helps shape the future of app development!

CSS Grid Layout

This App Builder Release now introduces CSS Grid Layout, too, that brings a new powerful layout system to App Builder, enabling the creation of complex, responsive web designs with ease. Users can now manually define rows and columns, providing precise control over their layouts.

What does the feature cover so far?

The UI allows setting a specific number of columns and rows.
The grid layout updates in real time as adjustments are made.
Adorners display grid lines, column, and row boundaries while designing. These indicators help in visualizing the grid structure without affecting the final output.
Each column and row can be individually sized, using fr, rem, px, or percentage units, through a dropdown for selecting the unit for each row and column.

Switching between layout modes (e.g., from Flex to Grid) has small limitations. This will result in losing the layout information, although you can always use the undo/redo capabilities to restore your changes.

The next release iterations will cover more robust reordering capabilities and more efficient dynamic content handling.

App Builder Release with Global Application & Component Sizing

Another enhancement introduced with this App Builder release is the new sizing feature with two key functionalities to maintain consistency across your applications:

Global Sizing at Application Level: Set a global size for all components within your theme, with the option to leave it unset, allowing the default theme sizes to apply.
Component-Specific Sizing: Override the global size on a per-component basis. Upon selecting a component, the default size based on the theme will be automatically applied, giving you a clear indication of the standard size.

These features ensure that your designs maintain a cohesive look and feel, with the flexibility to customize as needed.

Automatic Background Refresh of Data Sources

To ensure your data is always up-to-date, App Builder now introduces automatic background refresh of data sources. This feature is particularly useful when working in tandem with backend developers, as it ensures that any changes made to your data sources’ Rest APIs are reflected in real time without disrupting your workflow.

Automatic Updates: New endpoints, entities, or properties will be automatically detected, and you’ll be notified of any changes through an intuitive UI.
Seamless Integration: The background refresh works quietly, updating your data sources as needed, so you can continue building without interruption.

Improvements & New Capabilities

New Drill-Down Picker for Data Sources: We’ve introduced a custom drill-down picker, making it easier to navigate large collections of data sources. This improvement supports filtering, ensuring that you can find the exact data source you need quickly and efficiently.

PostgreSQL Support: App Builder now supports PostgreSQL, both via SDK and on-premises, expanding your options for data management.
Download and restore App capabilities: You can now easily download and upload application templates directly through the UI, simplifying the process of reusing or sharing your apps in different environments or directly without using the shared workspace capabilities.

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:

To experience everything, head over to appbuilder.dev and start using the App Builder. If you’re curious to get an exclusive preview of our latest developments, check our App Builder Preview environment. 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.