SPFx 1.18 released!

POSTED ON

Finally it’s here: SPFx version 1.18 is available!

As I mentioned in my previous article SPFx 1.18 brings some changes and new features to improve and enhance the life of us developers.

To upgrade existing references you have to uninstall all the packages that references the old version, you can do it executing:

npm uninstall @microsoft/{spfx-package-name}@1.17.x

To install the packages with the new version execute the following for every package of SPFx used in the project:

npm install @microsoft/{spfx-package-name}@latest --save --save-exact

If you don’t want to do the previous steps you can follow the upgrade guide using CLI for Microsoft 365.

The main updates are:

  • For Adaptive Card Extensions
    • Support for Execute Action both for card view and quick view.
    • BaseComponentsCardView has a new default card view to enable developers to specify a set of components rendered in card view.
    • Card view are now more flexible but still have to follow some guidelines for the best result.
    • In the card view it’s now possible to use a text input. By now this input is fully supported in browser and Teams but it’s not yet supported for Viva Connections on mobile.
    • A new Search Card Template has been added.
    • To support the use of the new TextInput and SearchBox components a new onChange event has been added.
    • From this version developers can access the hostContext in the AdaptiveCardExtensionContext object to detect the host theme.
  • TypeScript v4.7 is now supported.
  • Fluent UI React v8 is now supported.

There are quite some changes for the Adaptive Card Extensions, luckily Microsoft has wrote a guide to make the migration easier, you can find it here.

There are also a couple of deprecations and a fix for the {tenantDomain} placeholder.

You can check here the fully detailed list of changes.

Hope that helps!


Discover more from I am GuidoZam

Subscribe to get the latest posts sent to your email.

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.