SharePoint Online の条件付き書式 (Column Formatting) 機能がテストテナント使えるようになっていたので、試してみました。

公式ページはこちら

Use column formatting to customize SharePoint | Microsoft Docs

補足: 11/13 の時点で、プレビュー版であることが書かれています。

JSON による書式設定を使用したサンプルも公開していますので、こちらもご参考ください。

www.samurainote.com

オフィスアイ株式会社のブログでも取り上げられていました。

shanqiai.weblogs.jp

SharePoint Online のモダン UI では、SharePoint Framework Extentions によるカスタマイズも可能ですが、コーディング経験がないとかなりハードルが高いです。一方、今回追加された Culumn Formatting 機能は、JSON 形式でクラスの追加やスタイル定義、条件分岐がかけるため、より手軽にリスト/ライブラリの装飾が可能になりました。(ただし、JSON 形式に慣れないと正直なかなかしんどいです。)

機能が有効になっているテナントでは、以下のように列名のヘッダ部分から、[この列の書式設定] という項目が追加されています。

f:id:keisuke-blog:20171113005119p:plain

指定した列に対して、JSON でクラスを追加し、そのクラスに対してスタイル定義を指定することができます。それにより、Office UI Fabric で提供している定義済みのスタイルやアイコン画像などが利用できます。もちろん、スタイル定義を自分で書くことも可能です。クラシック UI だと、スクリプトエディタやビューファイル (AllItem.aspx など) に CSS を埋め込んでいた方も多いと思いますが、モダン UI においても Column Formatting 機能により、標準機能で簡単なカスタマイズができるようになりました。少しだけ試してみてみましたが、なかなか楽しいです。もしこんなことがしたいというアイデアをいただければ、試してみますので、ご意見いただけると嬉しいです。

それでは、早速今回試したものをご紹介します。

列の値をクリックすると、列の値を検索クエリとして Google 画像検索を行う。

1 行テキスト列を作成し、以下のように JSON で定義した内容を貼り付けます。

f:id:keisuke-blog:20171113012859p:plain — 動物の名前をクリックすると、動物の名前で画像検索した結果ページが別タブで開きます。

href でハイパーリンクを設定する際、operator (演算子) で "+" を選択し、operamds (値と変数) にジャンプさせたい URL の組みを記述しています。"@currentField" で列の値が使用できるため、規則に従っている URL がある場合、列の値と組み合わせて任意の URL にジャンプさせることができます。

こんな感じです。可愛いですね。

f:id:keisuke-blog:20171113013307p:plain — うさぎの検索結果

フォントサイズの変更と、アニメーションの設定。

次の例は、Office UI Fabric で使用可能な Class のうち、

ms-font-xxl (フォントサイズ 28pt)
ms-slideRightIn10 (フェードイン)

を使用する例です。と言っても、class 属性に Office UI Fabric のページで見つけた使いたいクラス名を指定するだけです！

f:id:keisuke-blog:20171113015141p:plain — フォントサイズの変更とアニメーションの設定

開発者ツールで DOM を確認すると、sp-field-customFormatter クラス、ms-font-xxl クラスおよび ms-slideRightIn10 クラスが追加されていることが確認できますね。右側でアニメーションのタイミングも確認できます。

f:id:keisuke-blog:20171113015720p:plain — 開発者ツール

ここで紹介したのはほんの一例ですので、色々触ってみてください。Role という属性もあるので、これはログインユーザーの権限によって適用するスタイルを切り替えられるということなのでしょうか。まだまだわからないことが多いので、色々触って確かめてみます。JSON の設定は列ごとに行う必要がありますが、フォントサイズの変更など、固定のフォーマットを列全体で一括設定したいということであれば、CSOM を使うことになりますね。

今回は以下に公開記事の情報と、Office UI Fabric の一例を紹介し、終わります。正式リリース版が出てくれば、クラシック UI からモダン UI への変更が進むかもしれませんね！今後の動向にも期待ですね。

<参考情報>

補足: 執筆時点 (2017/11/13) での公式ページ記載の情報