くらっちのクラウド日記

仕事や勉強で得た Microsoft 365 関連の技術知識を投稿していくブログです。

【SharePoint】実践!列の書式設定 サンプル1

最近までめちゃくちゃ忙しくて久々の投稿です。ようやく記事書ける、嬉しい。。

今回は、SharePoint リストをカスタマイズするための「列の書式設定」についてです。
「列の書式設定」はjsonを用いて記述しますが「jsonの書き方がわからない💦」という方も多いと思います。
そこで今回はどれもすぐに利用できるものを用意しました。

列の書式設定は、アイテムやファイルに影響はなく表示のみが変更されます。
安心してご活用ください。

この記事で記載しているサンプルは、「初めて」列の書式設定を活用する方向けの記事です。
「▲サンプルコード」の部分をクリックすることで、サンプルコードを参照できます。

コードをコピーして、列の書式設定に張り付ければ適用できます。

目次

1.入力値の中央揃え

リストアイテムの文字表示は、基本的に左寄せです。
中央揃えに変更するには下記コードを利用します。
列の種類はどれでも利用可能です。

サンプルコード

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "table",
    "width": "100%"
  },
  "children": [
    {
      "elmType": "div",
      "txtContent": "@currentField",
      "style": {
        "display": "table-cell",
        "text-align": "center",
        "vertical-align": "middle"
      }
    }
  ]
}

2.文字サイズの拡張

ハイパーリンクまたは画像」列などリンクを含むテキストの文字サイズを大きくする場合は「@currentField」「@currentField.desc」の両方を指定する必要があります。

文字サイズの調整は、下記を修正することで可能です。
 小:sp-field-fontSizeSmall
 中:sp-field-fontSizeMedium
 大:sp-field-fontSizeLarge
特大:sp-field-fontSizeXLarge


サンプルコード

{
     "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
     "elmType": "a",
     "style": {
          "box-sizing": "border-box",
          "padding": "0 2px",
          "overflow": "hidden",
          "text-overflow": "ellipsis"
     },
     "attributes": {
          "class": "sp-field-fontSizeLarge",
          "href": "@currentField",
          "target": "_blank"
     },
     "txtContent": "@currentField.desc"
}

3.ユーザー列にユーザーのアイコンを表示する

ユーザー列は標準ではユーザー名のみ表示されますが、同時に自分のアイコンも表示させることが可能です。
必ず列の種類「ユーザーまたはグループ」列を指定してください。

サンプルコード

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "children": [
        {
            "elmType": "img",
            "style": {
                "width": "32px",
                "height": "32px",
                "overflow": "hidden",
                "border-radius": "50%",
                "margin": "2px"
            },
            "attributes": {
                "src": "='/_layouts/15/userphoto.aspx?size=S&accountname=' + @currentField.email",
                "title": "@currentField.title"
            }
        },
        {
            "elmType": "span",
            "style": {
                "vertical-align": "middle",
                "margin-left": "2px"
            },
            "txtContent": "@currentField.title"
        }
    ],
    "defaultHoverField": "@currentField"
}

使い方を覚えれば、あとはHTMLとCSSの知識で何とかなりそうです。
次回はもうちょっとだけ作りこんだ実用方法をご紹介したいと思います。

参考ページ

Use column formatting to customize SharePoint(Docs)

https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

SharePointリストの書式設定(JSON) チートシート

https://qiita.com/Momono_gg/items/58bf768fb83bddfbdca1