【SharePoint】Q&A リストを作成する

SharePoint ViewFormatting

f:id:tecchan365:20200419100401p:plain

ビューの書式設定を利用し、以下のようなQ&Aリストを作成する方法を記載します。

リスト作成

以下のリストを作成します。

f:id:tecchan365:20200419100945p:plain

ビューの書式設定

作成したリストのビューの書式設定に、以下のコードを入力します。

f:id:tecchan365:20200419101345p:plain

{
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "height": "150px",
      "width": "600px",
      "margin": "10px 0px 30px 20px",
      "padding": "0",
      "border-style": "none"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-direction": "column",
          "box-shadow": "2px 3px 5px gray",
          "height": "160px",
          "width": "100%"
        },
        "attributes": {
          "class": "ms-bgColor-themeLighterAlt"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "height": "30px",
              "box-sizing": "border-box",
              "padding": "2px 5px"
            },
            "attributes": {
              "class": "ms-bgColor-themePrimary ms-fontColor-white"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "font-size": "20px",
                  "padding-left": "10px",
                  "padding-top": "2px"
                },
                "attributes": {
                  "iconName": "FeedbackRequestSolid"
                }
              },
              {
                "elmType": "div",
                "txtContent": "[$Title]",
                "style": {
                  "padding": "2px 10px",
                  "font-size": "15px"
                },
                "attributes": {
                  "class": "ms-fontSize-s ms-fontWeight-bold"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "txtContent": "[$Question]",
            "style": {
              "width": "100%",
              "height": "70px",
              "box-sizing": "border-box",
              "padding": "15px 10px 0px 10px"
            },
            "attributes": {
              "class": "ms-fontSize-l ms-fontWeight-bold ms-fontColor-neutralPrimary"
            }
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "justify-content": "center",
              "height": "50px",
              "box-sizing": "border-box",
              "padding": "8px 5px"
            },
            "children": [
              {
                "elmType": "div",
                "txtContent": "回答を見る",
                "style": {
                  "padding": "2px 20px",
                  "font-size": "20px",
                  "color": "white",
                  "border-radius": "20px",
                  "cursor": "pointer"
                },
                "attributes": {
                  "class": "ms-fontWeight-bold ms-bgColor-themePrimary"
                },
                "customCardProps": {
                  "openOnEvent": "click",
                  "directionalHint": "rightCenter",
                  "isBeakVisible": true,
                  "formatter": {
                    "elmType": "div",
                    "style": {
                      "display": "flex",
                      "flex-direction": "column",
                      "width": "400px",
                      "height": "200px"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "txtContent": " Answer",
                        "style": {
                          "font-size": "20px",
                          "padding-top": "15px"
                        },
                        "attributes": {
                          "iconName": "SkypeCircleCheck",
                          "class": "ms-fontWeight-bold ms-fontColor-themePrimary"
                        }
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "padding": "15px",
                          "font-size": "18px"
                        },
                        "txtContent": "[$Answer]"
                      }
                    ]
                  }
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

以上で、作成完了です！

補足：customCardProps について