SharePoint Framework (SPFx) 1.7: Building Modern Web Parts

SPFx 1.7 dropped a few weeks ago, and it’s a solid release. If you’re building SharePoint customizations in 2019, here’s what you should know about the latest version of the SharePoint Framework.

What’s New in SPFx 1.7

This release focuses on stability and developer experience. Not flashy, but important.

Dynamic Data

The dynamic data capability is now GA. This lets web parts communicate with each other on the same page. Think of it like a lightweight event bus:

// Source web part - expose data
this.context.dynamicDataSourceManager.initializeSource(this);

public getPropertyDefinitions(): ReadonlyArray {
  return [
    { id: 'selectedItem', title: 'Selected Item' }
  ];
}

// Consumer web part - subscribe
const source = this.context.dynamicDataProvider.tryGetSource(sourceId);
source.getPropertyValue('selectedItem');

This is great for dashboard-style pages where selecting something in one web part should update another.

Library Components

You can now create library components—shared code packages that other SPFx solutions can reference. This is huge for organizations building multiple web parts that share common logic:

yo @microsoft/sharepoint
# Select "Library" as the component type

Improved Tooling

• TypeScript 2.9 support (finally!)
• Faster builds with improved webpack config
• Better error messages in the workbench

Setting Up Your Environment

If you’re starting fresh, here’s the quick setup:

npm install -g yo gulp @microsoft/generator-sharepoint

mkdir my-webpart && cd my-webpart
yo @microsoft/sharepoint

Choose React as your framework—it’s the best supported and most practical for complex web parts.

A Simple Web Part

Here’s the anatomy of a basic SPFx React web part:

import * as React from 'react';
import { IGreetingProps } from './IGreetingProps';

export default class Greeting extends React.Component<IGreetingProps, {}> {
  public render(): React.ReactElement<IGreetingProps> {
    return (
      <div>
        <h2>Hello, {this.props.name}!</h2>
        <p>Welcome to SharePoint Online.</p>
      </div>
    );
  }
}

Tips from the Trenches

• Use PnP JS – Don’t write raw REST calls. The PnP library handles all the SharePoint quirks
• Test in the hosted workbench – The local workbench doesn’t have real SharePoint context
• Office UI Fabric – Use it. Your web parts will look native to SharePoint
• Keep bundles small – Large JavaScript bundles hurt page load times

References

• SharePoint Framework Overview
• PnP JS Library
• Office UI Fabric