App Builder 23.1 Release — What’s New?
With today’s launch, we are very excited to get Infragistics App Builder Ultimate 23.1 into your hands. New features and UI controls, more capabilities, better design-development processes, and interactive data visualization experience. It’s all included.
Infragistics Ultimate 23.1 builds on the following key pillars:
- Grid Column Templating
- Brand-new Reveal Dashboard component
- Updated Figma UI kit and plugins with Figma Auto-Layout
- Grid CRUD Actions
- Hierarchical Iterators Binding Support
- Chart Aggregations feature
- New App Builder On-Premises Version
- New Sample Applications
- Improved Indigo.Design Documentation with Stepper
- Other improvements
- Combo, Select, and Dialog components
- Improved layout heuristics to create CSS Flexbox layouts
- App Builder documentation improvements
Let’s look at each update in more detail.
Grid Column Templating — header, display, and editing
I am happy to share that we now expose a way to build your own Column Template for each of the grid Columns. Imagine that you have a data source that has different fields for First and Last name, and Address details like — street, city, and postal code. You now can combine all of them into one Cell Display value and reduce the visible columns. A few more examples could be found below:
- URL data fields can now be associated with a custom Image component.
- Show a Rating component and give a visual clue on certain numeric values.
- Provide a more visual way to indicate that certain column contains Phone numbers.
Above are just a few examples of the power that Column templating gives you. The image below is showing how the examples above work in action.
Grid Column Header, Cell, and Cell Editing are the available templating options.
Reveal Dashboard
You can now add a Reveal Dashboard directly from the App Builder Toolbox and specify your URL to the Reveal Server SDK hosting your data. Consider the App Builder as a Client application that gets a base URL, which is the endpoint of your server from which the WYSIWYG App Builder will send/receive the requests and responses.
When the Reveal Dashboard is loaded, you can specify a Dashboard name out of the four available options — Marketing, Sales, Campaigns, and Manufacturing. We do host our own server for testing purposes only. Upon export, you will get a reference to our Trial Server “ https://samples.revealbi.io/upmedia-backend/reveal-api/" (base URL), exposing only the Marketing dashboard for demo purposes.
Check out this live application showcasing the power of Reveal.
Reveal Overview
Reveal is a business intelligence solution that is purpose-built for embedded analytics. With Reveal, you can:
- Deliver full-featured self-service dashboards and modern reporting.
- Use in any JavaScript framework (like React, Angular, Vue JS, Web Components, or Blazor), Windows Forms, or WPF application.
- Customize the UX to match your brand experience.
- Connect to almost any data source to populate your dashboards.
- Deploy to any cloud — public or private — or your own on-premises servers in a Java, ASP.NET, or Node.js backend.
Reveal has 2 core components that enable the delivery of dashboards to your client application
Figma Auto-Layout
With the updated Figma UI Kit now, if a designer uses Auto-Layout in Figma to create a design, the App Builder parser will utilize this and consider that to build the layout of the app. If Auto-Layout is not used, the parser will default to the absolute layout.
Here you can find more about Using Figma Auto-Layout with App Builder to speed up Design to Code.
The Figma Auto-Layout is an implementation of Flexbox layouts inside Figma. While it’s exposed slightly differently to designers, the intent is to bridge designed layouts with Web-Layouts. This has been explained in this article
What are the benefits?
- Designer enables Auto-Layout when creating designs in Figma, starting with setting the whole Artboard as Auto-Layout.
- Makes use of nested Frames, also with Auto-Layout enabled within each Frame.
Let’s look at the following example design to see how the frames can be mapped to layouts in App Builder.
Grid CRUD Actions
The App Builder Grid’s functionalities are growing with yet another one — Grid Create, Read, Update and Delete actions with Web API calls. You can now wire those to the Grid editing action buttons and take leverage of real-time Web API updates. Upon code generation, the App Builder will create the necessary services to handle the API calls for Creating, Getting, Updating, and Deleting a resource.
If the Grid is bound to a Customers table (Swagger path Image 1), the Data Interactions section will be loaded with the methods available for customers upon adding such interaction (Image 2).
Here you can read more about Grid CRID Actions.
Hierarchical Iterators Binding Support
Applicable to components like Tree, Cards, and Containers. The example below is showing how a simple Tree and Tree Grid can bind to data sources with a hierarchical structure.
Chart Aggregations feature
You can now group and aggregate data in a Category chart when repeated labels are present. The basic idea for this feature is very similar to a grid. Let’s say you wanted to group by Category (groceries, household, restaurants) and then obtain the maximum value of the Amount column. You could assign that data to the category chart and then specify the group to Category and summaries for max amount.
New On-Premises Version
App Builder On-premises software servers each organization’s unique Data Security, Maintenance, Storage, and Software Development needs. The on-premises version of AB provides an easy way for organizations to access such cloud-based platforms by allowing them to use their own instance and run it on their own infrastructure and to be accessible only by internal personnel.
On-Premises prerequisites and installation.
New Sample Applications
Below, you can see the applications that have been added, exposing a UI for a variety of functionalities.
Learning Portal
A learning management app that tracks progress on courses based on popular topics or instructors. It features custom lists bound to REST and adaptive layouts.
Inventory Management
This is a reporting dashboard for managing inventory levels and reviewing products in stock. It uses custom side navigation for routing and category charts to report on performance.
Indigo.Design Documentation
Documentation is vital to every product, and we have invested quite some time in improving our Indigo.Design docs. We’ve added topics for each of the new components:
- Accordion — Accordions are often used to manage a large amount of information in a compact space and to allow users to focus on specific pieces of information selectively
- PieChart — Each section, or pie slice, has an arc length proportional to its underlying data value. Categories are shown in proportion to other categories based on their value percentage to the total value being analyzed as parts of 100 or 100%. The Pie Charts are appropriate for small data sets and are easy to read and understand.
- Rating — The component enables users to apply a rating to an item or experience, such as a product, service, page, other entity, and more. The Rating can display a single user’s, or an aggregate, star rating, and it’s used to let users set their own star rating.
- Stepper — Useful UI element that can be used to display a process or workflow in a step-by-step manner, allowing the user to easily understand where they are in the process and what steps are remaining. Currently, we support the Stepper component only in Figma. In Sketch, it will be added in the near future.
- Tree — Used as a visual representation of the hierarchical relationship between categories, presented in a list structure. The Tree component supports three display densities — Comfortable, Cosy, and Compact. Tree — UA quick tip: Make sure you switch the state of the Expand Icon to “Expanded” when you have expanded Тree Nodes. If some of the children (but not all) of a Tree Node are selected, make sure to switch the state of the Checkbox of the parent node to an indeterminate state:
Also, we’ve updated topics related to:
- Styling — The Indigo.Design System provides elaborate means for styling all 60+ UI components that also map to Angular controls. The theming engine in our Angular product allows for creating custom color themes that can restyle the whole product in just a few lines of code. The App Builder also implements these theming mechanisms to let users change the complete look of their apps with just a few clicks.
- UI Patterns — The Indigo.Design System boosts your productivity with 180+ UI Patterns assembled from Indigo.Design Components. They are enhanced with the same responsive web design behavior and theming capabilities. The UI Patterns can be found spread across separate pages of the library in Figma and Sketch. Below is a snippet of some of the list patterns, such as a contacts list, searchable and filterable lists, and list empty states when no matching results are found:
Other Improvements
- Added Align-self property to override V.align and H.align defined on parent layout (CSS Flex-box)
- Added Border-radius property to set Rounding for Row/Column/Absolute layout components
- Show the app name as a page title in the browser
- Select all data fields when adding a new data collection
- Added option to maximize the Create new application dialog
- Improved layout heuristics to create CSS Flexbox layouts from Figma designs that use Auto-layout
- Updated Figma plugin to create apps using theme palette and Dark theme
- Automatically extract SVG and PNG as image assets when creating apps from Figma design files
- Unified dropdown in the App Builder menu to download design system resources and join our Discord channel
- New code generation for Combo, Select, and Dialog components (Blazor)
- New toggle for unlicensed code export
- Bug fixes and general improvements
Wrap Up!
As you can see, there are tons of new features and updates with the Infragistics Ultimate 23.1 release that will significantly improve, streamline, and modernize how you build beauty and simplicity, one app at a time.
We have details for each piece of this release and you can check them out here:
- Angular — Changelog & Updates
- App Builder — Change Log & What’s New
If you need more details, we encourage you to check out our:
To experience everything, 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@infragistics.com and let me know how we can help you continue delivering value to your customers with Infragistics.
Originally published at https://www.infragistics.com on June 28, 2023.
