会社の一部のExcel台帳運用をSharePointに載せ替えたときに、アイテムの詳細を参照したり編集したりするフォームが1画面に1つしか表示できないのをなんとかしようとしたお話です。
実現したいこと
SharePointのリストでは、どれか１アイテムをダブルクリックすると詳細画面（フォーム）を開くことができます。通常この詳細画面はこのイメージのように１ウインドウ内にカスケードされた感じで表示されます。
で、この詳細画面（フォーム）は必ず１ウインドウ内に１つしか表示されません。
つまり、同じリスト内にある２つのアイテムの詳細画面を同時に開いて見比べる、ということができないわけです。
希望する形としては、アイテムをダブルクリックしたら下のイメージのように詳細画面を別のウインドウに表示させたい。それができれば、２つの詳細画面で見比べたりもできますし。
実現できた方法
SharePointリストの列に書式設定して、クリック可能なハイパーリンクの形にすることができたので、リンク先のurlに詳細画面のurlを設定して解決しました。ハイパーリンクはhtmlのaタグのようにtargetプロパティに_blankを指定することで別ウインドウに設定しています。
書式設定は列に対して行います。なので設定した列をクリックすれば別ウインドウに詳細画面を表示という動作にはできますが、書式を設定していない他の部分をダブルクリックしてもデフォルトの動作（１ウインドウに１詳細画面）になります。
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "a", "txtContent": "@currentField", "attributes": { "target": "_blank", "href": "='https://takeblizzard.sharepoint.com/Lists/List7/DispForm.aspx?ID=' + [$ID]" } }
実現方法の解説
列の書式設定のやり方
SharePoint上で作ったリストで、列名の横にある∨をクリック ＞ 列の設定 ＞ この列の書式設定とメニューをたどると、列の書式設定画面が出てきます。ここにJSONで設定していきます。
JSONで書式の書き方
"$schema"
これは固定で書いておけば良さげ。
"elmType"
"a"を指定します。こうすることで、この列に表示するテキストをhtmlのaタグで囲った状態にできるらしい。
"textContent"
ハイパーリンクにするテキストを指定します。ここでは"@currentField"と書いてますが、これはここの列に本来表示されるデータのことのようです。
"attributes"
これはaタグのプロパティに相当する部分になります。
"target"
htmlのaタグのtargetプロパティということですかね。今回は個々に_blankを指定してリンク先を別ウインドウに表示するようにしています。
"href"
htmlのaタグのhrefプロパティです。ここに指定するurlの調べ方は次で説明します。
詳細画面（フォーム）urlの調べ方
書式設定のところでリンク先のurlを指定するため、アイテム詳細画面を開くurlを調べます。
まず、リスト上のいずれかのアイテムを右クリックして、サブメニューからリンクをコピーをクリックします。
この時点で手に入るurlだと何を指定しているのかよくわからない、再利用が難しいurlです。
https://●●●●●●.sharepoint.com/:li:/g/E9RfQVtOojZNuDMo2gnheDQBzjwYWR9tz6x6iHKVyEoE_w?e=l01Mhb
で、このurlをブラウザで開いてみましょう。
すると、リダイレクトされて別のurlで詳細画面が開かれます。これが目当てのurlになります。
https://●●●●●●.sharepoint.com/Lists/List7/DispForm.aspx?ID=2&pa=1
ID=2でIDが2のアイテムを詳細表示しているのがわかります。なので、IDの部分だけ変数的に指定してあげれば汎用的に使えそうなurlです。
実際にJSONで指定するときはIDの部分に[$ID]と指定してあげると、クリックしたアイテムのIDに差し替えてurlを勝手に作ってくれます。
"href": "='https://●●●●●●.sharepoint.com/Lists/List7/DispForm.aspx?ID=' + [$ID]"
