Log in to like this post! App Builder - Updates and What's new in 22.2 Release Radoslav Mirchev / Thursday, November 3, 2022 Glad to announce that today we’re shipping tons of UI/UX upgrades with the latest Ignite UI 22.2 Release. Extending your favorite UI library, we are now adding more components and features, better controls, brand-new data grids across Blazor, Angular, and Web Components, improved code generation capabilities with App Builder,™ Figma design tool support, and a lot more. Whether you want to design and build modern web apps, replace legacy applications with better WYSIWYG low-code app building experiences, or you just want to start with a more full-featured dev stack, Ignite UI 22.2 Product Release is now here. First I want to give you one visual sneak peek on the big news that we have for you today. In the past few months we have managed to unlock three major steps in our Design-to-Code Solution! Blazor Web Assembly & Blazor Server Code Generation Web Components Code Generation Figma UI Kit & Figma Design-to-Code Story Let’s dive in to see the most recent tweaks that accelerate your overall development process and empower you to deliver robust, consistent and accessible UI across your projects. App Builder Code Generation Web Components Code Generation The family of supported frameworks of the App Builder has grown even more. The newest member - Web Components. Now you can both download or upload to GitHub your Web Components application. Blazor WebAssembly (WASM) and Blazor Server Code Generation The App Builder now exposes a way to download both Blazor WASM and Server applications. If you are new to Blazor, check out this Getting started with Blazor in 5 minutes article. Our blog also features 3 detailed articles that explore the differences between Blazor and Angular, Blazor and React, and Blazor Server vs Web Assembly. If curious, you can check them out for more information. Licensed code export There are two types of code that can now be generated: 1. If you are a licensed user, then the licensed packages of Ignite UI Angular will be used, upon app generation. This applies for both application download and publish to GitHub. When the application is published to GitHub we add a CI that will build your project and run basic tests. We also publish NPM_AUTH_TOKEN that is required from the GitHub CI, in order to be able to use the licensed package. 2. If you are a trial user then the free trial package of Ignite UI Angular will be used, upon app generation. This applies for both application download and publish to GitHub. See the License FAQ and Installation documentation for information on how to upgrade to the full licensed package, if the project is using a Trial version of Ignite UI Angular, and how to setup your environment and CI to use our licensed npm feed. Alternatively run `npm run infragistics-login` for a guided login to our licensed feed. UI Kits Figma design tool support With support for Sketch and Adobe XD already available and Figma being added as part of the latest App Builder 22.2 Release, we are marking a new milestone in our design-to-code story, covering all the major tools for UX and UI design. The brand-new Figma Indigo.Design UI Kit for Material maps to our Ignite UI for Angular, Blazor and Web Components UI toolset to completely redefine design-development processes. You now get a robust set of components, patterns, styling, and customization options, enabling you to import prototypes or any type of screen designed in Figma and transform it clean code. The best part is that all static designs become interactive, responsive apps with real UI components, branding, and styling – in a single click. Here are the fresh new controls, components and a healthy dose of quality improvements that arrive with the addition of Figma UI kit today: Accordion Avatar Badge Banner Button Button Group Calendar Card Carousel Charts - Category and Pie Chart Checkbox Chip and Chips Area Combo Date Picker Dialog Divider Drop Down Expansion Panel Gauges - Linear and Radial Gauge Grids - Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid Hyperlink Icon Input List Navigation Drawer Progress Bar Radio Group Select Slider Snackbar Splitter Stepper Switch Tabs Text Area Time Picker Toast Tree Tooltip New Components in the AppBuilder toolbox Tree Grid Component The Ignite UI Angular Tree Grid is used to display and manipulate flat data with ease. You can now quickly bind your data with very little code or use a variety of events to customize different behaviors. This component provides a rich set of features like data selection, excel style filtering, sorting, paging, templating and column moving. As the first version of the Tree Grid supports only flat data binding, the data objects should contain a primary key and a foreign key. The primary key is the unique identifier of the current data object and the foreign key is the unique identifier of its parent. In this case the data property of our tree grid that contains the original data source will be a flat collection. Official Tree Grid documentation. Accordion Component With this release we also add an Accordion component. It is a GUI component for building vertical expandable panels with clickable headers and associated content sections, displayed in a single container. The accordion is commonly used to reduce the need of scrolling across multiple sections of content on a single page. Official Accordion documentation. You can test the Accordion Component in the App Builder here - https://appbuilder.indigo.design/app/syoalfkoviqp/preview Expansion Panel Component The Ignite UI Expansion Panel is a lightweight accordion component which can be rendered in two states - collapsed or expanded. The expansion panel can be toggled using mouse click, or keyboard interactions. Official Expansion Panel documentation. You can test the Expansion Panel Component in the App Builder here - https://appbuilder.indigo.design/app/57rzzu3jaybd/preview Rating Component The Ignite UI Rating component is a simple, yet very useful component. The Rating component allows your end-users to select a rating value from a group of visual symbols such as stars. The Rating component is often used to provide insight regarding the opinions and experiences of users for products and services they may have used or purchased. Official Rating documentation. You can test the Rating Component in the App Builder here - https://appbuilder.indigo.design/app/sdhduwdghier/preview Tab Layout Component The Ignite UI Tabs component is used to organize or switch between similar data sets. Official Tab Layout documentation. You can test the Tab Layout Component in the App Builder here - https://appbuilder.indigo.design/app/jrlsezuwhf74/preview Tree Component We now have a Tree Component as part of the toolbox that you can use to visualize and navigate within hierarchical data structures. The Ignite UI Tree Component also provides item activation, bi-state and cascading selection of items through built-in checkboxes, built-in keyboard navigation and more. The current version of the Tree doesn't support data binding. although this is something that we will cover in the future. You can test the Tree Component in the App Builder here - https://appbuilder.indigo.design/app/a3w5ubpbycfz/preview Navigation Drawer Navigation Drawer now has a droppable area and you can add components like a Tree. Official Navigation Drawer documentation. You can test the Navigation Drawer component in the App Builder here - https://appbuilder.indigo.design/app/2d7wdqid75ld/preview New Grid Features Grid column based features and configurations The Grid now exposes each Column as a child component enabling the end user to interact with all columns and exposes the following functionalities: Each column comes with the inferred column type, not as a plain string, which is noticeable upon code export. Rearrange columns with the keyboard arrow keys and through the outline panel. Select a column header and change its title or data field. Add a new (empty) column that can be templated upon code export or bind to an existing data field. Delete column with the "del" key or though the outline panel. Hide a column through the outline panel. Be able to resize the column from the design surface. New AppBuilder Features OpenAPI improvements Reference Object support - AB now supports objects to allow referencing other components in the specification, internally and externally. The Reference Object is defined by JSON Reference and follows the same structure, behavior and rules. Added limitation for the size of the parsed table schema (docs) "Unable to infer schema from data" - This error message will be shown when the size of the parsed table schema of the datasource is too big (over 5mb). It can be triggered when: - Adding a regular REST endpoint. - When checking endpoints of a swagger datasource. - Or when datasource is updated. Keep in mind this is not a restriction on the data. For example, it can be with more than 50MB of rows, although as long as the schema (shape of the data) can be represented in under 5MB, the App Builder will load it. Filtering OpenAPI endpoints Added filtering for endpoints when configuring OpenAPI datasource. Repositioned zoom settings for design surface to app toolbar A visual enhancement freeing up more design area space. AppBuilder Browser Support Full Safari browser Support The App Builder now supports both MacOS Safari and Mobile Safari. Support for grid-gap in row and column layout (Flexbox) Share & Preview App in the AppBuilder It has never been that easy to share an application with someone. With this release we are adding Share and Preview functionality for a variety of cases. You can now click on the Share icon next to the preview mode and copy the app URL along with settings like description, share capabilities allowance or Twitter direct share. Share button will be present also on workspace view through the "more actions" icon of the application. Feel free to customize the sharing experience with a toggle "Allow anyone to preview using this link", you will see also a warning icon that gives additional information that in order to disable the link, you should turn off the switch. Preview behavior: If the app link is shared with a signed-in user part of the workspace, the latter will have access to preview the app with it's real remote data sources if configured, not with mock data. Data requests will be made with the encrypted token and the real data will be fetched. If the app link is shared with a signed-in user that is not part of the workspace, the latter will have access to preview the app but will see it with mock data. Disabled link preview from the "Share dialog". App shared with a signed-in user. Disabled link preview from the "Share dialog". App shared with anonymous user: Edit app behavior and restrictions App link shared with a signed-in user but it's someone else's personal workspace. The user won't have edit access. App link shared with a signed-in user that is not a member of the workspace. Only invited members can edit. For more information about the Share, Preview and Edit app capabilities, please refer to out official documentation. New Sample Apps HR Dashboard sample A new sample application has been added that includes Grid and Chart components. The application is also showing usage of other components like List, Card, Dialog and beautiful layouts. You can test the HR Dashboard Sample in the App Builder here - https://appbuilder.indigo.design/app/yplynzm54zwz/preview Interesting Articles Check out the list of articles that we've been working lately: Reduce Complexity of Mission Critical Enterprise Software with Low-code tools What is Rapid Application Development Design-to-code Solutions Explained UI Component Libraries - Build vs Buy Wrap Up Briefly described, these are all the new features and components that you will see in the June update of App Builder. If you need more details, we encourage you to check out our: Discord channel. GitHub discussions. Roadmap YouTube channel Of course, if you feel we have missed anything or you have a question, just drop us a line on feedback@indigo.design Lastly, if you want to see all the exciting new tweaks and upgrades in App Builder with the latest Infragistics Ultimate 22.2 product launch, watch the quick overview below.