Listへの新規アイテム登録画面の書式設定をjsonでいじってみたのでメモ

とりあえずこんな感じにしてみた。

コードはこんなかんじ。

ヘッダー

{
  "elmType": "div",
  "attributes": {
    "class": "ms-borderColor-teal"
  },
  "style": {
    "width": "100%",
    "border-top-width": "0px",
    "border-bottom-width": "5px",
    "border-left-width": "0px",
    "border-right-width": "0px",
    "border-style": "solid",
    "margin-bottom": "16px"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "box-sizing": "border-box",
        "align-items": "center"
      },
      "children": [
        {
          "elmType": "div",
          "attributes": {
            "iconName": "TextDocument",
            "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-teal",
            "title": "Details"
          },
          "style": {
            "flex": "none",
            "padding": "0px",
            "padding-left": "0px",
            "height": "36px"
          }
        }
      ]
    },
    {
      "elmType": "div",
      "attributes": {
        "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24"
      },
      "style": {
        "box-sizing": "border-box",
        "width": "100%",
        "text-align": "left",
        "padding": "21px 12px",
        "overflow": "hidden"
      },
      "children": [
        {
          "elmType": "div",
          "txtContent": "Document submission form"
        }
      ]
    }
  ]
}

本文

{
  "sections": [
    {
      "displayname": "Document",
      "fields": [
        "Applicant",
        "Title"
      ]
    },
    {
      "displayname": "Schedule",
      "fields": [
        "Applicant date",
        "Deadline"
      ]
    },
    {
      "displayname": "Progress",
      "fields": [
        "Authorizer",
        "Progress"
      ]
    }
  ]
}

フッダー

{
    "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-teal"
    },
    "style": {
        "width": "100%",
        "border-top-width": "0px",
        "border-bottom-width": "3px",
        "border-left-width": "0px",
        "border-right-width": "0px",
        "border-style": "solid",
        "margin-bottom": "16px"
    }
}