ニュースやページの新着をページ内にリスト表示するため、サイトのページライブラリで新着ビューを作成し、それをドキュメントライブラリWEBパーツで埋め込んでいます。
ビューがそのまま表示されていい感じなのですが、モダンサイトではリストもカードも何もかも、文字数が多い項目は省略表示されてしまいます。
欧米ではあまり問題になっていないのかもしれませんが、2バイト文字を扱う我々日本人の身にもなってもらいたいものです。
ということで、今回はリストやライブラリで使える「列の書式設定」で、サイトのページライブラリのタイトル列を折り返し表示する方法についてご紹介したいと思います。
列の書式設定について
今回の変更対象となるのが以下のビューです。
装飾など何もされていない状態です。
「タイトル（編集メニュー付きのアイテムにリンク）」が折り返し対象の列となります。
では、早速「列の書式設定」を見ていきたいと思います。
対象のビューが選択された状態で「現在のビューの書式設定」をクリックします。
「書式の適用先」より対象の列である「タイトル」を選択します。
WEB画面で設定できる項目として「条件付き書式」が用意されています。
「ルールを管理」をクリックしてみます。
すると早速デフォルトの書式が適用されます。
「編集」ボタンより設定を覗いてみましょう。
現在グレーが選択されている塗りつぶしの色を設定する画面です。
「その他のスタイル」をクリックすると、より詳細な設定を行うことが可能です。
設定項目としては「文字の装飾」「アイコンの追加」「罫線の設定」といったところです。
残念ながら、WEB画面では今回の目的である折り返し設定が行えません。
ひとつ前の画面に戻ると設定画面右下に「詳細モード」というリンクがあります。
クリックしてみましょう。
そうするとJSONで書式をカスタマイズできるモードへと切り替わります。
JSONの書き方についてはMicrosoftが「書式構文リファレンス」を公開しています。
JSONを使えば、柔軟な書式設定が行えそうですね。
タイトル列の要素を確認する
JSONによる書式設定を行うにしても、どの要素に対して何を適用すればよいのかページの作りを確認しておく必要があります。
ブラウザ（chrome）で対象のビューを表示させ［F12］キーを押下します。
すると開発者ツール（DevTools）が開きます。
※ブラウザの種類により開発者ツールの操作方法は多少異なります。
開発者ツールの「要素（Elements）」をクリックします。
更に「ページ内の要素を選択して検査」をクリックし、検査対象の列（今回はタイトル列）をクリックします。
するとタイトルが表示されている領域の要素は「button」であることがわかります。
ここに折り返しの書式（word-wrap:break-word）を適用できれば良いということですね。
書式の変更① – word-wrap:break-wordの適用
ということで、Microsoftの書式構文リファレンスとにらめっこしながら、タイトル列を折り返し表示するJSONを作ってみました。
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "button",
"txtContent": "@currentField",
"style": {
"word-wrap": "break-word"
},
"customRowAction": {
"action": "defaultClick"
}
}
「elmtype（要素）」は先ほど調べた通り「button」、列に表示させるデータは「テキストデータ（txtContent）」で「カレントの値（currentField）」を取得させます。
そして書式に「word-wrap:break-word（折り返し）」プロパティを設定。
最後に「クリック時のアクション（customRowAction）」として「アイテムを表示（defaultClick）」を指定。
とてもシンプルな構文になりました。
このJSONをタイトル列の詳細モード画面に貼り付けて［保存］で適用です。
え？
確かに折り返しはされているけども…
列の書式の適用で余計な書式が設定される
改めてDevToolsで要素への書式の適用状況を確認してみます。
button要素に「sp-field-customFormatter」をいうクラスが使われており、フォント色やらサイズやら背景色やらが適用されてしまっています。
これってこの画面のやつですよね？
列の書式設定をJSONで適用しようとすると、こういった書式のデフォルト値が適用されてしまうようで、私が作った必要な書式だけを適用するJSONだとこのような悲惨なことになってしまいます。
ということで、練り直しです。
書式の変更② – 余計な書式を上書きする
改めて、従来のタイトル列の書式を見てみましょう。
button要素には「ms-Link」というクラスが指定されています。
このクラスには「カーソル（cursor）」や「テキストの装飾（text-decoration）」といったプロパティが含まれているようで、そのまま流用したいところです。
ということで、列の折り返しJSONを修正しました。
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "button",
"txtContent": "@currentField",
"attributes": {
"class": "ms-Link ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
},
"style": {
"word-wrap": "break-word",
"border": "inherit",
"background-color": "inherit",
"padding": "inherit",
"text-align": "inherit",
"font-size": "14px"
},
"customRowAction": {
"action": "defaultClick"
}
}
attributesでクラスの指定が行えるとのことで使ってみました。
今回は先ほど調べた「ms-Link」の他、「ms-fontColor-themePrimary」「 ms-fontColor-themeDarker–hover」でリンクの文字色をテーマから適用されるようにしました。
その他、意図せず設定されてしまった「border」や「background-color」などのプロパティを「inherit（継承）」で上書きしています。
「font-size」はどうしても継承できなかったため「14px」と直打ちしました。
これを適用すると…
なんとか元の書式を維持しつつ折り返し表示に変更することができました。
列幅などを調整し、ページに挿入すると…
狭い領域でも折り返し表示されれば内容がわかりますね！
まとめ
いかがでしたでしょうか。
プロフィール欄記載の通り、コードは苦手です 汗
コードに不備・不良・無駄・無理などがあるかもしれませんが、素人が書いていることだということでご配慮ください。
この列の書式設定ですが、もっと高度なことができます。
リストやライブラリのアイテムをユーザーに見やすく公開するにはデフォルトのビューでは足りなすぎるので、この機能は是非使いこなしていきたいところです。
コメント