0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Sharepointのリストをキャラリーで表示するときに、選択Onlyにする方法

Last updated at Posted at 2024-05-21

Sharepointのリストを利用してFAQページを作成してみました。
上部にはカテゴリ一覧キャラリーで表示し、下にはFAQ一覧を表示します。

上部のカテゴリを選択すると下の一覧が自動的にフィルタリングされるよう作成しましたが、
キャラリーでアイテム自体をクリックすると詳細ページに遷移してしまうのが問題。

下記のようにカスタマイズし、
customRowAction定義のactionを変更し、
クリック時は選択のみになるように修正可能でした。

ほか、SharepointのCSS定義などのサンプルがあるサイトを見つけたのでここにメモっておきます。
https://pnp.github.io/List-Formatting/groupings/classes/sp-card/

1.該当リストビューのキャラリーモードのビューに切り替え

ビュー一覧のドロップダウンメニューをクリックし、「現在のビューの書式設定」を選択

image.png

2.「カードを編集」クリック後、下の「詳細モード」リンクをクリック

image.png

(すでに詳細モードで修正したことがある場合は、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.リストのキャラリービュー画面をリフレッシュする。アイテムをクリックすると、今回は選択のみになり、詳細画面に遷移しなくなる。

以上。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?