Announcing Ultimate 20.1: What's New!

Jason Beres [Infragistics] / Tuesday, June 2, 2020

With today's launch, we are extremely excited to get Ultimate 20.1 into your hands. Ultimate 20.1 builds on four key themes:

  • Delivering innovations and new experiences in Angular, React, Web Components & ASP.NET Core
  • Windows Forms and WPF support for .Net Core 3.1
  • Hyper-productivity with Design to Code using the updated Indigo.Design
  • Cross-Platform Mobile Development with Xamarin

Let’s look at these areas in more detail.

Modern Web Development

Infragistics continues to innovate on the platforms that matter most to web developers today:

  • Angular
  • React
  • Web Components

With the 20.1 release, we continue to push the limits of what is possible on the web, with blazing fast controls that deliver unprecedented developer productivity at every turn.

Angular

This is one of our biggest Angular releases. We have the broadest, deepest native Angular product on the market today, with high-end Angular data grids, data charts, Excel library & Spreadsheet components, and new to this release a first-of-its-kind DockManager control. The DockManager delivers a complete desktop windowing experience, giving you to the ability to move, dock, undock, pin, expand collapse, and more with the UI of your application. Here is one of the new samples showing off the DockManager in conjunction with our Angular Data Analysis directive.

/community/cfs-file/__key/communityserver-blogs-components-weblogfiles/00-00-00-03-12/dockmanagerweb.gif

Here is a list of all the goodness that you can expect when you start using this latest Angular release:

  • Theming Widget for Custom CSS
  • Bootstrap Support
  • Data Grid Data Analysis Directive
  • Data Grid Master-Detail UI in the Grid
  • Data Grid Collapsible Column Groups
  • Data Grid Full-Column Selection
  • Data Grid Keyboard Navigation Enhancements
  • Data Grid Column Pinning to Right
  • Data Grid Row Pinning
  • Data Grid State Persistence
  • Data Grid Drag Ghost Directive
  • Data Grid Action Strip Directive
  • Data Grid Data Analysis Directive
  • Splitter Controls
  • Range Date Picker
  • Slider with TickMarks
  • Updates to the Carousel Control
  • Excel Style Filters / Advanced Filtering Container Instance
  • Header / Footer Elements in the Select Component
  • Custom Summaries with All Grid Data

To see more details on these features, you can go directly to the samples:

https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid.html

We also have a couple blogs that detail all the features I listed here:

https://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-for-angular-9-0-0-release https://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-for-angular-9-1-0-release

If you have not read any of the emails I've sent on the updated licensing, makes sure to read the blog post which outlines the steps you need to take to remove the "Trial Version" watermarks from your production apps.

https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/ignite-ui-licensing.html

And make sure to read this blog around the packaging changes for the Ignite UI product bundle in this release:

React

This is the 4th release of the React product, and this is the biggest update to the product yet in terms of brand-new Data Grid features - but like Angular - we are shipping the innovative new DockManager in React too! So not only are you getting a ton of new features in the React Data Grid, but you will get the benefit of the new DockManager control as well.

Here is a list of the new features in this release of the React product:

  • Updated Default Theme (Denali Light)
  • Redesigned Grid UX
  • DockManager
  • Column Summaries
  • Column Pinning (Right / Left)
  • Column Chooser
  • Column Filtering
  • Column Grouping
  • Column Hiding
  • Column Options Dialog
  • Grid Filtering UI
  • Grid Toolbar

To pull this together, we are shipping a Column Options dialog in the React data grid, giving you an interactive UX when working with grid features.

To see the product in action, head over to the React samples:

https://www.infragistics.com/products/ignite-ui-react/react/components/data-grid.html

To read about all the features and to get more details, check out the What’s New blog:

https://www.infragistics.com/community/blogs/b/infragistics/posts/what-s-new-in-20-1-ignite-ui-for-react

Web Components

This is the second release of the Web Components product - but that does not mean this is a new codebase. Ignite UI for Web Components product is the core codebase of the Ignite UI for React product. As Web Components are a web standard, we went with the approach of building a standards-based implementation of components first, then making them work as a React developer would expect a React component to work. We released Ignite UI for React first, about a year before we released Web Components, mostly due to the popularity of React.

While Web Components are not super popular yet, we all know that web libraries and frameworks come and go, but standards do not. Our investment in Web Components is to give you the option to future-proof your applications with a vanilla JS approach to building apps.

Here is an example of the Web Components Data Grid.

As the core codebase for React and Web Components are the same, you should always expect that the controls, features, API are the same across both products.

Here is what’s new in Web Components for 20.1:

  • Updated Default Theme (Denali Light)
  • Redesigned Grid UX
  • DockManager
  • Column Summaries
  • Column Pinning (Right / Left)
  • Column Chooser
  • Column Filtering
  • Column Grouping
  • Column Hiding
  • Column Options Dialog
  • Grid Filtering UI
  • Grid Toolbar

This means the same Column Options dialog in React to manage the interactions in data grid is available in Web Components, giving you a great interactive UX when working with grid features.

To see the product in action, head over to the Ignite UI for Web Components samples:

https://www.infragistics.com/products/ignite-ui-react/web-components/components/data-grid.html

To read about all the features and to get more details, check out the What’s New blog:

https://www.infragistics.com/community/blogs/b/infragistics/posts/what-s-new-in-20-1-ignite-ui-for-web-components

ASP.NET Core

With Microsoft continuing to innovate and push updated versions of ASP.NET Core and ASP.NET Core MVC, we are keeping up to date with the more recent updates in these frameworks. Based on our jQuery product, the .NET Core versions are native API's for those JavaScript libraries.

This means you get a product with over 100 controls & components, which remain current with the latest development frameworks from Microsoft.

Besides controls like Data Grid, Pivot Grid, Financial Chart and Layout Managers, you also get killer controls like this Microsoft Excel Spreadsheet in .Net Core / .Net Core MVC.

https://static.infragistics.com/marketing/Website/products/ignite-ui-jquery/ignite-ui-jquery-spreadsheet-1100.jpg?v=202005211740

To experience the full depth and breadth of our ASP.NET Core and ASP.NET Core MVC products, check out the samples here:

https://www.igniteui.com/grid/overview

What About Blazor?

This release does not include our latest Blazor bits, but you don't have to wait much longer to get your hands on the final release bits. Like React, the core codebase of Ignite UI for Blazor is based on our Web Components code. With Blazor, we deliver a native C# API over the TypeScript from Web Components which gives you the most optimal configuration for both server-side and client-side Blazor apps.

Here is the Preview samples browser running our client-side Blazor Financial Chart.

In July, we will ship an update to React and Web Components, and we will bring our Blazor controls out of preview and officially release them. The exciting thing - this is a battle-tested codebase, as we have been shipping it for more the two years in two different products. So, while July brings a version 1 of Ignite UI for Blazor, it's a version 4 of 5 of the codebase. Once we ship in July, the React, Web Components and Blazor products will be synced, so they will sim-ship for every release following July.

If you haven't see the Preview of Ignite UI for Blazor, check out the What's New blog we posted late last year:

https://www.infragistics.com/community/blogs/b/infragistics/posts/introducing-the-ignite-ui-for-blazor-preview

And get the Blazor Live Online Samples here

https://github.com/brianlagunas/Infragistics.Blazor.Alpha

.Net Core 3.1

When Microsoft shipped .Net Core 3.0 last year, we shipped support for this next-generation version of the .Net framework. With Ultimate 20.1, we are shipping support for the latest 3.1 release of .Net Core. Currently, we do not have support for the preview of the Windows Forms designer. We are actively working on what it is going to take to enable our WPF and Windows Forms controls with the new design-time experience in the next version of Visual Studio with .Net Core and the future .Net Framework 5.0. Stay tuned to this blog and our newsletters as we roll out support for the new designer experience.

Mobile Development with Xamarin

Xamarin.Forms is still the go-to framework for building cross-platform native mobile applications in with .Net and Visual Studio. With Ultimate 20.1, we are continuing to push Xamarin development forward with the most full-featured Grid and Charts for Xamarin.

https://www.infragistics.com/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/4034.datachart_2D00_callout_2D00_layer.png

Updated for 20.1:

  • Support for latest Xamarin version
  • Grid Features
    • Column Summaries
    • Column Pinning
  • Chart Features
    • Category Chart
    • Callout Layer
    • Crosshairs Layer
    • Final value Layer
    • Highlight Layer
    • Tooltip Layer
    • DataChart
    • AxisAnnotation
    • Callout Layer
    • Final Value Layer

To see more details on these features, check out the What's New blog here:

https://www.infragistics.com/community/blogs/b/infragistics/posts/what-s-new-in-20-1-ultimate-ui-for-xamarin

Design to Code with Indigo.Design

Indigo.Design is still the only solution on the market that streamlines app creation from Design to Code. In 20.1, we are shipping a completely redesigned UX for the workbench, the prototyping experience, usability studies (recording, playback, analytics) and code generation.

Modern Workbench UX

We have updated the prototyping tool to edit prototypes published from Sketch app and inspect visual specifications. The visual inspector is the perfect tool for developers to get the specific details of what they need from design, like CSS, spacing, fonts, size constraints, etc.

/community/cfs-file/__key/communityserver-blogs-components-weblogfiles/00-00-00-03-12/indigo_2D00_inspect.png

While the Inspector works with files created in Sketch, if you don’t use the Sketch app, you can import your design s as images to create prototypes from scratch using the prototype editor.

Redesigned Usability Studies Analytics

The usability testing feature underwent a complete rethink to make it easier to both create tests and analyze results. You can create tests for any of the designs in your cloud workspace (either from Sketch or from any set of screen shots). When you create a new test, you will see a live test creation experience, where you can add new tasks and then interact with the live prototype to record an expected path. This information will be used when presenting you with the results a nd segmenting participants.

https://www.infragistics.com/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/pastedimage1578936129028v6.png

The above image is highlighting these areas of the Usability Study analytics:

  1. Task analytics overview
  2. Completion funnel
  3. User segments
  4. Participation data table

Angular Code Generation

The key feature of Indigo.Design so streamline the design to code process is around code-generation for Angular. In 20.1, we made sure we are compliant with the latest Angular capabilities, and the design system is updated. If you are looking for skyrocketing your productivity, use the Indigo.Design system, and use our Visual Studio Code plug-in to generate all the HTML, CSS and components in your app.

You can see this example of a Sketch design and a pixel-perfect code-generated output with the Indigo.Design:

To read about the entire set of changes in this release and to get more details

https://www.infragistics.com/community/blogs/b/infragistics/posts/red esigning-indigo-design-for-faster-usability-insights-and-collaboration

Wrap Up

Ultimate 20.1 includes a ton of great new capabilities that will help you deliver amazing experiences in your apps. To experience everything, go to your customer portal to get the latest. As usual, we need to hear what you have to say, so please shoot me an email at jasonb@infragistics.com and let me know how we can help you to continue to deliver value to your customers with Infragistics.  To get a full view of what the year looks like, and how we are investing in developer tools, please take some time to read the roadmap blog and share your feedback on that as well.

Thanks, and Happy Coding!

Jason