✉️

SharePoint Framework を使ってメール送信フォームを作ってみる

に公開
SharePoint
Microsoft Graph
tech

はじめに

かなり以前の記事になりますが、SharePoint の Web パーツを使ってメール送信フォームを作成したことがあります。

https://zenn.dev/karamem0/articles/2011_09_14_000000

今回はこの記事のアップデート版です。現在の SharePoint 開発のスタンダードである SharePoint Framework を使って Web パーツを作成し、Microsoft Graph でメールを送信します。

サンプルコード

https://github.com/karamem0/samples/tree/main/sharepoint-framework-mail-form

実行手順

今回はフレームワークとして React を使用します。React を使用することで、Office UI Fabric および PnP SPFx Controls を利用でき、開発生産性が格段に向上します。

SampleApplicationWebPart.ts

React を使った SharePoint Framework 開発の定番として、Component の props に context を渡す方法があります。これを行わないと、Component 側で Microsoft Graph の呼び出しなどができなくなります。テンプレートからプロジェクトを作成した場合、このロジックは含まれていないため、はじめに追加しておくことを推奨します。

export default class SampleApplicationWebPart extends BaseClientSideWebPart<ISampleApplicationWebPartProps> {

  public render(): void {
    const element: React.ReactElement<IMailFormProps> = React.createElement(
      MailForm,
      {
        context: this.context,
      }
    );

    ReactDom.render(element, this.domElement);
  }

}

MailForm.tsx

PnP SPFx Controls には PeoplePicker という便利なコントロールが用意されているため、宛先フィールドにはこれを利用します。それ以外は Office UI Fabric の TextField を使用します。入力された値は state に格納します。送信ボタンがクリックされたとき、state の値を使って Microsoft Graph の sendMail メソッドでメールを送信します。

import * as React from 'react';
import { MSGraphClient } from '@microsoft/sp-http';
import { IMailFormProps } from './IMailFormProps';
import { IMailFormState } from './IMailFormState';
import styles from './MailForm.module.scss';
import * as strings from 'SampleApplicationWebPartStrings';
import { PeoplePicker, PrincipalType } from '@pnp/spfx-controls-react/lib/PeoplePicker';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';

export default class SampleApplication extends React.Component<IMailFormProps, IMailFormState> {

  constructor(props) {
    super(props);
    this.state = {
      to: [],
      subject: "",
      body: ""
    };
  }

  public render(): React.ReactElement<IMailFormProps> {
    return (
      <div className={styles.mailform}>
        <div className={styles.container}>
          <PeoplePicker
            context={this.props.context}
            titleText="宛先"
            personSelectionLimit={99}
            principalTypes={[PrincipalType.User]}
            selectedItems={value => this.setState({ to: value })} />
          <TextField
            label="件名"
            value={this.state.subject}
            onChanged={value => this.setState({ subject: value })} />
          <TextField
            label="本文"
            multiline
            rows={10}
            onChanged={value => this.setState({ body: value })} />
          <div className={styles.buttons}>
          <PrimaryButton
              text="送信"
              onClick={this._onSendButtonClick.bind(this)} />
          </div>
        </div>
      </div>
    );
  }

  private _onSendButtonClick(): void {
    this.props.context.msGraphClientFactory
      .getClient()
      .then((client: MSGraphClient) => {
        client.api('/me/sendMail').post(
          {
            message: {
              toRecipients: this.state.to.map(value => { return { emailAddress: { address: value.secondaryText } }; }),
              subject: this.state.subject,
              body: {
                content: this.state.body,
                contentType: 'text'
              }
            }
          },
          (error: any, response: any, rawResponse: any) => {
            if (error) {
              window.alert("メールを送信できませんでした。");
            } else {
              window.alert("メールを送信しました。");
            }
          });
      });
  }

}

実行結果

実行すると、モダン UI と調和の取れたレイアウトで表示されます。

Office UI Fabric と PnP SPFx Controls の恩恵を受けられるのは非常に大きいので、ぜひ React を使って SPFx 開発を楽しんでください。

Discussion