SharePoint Online - Column Formatting 機能でモダン UI のリスト/ライブラリを手軽にカスタマイズ

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

 

公式ページはこちら

Use column formatting to customize SharePoint | Microsoft Docs

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

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

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

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) での公式ページ記載の情報

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

サポート対象となる列の種類

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

使用可能な DOM 要素

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

使用可能な属性

 こちらが Office UI Fabric のページ

https://developer.microsoft.com/en-us/fabric#/styles/typography

developer.microsoft.com

以下のようにフォントのサンプルやアイコン画像、アニメーション効果やフォントカラーなどのサンプルがたくさんあります。いい感じに装飾できそうですね!

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

Office UI Fabric - フォントのサンプル

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

Office UI Fabric - アイコン画像のサンプル



今回の投稿はここまでです。

p.s. 最近は Android アプリ作りにはまってしまい、ブログ更新が止まっておりました。Qiita の Advent カレンダー Xamarin (初心者枠) の 2017/12/10 の回で記事投稿予定です。地道に活動していきます。

qiita.com