複数行テキストの「表示数を増やす」を自動で開くChrome拡張機能(SharePointモダンリスト)

土曜日, 5月 01, 2021

SharePoint モダンリストの複数行テキストは、以下のように縮小された状態で表示される。

すべての文章を見るには「表示数を増やす」をクリックする必要がある。それなりの行数が予め表示されるのであればよいが、2、3行しか表示されない。そのため、ほぼ全てのアイテムが見切れた状態で表示される。

つまりリストの内容を見たければ、アイテムと「表示数を増やす」の2度のクリックが"毎回"必要ということだ。これは非常に面倒だ。

そこで、アイテムを「表示数を増やす」をクリックした状態で開くChrome 拡張機能を作成してChrome ウェブストアに公開した。

Chrome ウェブストア

ちなみに、他にも回避方法はあるようだ。Microsoft のCommunity に同様の問い合わせがあった。

1. Access to the list.
2. Click PowerApps>select Customize forms>select the text input.
3. Click Properties>change the Size:

とのことだが、PowerApps が許可されていなかったり、SharePoint の設定変更する権限がない場合、手の打ちようがない。

そのため各自で対応できるChrome 拡張機能を作ったというのが経緯だ。ChromeとChromium ブラウザであれば拡張機能を利用できるので、汎用性も高い。

ソースコード

manifest.json

{
  "name": "SharePoint Modern List See More",
  "description": "When displaying the item in the Modern List, display it in the state that clicked 'See More'.",
  "default_locale": "en",
  "version": "0.1",
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": [ "https://*.sharepoint.com/*List*" ],
      "js": [ "jquery-2.2.0.min.js", "content_script.js" ],
      "run_at": "document_end",
      "all_frames": true
    }
  ]
}

ポイントはrun_at で DOM 要素を読み込んだ後に動かすことと、all_frames で全てのframe に対して有効にすること。

Sharepoint のリストはページ表示後にリストの読み込みが走るのと、複数frame で表示されるため、この指定が必要だった。

content_script.js

if (location.href.match(/DispForm/)) {
    window.addEventListener("load", openToggle, false);}
else {
    window.addEventListener("load", clickListItem, false);
}
 
function openToggle(e) {
    const timer = setInterval(loaded, 300);
 
    function loaded() {
        var elements = document.getElementsByClassName("ReactFieldEditor-MoreToggle");
        if (elements != null && elements.length != 0) {
            clearInterval(timer);
            Array.from(elements).forEach(x => {
                x.addEventListener('click', function () { }, false);
                x.click()
            });
        };
    }
}
 
function clickListItem(e) {
    const timer = setInterval(loaded, 300);
 
    function loaded() {
        var buttons = Array.from(document.getElementsByTagName("button"));
        var elements = buttons.filter(x => {
            var item = x.getAttribute("data-automationid");
 
            if (item == null) {
                return false;
            }
            else {
                return item.match(/FieldRenderer/);
            }
        })
        if (elements != null && elements.length != 0) {
            clearInterval(timer);
            Array.from(elements).forEach(x => {
                x.addEventListener('click', openToggle, false);
            });
        };
    }
}

ポイントはWebParts からアイテムを表示する場合と、リストからアイテムを表示する場合で処理を分けるところ。

WebParts からアイテムを表示するときはそのまま”ReactFieldEditor-MoreToggle” を捕まえてClick イベントを発火すればよい。

しかしリストからアイテムを表示するときは、画面遷移がなく画面枠内にアイテムが表示されるため、load イベントでは捕まえられなかった。そのためリストの各行に対して、クリックしたあとに”ReactFieldEditor-MoreToggle” を捕まえる処理を付与するようにしている。

なおリストからアイテムを表示する場合、リストの読み込み完了と画面操作可能になるタイミングが異なるため、暫定で300ms の待機後に”ReactFieldEditor-MoreToggle” を捕まえる処理を付与している。そのため2つのケースで本機能が有効にならないケースがある。

1つめは300ms の待機が終わる前にアイテムをクリックした場合。この場合は機能が有効にならない。2つめは300ms でリストの読み込みが完了しない場合。この場合は読み込みが済んでいた上部のアイテムは機能が有効になるが、読み込みが済んでいない下部のアイテムは機能が有効にならない。

通常使う分には支障はなかったためリリースした。これは今後改善したいと思う。

Chrome ウェブストア

このブログを検索

Singleton