Microsoft 365 IT活用

今回はSharePointのwebサイトで、リスト機能を用いて「更新履歴」を作ってみます。

手順は以下の通り。

① 更新履歴用のリストを用意する
② webサイトに表示するためのビューを定義する
③ webパーツ「リスト」で、作成したリストを配置する

それではさっそく各手順について詳しく見てみましょう。

① 更新履歴用のリストを用意する

更新履歴を作成したいサイトで「＋新規」ボタンを押下し、「リスト」を選択します。

このとき最初に取得したリスト名がそのままURLに採用されるため、半角英数字で命名して後から日本語名称に変更することを推奨します。

サイトナビゲーションにリストを表示する必要がない場合は、「サイト ナビゲーションでリストを表示する」のチェックも外しておきます。

リストが作成出来たら、「列の追加」で以下の列を追加します。属性は（）内のものを選択してください。

・更新日（日付と時刻）
・URL（ハイパーリンク）
　→どのページを更新したかを明記
・お知らせ（一行テキストまたは複数行テキスト）
　→本文
・有効期限（日付と時刻）
　→お知らせをいつまで表示するかを制御するための列

ちなみに、リストの各列もリスト名と同様に半角英数字で命名してから日本語名称に変更することを推奨します。

これで更新履歴を格納するリストが作成できました。リストの列はあくまで一例なので、必要な項目があればご自身でカスタマイズしてください。続いてサイトに表示するビューを作成します。

② webサイトに表示するためのビューを定義する

以下の3点を満たすビューを作成し、サイトに表示する形になるようにします。

1. サイトに表示したい項目以外は非表示にする
2. 更新日の新しい順に上から表示されるようにする
3. 「有効期限」にフィルターを設定し、有効期限を超過したお知らせは自動的に非表示になるようにする

まず、新しいビューを作成して保存します。画面右上の「ビューの追加」を押下し、命名して作成ボタンを押下してください。ビューはIDによって管理されるので、今回はリストやリスト列の作成時と異なり最初に英数字で名称を決定する必要はありません。ややこしいですね…。

その後、作成したビューの設定画面を開き、上記の3つを設定していきます。
作成したビューのタブのプルダウンメニューから「現在のビューを編集」をクリックし、設定画面に遷移します。

1. サイトに表示したい項目以外は非表示にする

「列」項目から「更新日」「URL」「お知らせ」以外のチェックを外します。

2. 更新日の新しい順に上から表示されるようにする

「並べ替え」項目で最優先する列として「更新日」を選択し、「降順でアイテムを表示する」ラジオボタンを選択します。

3. 「有効期限」にフィルターを設定し、有効期限を超過したお知らせは自動的に非表示になるようにする

「フィルター」項目で「次の条件に該当する場合だけアイテムを表示する」ラジオボタンを選択します。アイテムを表示する列の条件として「有効期限」「次の値以上」を選択し、値は「[Today]」と入力してください。

これで、「有効期限」の値が今日の日付より小さい（＝過去の）ものは、ページを読み込むたびに自動的に非表示になります。

また、下図のようにリストの左に現れるチェックボックスをサイトの閲覧者に表示したくない場合は、ついでに「表形式で表示」項目の「各アイテムにチェック ボックスを表示します」のチェックを外しておきましょう。こうすることで非表示にできます。

以上の設定ができたら画面右下の「OK」ボタンを押下してビューを保存してください。

③ webパーツ「リスト」で、作成したリストを配置する

ここまでできたら、完成は目前！まずは、②で作成したビューを既定値に設定します。

続いて更新履歴のリストを表示したいページの任意のセクションにリストwebパーツを配置します。

表示できました。続いてこのリストの外観を整えます。リストをクリックして、リストのプロパティを選択してください。

「リスト コントロールを非表示にする」「[完全な一覧を表示] ボタンを非表示にする」トグルをそれぞれオンにすることで、上図の赤枠箇所を非表示にすることができます。

※Tips！
「リスト をすべて表示」ボタンをクリックすると、更新履歴リストのすべてのアイテムが表示されます(有効期限などの非表示列も含む)。なので、手順② webサイトで表示するためのビューを定義する にて作成したビューから有効期限のフィルター設定のみを解除したお知らせ一覧のビューを別途用意しておき、「過去のお知らせ一覧はこちら」などのハイパーリンク付きテキストwebパーツを配置して誘導する形が筆者としては好みです。

これにて更新履歴をすっきりと表示させることができました！

いかがでしたでしょうか。少しでも参考になりましたら幸いです。

以上