Q&A リストを作成する

Q&A システム で利用した、SharePoint のリストの作成方法を記載します。

Q&A List #SharePoint #ColumnFormatting #ListFormatting pic.twitter.com/RApsjgRWqM

— てっちゃん (@techan_k) 2020年7月28日

リスト作成

リストを作成し、次のフィールドを定義します。

列の書式設定

各列に、書式を設定します。

[Title] 列 の書式設定は、次の通りです。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "@currentField",
  "style": {
    "width": "100%",
    "cursor": "pointer",
    "background-color": "rgba(0,0,0,0)",
    "border": "none",
    "font-size": "16px",
    "font-weight": "bold",
    "color": "#3b3a39",
    "text-align": "left"
  },
  "customRowAction": {
    "action": "defaultClick"
  },
  "customCardProps": {
    "directionalHint": "rightCenter",
    "isBeakVisible": true,
    "openOnEvent": "hover",
    "formatter": {
      "elmType": "div",
      "style": {
        "width": "400px",
        "max-height": "500px",
        "display": "flex",
        "flex-direction": "column"
      },
      "children": [
        {
          "elmType": "div",
          "txtContent": "Question",
          "style": {
            "width": "100%",
            "background-color": "#c7ebec",
            "font-weight": "bold",
            "padding-left": "30px",
            "font-size": "18px"
          }
        },
        {
          "elmType": "div",
          "style": {
            "width": "90%",
            "margin-top": "10px",
            "margin-bottom": "10px"
          },
          "txtContent": "[$Question]"
        },
        {
          "elmType": "div",
          "style": {
            "width": "90%",
            "min-height": "40px",
            "margin-bottom": "10px",
            "display": "flex",
            "flex-direction": "row",
            "align-items": "center"
          },
          "children": [
            {
              "elmType": "img",
              "attributes": {
                "src": "='/_layouts/15/userphoto.aspx?size=S&accountname='+ [$Author.email]"
              },
              "style": {
                "width": "2.5em",
                "height": "2.5em",
                "border-radius": "2.5em"
              },
              "defaultHoverField": "[$Author]"
            },
            {
              "elmType": "span",
              "style": {
                "padding-left": "10px"
              },
              "txtContent": "[$Author.title]"
            },
            {
              "elmType": "span",
              "style": {
                "padding-left": "10px"
              },
              "txtContent": "[$Created]"
            }
          ]
        },
        {
          "elmType": "div",
          "txtContent": "Answer",
          "style": {
            "width": "100%",
            "background-color": "#f0d3d4",
            "font-weight": "bold",
            "padding-left": "30px",
            "font-size": "18px"
          }
        },
        {
          "elmType": "div",
          "style": {
            "width": "90%",
            "padding-top": "10px",
            "padding-bottom": "10px"
          },
          "txtContent": "[$Answer]"
        },
        {
          "elmType": "div",
          "style": {
            "width": "90%",
            "min-height": "40px",
            "padding-bottom": "10px",
            "display": "flex",
            "flex-direction": "row",
            "align-items": "center"
          },
          "children": [
            {
              "elmType": "img",
              "attributes": {
                "src": "='/_layouts/15/userphoto.aspx?size=S&accountname='+ [$Answerer.email]"
              },
              "style": {
                "width": "2.5em",
                "height": "2.5em",
                "border-radius": "2.5em"
              },
              "defaultHoverField": "[$Answerer]"
            },
            {
              "elmType": "span",
              "style": {
                "padding-left": "10px"
              },
              "txtContent": "[$Answerer.title]"
            },
            {
              "elmType": "span",
              "style": {
                "padding-left": "10px"
              },
              "txtContent": "[$AnsewerdDate]"
            }
          ]
        }
      ]
    }
  }
}

[Status] 列 の書式設定は、次の通りです。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "align-items": "center",
    "justify-content": "center"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "align-items": "center",
        "justify-content": "center",
        "width": "100px",
        "height": "30px",
        "background-color": "= if ( @currentField == 'In Progress' , '#ffeb9c', if ( @currentField == 'Completed' , '#c6efce', '' )  ) ",
        "color": "=if ( @currentField == 'In Progress' , '#9c5700', if ( @currentField == 'Completed' , '#006100', ''   ) )",
        "border-radius": "20px",
        "font-weight": "bold",
        "font-size": "14px"
      },
      "children": [
        {
          "elmType": "div",
          "txtContent": "@currentField"
        }
      ]
    }
  ]
}

[Questioner] [Answerer] 列 の書式設定は、次の通りです。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "debugMode": true,
  "elmType": "div",
  "style": {
    "flex-direction": "column",
    "align-items": "flex-start",
    "padding-top": "5px"
  },
  "children": [
    {
      "elmType": "div",
      "forEach": "person in @currentField",
      "style": {
        "margin-top": "=if(loopIndex('person') == 0, '0', '1em')"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "display": "flex",
            "flex-direction": "row"
          },
          "children": [
            {
              "elmType": "img",
              "attributes": {
                "src": "='/_layouts/15/userphoto.aspx?size=S&accountname='+ [$person.email]"
              },
              "style": {
                "width": "3em",
                "height": "3em",
                "border-radius": "3em"
              },
              "defaultHoverField": "@currentField"
            }
          ]
        }
      ]
    }
  ]
}

[Question] [Answer] 列 の書式設定は、次の通りです。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "block",
    "max-height": "10px",
    "padding": "11px 0",
    "overflow": "hidden"
  },
  "txtContent": "@currentField"
}

列の表示 / 非表示

新規入力画面では、[Answer] 列などは不要なので、列の表示 / 非表示の設定をします。

[Answer] [Answerer] [Answered Date] 列に、次の条件式を入力します。

=if([$Status]=='Completed','true', 'false')

以上で、Q&A リストの作成完了です。