Blogshttps://www.infragistics.com/community/blogs/One Blog, all of Infragisticsen-USTelligent Community 10 Non-ProductionBlog Post: Infragistics Ultimate: H2 2020 Roadmaphttps://www.infragistics.com/community/blogs/b/jason_beres/posts/infragistics-ultimate-h2-2020-roadmapWed, 03 Jun 2020 13:00:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:cf7d199f-7a4b-4e0f-9832-6e4b760ac583Jason Beres [Infragistics]2020 is almost complete so I thought it would be a good idea review where we are at today and where we are headed for the rest of the year for our design and developer tools in Infragistics Ultimate. As we build out the platforms that we are delivering to you, we think about them in terms of broader product categories and how they work in the tooling that you use to build software with what we ship. There is so much innovation happening in client UI development. Besides the modern web frameworks like Angular and React, you now should consider using Web Components as a dependency-free way to future-proof your projects. We now see Microsoft re-engaging the developer market with Blazor, a new ASP.NET offering for single page applications (SPA), and the evolution of Xamarin into M.A.U.I, their way forward with in native mobile, cross-platform multi-application user interfaces. It’s an exciting time! To break down our investments, I created this chart: We are hitting the mainstay frameworks like Window Forms, WPF, .NET Core as well as the modern web frameworks in Angular, React and Web Components. Innovation is coming in areas like Indigo.Design, our new App Builder that will radically accelerate your app design and development. 2020 H2 At a Glance There is a ton of detail in this blog, but if you are in a rush, and just want to see the high-level, this is what you can expect in 2020 in your Ultimate subscription. There is a lot of software shipping across many frameworks. Notice that we are still pushing releases in Windows Forms and WPF. I get a lot of questions about our investment here. While it has slowed down a bit, there are still updates happening. At a high-level, the release schedule for the year looks like this, with everything in yellow being roadmap dates, in other words, in the future. Note: Releases marked as Web include all Ignite UI platforms for React, Web Components, Blazor Ultimate product release includes all Web platforms, WPF, Windows Forms &amp; Indigo.Design. Blazor is called out in July 2020 as this is the official v1 RTM of the product. Once we ship V1 of Blazor in July 2020, its features will be synced with React and Web Components. The first half of the year has been heavy on the Web side – with major releases in Angular, React and Web Components, and .NET Core 3.1 support for ASP.NET Core and ASP.NET Core MVC. Each of these platforms are available in the new Ignite UI product we shipped with Ultimate 20.1 . Looking forward, we are going to expand on what you will get as part of your Ultimate subscription with updates to Windows Forms, WPF and more significantly Indigo.Design capabilities. Note that we have also changed pricing across the board, so if you always wanted Ultimate but didn’t have the funds, it is now almost half-price of what it used to be – check out the new pricing . With Ultimate, you get it all, it is truly the best choice for any developer. Web Platform Strategy To understand the roadmap and how features are related, let me explain how these platforms are designed and engineered by our teams. The overall strategy for delivering Web products is to ensure best-of-breed on your desired platform. If you are building on Angular, we are bringing the best Angular product to market for the Angular framework. Same with React, Web Components and Blazor. For example, we are not creating wrappers to give you the facade over generic JavaScript controls with jQuery helpers buried deep in the code to make you _think_ you are using Angular. We build Angular Material components, and we work with the Angular team on Material UI and the CLI. We do it right the first time. Blazor is another great story, the approach we take which I describe below is vetted by the Blazor team at Microsoft as the most optimal approach. We will not try to wow you with reasons why *we* think our approach is best – we just asked the folks that built the framework and they gave the thumbs up! To give you an idea of what the codebase / API breakdown is by product in Ignite UI, check out this graphic: The Web Component, React, and Blazor products all start from C#, and we translate the code to TypeScript. This gives us a pure, dependency-free Web Component API, which we use as the basis for what is ultimately rendered as HTML / JavaScript in the browser. This delivers the most optimal Blazor experience, in terms of developer productivity and render / interactions performance in the browser. jQuery is the foundation for the ASP.NET Core and ASP.NET MVC products. It is still widely used, and we are still investing in these products to ensure they are modern and up to date. Ignite UI for Angular is built on Angular &amp; Material. There is nothing between our API and the Angular framework. We have seen the biggest uptake on Angular to date in enterprise teams, and we continue to invest significantly in Angular components. However, moving forward, any new large controls that we ship in jQuery (which includes ASP.NET Core / MVC products), and Angular will be built as dependency-free Web Components (like the new DockManager that we shipped in Angular 9.1). This gives us more future proofing for you as well as super-optimized performance on the client. When I say large control, think of something like a Gantt UI, or a Schedule UI, where there is a lot of UX interaction and a larger API surface. Because we will be building Web Components, they can also be shared with the jQuery, Web Component, React, and Blazor products. At the same time, we are very closely following the progress of Angular Elements , which is an effort by the Google Angular team to deliver Angular as a Web Component. 2020 H2 In-Depth For major release dates, the remainder of 2020 looks shapes up with these capabilities shipping from July thru December. Note: App Builder is part of Indigo.Design cloud and is included in Ultimate. .NET 5 is scheduled for a November release from Microsoft, we will Sim-Ship with Microsoft. The rest of this blog will give a bit more detail on what we will be shipping so you can plan and give us feedback on the roadmap. Everything we deliver is based on what you ask for, so please let me know if there is something you expected but do not see. Ignite UI for Blazor RTM July is when we ship Ignite UI for Blazor. I want to spend some extra time in this blog highlighting what is coming so you can start planning now for this release. When we ship, we will also sync Blazor with React and Web Components, meaning that all features, API, samples, etc will be the same across these three platforms. We will be making available to you a seriously rich toolset, with UI controls and components that are optimized for Client (Web Assembly) and Server Blazor. An important aspect of the Blazor product, Ignite UI for Blazor, is the same codebase as the React and Web Components product, so with the V1 of Blazor we are really shipping a V4 of the controls. Here is what you will get with Ignite UI for Blazor when we ship. DockManager Data Grid with: Virtualized Row / Columns Load on Demand Data Paging Column Sorting (Single / Multi) Column Resizing Column Moving Column Summaries Column Pinning Column Chooser Column Hiding Column Filtering UI (Excel Style Filtering) Column Grouping (Groups w/ Sticky Headers / Outlook Grouping) Cell Selection Cell Activation Cell Editing Cell Range Selection Row Selection (Single / Multi) Row Pinning Grid Toolbar (So you add custom buttons, like Export, Show / Hide, etc) Data Entry Editors: Checkbox Radio button Text Editor Date Time Editor Currency Editor Export to Excel (with formatting, same as you have in Windows Forms) Excel Spreadsheet Excel Library Including Charts / Exporting Charts Category Chart Chart Types: Line Area Column Point StepLine StepArea Spline SplineArea Waterfall Chart Features Crosshairs Annotations Callouts Final Values Markers (10 types) Tooltips Series Highlighting Legend Time Series Chart (TimeXAxis) Financial Chart Bar Candle Column Line Financial Chart Features: Financial Candlestick Chart Financial OHLC Chart Financial Area Indicators Financial Column Indicators Financial Line Indicators Financial Overlays Data Chart All Category Charts Plus: Polar Area Chart Polar Spline Area Chart Radial Area Chart Range Area Chart Scatter Area Chart Scatter Polygon Chart Spline Area Chart Stacked 100 Area Chart Stacked 100 Spline Area Chart Stacked Area Chart Stacked Spline Area Chart Step Area Chart Bar Chart Radial Column Chart Range Column Chart Stacked 100 Bar Chart Stacked 100 Column Chart Stacked Bar Chart Stacked Column Chart Waterfall Chart Polar Line Chart Polar Spline Chart Radial Line Chart Scatter Contour Chart Scatter Line Chart Scatter Spline Chart Scatter Polyline Chart Spline Chart Stacked 100 Line Chart Stacked 100 Spline Chart Stacked Line Chart Stacked Spline Chart Step Line Chart Point Chart Polar Scatter Chart Scatter Bubble Chart Scatter Marker Chart Doughnut Chart Pie Chart Radial Pie Chart Point Chart Polar Scatter Chart Scatter Bubble Chart Scatter Marker Chart Spark Line Spark Area Spark Win Loss Financial Chart Tree Map Geospatial Map Bullet Graph Linear Gauge Radial Gauge As you can see, the first release of Ignite UI for Blazor has a huge number of capabilities, breadth, and depth. We are working very hard now to get this product into your hands. July is right around the corner; we expect to ship around the 3 rd week of July if everything goes as planned. Ignite UI for React / Web Components Feature Update As you learned in our overall web strategy, the React and Web Components product are the same codebase. If you read the blogs on the 20.1 React and Web Components release, it was a Grid-heavy release. We are continuing that theme for the rest of the year. We need to bring the Grid up to the same feature set as the Angular Data Grid , which has been in the market much longer. To get there, we have features on the roadmap like: Editor Controls Button Button Group Checkbox Radio button Text Editor Date Time Editor Currency Editor In-Line Grid-Editing Layout Persistence Date / Time Picker Editor Combo Box Editor Multi-Column Headers Collapsible Column Groups Custom Grid Toolbar Options New Chart Types Updated Chart features And lots, lots more …. React and Web Components are very important. React is hot in the market, Web Components is an up and comer, and the feature set is mirrored in the Blazor product. Delivering you breadth and depth in these controls, with our laser-focus on ensuring you have the fastest data grid and data charts in the market for these platforms is what you should expect. We will be shipping updates to React and Web Components in July and October, but we plan on minor releases every 4 to 6 weeks with bug fixes, smaller feature updates and smaller new features. Ignite UI for Angular Updates Angular is still under heavy development . We have consistently shipped multiple major updates each year for the past 3 years, in a monthly continuous delivery cadence. Ultimate 20.1 just highlighted our 9.0 and 9.1 release, which including amazing new Grid features, the new DockManager, game-changing A11y Keyboard support , and a ton more. For the remainder of 2020, we are focused on: Angular 10 release, which should come in the July / August timeframe Grid features Customer requests Bug Fixes As we have been in hyper-deliver mode for a few years, we are going to spend the next 3 months addressing outstanding requests and issues on Github . If you click that link, it takes you to the open issues on Github. This is 100% of the open issues – everything is transparent on Github with this product. We have just over 200 open issues across the 60+ controls, with just under 3,000 issues closed. That’s pretty awesome. In Q4, we will start working on at least one, maybe two larger controls. We do not have Scheduling (Agenda, Day, Week, Month, Year) yet, we have requests for a Gantt control, a Pivot Grid, and a few other large items. As I described earlier in the strategy, those new controls will be Web Components, and ship across the Ignite UI SPA frameworks and Blazor. ASP.NET / jQuery Updates We have been tracking with Microsoft on the ASP.NET MVC and ASP.NET .NET Core releases and will continue to ensure you have the most up to date products in these frameworks. As I explained earlier in the blog around how we build the web products, you learned that Ignite UI for jQuery is the underlying control set that drives the ASP.NET MVC and ASP.NET Core products. We shipped first shipped Ignite UI for jQuery in 2011 … it is a complete set of controls, so for modern ASP.NET MVC / ASP.NET Core apps, the component set is huge. Everything from Data Grid, Tree Grid, OLAP Pivot Grid, Spreadsheets, Charts, etc. is in that product. The roadmap for this set of products is still active, and tracks with our Web Components strategy for modern web. All new chart types, chart updates that we ship in Web Components, React &amp; Angular are also shipped in jQuery. All Web Component controls that ship with Ignite UI for Web Components also ship with jQuery (the controls that do not overlap, so for example, Dock Manager ships with jQuery and new large controls like future Gantt UI will ship in jQuery). At the same time, we are actively bug fixing and ensuring this set of platforms is up to date. When you see a blog or a mention of a Web Component feature, it will ship with the jQuery product if we don&#39;t already have it in the product. And if, for example, you see yourself using other Web Component controls in the future, just make sure your subscription is for the Ignite UI bundle, and you&#39;ll get all modern web controls no matter what we end up shipping. .NET Core 3.1 Designers Microsoft continues to innovate with .NET Core and we are right there with them. We shipped support for both .NET Core 3.0 and .NET Core 3.1 with Microsoft, and now we are on the same journey to .NET 5. A big change by Microsoft with .NET Core 3.1 is the change to the design surface. Basically, they rewrote it, and are in the process of going from Alpha to Beta to RTM. The RTM is expected with .NET Framework 5 in the November 2020 timeframe. By this time, we will have design time in Visual Studio for .NET Core 3.1 and .NET Framework 5. Here is the current plan of record: In July, we will ship a preview of the WPF designers for Visual Studio 16.6 with the designer preview enabled. Microsoft moves fast with the Visual Studio preview monthly releases; we will track with their latest previews. In October, we will ship an updated WPF preview as well as a Windows Forms preview. In November, we will ship RTM with .NET Framework 5. The WPF work is underway, and we are confident in this delivery. We know the Windows Forms work will be much more challenging, as the changes are more dramatic. Stay tuned to my blog for updates, as this is a hot topic for many of you. Windows Forms / WPF Just as hot as .NET Core 3.1 support is our continued commitment to Windows Forms and WPF. As I have said every year for the past few years, we will continue to invest and support these two products for years to come. While we have slowed down a bit, as the market has shifted somewhat to the modern web SPA frameworks, our rich client customer base is massive, and we want to respond to your requests and keep you as happy customers. For 20.2 in Q4, we are planning on: .NET Core 3.1 Visual Studio Designer Support .NET Core 3.1 Toolbox Support Feature updates Updated Chart Features High DPI Update Modern Theme Refresh The top three requests for Windows Forms are High DPI, Modern Themes, and .NET Core support. That is where we plan on spending time. In WPF, we have a decent list of feature updates and bugs to address since our last Service Release, and support for the Designer and Toolbox for .NET Core 3.1 / 5 in Visual Studio v.Next. If you are looking for any other features, we are going to spend time on what you ask for. Let me know . Indigo.Design The biggest challenge in app development today is streamlining app creation from design to code. In countless teams, from small to large, a siloed approach to app creation slows down innovation. The need to eliminate hand offs, reduce costly iterations and enable true Design-Development collaboration is the holy grail we are all after. With Indigo.Design – a complete design-to-code system – integrating prototyping, usability testing, and code generation, this is possible. And with our new App Builder, we are going to revolutionize how you go from design to code. What is App Builder? App Builder is a new feature in Indigo.Design shipping in Private Preview this summer, Public Preview in the fall and releasing in December. The goal of App Builder is to bridge the tools that designers use and developers want to use to build app experiences, with the goal of eliminating the costly handoffs and time-consuming miscommunication with an iterative design process. App Builder lets you: Easily create single page applications (SPA) Preview design of the created application Generate the code of their application This is a visual of how App Builder enables this: It looks like a typical design tool, like Sketch, but it is so much more. Imagine the capabilities of Sketch, in a cloud-based HTML WYSIWG tool that has a toolbox full of rich UI controls and custom business objects, connected to live data that can output Angular, React, Web Components or Blazor code. That is App Builder. When we ship the Preview, we will have a dozen or so features and scenarios that we need feedback on. If you are interested in helping shape this product, please shoot Danail Marinov an email. He is the product owner and is actively putting together the Preview Program. To give you an idea of how this will drive productivity, George Abraham, the UX Lead on Indigo.Design, built this app in 3 minutes, before we even had Copy / Paste working. To say we are excited about getting this into your hands is an understatement. Make sure your Ultimate subscription is up to date, this is part of the value you will see in Q4! If you don&#39;t have an Ultimate subscription today, contact sales@infragistics.com and they can upgrade you! Wrap Up The second half of 2020 will bring a ton of platforms, new features, new controls, new components, more bug fixes, and lots of excitement. We shipped a ton in 20.1, and we plan on delivering even more in H2. Keep in mind this is a roadmap, with pretty aggressive dates. Things may be delayed, slip, ship as a beta, etc. as with any best laid plans, things can change. Please keep me posted on what you need, and how we can help bring your next amazing experiences to life!ASP.NETAngularJavascriptProduct RoadmapFor DevelopersjqueryWeb ComponentsInfragistics UltimateBlazorIgnite UIBlog Post: What’s New in 20.1: Ultimate UI for Xamarinhttps://www.infragistics.com/community/blogs/b/infragistics/posts/what-s-new-in-20-1-ultimate-ui-for-xamarinTue, 02 Jun 2020 19:01:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:8668ca27-4a11-4984-8ea5-62d5038a6e26Brian LagunasWe’re proud to announce the following new features and improvements in Infragistics Ultimate UI for Xamarin in this 20.1 release. With enhanced grid and charting features, Infragistics Ultimate UI for Xamarin helps you build great mobile apps faster than ever. Here are the newest features and improvements you can use in your Xamarin apps today. Data Grid The data grid is probably the most important control an app can have. So, it&#39;s no surprise that we are continuously improving our data grid. In this 20.1 release, the Xamarin data grid gets column pinning and column summaries. Let&#39;s dig into the details of these two additional data grid features. Column Pinning Column pinning... that basically says it all. This simple, yet difficult to implement feature, adds the ability for a column, or multiple columns, to be pinned to the left-hand or right-hand side of the data grid. Pinning a column is as simple as setting the Pinned property on the column. The P inned property has three options: Left - enabling Left will position pinned columns to the left-hand side of the grid Right - enabling Right will position pinned columns to the right side of the grid. None - enabling None will unpin a column and reposition its default placement within the grid. Optionally, you can programmatically pin and unpin columns using the new PinColumn method. As expected, the columns that are not pinned will still maintain horizontal scrolling. Column Summaries Summaries are another one of those features that are extremely difficult to implement, yet provide the ability to aggregate your data in a very simplistic way. To use summaries in the Infragistics Xamarin Data Grid, simply add a collection of ColumnSummaryDecriptions to the grid’s SummaryDescriptions property, and be sure to set the grid’s SummaryScope property to its appropriate value. The grid supports four summary settings that you can configure using the S ummaryScope property : Root – This will place the summary area at the bottom of the grid. Sections – (Groups) This will place a summary area within the scope of grouped records. When using this value, the GroupSummaryDisplayMode i s used to control the location of the summary area within the scope of the grouped record. Both – adds a summary to both the grid, and to each grouped record. None – no summary area is added When using the SummaryScope. Sections scope, the GroupSummaryDisplayMode property is used to control the location of the summary area within the scope of the grouped record. The GroupSummaryDisplayMode has five options : List – summaries are listed inline of the group header Cells – summaries are listed as values in the corresponding cells and aligned with their column RowTop – places a summary area at the top of the group RowBottom – places the summary area at the bottom of the group None – no summaries shown. It is also possible to create custom summaries by implementing a class that derives from SummaryCalculator and providing an instance of your custom summary calculator in the ColumnSummaryDescription. ProvideCalculator event. Category Chart Besides data grids, charts are another important control in mobile applications. They help visualize your data in a way that helps your end-user best interpret their data to make business critical decisions. Here are the newest features we added to the Category Chart. Callout Layer With the Callouts Annotation, you can annotate important data points in the chart or even customize values in callout boxes based on your logic. Crosshairs Layer You can configure crosshairs to display as horizontal line, vertical line or both lines at the location of the mouse cursor. In addition, the Crosshairs Annotation can show values of data points at the location of the mouse cursor and render these values in colored boxes over the X-Axis and Y-Axis labels. Final Value Layer Final Values annotation show values of the last data point in your data source(s). This annotation is rendered as a colored box for each data source over the Y-Axis labels. Highlight Layer The Category Chart can display two new highlight layers when a user hovers over plotted data points. The Highlight Layer renders a vertical rectangle that stretches from the start to end of the category that is closest to the mouse cursor. This rectangle is filled with semi-transparent gray color by default. The Item Highlight Layer renders a vertical rectangle for each data item in a category that is closest to the mouse cursor. This rectangle is filled with semi-transparent color that matches color of the series by default. Tooltip Layer The Category Chart has a new ToolTipType property that adds two new types of tooltips: Category Tooltip which renders the combined tooltips for all series in data category Item Tooltip which renders individual tooltip for each series in data category. Data Chart You may or may not know this, but the Category Chart is built on top of our extremely rich and power Data Chart control. This means that in order for the Category Chart to have a feature, it must be implemented in the base Data Chart control. This is why the features for the Category Chart and Data Chart are so similar. Specifically, in the 20.1 release, the Callout Layer and the Final Value Layer features are identical for both the Category Chart and the Data Chart, Callout Layer Callouts Layer is a new feature of Data Chart that you can use to annotate important data points or display their values. Callouts Layer can target multiple data series or individual data series. Also, you can customize appearance of these callout layers and bind callout labels to data items or calculate changes between consecutive data points. Final Value Layer Final Values Layer is a new annotation layer that shows values of the last data point in your data source(s). This annotation is rendered as a colored box for each data source over the Y-Axis labels. Let’s Wrap this Baby Up! As I always like to point out, if you have ideas about new features we should bring to our controls, important issues we need to fix, or even brand new controls you’d like us to introduce, please let us know by posting them on our Product Ideas website. Follow and engage with us on Twitter via @infragistics . You can also follow and contact me directly on Twitter at @brianlagunas . Also, make sure to connect with our various teams via our Community Forums where you can interact with Infragistics engineers and other customers. If you are not using our Xamarin controls yet, remember that a free evaluation download is only a click away . Lastly, when you do build something cool with our controls, please make sure to let me know.Mobileultimate ui for xamarinFor DevelopersInfragistics UltimateBlog Post: Announcement: Changes to Ignite UI Product & Packaginghttps://www.infragistics.com/community/blogs/b/jason_beres/posts/announcement-changes-to-ignite-ui-product-packagingTue, 02 Jun 2020 13:25:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:84378a8d-d6e1-447a-88b3-49fcacc73c65Jason Beres [Infragistics]With the June 2020 release of Ignite UI (Ultimate 20.1) , we&#39;ve made some important changes to Ignite UI. The biggest change is around the branding and naming of the product: We are replacing the Ignite UI for JavaScript branding and bundle option to simply Ignite UI. This means you won&#39;t find the product name or product bundle named Ignite UI for JavaScript on the website, in the docs, or in the My Keys &amp; Downloads in the Customer Portal. We did this to clear up the confusion of the product name (Ignite UI for JavaScript, which was the jQuery product) having the same name as the product bundle (Ignite UI for JavaScript, which included 5 different frameworks when purchased together). Bottom line - If you own Ignite UI for JavaScript, it is changed to Ignite UI. Ignite UI: More Value, More Features Along with cleaning up the overarching product brand, we&#39;ve expanded what&#39;s available in Ignite UI . With this release and forward, you get the following UI products / frameworks: Ignite UI for Angular Ignite UI for ASP.NET Core Ignite UI for ASP.NET MVC Ignite UI for Blazor Ignite UI for jQuery Ignite UI for React Ignite UI for Web Components So that&#39;s 7 different products in the bundle. While you can buy individual products for just the framework you are working on, it makes more sense to buy the Ignite UI bundle with all 7 platforms because we&#39;ve changed pricing as well, With this release, we&#39;ve lowered the price to give you more value for less cost: Individual product SKU&#39;s (ie: platforms) are now $749 for the subscription The Ignite UI bundle (all 7 product / platform SKU&#39;s) are $849 for the subscription That&#39;s a no-brainer in terms of value. Especially when you consider that the bundle includes Web Components and jQuery, which work perfectly in any other platform. So for example, if you are building a React app, and need an OLAP Pivot Grid (which is not in the Ignite UI for React product), just grab the one in the Ignite UI for jQuery product, use our React wrappers for jQuery and implement the OLAP Pivot Grid just like any other React component in your app. To break this down in terms of unique value - Ignite UI for Angular is a unique, one-of-a-kind codebase built on Material and Angular. There is no other product on the market like it. Everything about this product is optimized for Angular development and the Angular platform. Ignite UI for Web Components , Ignite UI for React and Ignite UI for Blazor all have a shared codebase. We have a core TypeScript library with per-platform native hooks. So for example, in Blazor, we generate the native C# API for Visual Studio and server-side bits along with the JavaScript / WebAssembly for the client to deliver the most optimal performance for the platform. Ignite UI for jQuery , Ignite UI for .Net Core and Ignite UI for MVC (.Net Core) all have the same codebase. For the MVC / .Net Core piece, we generate native API&#39;s based on the JavaScript libraries. This delivers the best coding experience in Visual Studio, as well as support for all of the latest .Net Framework features for web development. So based on the type of applications you are building, you have hundreds of controls and components to choose from across the 7 Ignite UI platform offerings. Licensed Ignite UI Packages In addition to the branding and bundling options, we&#39;ve also changed how licensed product is acquired. Starting with the 9.1 release of Angular (shipping with the 20.1 Ultimate release, June 2nd, 2020) we are adding a &quot;Trial&quot; watermark to the packages that we post on NPM. This help doc: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/ignite-ui-licensing.html Outlines all of the details necessary to remove the &quot;Trial&quot; watermark, and to acquire your licensed version. We expect to ship Ignite UI for React and Ignite UI for Web Components with same &quot;Trial&quot; watermark configuration in the July / August 2020 timeframe. If you are using any of those product, keep an eye on my blog and out newsletters for updates. Wrap Up These are some big changes. We needed to clean up the branding and bundling, and while doing this, give you more value for less subscription cost. If you have questions, comments or concerns about these changes, please contact me at jasonb@infragistics.com . Thanks, and Happy Coding! JasonIgnite UI for AngularASP.NET MVCASP.NET CoreIgnite UI for JavaScriptIgnite UI for BlazorIgnite UI for ReactIgnite UI for jQueryIgnite UIBlog Post: Announcing Ultimate 20.1: What's New!https://www.infragistics.com/community/blogs/b/jason_beres/posts/announcing-ultimate-20-1-what-s-newTue, 02 Jun 2020 12:07:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:fcb1efb1-55e1-4b0c-950c-f4b54883483fJason Beres [Infragistics]With today&#39;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 &amp; 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 data grids, data charts, Excel library &amp; 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. 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&#39;ve sent on the updated licensing, makes sure to read the blog post which outlines the steps you need to take to remove the &quot;Trial Version&quot; 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: https://www.infragistics.com/community/blogs/b/jason_beres/posts/announcement-changes-to-ignite-ui-product-packaging 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 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&#39;s for those JavaScript libraries. This means you get a product with over 100 controls &amp; 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. 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&#39;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&#39;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&#39;t see the Preview of Ignite UI for Blazor, check out the What&#39;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. 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&#39;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. 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. The above image is highlighting these areas of the Usability Study analytics: Task analytics overview Completion funnel User segments 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! JasonDevelopersASP.NET MVCASP.NET CoreAngularDeveloper featureIndigo.DesignFor DevelopersjqueryReactWeb ComponentsInfragistics UltimateXamarinIgnite UIPage: Developershttps://www.infragistics.com/community/blogs/p/developersTue, 02 Jun 2020 11:57:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:8d126a1f-1244-4d75-8d19-5c18668eb1acBlog Post: Ignite UI for Angular 9.1.0 Releasehttps://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-for-angular-9-1-0-releaseTue, 02 Jun 2020 05:55:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:4c63f2a9-749f-4794-9932-3687453218bcRadoslav MirchevNewest Release of Ignite UI for Angular—Version 9.1 While we have the most complete set of enterprise-grade, Angular-native components on the market, we continue to listen to you and we follow trends in the market. In our latest Angular release, version 9.1, w e’ve not only made the fastest data grid and charts, faste r, we’ve also made it easier to work with data and visualize it with one click —while keep ing everything customizable and visually appealing . In addition , we’ve added components for layout, action s management, and date/time management as well as a handful of great sample applications, theming and directives for convenience. We’ll discuss these in this blog, but I wanted to call out two new components that are major advancements in our journey to web modernization: Dock Manager This powerful new tool makes it easier for you to b uild m ulti- w indow, m ulti- s creen a pps in any f ramework . Take complex layouts and split them into smaller, easier-to-manage panes. Infragistics&#39; Dock Manager offers a complete windowing experience, just like the desktop, but in the web . Example from the Dock Manager and Data Analysis Tool Sample application : Grid Keyboard Navigation We’ve made it easier for you to i mprove u sability, a ccessibility and ARIA c ompliance with the new Grid Keyboard Navigation. Na vigate web pages using only a keyboard by reducing the number of tab stops and exposing new keyboard shortcuts. A lso known as A ctive Element Navigation, this control m akes it easier to improve usability and ensure accessibility for all users, regardless of how they are navigating pages. Moving from Trial to Licensed Ignite UI NPM Packages Now let’s dive into some of the details. Range Date Picker We ’ve now added the Igx Date Range Picker component to our existing calendar and date editor . Th is new component allows you to select a range of dates from a calendar UI or editable input fields. It is a “ must have ” for every booking or scheduling application scenario. The component also provides an advanced setup exposing two editable input fields . You can find more details here . Keyboard Navigation Enhancement As we mentioned above briefly, our new Grid Keyboard Navigation adds new functionality to our Ignite UI for Angular k eyboard navigation . Keyboard navigation is tricky: o n the one hand the more complex the product become, the more complex the navigation becomes . O n the other hand , we like to keep things simple. That is why we have enhanced our keyboard navigation with a new user interface pattern , or “active element navigation&quot; , which is lightweight, and offers better ARIA support - no focus trap , reduced number of tab stops, better grid performance and new features integration. Modern web pages and applications are managed as a collection of standalone components and may contain hundreds of tab stops . According Fundamental Keyboard Navigation Conventions section of W3C’s WAI-ARIA Authoring Practices 1.1, the tab sequence should include only one focusable element of a Composite UI Component . You can see the contradiction, aren’t you? We found a way to keep both the optimal user experience and the WAI-ARIA guidance. We have organized the grid in five such Composite UI Component , hence five tab stops: Toolbar/ Group by Area if existing Header row container. The first cell of the header row will become active. Tbody . The first igxCell (0,0) of the body container will become active. The first cell in the Column Summary will become active (if summaries are enabled). Pager UI. Items per page drop-down will become active. Well I only scratch the surface of the topic, but for the detailed description you could visit the blog post on the topic . That brings along changes on Tab navigation behavior: You cannot use `tab` key to navigate between the cells in the IgxGrid . The navigation is performed only with arrow keys. With `tab` key you can only navigate to the next editable cell (Only when the cell is in edit mode). When the last editable cell (of the row) is reached, the navigation will continue to next row&#39;s editable cell. If the last editable cell is reached, the tab navigation will continue with the next focusable tab stop element. As it comes to performance, removing cell focus and blur handlers and reducing navigation services gives a boost to the grid overall performance. Again more details and metrics you can find in the What&#39;s new: Grid Keyboard Navigation with Richer ARIA Compliance blog post or in our documentation . For a more in-depth look at this exciting component, read our Grid Keyboard Navigation blog . Header Navigation Implementation In concert with enhancements to &quot; a ctive element navigation&quot;, header keyboard navi gation is now fully functional. The full list of key combinations are here . Splitter The Ignite UI for Angular Splitter component provides the ability to create layouts, split into multiple, vertically or horizontally arranged panes that may be resized, expanded, and collapsed. These interactions are performed through by ex posing the UI exposed in the splitter bars between the panes. Code snippets and documentation are here . Row Pinning Row Pinning is not a feature that you see everyday in an angular grid. Pinning a row is another feature that makes working with data easier. It is enabled in both directions - top or bottom. Once a row is pinned, it remains in the Tbody of the grid as a ghost row. The ghost row is a not editable copy of a pinned one that appears in its original place in the scrollable area of the grid. Full documentation for the row pinning is here . Action Strip Component As mentioned earlier the Ignite UI for Angular product is becoming more complex and feature rich. That comes with difficult decisions how to make user friendly UI and still to have &quot;copy&quot;, &quot;paste&quot;, &quot;edit&quot;, &quot;pin&quot;, &quot;share&quot;, &quot; delete &quot; and others actions visible and not overwhelming your screen. The igx -action-strip provides a template area for one or more actions. It is highly flexible and customizable. It can be instanced on a cell, on a row or just on any container. It comes as a container, overlaying its parent and displaying action buttons om mouse over event , but it can be configured as a drop down menu or even combined approach where primary actions will show as an icon for ease of access, while all secondary actions are listed in a drop-down. You can find all the details in the Action Strip topic . Action strip component instanced in a container: Drop-down menu option: Action strip component in a row context of a grid: Column F reezing/Pinning on the R ight Column freezing is not a unicorn as the row pinning. However, pinning on the left (start) side is the most common approach. Now we have the option for Column freezing/Pinning on the right (end)[link] which provides you with more layout options for your application. Column pinning topic is updated with the Pinning Position section . Column Selection Column Selection is another feature that is unique for Ignite UI for Angular. Working on DAT ( Data Analysis Tool ) we realized that selecting entire column with a single click is a must. It emphasizes the importance of a particular column by focusing the header cell(s) and everything below. The feature comes with a rich API that allows for manipulation of the selection state and data extraction. More details are available in the documentation topic . RTL S upport E nhancements Providing full RTL support for all our components is a big and important project for Ignite UI. To Do list is shrinking with every major release . In 9.1 we are removing Circular Progress Indicator and Slider from that list. Additional information could find in the RTL support documentation . Angular Schematics 9.1.510 &amp; Ignite UI CLI 5.1.0 With Ignite UI for Angular 9.1.0, we released the Ignite UI CLI 5.1.0 together with @igniteui/angular-schematics version 9.1.510. This updates includes changes to the Angular templates and also new functionality related to the new licensed package. In addition, we have created two blogs that will help you use the capabilities that our schematics and CLI expose, and understand the way we that have created them. Create Projects with Angular Schematics for Ignite UI Angular Schematics for Libraries: Keeping Your Projects Up-to-Date Furthermore I would like to point out that Angular 9.0.0, we released the Ignite UI CLI 5.0.0 as well, the tool that helps you to easily scaffold projects in Angular, React and jQuery. Our CLI project has split into 4 more purposeful packages: igniteui-cli, @igniteui/cli-core, @igniteui/angular-templates and @igniteui/angular-schematics. The Ignite UI schematics are integrated in the Ignite UI for Angular product and helps you add it to a project created with Angular CLI and add components from our bundle. Please read more about this in the Angular Schematics and Ignite UI CLI topics and in the changelog of version 5.0.0. You can always refer to our Angular Schematics and Ignite UI CLI topics or review the updates we’ve made. Styling &amp; Theming Styling and theming is an essential part of our product. We had invested considerable tim e and effort to refactor the design of our samples. At the end we have 35 updated samples on our samples browser . Legacy support for CSS variable - now igx -legacy-support is set to “false” by default. This will allow styling of components without the need to use Sass in your project. However, if you are to include support for IE11 you should set it to “true” . Scrollbars theming - Small, insignificant enhancement at first glance but noticeable final touch to Ignite UI theming . Hav ing default scrollbars while switching between light and dark theme could take your eyes out and it is quite annoying. Take that example, the difference is noticeable : Task Manager Sample Application We have a new sample application for you. It is created to demonstrate the editing capabilities of the IgxGrid and as a show case for real life scenario application . In fact, it turned out to be very capable tool for managing tasks which I myself started to use. Next step in the development is to add option for integration with G itHub and add some more features. COVID-19 Dashboard Application COVID-19 Dashboard has started as an internal exercise. There is a hot topic that everyone should follow. You see new dashboards popping up every day and we have the controls - what would be the effort to build up, such a board from the scratch? And the result was amazing, it took merely several hours to have the COVID-19 Dashboard ready. Well, visual design and styling took a bit more, but design is always subjective topic. You could follow Hristo, step by step in building the dashboard in his blog post: How to Create an Angular Covid-19 Dashboard in Hours . Dock Manager &amp; Data Analysis Sample App The Data Analysis Sample application is not a new one . It was part of our Ignite UI 9.0 release. At the time w hen we started working on its design, however, we had one major obstacle – we were limited by the brow ser. We wished to have the desktop experience of multi - window layout and with the release of the Infragistics Dock Manager our wis h came true . Now we have everything a complete feature set – pane navigator, docking, floating panes, pinning, and tab groups ... The c ombination of between Dock Manager and DAT (Data Analysis Tool) results in a one beautiful and powerful sample application. Settable I gx -grid H eader T itle One little feature that could s a ve you a lot of irritation . Developing real life scenario application with our own product is real dogfooding. It makes you to realize that s imple things like setting the header title different from the “header” value could really get your goat . With Ignite UI 9.1 this issue is resolved. Now you could set independently header and tit le value. You could find the details in our git repository . Combo Update Here the new feature is directed to the user experience on mobile devices. Currently when c ombo&#39;s list of items is opened, the control automatically puts the focus on the search input. For mobile users this will cause a keyboard to show, making scrolling through the list of items more tedious . We have added an optional input to solve that issue. You can find more details here . Directives Date Time Editor The Ignite UI for Angular Date Time Editor Directive allows the user to set and edit the date and time in a chosen input element. The user can edit the date or time portion, using an editable masked input. Additionally, one can specify a desired display and input format, as well as min and max values to utilize validation. In the topic you can find more details on the implementation. Final Thoughts and Resources As you can see, we’ve added a lot of new features and components in Ignite UI for Angular 9.1, including components for layout, action management , and date/time management as well as a handful of great sample applications, theming and directives for convenience. We offer an Angular toolkit with the most depth and breadth in the industry , including Angular-native components and enterprise-grade . And we are responsive to your needs, continually listening and enhancing Ignite UI for Angular. But at Infragistics we consider that just releasing the best of breed UI components is not enough. We also would like to share with you why we are proud of our work. One way we hig hlight our additional value is through regular blogs that offer you useful tips and tricks, deeper insights, how- to&#39;s , and much more. Here are a few of the Angular-related blogs that you might find useful: CRUD-enabled Angular Application and CDATA API Server Topic of the blog is how to build an Angular application with Ignite UI For Angular, implementing full CRUD (Create, Read, Update, Delete) operations against an OData RESTful API, created with API Server. You can find how to: Go through the API Server installation and setup. Build a REST API from the local SQL instance of Northwind database Consume and visualize the data in an Angular application built with Ignite UI for Angular Demonstrate how to add full CRUD capabilities to the igxGrid to consume the API Angular Schematics for Libraries: Keeping Your Projects Up-to-Date You can find more about our open source Angular component library and Angular schematics. How to enjoy their benefits from running a simple ng new to creating complex schematics that automate workflow and project setup Create Projects with Angular Schematics for Ignite UI Three minutes read how to get advantage of Ignite UI CLI and schematics in a few simple steps. Th e only prerequisites that you need are NodeJS and Angular CLI . Improving Usability, Accessibility and ARIA Compliance with Grid Keyboard Navigation Keyboard navigation, improving usability, accessibility, Active element navigation.. . I will say no more on that topic and let you to dive in yourselves. How to Create an Angular Covid-19 Dashboard in Hours You want to build viable web application just in hours with Ignite UI for Angular? That blog is for you, then. We are taking the journey of developing func tional and visually appealing dashboard from the scratch . Follow us on Medium and stay up to date with the latest Angular related perks that we work on, give us a star on GitHub and help us to continue improving our product by addressing any concerns, questions or feature requests in the issues section. We will give our best to constantly improve our product experience to suits all your needs and build apps with ease.Ignite UI for AngularDock ManagerGrid Keyboard NavigationBlog Post: What’s New in 20.1: Ignite UI for Reacthttps://www.infragistics.com/community/blogs/b/infragistics/posts/what-s-new-in-20-1-ignite-ui-for-reactFri, 29 May 2020 20:58:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:04f6b83e-5bb9-4c02-a890-6ba2c88ea224Brian LagunasToday is the day… the day I announce all the awesomeness that is Ignite UI for React. Today, I finally get to tell you about all the great new components and features we have been working on over the last several months. I’m not going to bore you with some lame intro, let’s just get right into the good stuff! Dock Manager Let me start this post off by blowing your mind! I am super excited to announce the immediate availability of the Dock Manager component. That’s right! You heard me… it’s a dock manager for React. It’s 100% dependency free, a pure HTML/JavaScript component, and takes the layout in your React applications to the next level. What is a dock manager? Well, if you have ever used Visual Studio you know exactly what it is. If you haven’t, it’s a component that provides a way to manage a complex layout using different type of panes with various sizes, positions, and behaviors, and that can be docked to various locations within an app. The dock manager allows your end-users to customize it further by pinning, resizing, moving, floating, and hiding panes. Besides the data grid, this is a game changer for all web applications. Data Grid The data grid is probably the most important control an app can have. So, it&#39;s no surprise that we are continuously improving our data grid. In this 20.1 release, the React data grid gets column pinning, column summaries, filtering, hiding and show, and much more. Let&#39;s dig into the details of these newly added data grid features. Toolbar First up is the brand-new grid toolbar component which is essentially a container for UI operations. The toolbar is located at the top of the Grid and it matches its horizontal size. The toolbar container hosts different UI controls which are related to some of the Grid&#39;s features - column hiding, column pinning, and filtering just to name a few. Column Chooser A brand-new column chooser component has been added which allows end-users to perform column hiding/showing directly through the UI. This new column chooser can be used through the grid&#39;s toolbar to change the visible state of the columns. In addition, developers can always define the column hiding UI as a separate component and place it anywhere they want on the page. Column Options Dialog With the addition of all these great grid features, and to help expose the existing features from previous releases, we have created a brand-new Column Options Dialog. This dialog will give your end-users the ability to group, hide, pin, move, and sort a column, as well as apply excel style filtering with a single click of a button. The new Options Dialog can be access by clicking on the 3-dots in the column header. Column Pinning With this latest release, end-users can now pin a column, or multiple columns, to the left or right side of the data grid. End-users can also lock columns in a specific order. The grid has a built-in column pinning UI, which can be used through the grid&#39;s toolbar, or the new grid options dialog, to change the pin state of the columns. In addition, you can define a custom UI and change the pin state of the columns using the data grid’s column pinning API. Column Summaries The grid now ships with a summaries feature that functions on a per-column level as a group footer. Summaries are a powerful feature which enables the end-user to aggregate data in a very simplistic way using a predefined set of default summary items, depending on the type of data within the column. The built-in summaries include: count min max average Sum Custom It is also possible to create custom summaries by creating a custom SummaryCalculator. Let’s Wrap this Baby Up! If you have ideas about new features we should bring to our components, important issues we need to fix, or even brand new components you’d like us to introduce, please let us know by posting them on our Product Ideas website. Follow and engage with us on Twitter via @infragistics . You can also follow and contact me directly on Twitter at @brianlagunas . You can also subscribe to my YouTube channel to be notified of new videos, and follow me on Twitch to watch me stream live. Also make sure to connect with our various teams via our Community Forums where you can interact with Infragistics engineers and other customers. Lastly, when you do build something cool with our controls, please make sure to let us know.For DevelopersIgnite UI for ReactInfragistics UltimateBlog Post: What’s New in 20.1: Ignite UI for Web Componentshttps://www.infragistics.com/community/blogs/b/infragistics/posts/what-s-new-in-20-1-ignite-ui-for-web-componentsFri, 29 May 2020 20:54:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:5d52dd2b-f44f-47cf-8b45-11f4d3647e36Brian LagunasToday is the day… the day I announce all the awesomeness that is Ignite UI for Web Components. Today, I finally get to tell you about all the great new components and features we have been working on over the last several months. I’m not going to bore you with some lame intro, let’s just get right into the good stuff! Dock Manager Let me start this post off by blowing your mind! I am super excited to announce the immediate availability of the 100% web standards compliant Dock Manager component. That’s right! You heard me… it’s a dock manager for the web. Not only that, but it’s a web component. Meaning, it’s dependency free, pure HTML/JavaScript, and is seen as a native custom element. What is a dock manager? Well, if you have ever used Visual Studio you know exactly what it is. If you haven’t, it’s a component that provides a way to manage a complex layout using different type of panes with various sizes, positions, and behaviors, and that can be docked to various locations within an app. The dock manager allows your end-users to customize it further by pinning, resizing, moving, floating, and hiding panes. Besides the data grid, this is a game changer for all web applications. Data Grid The data grid is probably the most important control an app can have. So, it&#39;s no surprise that we are continuously improving our data grid. In this 20.1 release, the Web Components data grid gets column pinning, column summaries, filtering, hiding and show, and much more. Let&#39;s dig into the details of these newly added data grid features. Toolbar First up is the brand-new grid toolbar component which is essentially a container for UI operations. The toolbar is located at the top of the Grid and it matches its horizontal size. The toolbar container hosts different UI controls which are related to some of the Grid&#39;s features - column hiding, column pinning, and filtering just to name a few. Column Chooser A brand-new column chooser component has been added which allows end-users to perform column hiding/showing directly through the UI. This new column chooser can be used through the grid&#39;s toolbar to change the visible state of the columns. In addition, developers can always define the column hiding UI as a separate component and place it anywhere they want on the page. Column Options Dialog With the addition of all these great grid features, and to help expose the existing features from previous releases, we have created a brand-new Column Options Dialog. This dialog will give your end-users the ability to group, hide, pin, move, and sort a column, as well as apply excel style filtering with a single click of a button. The new Options Dialog can be access by clicking on the 3-dots in the column header. Column Pinning With this latest release, end-users can now pin a column, or multiple columns, to the left or right side of the data grid. End-users can also lock columns in a specific order. The grid has a built-in column pinning UI, which can be used through the grid&#39;s toolbar, or the new grid options dialog, to change the pin state of the columns. In addition, you can define a custom UI and change the pin state of the columns using the data grid’s column pinning API. Column Summaries The grid now ships with a summaries feature that functions on a per-column level as a group footer. Summaries are a powerful feature which enables the end-user to aggregate data in a very simplistic way using a predefined set of default summary items, depending on the type of data within the column. The built-in summaries include: count min max average Sum Custom It is also possible to create custom summaries by creating a custom SummaryCalculator. Let’s Wrap this Baby Up! If you have ideas about new features we should bring to our components, important issues we need to fix, or even brand new components you’d like us to introduce, please let us know by posting them on our Product Ideas website. Follow and engage with us on Twitter via @infragistics . You can also follow and contact me directly on Twitter at @brianlagunas . You can also subscribe to my YouTube channel to be notified of new videos, and follow me on Twitch to watch me stream live. Also make sure to connect with our various teams via our Community Forums where you can interact with Infragistics engineers and other customers. Lastly, when you do build something cool with our controls, please make sure to let us know.UltimateFor DevelopersIgnite UI for Web ComponentsBlog Post: Moving from Trial to Licensed Ignite UI NPM Packageshttps://www.infragistics.com/community/blogs/b/jason_beres/posts/removing-trial-watermark-from-npm-packagesThu, 28 May 2020 12:47:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:898118b8-e7aa-4966-a5c2-63030a0ba01aJason Beres [Infragistics]This post highlights the changes starting with NPM packages deployed from our 20.1 release (9.1 Angular) from June 2nd and forward. Any NPM packages prior to this release are unaffected. It is important to know all the legal terms and conditions regarding the products that you purchase and use. If you are building a commercial product or your license has expired , you will need to acquire a commercial license . This will enable you to use our private npm feed hosted on https://packages.infragistics.com/npm/js-licensed/ for development. There you will find the latest versions of the Ignite UI for Angular packages. If you have a valid commercial license, you can use this private feed and you will have access to the full version of Ignite UI for Angular. If you are building a non-commercial product contact us and we will provide you with the appropriate license. Ignite UI for Angular npm packages - Using the Private npm feed Npm is the most popular package manager and is also the default one for the runtime environment Node.js. It is highly adopted and is one of the fastest and easiest way to manage the packages that you depend on in your project. For more information on how npm works, read the official npm documentation . Infragistics Ignite UI for Angular is available as a npm package and you can add it as a dependency to your project in a few easy steps. Choosing this approach will not require configuring npm. By installing Ignite UI for Angular via npmjs.com package you will be using the Ignite UI for Angular Trial version of the product. Infragistics Ignite UI Dock Manager Web Component is available as a separate npm package and by installing it you will start using the Ignite UI Dock Manager Web Component Trial version of the product. More information on how to start using the Ignite UI for Angular npm package can be found in this topic and more information on Ignite UI Dock Manager Web Component can be found here . Upgrading packages using our Angular Schematics or Ignite UI CLI If Ignite UI for Angular has been added to the project using ng add or the project has been created through our schematics collection or Ignite UI CLI , you can use our upgrade-packages to automatically upgrade your app to using our licensed packages. Note As the process changes packages, we recommend that you update your project first before switching to avoid picking up a higher version of Ignite UI Angular and missing on potential update migrations. Follow our Update Guide . Run the following schematic in your project: ng g @igniteui/angular-schematics:upgrade-packages or if using igniteui-cli : ig upgrade-packages The schematic or command will take care of switching the package dependencies of the project and update source references. You&#39;ll be asked to login to our npm registry if not already setup. How to setup your environment to use the private npm feed First you need to setup the private registry and to associate this registry with the Infragistics scope. This will allow you to seamlessly use a mix of packages from the public npm registry and the Infragistics private registry. You will be asked to provide the username and the password that you use for logging into your Infragistics account. You should also provide the email that is registered to your Infragistics profile. Note npm is disallowing the use of the &quot;@&quot; symbol inside your username as it is considered as being &quot;not safe for the net&quot;. Because your username is actually the email that you use for your Infragistics account it always contains the symbol &quot;@&quot; . That&#39;s why you must escape this limitation by replacing the &quot;@&quot; symbol with &quot;!!&quot; (two exclamation marks). For example, if your username is &quot;username@example.com&quot; when asked about your username you should provide the following input: &quot;username!!example.com&quot; . Now, to log in to our private feed using npm, run the adduser command and specify a user account and password: npm adduser --registry=https://packages.infragistics.com/npm/js-licensed/ --scope=@infragistics --always-auth After this is done, you will be logged in and you will be able to install the latest versions of the Ignite UI packages into your project: npm uninstall igniteui-angular npm install @infragistics/igniteui-angular npm uninstall igniteui-dockmanager npm install @infragistics/igniteui-dockmanager Have in mind that we have set the Ignite UI for Angular package to be scoped, meaning that no changing the registries is needed if you want to install packages from our private feed and from npmjs.org simultaneously. Some additional changes might have to be made in your project source If you are upgrading from trial to licensed package and you are not using the automated CLI migrations: Add a paths mapping in the project tsconfig.json . { ... &quot;compilerOptions&quot;: { &quot;baseUrl&quot;: &quot;./&quot;, &quot;outDir&quot;: &quot;./dist/out-tsc&quot;, ... &quot;paths&quot;: { &quot;igniteui-angular&quot;: [&quot;./node_modules/@infragistics/igniteui-angular&quot;], &quot;igniteui-dockmanager&quot;: [&quot;./node_modules/@infragistics/igniteui-dockmanager&quot;], &quot;igniteui-dockmanager/*&quot;: [&quot;./node_modules/@infragistics/igniteui-dockmanager/*&quot;], } ... } Add a stylePreprocessorOptions mapping to your project angular.json { &quot;projects&quot;: { .. &quot;prefix&quot;: &quot;app&quot;, &quot;architect&quot;: { &quot;build&quot;: { &quot;builder&quot;: &quot;@angular-devkit/build-angular:browser&quot;, &quot;options&quot;: { ... &quot;aot&quot;: true, &quot;stylePreprocessorOptions&quot;: { &quot;includePaths&quot;: [ &quot;node_modules/@infragistics&quot; ] } ... }, remove the ~ sign from your project sass imports for igniteui-angular/lib source: @import &quot;~igniteui-angular/lib/core/styles/themes/index&quot;; // Should be changed to @import &quot;igniteui-angular/lib/core/styles/themes/index&quot;; So, if you&#39;ve already adopted npm and you have an Ignite UI for Angular license, don&#39;t hesitate setting up the Infragistics private feed and boost your productivity, using the full potential of Ignite UI for Angular. Access Tokens You can use tokens as an alternate way to authorize in your command-line utility, and access Infragistics products (packages). Your generated tokens will remain active as long as your subscription is current. You can access your token via your Customer Portal at https://account.infragistics.com/access-tokens . When you log in, you&#39;ll be able to generate tokens via this screen: Note: Please keep your access tokens a secret, like a password. New tokens will be displayed until the page is refreshed, after that tokens will be obfuscated. Wrap Up This change should be straightforward for you. If you have any issues, please contact me at jasonb@infragistics.com , check the Forums or contact Support directly. Thanks JasonLicenseAngularCorporate NewsigniteUIBlog Post: Improving Usability, Accessibility and ARIA Compliance with Grid Keyboard Navigationhttps://www.infragistics.com/community/blogs/b/engineering/posts/grid-keyboard-navigation-accessibility-Mon, 18 May 2020 12:00:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:ad79b41e-4077-4399-98f3-8d189d104a7fZdravko KolevAs user expectations evolve, modern web applications have grown more and more complex. They define user interface patterns like virtualized scrolling of content, complex data tables with editable cells, and different overlay components, just to name a few. That is not a problem for users leveraging a mouse or touchpad, as they can easily navigate through the page elements and interact with them. But for those using a keyboard, this can dramatically impact their user experience. The number of controls and items on most web pages has increased dramatically – meaning that a modern web page may contain hundreds of tab stops . At Infragistics, we want to ensure an optimal user experience, regardless of whether you are using a mouse, a touchpad or just a keyboard. That is why we have created a new user interface pattern for keyboard navigation within a page, called Active element navigation . This pattern reduces the number of tab stops within the interface designed for the igxGrid to only five, and exposes plenty of new keyboard shortcuts for efficiency. Each tab stop element has a single-entry point, and from there users can easily navigate to different items in the corresponding grid element container by simply using the arrow keys. Thus, simplifying navigation and improving usability. Page T ab S equence and ARIA Support As described in the Fundamental Keyboard Navigation Conventions section of W3C’s WAI-ARIA Authoring Practices 1.1 , the tab sequence should include only one focusable element of a C omposite UI C omponent – and we have five such C omposite UI C omponents , hence five tab stops: Toolbar/Group by Area, if existing Header row container - The first cell of the header row will become active Tbody - The first igxCell (0,0) of the body container will become active Footer - The first cell in the Column Summary will become active (if summaries are enabled) Pager UI - Items per page drop-down will become active Pressing the Tab key will move focus out of the current container to the next element in the tab sequence - This is illustrated with the image below with the tab sequence &quot;Grid Toolbar&quot; -&gt; &quot;Grid Headers&quot; -&gt; &quot;Grid Body Container&quot; -&gt; &quot;Summaries&quot; -&gt; &quot;Footer - Grid Paginator&quot;. E ach of the five tab-stop containers can be considered as a separate grouping entit y , reduc ing the number of tab stops on the page. The Grid has a rich DOM structure , along with plenty of virtualized containers , which allows for great er performance . Therefore, we have more than one focusable Grid element part of the page tab sequence and allows us to have separate and rich navigation on all tab stop container s . Note: Keep in mind that the default-browser-focusable actions are persisted . We are not preventing focus of the HTML element part of ng-templates or other elemen ts added separately in the Grid. T he browser will handle its focus actions by default - there is no need to apply additional focusable directives. Active Element Navigation Referring back to W3c’s Fundamental Keyboard Navigation Conventions , all interactive UI components need to be accessible via a keyboard. This is best achieved by either including them in the tab sequence or by making them reachable from a component that is in the tab sequence. In the Grid&#39;s case navigation , it is possible to move through each one of these focusable containers with the navigation keys (Arrow keys, home/end, ctrl + &#39;action key&#39;) and this is where the Active element navigation concept kicks in . A ctive element is the first visible element from the focused container . BUT this element does not become focused - the focus remain s on the actual container. The active element gives you the ability to navigate through most of the Grid elements , and activate features based on the focused Composite component. How Do Focused Elements Differ with Selected and Active Elements? We consider the focused element as a pointer - it tracks the path of navigation (page tab sequence). As we already k now, we have five such composite elements. The `Active element` is used to navigate throu gh these focusable containers. As you can see in the image below , for visual users, the thick orange border with the gray cell background indicates the current active element. Selected elements are elements that have aria-selected=&quot;true&quot; . In the igxGrid case , aria-selected is applicable to all three types of selection elements - cell, row and column selection ( WAI-ARIA ) In conclusion Focused element - tracking the path of page tab sequence - Grid&#39;s toolbar, header, body, footer, and pager Active element - navigates within the five focusable containers with the arrow keys (and special keys like home/end ) Selected element - having aria-selected=&quot;true&quot; along with Grid selection styles applied (cell, row or column selection ) We follow the guidelines within the WAI-ARIA Authoring Practices Guide , for specific recommendations on key and behavior mapping . So, the roles that ARIA Grid provides are recognizable in the igxGrid as well : grid, row, grid cell, row header, and column header. Tab navigation The grid follows the primary keyboard navigation convention that the tab and shift + tab keys move the focus from one UI component to another. The arrow keys change the active state inside of components that include multiple elements. Compared to previous tab interaction behavior, we&#39;ve changed the following: You cannot use tab key to navigate between the cells in the IgxGrid . The navigation is now performed only with arrow keys. With the tab key you can only navigate to the next editable cell (Only when the cell is in edit mode). When the last editable cell (of the row) is reached, the navigation will continue to next row&#39;s editable cell. If the last editable cell is reached, the tab navigation will continue to the next focusable tab stop element. Performance improvements and code enhancements As a result of the new keyboard navigation concept , w e have been able to optimize o u r code and implement performance improvements , s uch as: Cell focus and blur handlers have been removed Wheel and view detach handlers have been removed as well . Reduced navigation services. We previously had four navigation services for the Grid, HierarchicalGrid , TreeGrid, and MRL functionality . N ow we have only three. With the old implementation, on scrolling with virtualized content , we were changing the cell context (the actual shell remained the same) and had a problem with the browser not allow ing us to focus on an already focused element - we have had to blur the cell focus, change the cell context and focus it again. Now that is no longer an issue . Touch device enhancements - now if we have a focused cell on scrolling, we blur the cell before detaching the wheel handler . Application level performance boost with `events stacking`. Use ` ngZoneEventColescing : true` Const bootstrap = () =&gt; platformBrowserDynamic ( ). bootstrapModule ( AppModule , { ngZoneEnetCoalescing : true }); Keyboard Navigation Features Integration Now let&#39;s focus on the keyboard navigation features integration. Our grid has plenty of features and we&#39;ve considered all of them carefully to ensure that they work properly with the new changes. Header navigation - we now have a smooth column header and column group navigation. Check out this header interactions list , which explains how to activate a certain feature with a key combination. Live demo . Excel-style filter and default filtering row Ctrl + Shift + L will open the Excel-style filter/default (row) filter Advanced filtering Alt + L opens the advanced filter dialog Sorting Ctrl + Arrow up sorts the active column header in ASC order. If the column is already sorted in ASC, it will remove the sorting (tri state none) Ctrl + Arrow down sorts the active column header in DSC order. If the column is already sorted in DSC, it will remove the sorting (tri state none) Group by Shift + Alt + Arrow right to group by the active column. Shift + Alt + Arrow left ungroup the active column (remove it from the group by criteria) Multi-column headers Alt + left/up arrow key – collapse Alt + right/down arrow key – expand Column Selection - Space key press - select a column Note : If you are using a screen-reader, keep in mind that on initial header click, we are focusing the whole header container and the screen reader will read all header captions. F ollowing a click on the header , the header caption + selection state will be read. Example - Company name, column header selected. Cell editing - now the tab navigation works only for editable cells (In edit mode). On cell editing with Tab navigation, if we reach the end of the grid, the last cell will be submitted , and the navigation will continue to the next available tab stop element. Filtering (filtering chips) - Tab navigation for chips is removed, navigation is possible only by using arrow keys. Also: Chips are part of the column header now Chips are not focusable elements anymore Paging - richer accessibility. Added tooltips, aria- labels, and roles. Default Key combination updates: Ctrl + any other key works only on real cells, not on a grouped row area. This is a difference compared with the old behavior. GroupBy and Master-Detail don’t work with Ctrl+ arrow keys. Ctrl + Right/Left Arrow works only on the common cells, summary row, and headers Home and End (and Ctrl Home/End) works as expected, there are no changes here. We now provide richer visual styling for the tab stops/header element/body cells/summaries/paging/group by/master-detail/MRL/cell editing ... Thanks to the combined efforts of our developers we’ve managed to significantly reduce keyboard navigation complexity . The overall keyboard interaction is now improved, intuitive to use , offering better usability, while ensuring accessibility . We understand the need for continuous innovation and that great features are a result of true collaboration Don’t forget to check out the rest of the new features and enhancements that were released as part o f our Ignite for Angular 9.1.0 release . Please share any comments or questions in the C omment s section below .Ignite UI for AngularUltimate 20.1For DevelopersGrid Keyboard NavigationBlog Post: Building a CRUD-enabled Angular Application with Ignite UI For Angular and CDATA API Serverhttps://www.infragistics.com/community/blogs/b/infragistics/posts/building-a-crud-enabled-angular-application-with-ignite-ui-for-angular-and-cdata-api-serverTue, 12 May 2020 06:46:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:40050781-1d49-4d12-a714-07050430b346Hristo AnastasovWe at Infragistics always strived to deliver to you best of breed UI components to help you build modern UI and meet best UX practices. In addition to that, we provide some tooling to support you all the way from design to implementation and speed up development time. While we tried to support this with rich documentation and samples, it was always a trouble to replicate a real-world scenario where the variety of databases and backend technologies is enormous. Here we are going to review how to build an Angular application with Ignite UI For Angular , implementing full CRUD (Create, Read, Update, Delete) operations against an OData RESTful API , created with API Server . To support this, we will use API Server from CData . API Server is the perfect tooling to expose your data as a professional API. Hook up any SQL or NoSQL database and the API Server instantly generates flexible and fully documented APIs. This article aims to: Go through the API Server installation and setup. Build a REST API from the local SQL instance of Northwind database Consume and visualize the data in an Angular application built with Ignite UI for Angular Demonstrate how to add full CRUD capabilities to the igxGrid to consume the API Setting Up the API Server and connecting it to SQL server Download the API Server . Once installed, go to API Server/Settings/Connections and add SQL Server connection for the Northwind database. Set the database connection credentials: If you don’t have the Northwind database, you can create it by running this script ). After setting up the connection, go to Resources and choose Add resource. API Server will open a wizard, allowing you to choose tables from your connections. We choose Products , Orders and Order details tables from the Northwind connection. These are the tables that we are going to use in the demo. Authentication Next go to API Server Settings/User, and add new user. Copy the created auththoken and use it to set the value of the `authToken` variable inside `remoteData.service.ts` Finally, we need to enable CORS (Cross-origin resource sharing) . Go to API Server Settings/Server and click the checkbox to &quot;Enable cross-origin resource sharing (CORS)&quot; and the checkbox to &quot;Allow all domains without &#39;*&#39;&quot; (or define the domains that are allowed to connect in Access-Control-Allow-Origin). Set Access-Control-Allow-Methods to &quot; GET , PUT , POST , DELETE &quot;. Finally, you can go to API to see the Resources you have. Click any of it and API Server will list the URLs for the corresponding methods, along with description of the request and response body objects and code snippets. Fine tuning API Server allows for fine tuning of the API created. For example, you can define a relationship between tables, which tells API Server to build a SQL Join query and deliver the result in a single response (check the Status tab of the API Server to see what is happening behind the API Server). Quite helpful, isn’t it? Let’s create such a relation between the Order and Order_details tables from Northwind. Click on the Edit icon for the Northwind_dbo_Order resource, and on the primary ID line (OrderID), add the ‘relationships’ attribute: You can then retrieve data from both endpoints by using the OData $expand keyword: api.rsc/Nortwind_dbo_Order(10248)? $expand=Details Follow API Server documentation for more examples on everything you would need to create an enterprise ready API, including in-memory caching, users, rate limits, and etc. Consume and visualize the data in an Angular application built with Ignite UI for Angular Data Service In our Angular application, let’s first create an injectable data service. This data service acts as the middleware between the view and the backend. It uses the HttpClient class in Angular to talk to the server over the HTTP protocol. It reads the data, does some normalizing (if needed) and returns it to the view of our application as an Observable stream. We create four methods to implement the GET , POST , PUT and DELETE : /** * Retrieves data from specific table. * Optionally pass `fields` argument to build the OData $select query * Optionally pass `expandRel` argument to build the OData $expand query, which joins a related table to the response. * Optionally pass `id` and &#39;primaryKey&#39; arguments to build $filter query */ public getData(tableKey: string, fields?: string[], id?: number, primaryKey?: string, expandRel?: string): Observable { return this._http.get(this.buildDataUrl(tableFullName, fields, id, primaryKey, expandRel), HTTP_OPTIONS) ); } public editData(tableKey: string, body: IProduct): any { return this._http.put(`${BASE_URL}/${tableFullName}(${id})`, body, HTTP_OPTIONS) ); } public addData(tableKey: string, body: IProduct): any { return this._http.post(`${BASE_URL}/${tableFullName}`, body, HTTP_OPTIONS) ); } public deleteData(tableKey: string, id: string): any { return this._http.delete(`${BASE_URL}/${tableFullName}/${id}`, HTTP_OPTIONS) ); } A good practice is to implement the methods in the data service as generic as possible. The above methods take the SQL database table name as input and the record to be added/edited, or the id of the item to be deleted. For the GET method, one can optionally pass fields and other arguments to create complex OData queries (select the fields to retrieve, filter, sort, etc.). See the builtDataUrl method for implementation details. If not passed, the getData method from above will return all data from the corresponding table. To visualize the data returned, our main component calls the getData method. Initially it fetches data from the Products table to populate the products grid on the page: When a row in the products grid is selected by the user, a request to retrieve data from the Orders and Order_details table is made: this._ordersRequest$ = this._remoteService.getData(Tables.ORDERS, fields, pid, this.pkey, &#39;Details&#39;).subscribe(data =&gt; { this.populateOrdersGrid(data as IOrderDetails[]); this.populatePieChart(data); this.populateTimelineChart(data); }); Note the additional arguments passed. First, we do not need all data fields to be returned, so we pass an array with the field names that we need. Also, `pid` and `pkey` are passed, which will build a $filter query to return results only for records, where ProductID equals the value of `pid`. By OData specification, the request is $filter=(ProductID eq 32) . The ‘Details’ argument is the value of a relation that the Orders table has (Remember when we set this up in the Fine tuning ?). Knowing that the Orders table has a relation to the Orders_details table, API Server will construct a join SQL query, and will return results from both tables in a single response. Making our life so much easier here! Visualization Once we have the data we need, we may show it to the user in various ways to help him get information from it. Adding one more grid on the page, a timeline chart and a pie chart and we have a full working dashboard now! The orders grid on the page shows all orders featuring the product selected in the first grid. The timeline chart visualizes the occurring of orders in time, helping you understand if Product sales have been going up or down. The PieChart aggregates the data per country and display slices based on Quantities. Just one look at the pie chart and your business users know where they ship most. The configuration of the charts is simple. For the timeline chart we used и gxCategoryChart , which needs data source and can do the rest for you! For the и gxPieChart , pass a dataSource and the valueMemberPath , which tells the chart which value from the data source to use: This is how it looks, once we are done with the above: Demonstrate how to add full CRUD capabilities to the igxGrid to consume the API In the Angular component, inject the data service using DI. Now we are ready to use the service to do full CRUD operations against our data backend. Note that IgxGrid does not provide its own UI for adding and deleting rows. For that reason, once the response from the CRUD operations for CREATE and DELETE is retrieved, just manually update the corresponding operation in the grid: // get data for the corresponding table this.dataService.getData(Tables.PRODUCTS).subscribe(data =&gt; { this.populateProductsGrid(data as IProduct[]); }); // edit the record object this.dataService.editData(Tables.PRODUCTS, editedRecord).subscribe({ }); // delete the record with corresponding ID this.dataService.deleteData(Tables.ORDERS_DETAILS, ID).subscribe(response =&gt; { this.grid.deleteRowById(ID); }); // Ads new record this.dataService.addData(Tables.PRODUCTS, newRecord).subscribe(response =&gt; { this.grid.addRow(newRecord); }); For readability purposes, you see only the important part in the methods. Wonder where the new record or edited data come from? That’s right, you allow your user to edit data directly in the igxGrid, and then leverage the IgxGrid API to get everything you need: public onRowEdit(event: IGridEditEventArgs) { const record = event.newValue; this.dataService.edit(Tables.PRODUCTS, record).subscribe(response =&gt; { }); } In the above example, we attach an event handler for the grid onRowEdit event. Reading the event arguments, we get the edited record and use it the request body object in the PUT method. By specification, the server will respond with the updated object, indicating that request have been successful. Of course, it may happen that a record with the corresponding ID (read from the body object) is not found, or other error occurs. In this case, instead of using the syntax sugar above (defining a callback only for the next notification, sent by the Observable), you may want to pass handlers for the error and complete notifications too: this.dataService.editData(Tables.PRODUCTS, editedRecord).subscribe({ next: (metadata: any) =&gt; { }, error: err =&gt; { console.log(err); }, complete: () =&gt; { console.log(&#39;Complete notification&#39;) } }); As a best practice, we recommend adding error and complete handlers as above for each operation, and then implementing appropriate UI alerts for the errors (prompt to retry, or load offline content meanwhile, etc.). This will allow you to keep better control and will protect your users just in case, if, for some reason, the server responds with an error. We hope that you found this blog to be helpful as you look to implement full CRUD operations against an OData API in your own apps. As you can see, Ignite UI for Angular components expose a rich public API, which makes it easier to implement full CRUD, while also offering advanced capabilities for visualizing the data. Please note : the code provided is fully functional, and will provide a great base that you can take and start building on. Just fork the sample repository and step on our code base. For example, start by adding more and more operators, leveraging the OData querying flexibility. Have fun with it and do not hesitate to contact us or even push your own code, we will be happy to review it!Ignite UI for AngularDevelopersWeb DevelopmentCRUDFor DevelopersCDataBlog Post: Reveal SDK Updates for Embedded Analyticshttps://www.infragistics.com/community/blogs/b/engineering/posts/reveal-sdk-updates-for-embedded-analyticsMon, 11 May 2020 17:25:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:5a2fbdf8-2be3-4441-b2ab-3d701866bc72Casey McGuiganWe are excited to announce a few new updates to the Reveal SDK in order to provide more customization. Showing Tooltips We have added a new event that will give you more flexibility with how you show Tooltips in your visualizations. The event is called revealView.TooltipShowing in WPF and . onTooltipShowing in Web and is triggered whenever the end-user hovers over a series in a visualization or clicks on the series (as shown below). You can choose to either cancel the Tooltip event or modify what is shown. Some examples include: You want to disable Tooltips altogether or only show them for specific visualizations. You want to display data in the Tooltip that is outside of the RevealView component that might be more valuable to your viewers. Please note that this event will not be triggered for visualizations that do not support Tooltips, such as grids, gauges, and others. Code Snippets for WPF and Web In the following code snippets, we will show you how to disable Tooltips for a visualization and still get additional information from the event arguments when the end-user hovers over or clicks on this visualization. The event arguments include information about the visualization that is being hovered over or clicked on, the exact cell of data hovered over or clicked, the whole row of this cell (in case you need information from other columns), and, of course, the Cancel boolean. WPF Code Snippet: private void RevealView_TooltipShowing(object sender, TooltipShowingEventArgs e) { if (e.Visualization.Title == &quot;NoNeedForTooltips&quot;) { e.Cancel = true; } Debug.WriteLine($&quot;TooltipShowing: Visualization: {e.Visualization.Title}, Cell: {e.Cell}, Row: {e.Row}&quot;); } Web Code Snippet: revealView.onTooltipShowing = function (args) { if (args.visualization.title == &quot;NoNeedForTooltips&quot;) { args.Cancel = true; } console.log(&quot;onTooltipShowing: visualization: &quot; + args.visualization.title() + &quot;,cell: &quot; + args.cell.value + &quot;, row:&quot; + args.row.length); }; RevealTheme Update We have added support to change the corners of visualizations and buttons within Reveal to match the look and feel of your existing application. To do this, we&#39;ve added the UseRoundedCorners boolean property to the RevealTheme class. When it is set to true ( the default value ) , the corners of visualization containers are slightly rounded . If you want sharper edges, set this property to false to disable it.Reveal AppFor Business TeamsRevealBlog Post: Ignite for Good: Supporting Our Customers, Partners and Communitieshttps://www.infragistics.com/community/blogs/b/engineering/posts/ignite-for-goodMon, 27 Apr 2020 20:40:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:ec20c765-ce4f-4f32-8e79-56d910733fd4Steve JohnstonAs an organization, we are committed to providing our customers with the best products, services, and support in the industry. We are fortunate to be able to operate remotely, without disruption. But as our team continues to work, we have seen the many challenges that our customers, partners and communities are facing, and we knew that we had to do our part to help. That is why we announced a new program today called Ignite for Good. The goal is to provide additional support to our customers and partners globally, while also offering resources and expertise to support those people and organizations who are currently working on critical COVID-19 related technology projects. As part of the Ignite for Good program we will be: Releasing new open source applications and data visualizations Providing access to Priority Support for all customers via our Priority Support Live series Offering special product and service packages for small businesses Extending all trial licenses Providing support for COVID-19 research and support Initiatives Release of New Open-Source Applications and Data Visualizations To accelerate development of new apps to help during this pandemic, especially for any of you working for or with organizations in healthcare, government, and/or logistics, we have started releasing a series of open source, sample applications and data visualizations. Created using our Ignite UI, Indigo.Design and Reveal products, the code for these all applications is freely available for you to download, iterate and use. The first to be released was the Angular Covid 19 Dashboard , which provides a real-time view of current global data related to the COVID-19 Pandemic. Additional prototype applications and data visualizations will be released in the coming weeks. Priority Support Live—Direct Access to UI/UX Product Experts To help all of you, our customers, as you deal with increased workloads and requests for rapid app development and delivery, we are launching a new virtual event series called Priority Support Live. Kicking off on May 7, 2020, this series will provide you with live, direct access to our UI/UX product, development, and support experts. To register for this event, click here . In addition, we will be offering all customers an opportunity to upgrade to our industry-leading Priority Support services at a heavily discounted rate. To learn more, contact your Infragistics representative or email sales@infragistics.com . Special Programs for Consultants and Small Businesses Many of our customers are consultants and smaller organizations who provide app design and development services across industries and around the world. We recognize the role that all of you play in keeping essential businesses and applications running. To ensure that you can continue to operate and have access to the tools that you need to be productive, we have created new special packages and pricing for all of our products and services. To see if you qualify and learn more, contact your Infragistics representative or email sales@infragistics.com . Extending all Trial Licenses For those who are currently evaluating our products and services, and doing prep work for new projects, we will be extending all product trials. We hope that this will help those individuals and organizations currently using and evaluating our products and tools to have one less concern as they work to keep their projects and businesses moving forward. Support for COVID-19 Research and Support Initiatives With all of the challenges that we are all currently facing, there are many people and organizations who have come together with open source and research initiatives to develop new applications and analysis to help during the COVID-19 Pandemic. We want to do our part to support these initiatives. So, we will be offering qualified organizations and initiatives free access to our developer and analytics tools, support, and expertise. Organizations who have non-commercial programs such as hackathons, research projects, and others should contact Steve Johnston, Product Marketing Manager at Infragistics ( sjohnston@infragistics.com ) to learn more. We hope that all of you are doing well, and that you and your colleagues and families stay safe and healthy. And we look forward to coming together when this has passed, and we can all meet face to face again. In the interim, please check back here for more updates from our team.Indigo DesignDeveloper featureFor DevelopersInfragistics UltimateIgnite UIBlog Post: Angular Schematics for Libraries: Keeping Your Projects Up-to-Datehttps://www.infragistics.com/community/blogs/b/engineering/posts/angular-schematics-for-librariesMon, 27 Apr 2020 13:36:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:bf0cb7de-8982-4c77-b1b8-ed7950343437Viktor SlavovAngular schematics have been around for some time now, and I think most of us have gotten used to working with them and enjoying their many benefits. From running a simple ng new to creating complex schematics that automate workflow and project setup, the schematics engine is a big part of any Angular application&#39;s lifecycle. But what about an Angular library? At Infragistics, we take great pride in developing and maintaining our open source Angular component library . But with the library gaining more and more users, and the ever-evolving nature of Angular, we needed to provide an easy way to keep projects up-to- date. This is where, as with most things Angular, the schematics come into play. ng add, ng update and more In this blog, we’ll show you how to set up your library so that it takes full advantage of Angular CLI’s ng add and ng update commands. We will do this by defining schematic collections in a specific way. We’ll be covering the following steps: ng add and ng update hooks Setting up ng add schematics Setting up ng update schematics (migrations) Bundling and running your schematics In order to take full advantage of this post, ideally you should already be familiar with the basics of Angular schematics , and you might be interested in some of the other great posts on Medium. To borrow from a recent angular.io article: A schematic is a template-based code generator that supports complex logic. It is a set of instructions for transforming a software project by generating or modifying code. Schematics are packaged into collections and installed with npm. Schematic entry points Aside from calling an Angular schematic with the usual ng g my-custom-library:schematics [args] Angular’s CLI also provides two other entry points for your custom library workflows - ng add and ng update. If you are not familiar with these ng commands, you can learn more about them here and here . In an Angular application that&#39;s using your library, these function similarly to npm&#39;s postinstall hook. They are called automatically by the Angular CLI - when calling ng add my-custom-library Or ng update my-custom-library respectively. Migration Schematics One of the main benefits in using Angular’s CLI is updating your package dependencies while minimizing the need to manually workaround breaking changes or deprecations. All of this can be automated by defining migration schematics for your library! A migration schematic is run each time a newer version of your library is added to the consuming application via ng update your-custom-library. In a migration schematic, you can not only define what changes your migration schematics should perform, but also specify the scope of the migration (which version it affects). Adding migration schematics Defining migration schematics is done in a similar way to defining a normal schematic — you have to create a function that returns a Rule. That rule can manipulate the work tree, log stuff and/or anything else that you can do with Javascript. The more specific part is making sure that the Angular CLI calls the schematic on the ng update hook. Defining the schematics collection First, you need to define a schematic collection.json file. The name doesn&#39;t matter. In our library’s case, we&#39;ve named it migration-collection.json , as we have multiple schematic collections and this makes it easier to tell which is which. The structure of your collection.json should look something like this: { &quot;schematics&quot;: { &quot;migration-01&quot;: { // Migration name, no strict naming, must be unique &quot;version&quot;: &quot;2.0.0&quot;, // The target version &quot;description&quot;: &quot;Updates my-custom-library from v1 to v2&quot;, // A short description, not mandatory &quot;factory&quot;: &quot;./update-2&quot; // The update schematic factory }, &quot;migration-02&quot;: { &quot;version&quot;: &quot;3.0.0&quot;, &quot;description&quot;: &quot;Updates my-custom-library from v2 to v3&quot;, &quot;factory&quot;: &quot;./update-3&quot; }, ... } } The schematics object houses all of your update schematics definitions. Each definition is under a named property (which has to be unique) and for each one, you have to specify the version in which the &quot;changes&quot; are introduced and the factory for the schematic that will be run on the working tree. The version attribute is used to determine when you schematic needs to be run. For example, let&#39;s say you have an app consuming my-custom-library@1.0.0. With the above schematics definition, if you would run ng update my-custom-library@2.0.0, only the defined &quot;version&quot;: &quot;6.0.0&quot;schematic would be run. When running ng update my-custom-library@3.0.0 both 2.0.0 and 3.0.0 migration schematics would be run. The actual definition of the migration schematics (for v2.0.0, for example) is in ./update-2/index.ts can be like any other schematic. A very basic implementation would be this one: export default function(): Rule { return (host: Tree, context: SchematicContext) =&gt; { const version = `1.0.0` // You can get this dynamically from the package.json context.logger.info(`Applying migration for custom library to version ${version}`); return host; }; } You can find the definition for one of the latest migration schematics in igniteui-angular here . Disclaimer : In our library’s schematic implementation we are making heavy use of the TypeScript language service for manipulating files. I’m sorry for not going into details, but that would warrant a post of its own. If you have any questions, feel free to reach out in the comments and I’ll try to answer as best as I can. Attaching schematics collection to ng-update hook Once the migration collection.json is created and the migration schematics are defined, all that&#39;s left is to properly attach them to the ng-update hook. All you need to do for that is to go over to your library&#39;s package.json and add the following “ng-update” property: { &quot;name&quot;: &quot;my-custom-library&quot;, &quot;version&quot;: &quot;2.0.0&quot;, ... &quot;ng-update&quot;: { &quot;migrations&quot;: &quot;./migrations/migration-collection.json&quot; } } That’s it! Now every time someone runs ng update my-custom-library, the Angular CLI and the schematics that you’ve carefully crafted will take care of any pesky breaking changes or deprecations that a user might otherwise miss! ng-add The other helpful entry point that the Angular CLI provides is the ng add hook. When you define an ng add schematic, it is run automatically as soon as a user adds your library to their consuming project by running ng add [custom-library] You can think of it as something akin to npm&#39;s postinstall hook. Defining an ng add schematic for your library is the best way to make sure that its users will have an easy first-time experience with it. Through the schematics, you can automate some mandatory initial setup, add/update packages or simply log a big &quot;thank you!&quot; to all your users! :) In our library, we&#39;ve added an ng add schematic that installs our IgniteUI CLI to the project workspace so users can take full advantage of our components suite via our CLI. We make some initial transformations to the workspace (adding a custom .json file needed for our CLI to run), add some styles and packages (for our components to properly render) and even call some schematics (schematiception!) from our CLI, where we&#39;ve offloaded some of the Angular CLI specific logic. All this (and more!) can be done automatically, simply by calling ng add - that, in my opinion, is the Angular CLI&#39;s true charm. Create ng-add schematic To add an ng add schematic to your library, you first need to define it. As with any other schematic, it needs to be part of a collection. If your project already exposes schematics, you can add it to the existing collection under the name ng-add. If not, you can create the collection from scratch: In your library’s root folder: mkdir schematics &amp;&amp; cd schematics echo blank &gt; collection.json mkdir ng-add Open the newly created collection.json, modify it to point to the definition of the ng-add schematic { &quot;$schema&quot;: &quot;../../../node_modules/@angular-devkit/schematics/collection-schema.json&quot;, &quot;schematics&quot;: { &quot;ng-add&quot;: { &quot;description&quot;: &quot;Installs the needed dependencies onto the host application.&quot;, &quot;factory&quot;: &quot;./ng-add/index&quot;, &quot;schema&quot;: &quot;./ng-add/schema.json&quot; } } } Under schematics/ng-add/index.ts you can create the implementation of the ng-add schematic just as you would with any other schematic. For example, to display a simple &quot;Thank you!&quot; message to your users, you can do the following: export default function (options: Options): Rule { return (_tree: Tree, context: SchematicContext) =&gt; { context.logger.info(`Thank you for using our custom library! You&#39;re great!`); }; } The implementation of IgniteUI Angular&#39;s ng-add schematic can be found here . Include in package.json Once you’re done with the implementation of the schematic, you have to include the collection definition in your library’s package.json. If your library already exposes a schematics collection, you&#39;ve got this covered! If not, you just need to add a &quot;schematics&quot; property, pointing to the location of your newly created collection.json: { &quot;project&quot;: &quot;my-custom-library&quot;, &quot;version&quot;: &quot;2.0.0&quot;, ... &quot;schematics&quot;: &quot;./schematics/collection.json&quot; } You can find this part of the setup reflected on our library repo. Bundling your schematics You have to make sure that the schematics you&#39;ve defined (both migrations and ng-add collections) are properly shipped with your library package. To do this, you will need to define a separate build task for your schematics (executed after the main build task has run), with outDir specified to point to the proper location in your project&#39;s dist folder (so the collection.json files have the same paths, relative to the package.json). Finally, you will need to explicitly copy any files that are excluded by the compiler (for example, any .json files!). Assuming that the output directory for your compiled projects is ../dist (so your project’s bundled files would be under ../dist/my-custom-lib/) your schematic’s compilation output will have to be ../dist/schematics (for the default schematic collection, containing ng-add) and ../dist/migrations (for the migration schematic collection) To do this, you must first define a tsconfig.json file for your schematics collections (located in ./schematics/ or ./migrations, respectively). For example, the content of the file for the core schematics collection (./schematics) would be something like this: { &quot;compilerOptions&quot;: { &quot;target&quot;: &quot;es6&quot;, &quot;module&quot;: &quot;commonjs&quot;, &quot;sourceMap&quot;: false, &quot;composite&quot;: true, &quot;declaration&quot;: true, &quot;outDir&quot;: &quot;../../../dist/my-custom-lib/schematics/&quot; } } Then, in your project’s package.json, define a script that builds your schematics and another one that copies the files: { &quot;name&quot;: &quot;my-custom-library&quot;, ... &quot;scripts&quot;: { &quot;build:schematics&quot;: &quot;tsc --project migrations/tsconfig.json&quot;, &quot;copy:schematics:collection&quot;: &quot;cp --parents migrations/*/collection.json ../../dist/my-custom-lib/&quot; }, ... } The same goes for the migrations - a separate script for TypeScript compile and for copying the files. For the Ignite UI for Angular repo, you can check the links to see the implementation of the default schematics collection and the migrations . (Since we’re using gulp as a build tool, we’ve defined separate tasks there for copying the collection.json files) Running ng-add and ng-update schematics locally Before you publish your library package with your new and shiny ng update and ng add functionality, you might want to verify that the schematics are performing the proper workplace transformations. Since, in the end, both of these are just basic schematic implementations, you can run them as you would any other - by using ng g! After building your library files and schematics + migrations, you can go into your specified output directory (where your bundle’s package.json is located) and pack it npm pack Running ng-add To check how your ng-add is command is performing inside of a new project, you can do the following: Create a new project using the Angular CLI ng g my-test-project --routing=true Once the project is created, you can go into the project folder and install your package manually from the .tgz file: npm i my-custom-library.tgz Then, simply run ng g my-custom-library:ng-add and review the workplace change once it&#39;s finished - that&#39;s what your package&#39;s ng-add will do! Running migrations For testing migrations, you can follow the same steps as the above, though you’ll have to specify the path to the migration schematics collection.json (as it&#39;s different from the default schematics collection of the project). Let’s say your latest migration schematic which you want to test is named update-1. Once you&#39;ve manually installed your .tgz file, simply run: ng g &quot;./node_modules/my-custom-library/migration-collection.json:update-1&quot; This will apply all of the workplace changes that your latest migration schematic would apply. Closing thoughts Hopefully, this post has been helpful to you and has cleared up some things about Angular CLI’s ng add and ng update functionality. Angular&#39;s schematics are now a solid part of their projects&#39; ecosystem and will surely continue improving. With more and more developers using them and raising awareness of them, now is a great time for libraries to start adopting schematics. Why not automate both you and your users worries away? :) If you have any questions, feel free to reach out in the comments. Thanks for reading!Ignite UI for AngularAngular CLIFor DevelopersAngular SchematicsInfragistics UltimateBlog Post: Your Dashboards — Your Look! Meet the New Custom Theming in Revealhttps://www.infragistics.com/community/blogs/b/infragistics/posts/reveal-custom-theme-blogFri, 24 Apr 2020 13:00:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:f1586f73-da5f-4330-9439-ebb8ee56767cCasey McGuiganReveal is all about providing you with ready-to-integrate data visualizations with embedded analytics. An important part is making sure that the elements you are embedding into your applications match the look and feel. For our application users , Reveal now has two themes provided out of the box —Mountain and Ocean—that look beautiful in both light and dark theme. Looking to embed visualizations to match your application&#39;s theme? Not a problem! Through the Reveal SDK you can now create your own custom themes and control all aspects of your dashboards. New Dashboard Themes in Reveal To provide the best user experience with the new themes of Mountain and Ocean, we developed color palettes that look beautiful, work in light mode and dark mode and have a modern look and feel. Reveal&#39;s ocean theme Color Palettes Each theme within the Reveal application has 10 different colors in its palette. When editing or creating a visualization you can change the start color easily by choosing from the palette: Custom Theming When Embedding Analytics When it comes to embedding analytics into your existing applications it is key that those dashboards match your app&#39;s look and feel. That&#39;s why we give you full control over the Reveal dashboards through our SDK. In comparison to the application, here are the key customizations you can achieve with custom themes: Color palettes : The colors used to show the series in your visualizations. You can add an unlimited number of colors. Once all colors are used in a visualization, Reveal will autogenerate new shades of these colors. This way your colors won’t repeat and each value will have its own color. Accent color : The default accent color in Reveal is a shade of Blue that you can find in the + Dashboard button and other interactive actions. You can change the color to match the same accent color you use in your applications. Conditional formatting colors : Change the default colors of the bounds you can set when using conditional formatting. Font : Reveal uses three types of text in the application: regular, medium and bold. You can specify the font uses for each of these text groups. Visualization and dashboard background colors : You can configure separately the background color of your dashboard and the background color of the visualizations. How Do You Create Your Custom Theme? Creating your own theme in Reveal is as easy as creating an instance of the new RevealTheme()/$.ig.RevealTheme() class. This class contains all the customizable settings we listed above. When creating a new RevealTheme/$.ig.RevealTheme instance, you will get the default values for each setting. Now, you can modify the settings you need to be changed. Finally, pass the theme instance to the UpdateRevealTheme(theme)/ updateRevealTheme(theme) method. If you have a dashboard or another Reveal component already displayed on your screen, you will need to re-render it in order to see the applied changes. You may have already applied your own theme but want to modify some of the settings without losing the changes you made to the others. In this case you can call the GetCurrentTheme()/getCurrentTheme() method. This method enables you to get the last values you have set for your RevealTheme settings. Unlike the case when you create a new instance of the RevealTheme from scratch, after applying your changes and updating your theme again, you will get the current values for each setting you didn’t modify instead of the default values. Both the GetCurrentTheme()/getCurrentTheme() and the UpdateRevealTheme(theme)/ updateRevealTheme(theme) methods are accessible through the RevealView / $.ig.RevealView class. Code Example In the following code snippet we illustrate how to get your current theme, apply the changes you want and update the theme in Reveal. First, let&#39;s start with an example of what a screenshot looks like before we make changes: Now use this code snippet to define your custom themes: var regularFont = new FontFamily(new Uri(&quot;pack://application:,,,/ [Your ProjectName];component/[pathToFonts]/&quot;), &quot;./#Verdana Italic&quot;); var boldFont = new FontFamily(new Uri(&quot;pack://application:,,,/ [Your ProjectName];component/[pathToFonts]/&quot;), &quot;./#Verdana Bold&quot;); var mediumFont = new FontFamily(new Uri(&quot;pack://application:,,,/ [Your ProjectName];component/[pathToFonts]/&quot;), &quot;./#Verdana Bold Italic&quot;); var customTheme = RevealView.GetCurrentTheme(); customTheme.ChartColors.Clear(); customTheme.ChartColors.Add(Color.FromRgb(192, 80, 77)); customTheme.ChartColors.Add(Color.FromRgb(101, 197, 235)); customTheme.ChartColors.Add(Color.FromRgb(232, 77, 137); customTheme.BoldFont = new FontFamily(&quot;Gabriola&quot;); customTheme.MediumFont = new FontFamily(&quot;Comic Sans MS&quot;); customTheme.FontColor = Color.FromRgb(31, 59, 84); customTheme.AccentColor = Color.FromRgb(192, 80, 77); customTheme.DashboardBackgroundColor = Color.FromRgb(232, 235, 252); RevealView.UpdateRevealTheme(customTheme); Note: You first need to clear your chart colors list default values to have the new set of colors added. The following code snippet illustrates how to create a new instance of the revealTheme class, apply the changes to the settings you want, and update the theme in Reveal Web. Code Sample – Reveal Web var revealTheme = new $.ig.RevealTheme(); revealTheme.chartColors = [&quot;rgb(192, 80, 77)&quot;, &quot;rgb(101, 197, 235)&quot;, &quot;rgb(232, 77, 137)&quot;]; revealTheme.mediumFont = &quot;Gabriola&quot;; revealTheme.boldFont = &quot;Comic Sans MS&quot;; revealTheme.fontColor = &quot;rgb(31, 59, 84)&quot;; revealTheme.accentColor = &quot;rgb(192, 80, 77)&quot;; revealTheme.dashboardBackgroundColor = &quot;rgb(232, 235, 252)&quot;; $.ig.RevealView.updateRevealTheme(revealTheme); Note: Using the font options When defining the boldFont, regularFont or mediumFont settings of a reveal theme you need to pass the exact font family name. The weight is defined by the definition of the font itself and not in the name. You might need to use @font-face (CSS property) to make sure the font-face name specified in the $.ig.RevealTheme font settings are available. Now, after implementing our theme changes, here&#39;s the new results in both the Dashboard and Visualization Editors. The Dashboard Editor after applying the changes from the code snippets above . The Visualization Editor after applying the changes from the code snippets above. To find out more about Reveal, visit revealbi.io.Reveal AppFor Business TeamsRevealBlog Post: Infragistics ASP.NET Release Notes - April 2020: 19.1, 19.2 Service Releasehttps://www.infragistics.com/community/blogs/b/engineering/posts/infragistics-asp-net-release-notes---april-2020-19-1-19-2-service-releaseSun, 05 Apr 2020 23:02:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:076afbc3-9dd8-4536-bd4f-2a54e8e8a719Nikolay AlipievWith every release comes a set of release notes that reflects the state of resolved bugs and new additions from the previous release. You’ll find the notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next. Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking. Download the Release Notes ASP.NET 2019 Volume 1 PDF (ASP.NET 2019 Volume 1, Build 19.1.20191.253) Excel (ASP.NET 2019 Volume 1, Build 19.1.20191.253) ASP.NET 2019 Volume 2 PDF (ASP.NET 2019 Volume 2, Build 19.2.20192.17) Excel (ASP.NET 2019 Volume 2, Build 19.2.20192.17)NetAdvantageASP.NETSR Notesasp release notes19.1Release Notes19.2Blog Post: Ignite UI Release Notes - April 2020: 19.1, 19.2 Service Releasehttps://www.infragistics.com/community/blogs/b/engineering/posts/ignite-ui-release-notes---april-2020-19-1-19-2-service-releaseSun, 05 Apr 2020 22:54:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:81b8dd43-48cb-49cb-9ab7-da1083ffa29dNikolay AlipievWith every release comes a set of release notes that reflects the state of resolved bugs and new additions from the previous release. You’ll find the notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next. Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking. Download the Release Notes Ignite UI 2019 Volume 1 PDF (Ignite UI 2019 Volume 1, Build 19.1.20191.44) Excel (Ignite UI 2019 Volume 1, Build 19.1.20191.44) Ignite UI 2019 Volume 2 PDF (Ignite UI 2019 Volume 2, Build 19.2.20192.27) Excel (Ignite UI 2019 Volume 2, Build 19.2.20192.27)Service Release NotesService Releasejquery19.119.2ignite release notesIgnite UIBlog Post: Create Projects with Angular Schematics for Ignite UIhttps://www.infragistics.com/community/blogs/b/engineering/posts/angular_2d00_schematics_2d00_ignite_2d00_uiThu, 02 Apr 2020 13:00:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:3d48da25-09d9-466f-9f79-aff6adde2d8dNikolay AlipievThis blog is a 3 minute read and the project setup takes 5 minutes! We all know Angular CLI , the Google assembly line for Angular projects, components, services, and much more. At Infragistics, we have developed our own Ignite UI CLI which, in a similar manner, lets you create projects with Ignite UI for Angular components , among other products . And because we love Angular we have created our own schematics in order to scaffold projects using ng commands and our components. If you are interested, you can read more about Ignite UI CLI and Angular Schematics for Ignite UI here . Prerequisites: creating Angular projects requires NodeJS and Angular CLI . Adding Ignite UI Grid to your Angular project Let’s assume you already have an Angular project created and you suddenly need to add a performance grid, consuming live data with easy data access and manipulation, similar to this one . Using Ignite UI for Angular&#39;s Schematics, you can easily achieve this in only two quick steps! In a terminal, run the commands below to add the Ignite UI for Angular package to your project and generate an awesome-grid component from a predefined list with templates : ng add igniteui-angular With our latest version, this will also add our Angular Schematics package to your project’s dev dependencies, which means you can now also generate additional views with them: ng g @igniteui/angular-schematics:c awesome-grid newAwesomeGrid That&#39;s it - you have an awesome grid in your application! Oh wait, you don&#39;t have an Angular project, yet? Creating an Angular Project with our Schematics You want to scaffold an Angular project from scratch and have routing and authentication? First, you need to install Ignite UI for Angular Schematics. The command below will make the schematics available to use a collection parameter for the ng new command: npm i -g @igniteui/angular-schematics Just use the command below with the proper value for the template parameter to create a new project with routing and authentication : ng new newIgniteUIAngularProject --collection=&quot;@igniteui/angular-schematics&quot; --template=side-nav-auth Then add one or more predefined templates choosing from different controls groups like grids, lists, charts, gauges, editors, custom scenarios, among others. Y ou can invoke the schematics Step-by-Step mode: ng g @igniteui/angular-schematics:c As an alternative, you can repeat the ` ng g ` command, passing template and name as parameters, in order to add more templates : ng g @igniteui/angular-schematics:c awesome-grid newAwesomeGrid In that case, you&#39;re just a quick ` ng serve ` away from running your beautiful app and achieving the same result as the one above! Thank you!Ignite UI for AngularAngular GridAngular CLIFor DevelopersAngular SchematicsBlog Post: Reveal Adds Major New Features—Predictive Analytics, Big Data and Morehttps://www.infragistics.com/community/blogs/b/infragistics/posts/reveal-embedded-bi-major-upgradeThu, 02 Apr 2020 13:00:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:bef0bf09-89ef-4fb7-a480-11abdafdf496Casey McGuiganWe are thrilled today to announce another big update for our Reveal product! This release is packed with features that touch on today’s hottest topics and trends: Predictive and Advanced Analytics Machine Learning R &amp; Python Scripting Big Data Connectors Advanced Visualization Interactions and much more I’ll highlight each feature in this blog, and with the screen shots you’ll get an idea of what to expect the next time you log in to Reveal! Also note that we&#39;ve moved Reveal to a Linux cloud backend, offering you a much lower-cost deployment option than Windows while also including support for .NET Core 3. Advanced Analytics with Statistical Functions In just a few clicks, you as a business user can quickly gain more insights about your data and perform a variety of statistical analytics using any of the following built in functions: Outliers Detection With Outliers Detection, easily detect points in your data that are anomalies and differ from much of your data set. You can show or hide these outliers from view, so they’re always showing or so they don’t interfere with your analysis. Time Series Forecasting With Time Series Forecasting, Reveal will make predictions on future values based on historical data and trends. This is useful in any number of applications, such as sales and revenue forecasting, inventory management, and many others. Linear Regression With Lin ear Regression, you’ll be able to visually see trends in your data by finding the relationship between two variables and see a linear approximation of your data – including future trends . Along with Linear Regression, Reveal includes these algorithms trend lines: Linear Fit, Quadratic Fit, Cubic Fit, Quartic Fit, Logarithmic Fit, Exponential Fit, Power Law Fit, Simple Average, Exponential Average, Modified Average, Cumulative Average, and Weighted Average . Machine Learning You can now bring the power of Machine Learning into Reveal! Microsoft Azure Machine Learning Models Integration allows you to use trained models applied to your data from Azure Machine Learning Studio to build beautiful visualizations. Simply point your data to the URL of your Azure model and Reveal will render a visualization based on your machine learning scenario. You can also used trained models applied to your data from Google BigQuery Platforms to build striking visualizations. R &amp; Python Scripting We now support R and Python scripting, which is the on-ramp for your inner Citizen Data Scientist to perform statistical analysis and data analytics that pushes the limits of what Reveal can do with your data set. For example, you can pre-/post-process data to improve your visualization output or render unique visualizations that are included in R or Python libraries. Simply paste a URL to your scripts or paste your code into the script editor. Hot New Data Source Connectors! By popular demand, we’ve added 3 important new data connectors to Reveal: Azure SQL Azure Synapse Google Big Query With these powerful new connectors, you can pull in millions of records into Reveal and create visualizations without sacrificing speed! We’ve tested 100 million records in Azure Synapse … and it loads in a snap! For the Marketing, Sales &amp; IT needs, we’ve added new connectors for: Google Analytics Microsoft SQL Server Reporting Services (SSRS) Salesforce With Google Analytics, one of the most used web analytics services on the market, you can build dashboards that bring insights from your website traffic, usage from your applications and much more! With Reporting Services, you can render a PDF visualization as a Reveal Visualization or use the fields in your report to craft new visualizations that Reporting Services does not offer. This is perfect for legacy uses – just point your SSRS URL at Reveal and breathe new, interactive life into your data. New Visualization Level Interactions We’ve made data analysis and visualization even better in this release. To hone-in on the data that’s most important, Reveal now includes: Hover ToolTips with sleeker style and better readability Crosshair support for your charts for better precision on the points in your visualizations! Value Overlays that give precision indicators on the X &amp; Y axis based on the data point hover location Advanced Exporting Options In addition to adding a PDF export you now have the power to completely customize the exporting functionality when exporting to PowerPoint and PDF. With this release, you can: Pick which visualizations you want included in your export Add titles to your slides and pages Annotate your visualizations Add custom branding to match your company’s logo, name and colors New Themes to Match Your App’s Look and Feel The latest Reveal version includes two new themes that work in light and dark mode. Customize them to match your app’s look and feel when embedding Reveal into your application and have complete control over colors, fonts, shapes and more! Try Reveal Today To begin using these powerful features in Reveal, visit revealbi.io to get started today.Business featureReveal AppFor Business TeamsRevealBlog Post: Infragistics Windows Forms Release Notes - April 2020: 19.1, 19.2 Service Releasehttps://www.infragistics.com/community/blogs/b/engineering/posts/infragistics-windows-forms-release-notes---april-2020-19-1-19-2-service-releaseTue, 31 Mar 2020 15:09:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:1fb29338-f43d-4b26-8532-005ac29430a2Andrew GoldenbaumRelease notes reflect the state of resolved bugs and new additions from the previous release. You will find these notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next. Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking. In order to download release notes, use the following links: Windows Forms 2019 Volume 1 Service Release (Build 19.1.20191.379) • PDF - Infragistics for Windows Forms 2019 Volume 1 • Excel - Infragistics for Windows Forms 2019 Volume 1 Windows Forms 2019 Volume 2 Service Release (Build 19.2.20192.302) • PDF - Infragistics for Windows Forms 2019 Volume 2 • Excel - Infragistics for Windows Forms 2019 Volume 2Service Release NotesInfragisticsAprilSR NotesFor Developers19.1Release Notes19.2Windows Forms