SPFx 1.11: Enhanced Teams Integration and Developer Experience

SharePoint Framework 1.11 continues the trend of deeper Microsoft Teams integration while improving the developer experience. After updating several projects to 1.11, here’s what matters for SharePoint and Teams developers.

What’s New

• Node.js 12 Support: Finally! Node 12 LTS is now supported alongside Node 10
• Improved Teams Personal Apps: Better handling of Teams personal apps with SPFx
• Fluent UI Icons: New Fluent UI icon package replaces Office UI Fabric icons
• Faster Builds: Optimized gulp tasks for quicker develop-test cycles
• Library Component Improvements: Better versioning and dependency handling

Upgrading to 1.11

# Install globally
npm install -g @microsoft/generator-sharepoint@1.11.0

# For existing projects, update package.json dependencies:
"@microsoft/sp-core-library": "1.11.0",
"@microsoft/sp-webpart-base": "1.11.0",
"@microsoft/sp-lodash-subset": "1.11.0",
"@microsoft/sp-office-ui-fabric-core": "1.11.0"

# Then run
npm install
gulp clean
gulp build

Teams Personal App Improvements

SPFx 1.11 improves how web parts behave as Teams personal apps. The Teams context is now more reliably available:

protected onInit(): Promise<void> {
  return super.onInit().then(() => {
    // Check if running in Teams
    if (this.context.sdks.microsoftTeams) {
      const teamsContext = this.context.sdks.microsoftTeams.context;
      
      console.log('User:', teamsContext.userPrincipalName);
      console.log('Team:', teamsContext.teamName);
      console.log('Channel:', teamsContext.channelName);
      console.log('Theme:', teamsContext.theme);
      
      // Apply Teams theming
      this.applyTeamsTheme(teamsContext.theme);
    }
  });
}

private applyTeamsTheme(theme: string): void {
  // theme: 'default' | 'dark' | 'contrast'
  document.body.classList.add(`teams-theme-${theme}`);
}

Fluent UI Icons

The icon package has changed from Office UI Fabric to Fluent UI:

// Old way
import { Icon } from 'office-ui-fabric-react/lib/Icon';

// New way (1.11+)
import { Icon } from '@fluentui/react/lib/Icon';

// Usage remains the same
<Icon iconName="Add" />

Library Components

Library components in 1.11 have better isolation. Multiple web parts can use different versions of the same library without conflicts. This is huge for large organizations with many SPFx solutions.

Key Takeaways

• Node 12 support improves developer experience and build times
• Teams integration continues to mature with better context handling
• Fluent UI is the new icon/component package
• Library component versioning prevents dependency conflicts

References

• SPFx 1.11 Release Notes