【SharePoint】リストにはんこを表示する

f:id:tecchan365:20201217195624p:plain

列の書式設定を利用し、上図のようなはんこをリスト上に表示してみました。
以下、はんこを表示する方法を記載します。

リスト定義

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

列名（Column Name）	列の種類（Type）
Title	1 行テキスト（Single Line Text）
Departmet	1 行テキスト（Single Line Text）
Date	日付（Date）
Stamp	何でもOK（Any）

列の書式設定

Stamp 列の書式設定に、次の JSON を設定します。
設定が完了すると、 Stamp 列にはんこが表示されます。

f:id:tecchan365:20201217200138p:plain

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "flex-direction": "column",
    "align-items": "center",
    "width": "75px",
    "height": "75px",
    "margin": "15px",
    "border": "2px solid #f00",
    "border-radius": "50%",
    "color": "red"
  },
  "children": [
    {
      "elmType": "div",
      "txtContent": "[$Department]",
      "style": {
        "position": "relative",
        "display": "flex",
        "align-items": "center",
        "justify-content": "center",
        "height": "35%",
        "width": "55px",
        "white-space": "nowrap",
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "top": "3px"
      }
    },
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "align-items": "center",
        "justify-content": "center",
        "height": "25%",
        "width": "98%",
        "border-top": "2px solid",
        "border-bottom": "2px solid"
      },
      "txtContent": "=getYear([$Date])+'/'+toString(Number(getMonth([$Date]))+1)+'/'+toString(Number(getDate([$Date]))) "
    },
    {
      "elmType": "div",
      "txtContent": "[$Title]",
      "style": {
        "display": "flex",
        "align-items": "center",
        "justify-content": "center",
        "height": "35%",
        "width": "55px",
        "white-space": "nowrap",
        "overflow": "hidden",
        "text-overflow": "ellipsis"
      }
    }
  ]
}

以上、リストにはんこを表示する方法でした。