WFH(Work From Home) : 在宅勤務が多くなり、一覧性の高い社内ルールの確認方法が求められるようになりました。これまで私のチームでは OneNote を使ってルールを記載していれば検索も早いし上書きも容易なので便利なのですが、OneNoteを使い慣れていない人にはむつかしい話です。そこでSharePointのサイトに一覧表示するように突貫工事で作ってみました。

きっとこんなページがあれば幸せになれそうです。

キーワード検索はブラウザのページ内検索(Ctrl+F)でOK

FAQリストを作成

このページはリストページです。リスト項目は2つだけ。

  • 初期値の”タイトル”
  • 複数行テキストの ”Answer”

必ず、半角英語の Answer で作製します。

こうすることでSharePointの内部名称を後から出てくるJSONに合わせています。

ビューの変更メニューにある「現在のビューの書式設定」をクリックし、[ビューの書式設定]画面が出たら、「詳細モード」をクリックします。

詳細モードに「適切な」JSONを設定すればOKです。

参考：JSON を使用したリスト ビューの書式設定

適切なJSONとは？ となるわけですが、とりあえずサンプルは以下から持ってきました。

参考：can anyone help to provide the JSON code for Accordion to build on Modern Site?

これを貼り付けましょう。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideListHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "align-items": "flex-start"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themePrimary ms-borderColor-themeDark ms-fontColor-white"
        },
        "style": {
          "font-size": "24px",
          "border-width": "2px",
          "border-style": "solid",
          "width": "100%",
          "padding": "4px"
        },
        "children": [
          {
            "elmType": "span",
            "txtContent": "Q",
            "attributes": {
              "class": "ms-fontColor-themeTertiary"
            },
            "style": {
              "padding-right": "10px",
              "padding-left": "6px",
              "font-weight": "bold"
            }
          },
          {
            "elmType": "span",
            "txtContent": "[$Title]"
          }
        ]
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-borderColor-themeDark"
        },
        "style": {
          "padding-left": "40px",
          "width": "100%",
          "border-width": "2px",
          "border-style": "solid",
          "padding": "4px",
          "font-size": "14px",
          "border-top-width": "0",
          "margin-bottom": "20px"
        },
        "children": [
          {
            "elmType": "span",
            "txtContent": "[$Answer]"
          }
        ]
      }
    ]
  }
}
ページタイトルにもあるように最初はアコーディオンメニューのようにできないかなと検索したのですが、「クリックして展開できるようにすることに関しては、リストの書式設定だけを使用してこれを行うことはできません。
あなたの最善の策は、SPFx Webパーツがあるでしょう」とあったのであきらめました。

SPOリストページの見た目は期待に近いものになりました。

登録作業を誰でも簡単にできるようにしよう

自社内でFAQを作成するにはここからが大事です。

この状態だと、SPOリストの編集方法を知ってる人、リスト編集権限を持っている人だけが登録できます。FAQは【質問を受けた人 or 質問した人】が気軽に登録できるようになっている必要があります。

そんな時こそ Office 365 は便利です！ Forms と Power Automate があるので登録作業が簡単に誰でもできるようになります。

Forms で入力フォームを作る

こんな感じで簡単にフォームを作成しましょう。

Power Automate で Forｍs に登録されたら、SPOリストに項目を作成する フローを作成する

めちゃ簡単なものを作ります。（Forms に投稿されたものの内容を扱う時には「応答の詳細を取得する」アクションが必須なので注意しましょう

慣れれば3分でゼロから作れる

ここまで作れば、ユーザーが登録しやすい画面を使ってデータ登録をする環境が整いました。

最後にこれらを見やすくするための工夫が必要です。

どうすれば参照しやすく、入力もしやすくなるか？

SPOリストのURLにたどり着くことがそもそも困難なことが多いです。普段から使ってないと「あの画面（SPOとすら認識してない）どこにあるんだろう？」となってしまいます。

おすすめはTeamsの該当チャネルのタブに、一覧画面と入力画面の両方を設置することです。

Microsoft Teams の利用がある程度活発であれば、「在宅勤務者用チャネル」みたいなものがあるかもしれません。ここに設置するのが一番良いでしょう。