Skip to content

SharePoint Framework v1.8 release notes

Jump to bottom
Kevin Coughlin edited this page May 28, 2020 · 11 revisions

Release notes for SharePoint Framework 1.8

Hello, and welcome to SharePoint Framework Release 1.8!

We’re excited to release the following features:

  • SPFx development of Teams Tabs
  • App Pages
  • Web parts in Isolated Domains
  • Library Components (preview)
  • Support for TypeScript 2.7, 2.9 and 3.x
  • Support for Section background styling on modern pages
  • Deprecating legacy Fabric CSS consumption

Beta features (preview capabilities) are only available when specifying the --plusbeta option in the generator or specifying the plusbeta versions as dependencies in your package.json.

Notice that we will be releasing more updated documentation and guidance videos during upcoming days and weeks. Your feedback on needed assets and topics is more than welcome. If you find any issues related to this release, please do use the sp-dev-docs issue list for sharing your findings with Microsoft and others in the community.

SPFx development for Teams tabs

Teams Tabs solutions using SPFx is now fully supported. Add ‘TeamsTab’ to the supportedHosts property in the web part manifest and deploy it to the app catalog. From there, you can choose the solution and click the "Sync to Teams" button. The web part will now appear as an app in teams. When a web part is hosted in a Teams Tab it will have access to the Teams SDK via the web part context. There are the following changes from the beta release in 1.7:

  • Initial configuration and subsequent configuration is handled using the Property Pane
  • The manifest property canUpdateConfiguration can be set to false to disable configuration after the initial configuration
  • Reduced JavaScript overhead to host the web part
  • “Sync to Teams” feature to automate Teams manifest creation and upload
  • Update teams-js to 1.4.1
  • Locale is driven by the current Teams Locale

See more from:

App Pages

We frequently receive requests to have a single-page-app framework in SPFx. We hope App Pages will meet the majority of the goals around SPAs while providing a similar development model and user experience. App pages are a new SharePoint modern page layout, which hosts a single web part on the entire page; keeping the look and feel (navigation, header, theme, etc.) consistent. Adding ’SharePointFullPage’ to the supportedHosts property of the web part manifest will add an App Page with the web part option when creating a new page.

The web part can be configured (unless the canUpdateConfiguration property is false), but the page layout/content cannot be modified. The end user creation of app pages should be rolling out later this month with the new page creation experience. In the meantime, there is a static page (located at _layouts/15/appPageHost.aspx?componentId=yourComponentGuidHere) that will host any component in an app page. This page is rolling out now and should be available at release time, or a day or two later, depending on your tenant.

See more from:

Domain isolated web parts

SPFx components running inside the current page is simple and fast. However, there are scenarios where a stronger level of isolation is desired. Domain isolated web parts run in an iframe with a separate domain, which can have different permissions from the host page. This allows, for example, a web part to access the current user’s email without giving all code running in the tenant the same level of access.

The domain and its AAD app are created and managed for the tenant - the tenant admin will need to approve the permissions requested by the solution. For end users, the web part looks and behaves like any other web part. At this time, domain isolated web parts only support Dynamic Data in the Page Context. Full part-to-part communication will come in a future update.

See more from:

Library Components (Preview)

You can now create libraries that other SPFx components can reference. They are a bit tricky to use, so we will be publishing a separate document that describes them in more detail. The trick is that you need to publish your library to an npm feed (internal is fine) in order to consume it. This is currently in preview.

See more from:

Support for TypeScript 2.7, 2.9 and 3.x

In this release, we've done work to separate out the version of typescript from the version of the SPFx framework you are using. You can now specify the version of TS you want to use separate from the build system itself. You can use any compiler listed under at https://www.npmjs.com/search?q=%40microsoft%2Frush-stack-compiler .

Note that the compiler you use needs to be reflected in your tsconfig.json file, with a reference to "extends": "./node_modules/@microsoft/rush-stack-compiler-2.7/includes/tsconfig-web.json", that matches the version of the rush-stack-compiler you include.

We noticed at the last moment that some of the recent versions of the rush-stack-compiler packages aren't working correctly. If you find that the npm install gives warnings regarding peer dependencies for TypeScript, and the build fails with complaints of not finding a compiler, use an earlier version of the package. For example, version 0.5.7 of the rush-stack-compiler-2.7 package works, version 0.6.8 of the rush-stack-compiler-2.9 package works, 0.5.9 of the rush-stack-compiler-3.0 package works, and 0.1.6 of the rush-stack-compiler-3.3 package works.

Deprecating legacy Fabric CSS consumption

Since the 1.0 release of SPFx, we have added a bunch of Fabric CSS to the page. Although we have changed how Fabric CSS works since then, we continued adding the old version of Fabric CSS to the page. This wound up adding a considerable about of unneeded CSS. Starting with SPFx 1.8.0, solutions will no longer load the old Fabric CSS.

If your solution still needs the pre-1.8.0 behavior, add ”loadLegacyFabricCss”: true to your component manifest. If your styles are not working correctly after upgrading to 1.8.0, you might need to switch this setting.

Alternatively, your solution can import the Fabric.css stylesheet like so:

import 'office-ui-fabric-react/dist/css/fabric.css';

Web part variant theming in SharePoint modern pages

SharePoint modern pages recently released a feature to have section background colors. Web parts can update their theming to reflect the background color the web part is rendering over. Setting the supportsThemeVariants property in the web part manifest to true will disable the default behavior of always rendering a white background. Web parts can then use the SPFx ThemeProvider to be notified of background color changes.

See more from:

Removing PropertyPane code out of sp-webpart-base

We are moving the property pane code to a different package (@microsoft/sp-property-pane) that contains all the property pane logic that previously existed in @microsoft/sp-webpart-base. Solutions that are currently running will continue to work (we will forward the calls appropriately), but the public property pane APIs on the sp-webpart-base are deprecated in 1.8, and will be removed in the 1.9 release.

Your code changes simple needs to change the imported package. They have the exact same types and signatures; they are just located in a different package. This allows us to only load the property pane code (and all its dependent packages) only when needed.

How to migrate to 1.8.0

  1. update package.json and change all the references from 1.7.0 or 1.7.1 packages and have them reference 1.8.0

  2. Make sure that there is an entry in the devDependency section of package.json referencing "@microsoft/sp-tslint-rules": "1.8.0"

  3. Add a rush-stack-compiler package as a dev dependency. To use TypeScript 2.7, add the following line: "@microsoft/rush-stack-compiler-2.7": "0.4.0", To use TypeScript 3.3, add the line "@microsoft/rush-stack-compiler-3.3": "0.1.7"

  4. Next, you need to update your tsconfig.json file to extend the TypeScript configuration for your version of the rush-stack-compiler. You do this by modifying the top of the file as follows: For rush-stack-compiler-2.7, the top of the tsconfig.json file would look like

    {
   "extends": "./node_modules/@microsoft/rush-stack-compiler-2.7/includes/tsconfig-web.json", 
   "compilerOptions": {
       ...

    for rush-stack-compiler-3.3, the top of the tsconfig.json file would look like

    {
   "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json", 
   "compilerOptions": {
       ...

  5. Fix all the new and interesting tslint errors that are now getting raised with a newer compiler. For large projects, this might take a while. The default behavior of the TS compilers is getting stricter, but your code will be the better for it.

Known issues and limitations

The new end-user experience to create app pages is dependent on the new Add a Page experience in modern pages. This is being rolled out now but release in your tenant may be a few days behind.

As mentioned in the Typescript support section, some of the more recent builds of the rush-stack-compiler that we use are having problems. The earlier versions work. We will publish updates and notifications when this is addressed.

The updated provider hosted model for hosting Microsoft Teams solutions in SharePoint Online (using the teams SDK) is still in preview.

Dynamic data support for isolated domain parts is limited to the page context data source. Full support for dynamic data across the iFrame boundary will come in a future update.

Submit an issue || Discuss at SharePoint StackExchange || Submit your new idea at Uservoice

Clone this wiki locally