SharePoint リストでちょっと見栄えのする簡易な FAQ リストを作成する

SharePoint リストを利用して FAQ を作成したいといった要望は多いようで、さっそく自分でも簡易なものを作成してみました。今回作成したものは、質問と回答のペアを一覧で見ることができる基本的なものです。

見栄えをちょっと良くするために、ビューの書式設定の機能を利用してみました。それでは作り方を書き留めておきたいと思います。

完成したもの

作り方の前に、完成したものを見ておきましょう。次の図のように、質問と回答を一覧で見ることができます。ページにリスト Web パーツを貼り付けても良さそうです。

リストに列を作成

今回の FAQ リストは単純な作りなので、用意する列も最小限にしています。新たに作成するのは、回答を入力しておく「Answer」列で、種類は複数行テキストとして作成しておきます。その他、表示のために「更新日時」「登録日時」を表示しておきます。

ビューの書式設定

ちょっと見栄えを良くするために、ビューの書式設定を設定します。[詳細モード] に切替え、次の JSON を設定します。

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
    "hideSelection": true,
    "hideColumnHeader": true,
    "rowFormatter": {
        "elmType": "div",
        "style": {
            "width": "100%",
            "display": "flex",
            "flex-wrap": "wrap",
            "border-top": "=if(@rowIndex == 0, '0px', '1px dotted #333')",
            "padding": "=if(@rowIndex == 0, '0 0 1.5em', '1.5em 0')",
            "font-size": "14px"
        },
        "attributes": {
            "class": "=if(@rowIndex % 2 == 1, 'ms-bgColor-gray20', '')"
        },
        "children": [
            {
                "elmType": "div",
                "style": {
                    "width": "100%",
                    "display": "flex",
                    "padding": "0 1em",
                    "margin-bottom": "1.5em"
                },
                "children": [
                    {
                        "elmType": "div",
                        "style": {
                            "color": "#0e3f81",
                            "font-size": "20px",
                            "font-weight": "bold",
                            "margin-right": "1em"
                        },
                        "txtContent": "Q"
                    },
                    {
                        "elmType": "span",
                        "style": {
                            "font-size": "20px",
                            "font-weight": "bold",
                            "cursor": "pointer"
                        },
                        "attributes": {
                            "class": "ms-fontColor-themePrimary"
                        },
                        "customRowAction" : {
                            "action": "defaultClick"
                        },
                        "txtContent": "[$Title]"
                    }
                ]
            },
            {
                "elmType": "div",
                "style": {
                    "width": "100%",
                    "display": "flex",
                    "margin-bottom": "1.5em",
                    "padding": "0 1em"
                },
                "children": [
                    {
                        "elmType": "div",
                        "style": {
                            "font-size": "20px",
                            "font-weight": "bold",
                            "color": "#af3030",
                            "margin-right": "1em"
                        },
                        "txtContent": "A"
                    },
                    {
                        "elmType": "p",
                        "style": {
                            "margin": "0",
                            "line-height": "25px"
                        },
                        "txtContent": "[$Answer]",
                        "customRowAction": {
                            "action": "defaultClick"
                        }
                    }
                ]
            },
            {
                "elmType": "div",
                "style": {
                    "width": "100%",
                    "display": "flex",
                    "justify-content": "flex-end",
                    "flex-wrap": "wrap",
                    "padding": "0 1em"
                },
                "attributes": {
                    "class": "ms-fontColor-neutralSecondary"
                },
                "children": [
                    {
                        "elmType": "div",
                        "style": {
                            "font-size": "0.8em"
                        },
                        "children": [
                            {
                                "elmType": "span",
                                "style": {
                                    "white-space": "nowrap"
                                },
                                "txtContent": "='ID' + ' : ' +  '[$ID]'"
                            },
                            {
                                "elmType": "span",
                                "style": {
                                    "white-space": "nowrap"
                                },
                                "txtContent": "=' / ' + '[!Created.DisplayName]' + ' : ' + substring(toLocaleString([$Created]),0,lastIndexOf(toLocaleString([$Created]),':'))"
                            },
                            {
                                "elmType": "span",
                                "style": {
                                    "white-space": "nowrap"
                                },
                                "txtContent": "=' / ' + '[!Modified.DisplayName]' + ' : ' + substring(toLocaleString([$Modified]),0,lastIndexOf(toLocaleString([$Modified]),':'))"
                            }
                        ]
                    }
                ]
            }
        ]
    }
}

これを保存すれば、ちょっとだけそれっぽい FAQ リストの完成です。

ちょっと残念なところと今後の工夫

作りはじめてから気がついたのですが、複数行テキスト列の設定でリッチテキストに変えてしまうと、JSON を利用したビューの書式設定適用後には HTML のタグがそのまま表示されてしまうようでした。いまのところこれを回避する策は無いようで、複数行テキスト列はプレーンテキストのままで利用する必要があるようです。

リッチテキストを利用できれば、回答の文中に必要な情報へのハイパーリンクを設定するなどが出来ると思ったのですが、この制限によりそうした利用は出来ませんでした。

ビューの書式設定を利用した表示にはプレーンテキストを利用した回答の概要を利用し、アイテム個別の情報を表示する画面では、リッチテキストの複数行テキストを利用した詳細列を設けておいて表示させるなど、ちょっと工夫が必要ですね。

さいごに

ちょっと頑張って JSON を作成できさえすれば、SharePoint リストの見栄えも良くなりますね。特にページにリスト Web パーツを貼り付ける場合には、ビューの書式設定を行っておくだけでグッとそれっぽさが増す気がします。