SharePointリストをJSONで拡張してできること

SharePointリストをJSONで拡張してできること

7月 18, 2024

記事の監修

Y.Uchida

記事の監修


Y.Uchida

マネジメント&イノベーション事業部 開発部/1グループ グループマネージャー
資格:MCP認定資格(PL-600)など

2019年に入社。入社から2年ほどは、不動産システムのテスト案件や決済システムの運用案件などに携わる。
現在はPowerPlatformを用いたローコード開発など、Microsoft関連の案件に参画し、さまざま案件に従事している。
2024年7月よりマネージャーに昇格。自他共に認めるエースとして、絶賛大活躍中。
趣味は、ポケモンスリープで、色違いのデデンネとウッウとオコリザルを所持しており、同僚から羨望の眼差しを受けている。

無料ご相談受付中 まずはお気軽にご相談ください

Contents

目次

こんなお悩みはございませんか?
SharePointリストの使い方には慣れてきたので、もっと活用していきたい
デザイン性のあるサイトやリストを作成してみたい
タブやポップアップ機能を使用して見やすくしたい
JSONを活用することで機能を拡張することができます!

SharePointの列フォーマット機能を使用すると、JSONを活用してリストやライブラリの外観をカスタマイズできます。
セルの内容に応じてアイコン、色、テキストのスタイルを変更でき、JSONの活用で標準機能では対応できない設定も行うことができるようになるため、デザイン性のあるリストやサイトを作成することが可能です。
では、どのように作成するのか、具体的にご紹介していきますね。

1. JSON適用前

2. JSON適用後

JSONはリストの「現在のビューの書式設定」から編集が可能です。
ビューの書式設定、または列の書式設定を選択し、下部にある「詳細モード」をクリックします。今回は列の書式設定を操作します。

3. JSONでできること①:セルの背景色を変更、アイコンを表示

このようにステータスに応じた背景色、アイコンを表示することが可能です。

3-1. 適用したJSON

{
 ”$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json”,
 ”elmType”: “div”,
 ”attributes”: {
  ”class”: “=if(@currentField == ‘完了’, ‘sp-field-severity–good’, if(@currentField == ‘対応中’, ‘sp-field-severity–low’, if(@currentField == ‘確認中’, ‘sp-field-severity–warning’, if(@currentField == ‘保留’, ‘sp-field-severity–severeWarning’, ‘sp-field-severity–blocked’)))) + ‘ ms-fontColor-neutralSecondary'”
 },
 ”children”: [
  {
   ”elmType”: “span”,
   ”style”: {
    ”display”: “inline-block”,
    ”padding”: “0 4px”
   },
   ”attributes”: {
    ”iconName”: “=if(@currentField == ‘完了’, ‘CheckMark’, if(@currentField == ‘対応中’, ‘Forward’, if(@currentField == ‘確認中’, ‘Error’, if(@currentField == ‘保留’, ‘Warning’, ‘ErrorBadge’))))”
   }
  },
  {
   ”elmType”: “span”,
   ”txtContent”: “@currentField”
  }
 ]
}

  3-2. 解説

3-3. 全体の構成

1. $schema

この行は、このJSONがSharePointのカラムフォーマット用のものであることを示しています。ここでは、スキーマのURLを指定しています。

2. elmType

これは要素のタイプを指定します。この場合、div(HTMLの div タグ)です。

3. attributes

ここでは、div 要素の属性を指定します。この中には、クラス(class)があります。

4. children

この要素の子要素を定義します。ここでは、2つの span 要素が子要素として定義されています。

  3-4. attributesセクション

“attributes”: {
 ”class”: “=if(@currentField == ‘完了’, ‘sp-field-severity–good’, if(@currentField == ‘対応中’, ‘sp-field-severity–low’, if(@currentField == ‘確認中’, ‘sp-field-severity–warning’, if(@currentField == ‘保留’, ‘sp-field-severity–severeWarning’, ‘sp-field-severity–blocked’)))) + ‘ ms-fontColor-neutralSecondary'”
}
@currentField: 現在のフィールドの値を指します。ここではステータス列のことです。

if文: フィールドの値に基づいて、クラスを設定します。
完了 なら sp-field-severity–good
対応中 なら sp-field-severity–low
確認中 なら sp-field-severity–warning
保留 なら sp-field-severity–severeWarning
その他なら sp-field-severity–blocked
さらに、ms-fontColor-neutralSecondaryクラスを追加して、フォント色を中立的な色に設定します。

  3-5. children セクション

この部分では、div要素の中に2つのspan要素を配置しています。

3-6. 最初のspan要素


{
 ”elmType”: “span”,
 ”style”: {
  ”display”: “inline-block”,
  ”padding”: “0 4px”
 },
 ”attributes”: {
  ”iconName”: “=if(@currentField == ‘完了’, ‘CheckMark’, if(@currentField == ‘対応中’, ‘Forward’, if(@currentField == ‘確認中’, ‘Error’, if(@currentField == ‘保留’, ‘Warning’, ‘ErrorBadge’))))”
 }
}

elmType: span タグを使います。

style: CSSスタイルをインラインで設定します。

display は inline-block、これは要素をインラインで表示しつつ、ブロック要素のような特性も持たせるためです。 padding は 0 4px、要素の内側に4ピクセルの余白を左右に設定します。

attributes: iconName 属性を設定し、条件によって異なるアイコンを表示します。

完了 なら CheckMark
対応中 なら Forward
確認中 なら Error
保留 なら Warning
その他なら ErrorBadge

3-7. 2番目のspan要素

{
 ”elmType”: “span”,
 ”txtContent”: “@currentField”
}

elmType: span タグを使います。
txtContent: 現在のフィールドの値をそのままテキストとして表示します。


4. JSONでできること②:ボタンの追加


このように、リスト内にボタンを配置することができます。

4-1. 適用したJSON


{
 ”$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json”,
 ”elmType”: “div”,
 ”children”: [
  {
   ”elmType”: “span”,
   ”style”: {
    ”padding-right”: “8px”
   },
   ”txtContent”: “@currentField.title”
  },
  {
   ”elmType”: “a”,
   ”style”: {
    ”background-color”: “#0078d4”,
    ”color”: “white”,
    ”border”: “none”,
    ”padding”: “6px 12px”,
    ”text-align”: “center”,
    ”text-decoration”: “none”,
    ”display”: “inline-block”,
    ”font-size”: “14px”,
    ”margin”: “4px 2px”,
    ”cursor”: “pointer”
   },
   ”attributes”: {
    ”class”: “sp-field-button”,
    ”href”: {
     ”operator”: “+”,
     ”operands”: [
      ”http://contoso.sharepoint.com/sites/ConferencePrep/Tasks/Prep/DispForm.aspx?ID=”,
      ”[$ID]”
     ]
    }
   },
   ”txtContent”: “詳細を見る”
  }
 ]
}

  4-2. 解説

4-3. 全体の構成

1. $schema

この行は、このJSONがSharePointのカラムフォーマット用のものであることを示しています。

2. elmType

これは要素のタイプを指定します。この場合、div(HTMLの div タグ)です。

3. children

この div の中に2つの子要素(span と button)が含まれています。


  4-4. childrenセクション

この部分では、div 要素の中に2つの span 要素を配置しています。

4-5. 最初のspan要素


{
 ”elmType”: “span”,
 ”style”: {
  ”padding-right”: “8px”
 },
 ”txtContent”: “@currentField.title”
}
elmType: span タグを使用します。
style: CSSスタイルをインラインで設定します。 padding-right は 要素の右側に8ピクセルの余白を追加します。
txtContent: 現在のフィールドの title プロパティを表示します。

4-6. 2番目のspan要素

{
  ”elmType”: “a”,
  ”style”: {
   ”background-color”: “#0078d4”,
   ”color”: “white”,
   ”border”: “none”,
   ”padding”: “6px 12px”,
   ”text-align”: “center”,
   ”text-decoration”: “none”,
   ”display”: “inline-block”,
   ”font-size”: “14px”,
   ”margin”: “4px 2px”,
   ”cursor”: “pointer”
  },
  ”attributes”: {
   ”class”: “sp-field-button”,
   ”href”: {
    ”operator”: “+”,
    ”operands”: [
     ”http://contoso.sharepoint.com/sites/ConferencePrep/Tasks/Prep/DispForm.aspx?ID=”,
     ”[$ID]”
    ]
   }
  },
  ”txtContent”: “詳細を見る”
  }
 ]
}

elmType: button タグを使用します。

style: ボタンの見た目をCSSスタイルで指定します。

background-color: ボタンの背景色を青に設定します。

color: テキスト色を白に設定します。

border: ボーダーを無しに設定します。

padding: ボタン内の余白を指定します。

text-align: テキストを中央に揃えます。

text-decoration: テキストの装飾を無しに設定します。

display: インラインブロック要素として表示します。

font-size: フォントサイズを指定します。

margin: ボタンの周囲に余白を指定します。

cursor: マウスカーソルをポインタに設定します(クリック可能であることを示します)。

attributes: ボタンの属性を指定します。

class: クラス名を sp-field-button に設定します。

onclick: ボタンがクリックされたときのアクションを指定します。

operator: + で文字列を連結します。

operands: 連結する文字列やフィールド値を配列で指定します。

“http://contoso.sharepoint.com/sites/ConferencePrep/Tasks/Prep/DispForm.aspx?ID=”: リンクの開始部分を指定します。お使いの環境のURLをする必要があります。

“[$ID]”: アイテムのIDを挿入します。

“‘”: リンクの終了部分を指定します。

txtContent: ボタンのラベルとして “詳細を見る” を表示します。

この設定により、SharePointリストの各アイテムのタイトルが表示され、その横に「詳細を見る」ボタンが配置されます。ボタンをクリックすると、アイテムの詳細ページにリダイレクトされます。


無料ご相談受付中 まずはお気軽にご相談ください

Microsoftを導入してコスト効率をよくしたい

Microsoftを導入して
コスト効率をよくしたい

Microsoftに関して気軽に聞ける相談相手が欲しい

Microsoftに関して
気軽に聞ける相談相手が欲しい

Microsoftを導入したが、うまく活用できていない・浸透していない

Microsoftを導入したが、うまく活用できていない・浸透していない

社内研修を行いたいが社内に適任者がいない

社内研修を行いたいが
社内に適任者がいない

Bizwindでは、Microsoft導入支援事業などを中心に
IT・DX推進に関する様々なご相談を承っております。
ご相談・お見積りは無料です。まずはお気軽にお問い合わせください。

無料ご相談はこちら

ビズウインドでは、 様々な課題でお困りの お客様に対して、 無料相談を実施しております。

無料相談に申し込む

担当者に今すぐ質問する

簡単な情報入力でBizwind担当者が
お電話にて回答いたします!

すぐに電話で質問
日時指定で折り返し

以下の内容をご記入・送信ください。
確認次第お電話を差し上げます。

    以下の内容をご記入・送信ください。
    確認次第お電話を差し上げます。