続きです。ここからはほぼ React で開発していくだけです。
内容に関して React も TypeScript もあまり上手に使えるわけではないですので、そのあたりご容赦ください。。。
完成イメージ(4/4)
Teams のタブにもいい感じにおさまります。
下は画像が荒いですね。
来週の Global Microsoft 365 Developer Bootcamp 前に SharePoint Framework を予習しよう！Teams のタブにもなるよ！
— nan_oka (@nanoka7o8) November 6, 2020
Qiita用にツイート。#OfficeDev #SharePointOnline #SharePointFramework #MicrosoftTeams pic.twitter.com/m4oSyYCAP3
もちろん SharePoint Online のページとしても使えます。
関連記事
Webパーツ初期設定編 1/4
https://qiita.com/nanoka/items/834ee5216a5437dc04bc
画面レイアウトと画面遷移編 2/4
https://qiita.com/nanoka/items/35dea4791ad767497ed6
一覧画面編 3/4
https://qiita.com/nanoka/items/fbda2f09796a445dd9e2
詳細画面編 4/4
https://qiita.com/nanoka/items/92093ca05096728e2deb
手順
1. 画面レイアウトと画面の決定
2. 画面レイアウト用のコンポーネントの作成
3. 画面用のコンポーネントの作成
4. 画面レイアウトと画面の、呼び出し元コンポーネントの作成
手順の説明
1. 画面レイアウトと画面の決定
今回は画面上部にメニューっぽいものがあって、画面中央から下部にかけてメインのコンテンツがあるようなレイアウトとしたいと思います。
また、コンテンツとして、以下の2画面を作ることとします。
- TODO一覧画面
- TODO詳細画面(作成、更新、削除機能付き）
- Help画面
2. 画面レイアウト用のコンポーネントの作成
構成が決まったので、実際に開発を進めていきます。
templates フォルダに 以下のファイルを作成します。
今回のサンプルでは、Header も Body まったく同じになってしまいました。
実際にはここでレイアウトを定義する コードや CSS を書くのですが、後で記載する Stack というものを使ってサボることにしましたので、ほぼ空っぽのコンポーネントになっています。
...src/
└ webparts/
└ spfxTodo/
├ api/
├ assets/
│ └ stylesheets/
├ components/
│ ├ atoms/
│ ├ molecules/
│ └ organisms/
│ └ pages/ (画面を管理)
│ └ templates/ (画面レイアウトを管理)
└ loc/
import * as React from 'react';
import styles from './Panel.module.scss';
const BodyPanel = ({ children }) => (
<div className={styles.body_panel}>
{children}
</div>
);
export default BodyPanel;
import * as React from 'react';
import styles from './Panel.module.scss';
const HeaderPanel = ({ children }) => (
<div className={styles.header_panel}>
{children}
</div>
);
export default HeaderPanel;
@import '~office-ui-fabric-react/dist/sass/References.scss';
.header_panel {
width: 95%;
}
.body_panel {
width: 95%;
}
3. 画面用のコンポーネントの作成
次に pages フォルダに以下のファイルを作成します。
まず親コンポーネントから受け取りたいものを定義したファイルを作成します。
今回は
- Webパーツのプロパティで設定した接続するリストの名前
- SharePoint とのやり取りで利用するコンテキスト
- Url のパラメータ受け取りや画面遷移に使うもの
この3つを定義しておきます。
import { WebPartContext } from '@microsoft/sp-webpart-base';
import { RouteComponentProps } from 'react-router';
export interface IPageProps {
todoListName: string;
webPartContext: WebPartContext;
routeProps: RouteComponentProps<{ID: string}>;
}
次に実際の画面用コンポーネントのファイルを作成します。
同じ形のファイルですが、正しく表示されているかの確認のため、表示される文字だけ違うものにしてあります。
import * as React from 'react';
import { IPageProps } from './IPageProps';
class TodoList extends React.Component<IPageProps> {
constructor(props: IPageProps) {
super(props);
}
public render() {
return (
<div>
<p>TodoList</p>
</div>
);
}
}
export default TodoList;
import * as React from 'react';
import { IPageProps } from './IPageProps';
class TodoDetail extends React.Component<IPageProps> {
constructor(props: IPageProps) {
super(props);
}
public render() {
return (
<div>
<p>TodoDetail</p>
<p>{this.props.routeProps.match.params.ID || "idなし"}</p>
</div>
);
}
}
export default TodoDetail;
import * as React from 'react';
import { IPageProps } from './IPageProps';
class Help extends React.Component<IPageProps> {
constructor(props: IPageProps) {
super(props);
}
public render() {
return (
<div>
<p>Help</p>
</div>
);
}
}
export default Help;
4. 画面レイアウトと画面の、呼び出し元コンポーネントの作成
最後に spfxTodo フォルダ直下に以下のファイルを作成します。
先ほどと同じように親からもらうものを定義します。
import { WebPartContext } from "@microsoft/sp-webpart-base";
export interface ISpAppProps {
todoListName: string;
webPartContext: WebPartContext;
}
今回一番長いやつです。
import の部分では以下を読み込みます。
- 先ほど作成したコンポーネントの読み込み
- SharePoint っぽいUIを勝手にやってくれる office-ui-fabric-react
- 画面遷移をやってくれる react-router-dom
Stack はもちろん office-ui-fabric-react の各コンポーネントについては以下に詳細があります。
https://developer.microsoft.com/ja-JP/fluentui#/controls/web
まず画面遷移について、普通の router を使うと直リンクが機能するかわからなかったので、Hashrouter を使っています。
レイアウトとして、HeaderPanel と BodyPanel を Stack でくるんでいますが、これは、単純に縦に並べたかっただけです。
今回、画面レイアウトが単純なのと、偶然見つけて使ってみたかったので、この Stack を使ってコンポーネントを並べるような作りにしています。
HeaderPanel の中では、各画面へのリンクと、対応するUri を並べています。
BodyPanel の中では、Uri に応じて表示するコンポーネントの定義と、その子コンポーネントに渡す値を定義しています。
import * as React from 'react';
import styles from './SpApp.module.scss';
import { Route, NavLink, Switch, HashRouter } from 'react-router-dom';
import { DefaultButton, Stack, IStackTokens, Separator } from 'office-ui-fabric-react';
import HeaderPanel from './templates/HeaderPanel';
import BodyPanel from './templates/BodyPanel';
import TodoList from './pages/TodoList';
import TodoDetail from './pages/TodoDetail';
import Help from './pages/Help';
import { ISpAppProps } from './ISpAppProps';
class SpApp extends React.Component<ISpAppProps> {
constructor(props: ISpAppProps) {
super(props);
}
public render() {
const stackTokens: IStackTokens = { childrenGap: 5 };
const { todoListName, webPartContext } = this.props;
return (
<div className={styles.spapp}>
<div className={styles.container}>
<h1>SPFx Todo App</h1>
<HashRouter>
<Stack tokens={stackTokens}>
<HeaderPanel>
<nav>
<Stack horizontal tokens={stackTokens}>
<NavLink exact to={'/'} activeStyle={{ opacity: 0.6 }}>
<DefaultButton text='TodoList' />
</NavLink>
<NavLink to={'/TodoDetail'} activeStyle={{ opacity: 0.6 }}>
<DefaultButton text='TodoDetail' />
</NavLink>
<NavLink to={'/Help'} activeStyle={{ opacity: 0.6 }}>
<DefaultButton text='Help' />
</NavLink>
</Stack>
</nav>
<Separator />
</HeaderPanel>
<BodyPanel>
<Switch>
<Route sensitive exact path='/' component={(props) => <TodoList todoListName={todoListName}
webPartContext={webPartContext} routeProps={props} />} />
<Route sensitive exact path='/TodoDetail' component={(props) => <TodoDetail todoListName={todoListName}
webPartContext={webPartContext} routeProps={props}/>} />
<Route path='/TodoDetail/:ID' component={(props) => <TodoDetail todoListName={todoListName}
webPartContext={webPartContext} routeProps={props}/>} />
<Route sensitive exact path='/Help' component={(props) => <Help todoListName={todoListName}
webPartContext={webPartContext} routeProps={props} />} />
</Switch>
</BodyPanel>
</Stack>
</HashRouter>
</div>
</div>
);
}
}
export default SpApp;
CSSは最低限として、画面の横幅だけ定めておきます。
@import '~office-ui-fabric-react/dist/sass/References.scss';
.spapp {
.container {
max-width: 900px;
margin: 0px auto;
}
}
あともう一つ。前回作成したファイル更新し、今回作成したコンポーネントを呼び出します。
このファイルにあれこれ書いてもいいのですが、後々の取り出しやすさを考えて、別コンポーネントを呼び出す形にしています。
import * as React from 'react';
import styles from './SpfxTodo.module.scss';
import { ISpfxTodoProps } from './ISpfxTodoProps';
import { escape } from '@microsoft/sp-lodash-subset';
import SpApp from './SpApp';
export default class SpfxTodo extends React.Component<ISpfxTodoProps, {}> {
public render(): React.ReactElement<ISpfxTodoProps> {
return (
<>
<SpApp {...this.props}/>
</>
);
}
}
Hosted workbench の実行で以下のように表示できていれば成功です。
アドレスバー に ID を打ち込めば ID が画面上に表示されます。直リンク対応もできそうです。
以下に実際に動作させたファイルを置いておきますので、うまくいかない場合は参考にしてください。
次回は一覧画面を作ります。