Sharepointのリストを利用してFAQページを作成してみました。
上部にはカテゴリ一覧キャラリーで表示し、下にはFAQ一覧を表示します。
上部のカテゴリを選択すると下の一覧が自動的にフィルタリングされるよう作成しましたが、
キャラリーでアイテム自体をクリックすると詳細ページに遷移してしまうのが問題。
下記のようにカスタマイズし、
customRowAction定義のactionを変更し、
クリック時は選択のみになるように修正可能でした。
Sharepointの定義のレファレンスは下記から
https://learn.microsoft.com/ja-jp/sharepoint/dev/declarative-customization/formatting-syntax-reference
ほか、SharepointのCSS定義などのサンプルがあるサイトを見つけたのでここにメモっておきます。
https://pnp.github.io/List-Formatting/groupings/classes/sp-card/
1.該当リストビューのキャラリーモードのビューに切り替え
ビュー一覧のドロップダウンメニューをクリックし、「現在のビューの書式設定」を選択
2.「カードを編集」クリック後、下の「詳細モード」リンクをクリック
(すでに詳細モードで修正したことがある場合は、JSONコードが見えるはず)
3.customRowAction定義のactionを"defaultClick"から"none"に修正し、保存。
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"height": 135,
"width": 254,
"hideSelection": false,
"fillHorizontally": true,
"formatter": {
"elmType": "div",
"attributes": {
"class": "sp-card-container"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-defaultClickButton"
},
"customRowAction": {
"action": "none"
}
},
4.リストのキャラリービュー画面をリフレッシュする。アイテムをクリックすると、今回は選択のみになり、詳細画面に遷移しなくなる。
以上。