【SharePoint】複数選択肢をタグのように表示する

f:id:tecchan365:20190713101415p:plain

複数選択肢をタグのように表示する方法をご紹介します。

列の書式設定

列の書式設定に、以下のコードを入力します。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "forEach": "choiceIterator in @currentField",
      "elmType": "div",
      "attributes": {
        "class": "ms-bgColor-themePrimary ms-fontColor-white"
      },
      "style": {
        "text-align": "center",
        "margin": "5px",
        "padding": "5px",
        "border-radius": "10px 10px 10px 10px"
      },
      "children": [
        {
          "elmType": "span",
          "attributes": {
            "iconName": "Tag"
          },
          "style": {
            "font-size": "17px",
            "margin-right": "5px",
            "vertical-align": "middle"
          }
        },
        {
          "elmType": "span",
          "txtContent": "[$choiceIterator]"
        }
      ]
    }
  ]
}

f:id:tecchan365:20190713101208g:plain

以上です。