App Builder Release: Remote Paging and Data Source Mapping Capabilities
The latest App Builder Release is here, introducing tons of new exciting features and capabilities, improving both flexibility and performance. We've introduced CSS Grid layout reparenting support, strengthened data binding with robust Data Source Mapping capabilities, and improved the Grid and Tree Grid components with remote paging support, among other enhancements. Explore these updates now!
Zdravko Kolev
4min read
I’m excited to share the exciting updates in the latest App Builder release, designed to streamline your app development process further! We’ve introduced key features that enhance flexibility and performance, including CSS Grid layout reparenting support, allowing seamless rearrangement of elements within your layouts. We’ve also added powerful Data source mapping capabilities, making UI binding even easier when schema changes occur. Additionally, Grid and Tree Grid now support Remote paging, vastly improving performance by dynamically fetching and displaying smaller data sets from remote servers. These updates continue solidifying App Builder’s position as the go-to platform for low-code, high-performance app development.
Before diving into the new features 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.
Grid remote paging support
The new Grid Remote Paging feature allows grids to dynamically load data from the server, fetching only the required portion instead of the entire dataset. This is particularly useful for large datasets, improving performance and reducing load times. Developers and users can configure remote paging to suit their needs, whether using a single API endpoint or separate endpoints for paginated data and total records count. By efficiently managing data requests, the grid ensures a smoother experience without overwhelming the server or client.
How Does Remote Paging Work?
Remote paging divides the data into “pages” that are requested individually from a remote server. This ensures that only the necessary slice of data is loaded at a time. It can be configured for both Grid and Tree Grid components using built-in properties in the tool.
Users use a Configurator to set up everything required for remote paging to work. What’s needed?
- pageIndex – The page index of records to fetch. If this parameter is not provided, fetching starts from the beginning (page 0).
- pageSize – The maximum number of records to fetch per page. If this parameter is not provided, all records are fetched.
- totalRecords – Returns the total number of records that the Paginator uses to make proper calculations and pass the data records to the Grid.
Developers can implement remote paging by following two approaches, depending on how the API handles data and the total record count.
- Using a Combined Endpoint for Data and Total Record Count – In this case, the API returns both the paged data and the total number of records in a single response.
This is an example of a supported data structure:
{
"items": [
{
"categoryId": 0,
"description": "string",
"name": "string"
}
],
"totalRecordsCount": 0,
"pageSize": 0,
"pageNumber": 0,
"totalPages": 0
}- Using Separate Endpoints for Data and Total Record Count – In this setup, two API calls are made: one to retrieve the paged data and another to get the total records count.
Developers can easily set up remote paging using the App Builder’s configurator, specifying parameters like Page index, Page size, and Total records. This flexibility makes building high-performance, scalable applications easier with minimal manual configuration.
More about the Remote paging feature here.
CSS Grid Layout Reparenting Support
Use Shift + Mouse drag to reparent Grid Cell content with ease.
Data Source With Mappings Support
A data source with mapping support lets you pick UI bindings through an interface when schema changes occur. In other words, if there are changes to endpoints, schemas, or properties, you can now easily map your application’s existing bindings to their new equivalents.
In conclusion, App Builder is a game-changer in the app development process. Its cloud-based visual builder, low-code capabilities, and new features make it 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 want 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.
