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

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

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

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

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

{
　”elmType”: “span”,
　”style”: {
　　”padding-right”: “8px”
　},
　”txtContent”: “@currentField.title”
}
elmType: span タグを使用します。
style: CSSスタイルをインラインで設定します。 padding-right は 要素の右側に8ピクセルの余白を追加します。
txtContent: 現在のフィールドの 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”: “詳細を見る”
　　}
　]
}

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リストの各アイテムのタイトルが表示され、その横に「詳細を見る」ボタンが配置されます。ボタンをクリックすると、アイテムの詳細ページにリダイレクトされます。