特定の文字で列の値をマスキングするColumn formatting

SharePoint Listで1行テキストの列を特定の文字でマスクし、クリックしたら値を表示するようなColumn formattingを作ってみました。

Masking field in view using SharePoint column formatting 🔓 pic.twitter.com/s20BR5qbYx

— Hiro (@mofumofu_dance) December 13, 2021

マスキングには、あらかじめ255文字用意しておいた記号を、先頭から列の文字数分だけ取り出した値を表示しています。

また、列の値を表示させたいときのために、inlineEditFieldの属性で、フィールドをクリックしたら編集モードになるようにしました。

以下JSONです。

記号バージョン

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "box-sizing": "border-box",
    "padding": "0 2px"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "line-height": "16px",
        "height": "14px"
      },
      "attributes": {
        "iconName": "",
        "class": ""
      }
    },
    {
      "elmType": "span",
      "style": {
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "padding": "0 3px",
        "font-size": "20px"
      },
      "inlineEditField": "@currentField",
      "txtContent": "=substring(padStart('',255,'●'),0,indexOf(@currentField + '^', '^'))",
      "attributes": {
        "class": "sp-field-fontSizeSmall sp-css-color-LightGrayFont"
      }
    }
  ]
}

Emoji バージョン

絵文字の場合には入力テキストの2倍を指定する必要があったので、2*indexOf(...)となっています。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "box-sizing": "border-box",
    "padding": "0 2px"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "line-height": "16px",
        "height": "14px"
      },
      "attributes": {
        "iconName": "",
        "class": ""
      }
    },
    {
      "elmType": "span",
      "style": {
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "padding": "0 3px",
        "font-size": "18px"
      },
      "inlineEditField": "@currentField",
      "txtContent": "=substring(padStart('',255*2,'👻'),0,2*indexOf(@currentField + '^', '^'))",
      "attributes": {
        "class": "sp-field-fontSizeSmall sp-css-color-LightGrayFont"
      }
    }
  ]
}