Create Office 365 Groups With SPFx

protected onInit(): Promise<void> {
  return super.onInit().then(() => {
    O365GroupService.setup(this.context);
  });
}

Pass the context from the web part to React Component

We will have to pass the SharePoint context from our web part to the React component.

Open React component properties at “src\webparts\o365GroupCreation\components\IO365GroupCreationProps.ts”

Add the below properties.

import { WebPartContext } from '@microsoft/sp-webpart-base';

export interface IO365GroupCreationProps {
  description: string;
  context: WebPartContext;
}

Implement the NewGroup React Component

Open the React component at src\webparts\o365GroupCreation\components\O365GroupCreation.TSX

Add the below imports.

import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { Label } from 'office-ui-fabric-react/lib/Label';
import { ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react/lib/ChoiceGroup';
import { PeoplePicker, PrincipalType, IPeoplePickerUserItem } from "@pnp/spfx-controls-react/lib/PeoplePicker";
import { MessageBar, MessageBarType, IStackProps, Stack } from 'office-ui-fabric-react';
import { autobind } from 'office-ui-fabric-react';
import O365GroupService from '../../../services/O365GroupService';

Use the React state.

import { IO365GroupCreationState } from './IO365GroupCreationState';

export default class O365GroupCreation extends React.Component<IO365GroupCreationProps, IO365GroupCreationState> {
  constructor(props: IO365GroupCreationProps) {
    super(props);
  
    this.state = {
      name: '',
      description: '',
      visibility: 'Public',
      owners: [],
      members: [],
      showMessageBar: false
    };
  }
...
}

Implement the render method to add the UI controls.

public render(): React.ReactElement<IO365GroupCreationProps> {
  return (
    <div className={styles.container}>
      <div className={styles.row}>
        {
          this.state.showMessageBar
            ?
            <div className="form-group">
              <Stack {...verticalStackProps}>
                <MessageBar messageBarType={this.state.messageType}>{this.state.message}</MessageBar>
              </Stack>
            </div>
            :
            null
        }

        <div className="form-group">
          <TextField label="Name" required onChanged={this.onchangedName} />
        </div>

        <div className="form-group">
          <TextField label="Description" required multiline rows={3} onChanged={this.onchangedDescription} />
        </div>

        <div className="form-group">
          <Label required={true}>Visibility</Label>
          <ChoiceGroup
            defaultSelectedKey="Public"
            options={[
              {
                key: 'Public',
                text: 'Public - Anyone can see group content'
              },
              {
                key: 'Private',
                text: 'Private - Only members can see group content'
              }
            ]}
            onChange={this.onChangeVisibility}
          />
        </div>

        <div className="form-group">
          <PeoplePicker
            context={this.props.context}
            titleText="Owners"
            personSelectionLimit={3}
            showHiddenInUI={false}
            principalTypes={[PrincipalType.User]}
            selectedItems={this._getPeoplePickerOwners}
            isRequired={true} />
        </div>

        <div className="form-group">
          <PeoplePicker
            context={this.props.context}
            titleText="Members"
            personSelectionLimit={3}
            showHiddenInUI={false}
            principalTypes={[PrincipalType.User]}
            selectedItems={this._getPeoplePickerMembers}
            isRequired={true} />
        </div>

        <div className={`${styles.buttonRow} form-group`}>
          <button type="button" className="btn btn-primary" onClick={this.createNewGroup}>Submit</button>
        </div>
      </div>
    </div>
  );
}

Implement the event handlers for UI controls.

@autobind
private _getPeoplePickerOwners(items: IPeoplePickerUserItem[]) {
  this.setState(() => {
    return {
      ...this.state,
      owners: items.map(x => x.id.replace('i:0#.f|membership|', ''))
    };
  });
}

@autobind
private _getPeoplePickerMembers(items: IPeoplePickerUserItem[]) {
  this.setState(() => {
    return {
      ...this.state,
      members: items.map(x => x.id.replace('i:0#.f|membership|', ''))
    };
  });
}

@autobind
private onchangedName(groupName: any): void {
  this.setState({ name: groupName });
}

@autobind
private onchangedDescription(groupDescription: any): void {
  this.setState({ description: groupDescription });
}

@autobind
private onChangeVisibility(ev: React.FormEvent<HTMLInputElement>, option: IChoiceGroupOption): void {
  this.setState({ visibility: option.key });
}

@autobind
private createNewGroup(): void {
  try {
    O365GroupService.createGroup(this.state.name, this.state.description, this.state.visibility, this.state.owners, this.state.members);
  
    this.setState({
      message: "Group " + this.state.name + " is created successfully!",
      showMessageBar: true,
      messageType: MessageBarType.success
    });
  } catch (error) {
    this.setState({
      message: "Group " + this.state.name + " creation failed with error: " + error,
      showMessageBar: true,
      messageType: MessageBarType.error
    });
  }
}

Deploy the SPFx Package to the SharePoint App Catalog

Follow the below steps to deploy the SPFx package (.sppkg) to the SharePoint app catalog.

Build minified assets

On the command prompt, type the below command.

gulp bundle --ship

Prepare the package

On the command prompt, type the below command.

gulp package-solution --ship

The .sppkg package will be available inside the “sharepoint\solution” folder.

Upload the package to the app catalog

1. Open the SharePoint app catalog site.
2. Upload the package to the app catalog.
   
3. Click Deploy.

API Management

After deploying the web part, follow the below steps to approve API requests.

1. Open SharePoint Admin Center (https://[tenant]-admin.sharepoint.com).
2. From the left navigation, click “API Management”.
3. Approve the pending requests.
   

Test the WebPart

1. On the command prompt, type “gulp serve”.
2. Open the SharePoint site.
3. Navigate to /_layouts/15/workbench.aspx
4. Locate and add the web part (named O365GroupCreation) to the page.
5. Fill in the group information.
6. Click Submit.
   

Troubleshoot

The page generates an alert “To view the information on this page, you need to verify your identity”, to resolve this add the below URLs to the trusted site in a browser.

• https://graph.microsoft.com
• https://.office365.com
• https://.sharepoint.com
• https://.outlook.com

Summary

Microsoft Graph offers a wide range of APIs to access the content and services provided by Office 365. Creating a group by using MS Graph API is one of the business cases supporting it. As this solution uses application permission, a page hosting this web part has to be carefully exposed to a certain set of users.