Just before the end of year holiday period, we are bringing you a new version. Before you start upgrading though, please go through the post here and the notes on the site first. We have made some breaking changes. Don't let them catch you by surprise and ruin that wonderful Christmas spirit.

Although the number of PRs that went into this release is not that big, the changes those PRs brought were pretty big. In total we had well over 30 PRs merged. As always, first the highlights and then the extended descriptions.

  • V3 out of support
  • Templates: 2 updated and 2 new templates
  • DataGrid: HTML table, rendering, ODATA adapter and (experimental) saving paging state in the URL
  • MessageBox: Allow HTML markup in message
  • Rating: improved a11y support
  • TextField: support for additional field types

For a complete overview of all the changes, please see the What's New page on our demo and documentation site.

Again, please also see the What's new? and Upgrade Guide pages for important information about breaking changes

V3 out of support

With the release of .NET 9 on November 12th, .NET 7 officially went out of support. With that, our support for v3 of the library (which used the Microsoft.Fast.Components.FluentUI namespace) came to an end as well. With well over 1.1 million downloads of just the core v3 package, we can safely say it laid the groundwork for the success the library has now.

Both .NET 6 and ,NET 7 won't get any security updates anymore. We also don't plan to release any updates to our v3 packages anymore and strongly advise you to move to one of the newer .NET versions (and our v4 packages). That being said, it is of course not that the v3 components suddenly don't work anymore. Just be aware of the danger involved and do not open new issues in our repo anymore. We won't be spending any time on them.

Templates: 2 updates and 2 new additions

The Microsoft.FluentUI.AspNetCore.Templates package already contained (fully equivalent code and functionality) copies of the Blazor Web App and Blazor WebAssembly Standalone App templates. With this release these templates have been updated to the latest versions. This means you now have the choice to create a new Fluent Blazor application that targets either .NET 8 or .NET 9 with everything already set up for you.

Fluent .NET Aspire Starter App

We are happy to report that the new version of the template package now also support creating a Fluent-ready version of the Aspire Starter App. Just like with the other templates, this one also completely mirrors the functionality from the standard version and comes with Fluent set up and ready to run. We might be biased, but we think this accompanies the Dashboard perfectly 😉.

aspiretemplate

Fluent .NET MAUI Blazor Hybrid and Web App

With this release we also bring the new combined Blazor Hybrid and Blazor Web app template (new for .NET 9) available in a Fluent-ready version. We took care of setting everything up already (and even removed Bootstrap for you).

hybridtemplate

See the Learn article for details on what the template (and subsequently our version as well) offers

How to use the templates

After you've installed the templates package, you can create a new project in Visual Studio. Just search for 'Fluent' in the 'Create a new project' dialog or select one of the applicable project types from the drop-down to find the Fluent templates.

templates

If you rather work from the command line, that is fully supported as well. Just put 'fluent' in front of any of the 4 short names (i.e. blazor --> fluentblazor) to start creating your Fluent apps.

DataGrid: Rendering, ODATA Adapter and saving paging state

Rendering

We are currently working on a new major version of the library. You can read more about that at the end of this article. Because of that work and also because of performance reasons, we have decided to 'swap out' the web components based rendering of the DataGrid to an HTML table elements based rendering. We took great care to make the transition as smooth as possible but we also did make quite a few changes to class names and styling.

If you were overriding/changing DataGrid rendering in previous versions, chances are that these will break with this release.

Resizing columns, presenting column filtering and sorting options have been made more accessible and by using parameters you can now choose how to present these to the end users. See the example in the demo site for which options are available and how you can use these.

Besides the rendering of the DataGrid, the following (breaking) changes have been made

  • If you have rows in a table with content that needs to span multiple lines, you now need to use and set the new MultiLine (bool) parameter of the FluentDataGrid. Previously this could be done by setting a RowClass on a column but that does not work anymore.
  • The parameter ResizeLabel has been removed in favor of 3 new parameters that make changing strings in the DataGrid UI easier. We now have ColumnOptionLabels, ColumnResizeLabels and ColumnSortLabels where each parameter is a record that contains properties for the strings that that specific piece of UI is using. There is a default implementation provided for each record. You can override the values like this:
private ColumnResizeLabels _resizeLabels = ColumnResizeLabels.Default;
private ColumnSortLabels _sortLabels = ColumnSortLabels.Default;
:
:
 protected override async Task OnInitializedAsync()
 {
     _resizeLabels = ColumnResizeLabels.Default with
     {
         ExactLabel = "...",
         ResizeMenu = "..."

     };
     _sortLabels = ColumnSortLabels.Default with
     {
         SortMenu = "...",
         SortMenuAscendingLabel = "..."
         SortMenuDescendingLabel = "..."

     };
:
:

You only need to override the values that you actually want to change.

A couple of our users (and we ourselves) have tested these changes extensively and are confident the breaking changes won't be that hard to fix. If you are running into issues, please let us know, as always, in the repo

OData Adapter

Through a community contribution, we now have a new adapter package available which adds an Implementation of an OData IAsyncQueryExecutor. Use this package if the data you want to display in the FluentDataGrid that comes from Microsoft.OData.Client.

Microsoft OData Client library's DataServiceContext gives you a DataServiceQuery property for each resource in your OData service endpoint. Simply supply this as the grid's Items parameter:

@inject DataServiceContext MyServiceContext

<FluentDataGrid RowsData="@MyServiceContext.People">
    ...
</FluentDataGrid>

You may also use any DataServiceQuery-supported LINQ operator to filter the data before passing it:

@inject DataServiceContext MyServiceContext

<FluentDataGrid RowsData="@MyServiceContext.Documents.Where(d => d.CategoryId == currentCategoryId)">
    ...
</FluentDataGrid>

To use this adapter, install the package and add the required code to your Program.cs:

builder.Services.AddDataGridODataAdapter();

Experimental: Save paging state in the URL

Also added through a community contribution, it is now possible to save the paging state of a DataGrid in the URL of the page. THis opt-in functionality is available by adding a parameter to your DataGrid: SaveStateInUrl="true". When using multiple grids on a page, you can also specify a SaveStatePrefix like this SaveStatePrefix="g1"

This will result in datagrispagestate

This is still an experimental feature, which might cause unwanted jumping in the page when you change something in the grid.

MessageBox: HTML Markup in the message

The MessageBox always had an option to display markup in the message shown. That was however only possible to achieve if you used the ShowMessageBox \ ShowMessageBoxAsync methods. With this release you can now also supply markup text through our convenience methods like ShowConfirmationAsync. The code looks like this:

private async Task ShowConfirmationAsync()
{
    var dialog = await DialogService.ShowConfirmationAsync("Are you <strong>sure</strong> you want to delete this item? <br /><br />This will also remove any linked items");
    var result = await dialog.Result;
    canceled = result.Cancelled;
}

which would then render like:

messagebox

TextField: Additional field types

With another great community contribution, we now support more types for the TextField. The Color, Search and Number options have been added to the TextFieldType and can be used in your applications now.

colorpicker

And much more...

There are many, many more PRs that got merged for this release. We can not discuss all of them here. As always, please see the What's new page on the docs site or the releases page on GitHub for a complete overview.

Special thanks

Besides all our appreciated existing contributors, we would especially like to thank our new contributors @bejulian, @svrooij, @maNobly and @adamint!

What's next?

I'd like to point you to What's next: the Fluent UI Blazor library v5 here on this site and the GitHub discussion about that article. We value your opinion and would love to hear your thoughts! If you're celebrating, have a great holiday! 

 

Comments


Comments are closed