Column formatting

例えば「選択肢列の値を『危険』にした場合は背景色を赤色にしたい」「パーセント表示する列をグラフで表示したい」などのカスタマイズをしたい場合、モダンUIだと「列の書式設定」という機能があります。過去にはまだ日本語訳されておらず、「 Column formatting 」という名前でした。以下の記事で少し触れています。

SharePoint ：Column formatting を使ってみたけど僕には今のところ難しい

JSONを書かなければいけなくて敷居が高いカスタマイズになっています。

詳細は以下に記載されています。

列の書式設定で SharePoint をカスタマイズする – Microsoft Docs
https://docs.microsoft.com/ja-jp/sharepoint/dev/declarative-customization/column-formatting

しかし、ここも徐々にJSON書かなくてもクリックでカスタマイズできるようになるという情報はありました。昨日たまたま見たら「デザインモード」なる名前でそれが実装されていましたので紹介します。ただし、現時点ではやれる事は非常に少ないです。

前から噂の「Column formatting」（日本語の正式名称はなんだろう？）が先行リリースされたのですが、僕のテナントでもリリースされたのでちょっと遊んでみました。

※モダンUIのみの機能ですね。

これは、Excelの条件付き書式にような機能ですが、恥ずかしい話、僕はExcelの条件付き書式すら使い方を知ったのは半年前くらいです…。で、そういうレベルの僕がググった情報程度で遊んでみるとどうなるか？というところでチャレンジしてみます。

■設定方法

▼ビューの列名→列の設定→「この列の書式設定」

▼右に設定カラムが登場

▼拡大してみると、

う～む…JSON…色々お噂は聞くジェイソンさんですか…13日の金曜日に登場するだけで十分ですよ…ホラーもプログラミングも苦手なのでよくわかりません。ちなみに、この中の「JSON の書式の列の詳細情報」というテキストはリンクですが、クリック先のページにはたいした事は書かれていませんでした。

そのうちノンコーディングで色々できるようですが、現状はJSONを使うようです。

■コーディング

とりあえず、 Microsoft のページを参照。

Use column formatting to customize SharePoint

まぁ、英語ですよね…。とりあえずサっと見て色々できるなぁと思ったけど、英語読むのが面倒なので、まずは簡単にCSSを当ててみます。

この2行目のURLみたいなのは自分の環境に合わせて書き直すとかではなく、このままで良いようです。この結果は…

▼おぉ、とりあえずスタイルが当たってる！

次に、列の値によってスタイルを変えたい！そのくらいはできるようになりたい！と思って Microsoft のページを見ながら試行錯誤してみると、条件を書くのが面倒くさくエラーばかりでした。

わからないまま書いたので正しいかはわかりませんが…以下で動きました。

{ “$schema”: “http://columnformatting.sharepointpnp.com/columnFormattingSchema.json”, “elmType”: “span”, “txtContent”: “@currentField”, “style”: { “font-weight”: “bold”, “border”: “1px #c0c0c0 solid”, “border-radius”: “6px”, “padding-left”: “10px”, “margin”: “4px 0”, “background-color”: { “operator”: “?”, “operands”: [ { “operator”: “==”, “operands”: [ “@currentField”, “青” ] }, “#7fffff”, { “operator”: “?”, “operands”: [ { “operator”: “==”, “operands”: [ “@currentField”, “黄” ] }, “#ffff7f”, “#ffbf7f” ] } ] } } }

▼信号ができました！