先週から私が利用している "先行リリース" を受け入れるようにしているテナントでは、SharePoint リストが PowerApps が統合され PowerApps でカスタムフォームが作成できるようになりました、その他のテナントではまだロールアウトされませんし、時期も未定です。そもそも、この機能は 2017年10月中にロールアウト開始となっていたのが、開発が遅れているようです。ですから、まだプレビューとみていいでしょう。

さて、従来の SharePoint でInfoPath でリストのカスタマイズを行ったことがあれば、InfoPathを PowerAppsに置き換えるイメージです。

PowerApps の魅力は、InfoPath に似て、JavaScript 開発のような開発スキルがなくてもアプリが作成できることにあります。ノンコーディングで設定のみで行えるものが多く、もしロジックを書くとしても Excel 関数を使ったことがあれば、似たような使い勝手でアプリが作成できます。

下記は PowerApps ブログの記事です。

Announcing availability of custom forms, multi-value choice and read-only attachments support for SharePoint with PowerApps

Announcing the availability of Custom SharePoint forms with PowerApps for SharePoint First Release tenants. We are also making multi-value choice, person & lookup column support available today in addition to support for read-only attachments from SharePoint lists.

従来の SharePoint リストをベースとした PowerApps アプリ開発

これまで PoweApps でリストをカスタマイズするとなると、結局は PowerApps アプリとして作成することとなり、アプリの起動は SharePoint リストとは別のウィンドウで(かつ、ホスト環境も PowerApps サービスホスト内) になっていました。要するに、SharePoint リストのカスタマイズというより、PowerApps のデータソースを SharePointリストから取得しているというだけです。

たとえば、次の例では現在地の座標を自動取得するか、手動で入力することで BING Map と連携させています。

 PowerApps の統合により、これが変わります。

PowerApps を使ったリストのカスタムフォーム作成

SharePoint Online でモダン UI のカスタム リストを利用している場合は、PowerApps の利用権限があれば、PowerApps メニューに[アプリの作成]   だけが表示されていましたが、PowerApps によるカスタム フォームが作成できるようになると [フォームのカスタマイズ] が追加されます。この "フォームのカスタマイズ" をクリックすると PowerApps アプリの作成ツールである PowerApps Studio が起動し、フォームがカスタマイズできるようになります。

作り方や FAQ については下記のリンクを参照してください。ちなみに、日本語のページは用意されていないので、必要に応じて Microsoft Translator などで翻訳してみるといいでしょう。

Customize a SharePoint list form using PowerApps

さて、ここでは先ほど同様に Bing Map と連携させたフォームを作成してみたので、どのような挙動になるか次の画像で確認してみましょう。

ご覧いただくとわかるように、アイテムをクリックしたり、新規作成する際に改めて PowerApps で作成したフォームが SharePointの画面の中で表示されるようになります。先ほどのように別のウィンドウで開くのとは大きく異なります。

リストのフィールドのレイアウトも通常は 1段組ですが、これを2段や3段組みにすることも可能です。

まだ、利用できるようになって間もないため、もう少しカスタマイズ方法を検証する必要がありますが(細かな制御をしようとすると癖があり、PowerApps 単体で利用していた場合と勝手が違いますし、情報もまだほとんどありません)。

とはいえ、"都道府県" の選択肢を選んだら、次の選択肢はその都道府県の市町村区のみが表示されるといったカスタマイズはできそうですし、もともとリストですから、そのままMicrosoft Flow と組み合わせてフローを作ることは可能です。たとえば、メール送信するとか。

InfoPath であったルール設定も、最近 PowerApps に組み込まれてきましたし、いよいよInfoPath の後継バージョンといえるような状況になってきています。また折を見て記事にしていきたいと思います。

SharePoint Online 上のモダン UI リストやライブラリのカスタマイズについての整理

SharePoint Online のモダン UI になっているリストやライブラリのカスタマイズは従来のように SharePoint Designer や スクリプトエディタWebパーツなどでのカスタマイズはできません。NoScript 設定となっているので、そもそも単純に JavaScript を組み込めません。JavaScript を組み込むには SharePoint Framework /　SharePoint Framework Extensions を使う必要があります。

現在カスタマイズの選択肢としては次の 3つがあります。

• Column Formatting (列の書式 )　
• PowerApps によるカスタム フォーム作成
• SharePoint Framework Extensions を使ったリストのカスタマイズ

上記のうち Column Formatting に関しては以前の記事でもご紹介しました。まだ完全にノンコーディングとは言えませんが、将来的にはノンコーディングとなります。そして、今回の記事で扱った PowerApps によるカスタム　フォーム作成も限りなくノンコーディングです。この2つで賄いきれない場合は、SharePoint Framework Extensions や SharePoint Framework そのものを使って、JavaScript による開発をしていくことを考えることになります。

今後、SharePoint に携わるエンジニアの方は、PowerApps + Microsoft Flow は知っておくべきですし、JavaScript も中級レベル以上のスキルが求められます。しっかりそなえておくようにしましょう。

(おまけ) 弊社コースの宣伝

あと、宣伝ですが、弊社では国内ではいち早く PowerApps & Microsoft Flow の研修を実施しています。というか、面白いので私がいち早くオリジナルコースを作成しました。2017年10月より定期コースとして実施しています。ご自身の PC や携帯端末などを持ち込んで、わいわい言いながら学習するコースです(初回実施もお陰様で大変盛り上がりました!!) 。ご興味がありましたら、ぜひ、研修もご利用ください。独自に勉強するよりは、学習にかかる時間が大幅に短縮できますよ ! なお、現在、1日コース でご案内していますが、PowerApps や Flow で実施できる内容が増えてきたので、じっくり学べるように 2日間コースに近々改訂する予定です。お楽しみに !

[オフィスアイ オリジナル研修] SharePointユーザーのためのMicrosoft PowerApps & Microsoft Flow入門

オフィスアイのオリジナル研修である「SharePointユーザーのためのMicrosoft PowerApps & Microsoft Flow入門」の案内ページです。

昨日、SharePoint Online の Column Formatting 機能について説明しました。

• [SharePoint Online] Viva ! リストの条件付き書式 (Column Formatting) 機能、登場。

これに関して少し追加情報を掲載しておきます。

Webブラウザーの違い

Column Formatting で見栄えを変更できるわけですが、Internet Explorer 11 で表示すると、少し表示がずれます。具体的にはセルの上方に文字が配列されます。

これが、Edge や  Chrome では基本的に(一部は上部に配置されますが) 、中央に文字列がバランスよく表示されます。

リストのテンプレート化

試しにリストをテンプレート化しても利用できるものなのか念のため確認しましたが、問題なくそのまま表示できました。

CSS関数は利用できない

 Use column formatting to customize SharePoint 　によると  background-image プロパティも対応しているのですが、ここにグラデーションを設定できるのか試そうと linear-gradient 関数を適用してみました。しかし、これがはじかれてしまう。

エラーメッセージを見ると、「次の文字を含めません " ( : & ; ! . "  」とあります。なるほど、CSS 関数は今のところそのままは利用できないようです。

モダン ページのリストビュー Web パーツで利用できるか

モダン ページで新たに "リスト ビュー" Web パーツがプレビューではあるものの、利用できるようになっています。が、まだこの辺の機能は対応していませんね。Webパーツでは列の書式は適用してくれないため、直接リスト(もしくはライブラリ)にアクセスしなくてはいけません。

まだプレビューで、これから機能が充実してくるということなので、いろいろ機能が使えるようになってくるとようやくサイト全体をクラシック表示から完全にモダン表示に移行できるんですけどね。

来年予定されている SharePoint HUB 機能ですが、今のところDemoを見ている限り、クラシックUIの既存サイトも Hub の傘下に追加できるのですが、これをやると既定でトップページなどがモダン表示に強制的に変更されていました。それもあり、モダン表示の機能が充実してこないと既存のサイトの Hub への参加というのは現実的ではないわけです。

まぁ、多くのものがプレビューですから、将来の運用やサイト設計を十分に考えておく時期ととらえておくのがよいと思います。

と、ここまで追加の検証結果でした。

SharePoint Online では先行リリースのテナントから、新機能の "Column Formatting" 機能が利用できるようになっています。この機能はモダン UI になっているリストおよびライブラリの列に Excel と似た条件付き書式を設定できるというものです。

利用イメージは次の通りです (ね、ちょっと Excel っぽいでしょ?)。 

利用前に

2017年11月現在、Column Formatting 機能はまだプレビューの状態であり、運用環境では利用できないということを注意してください。要は "まだきちんとしたサポートはないけど、使ってみて、フィードバック頂戴ね" ということです。

利用するには

Office 365 が先行リリース設定(テナントレベル、ユーザーレベル、どちらも可)となっていれば、2017/11/8 までに(US時間) 展開されるとのことでしたが、実際には私が持っているテナントは 11/9 に利用できるようになったものと、11/11 頃になってようやく利用できるようになったものとがありました。が、さすがに先行リリースに設定されいれば、もう利用できるようになっているのではないでしょうか。ちなみに、その他のテナントも11月末までにはロールアウトされるとのことです(予定よりは少し遅れるかもしれませんが) 。

さて、この機能が利用できるようになると次の図のように、列にの設定に[この列の書式]メニューが表示されるようになり、ここに条件を記載することになります。

ちなみに、現時点ではJSON形式で条件を記述しなくてはなりません。ゆくゆくはノンコーディングで設定できるようにするということですが、当面はこれを記述しなくてはいけないわけです。どのように記述すればよいかは次の記事を参照してください。

Use column formatting to customize SharePoint

You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements.

 ここに記載してあるパターンを書き写せば基本的には動くので、そういう意味ではハードルは低いのですが、それでも資料をベースにアレンジするとなると、多少のコーディング知識がないとちょっと嫌になってしまうかもしれません。アイコンは Office UI Fabric から持ってきたりもしますので、その辺の知識も整理しておく必要があります。

モダン UI は従来のアプローチでは JavaScript は組み込めない

ちなみに、モダン UI は従来の "スクリプト エディタ" Webパーツなどを使った JavaScript の組み込みはできませんし、CSSも適用できません。NoCode という設定がされているためです。そのため、見た目をカスタマイズするにはこうした Column Formatting や SharePoint Framework を利用する必要があるのです。モダン UI でも SharePoint Framework を使えば、JavaScript を組み込めます。

より高度な機能を利用するには

さて、満を持して登場した Column Formatting 機能ですが、これと対抗馬にあるのが SharePoint Framework Extensions  (SPFx Extensions) です。SPFx Extensions を使うことで、SharePoint サイトに次の3種類の機能が実装できます。

• Application Customizer
• Field Customizer
• ListView Command Set

このうち Column Formatting と同等のことができるのが Field Customizer であり、JSLink をご存知の方はこれに代わるものであると考えてください。これらは JavaScript を使ってコーディングできるため、Column Formattingより柔軟性が高い処理や設定が可能です。まずはColumn Formatting を試してみて、JavaScript が書ける方は SharePoint Framework Extensions にチャレンジし、違いを比較してみてください。

SharePoint Framework Extensions (Office UI Fabricを含む) に関しては、今のところ国内では弊社だけが開催している "SharePoint Framework 入門" オリジナル研修コースで学習することも可能です! 今注目のおすすめのコースです!!

モダンUI のリストやライブラリのインジケータ表示が新たに変わりました! 

ちなみに、"人気上昇中" は、ライブラリ内のファイル(Wiki ページを含む) だけです。裏ではきっと、検索エンジンがカウントしている最近2週間分のクリック数をもとにしているのでしょう。リストアイテムは対象外です。

その他、地味な変更点で且つ、あまり皆さん気づいていないようですが、クラシックUIのときによく質問されていたアイテム(ファイル)間の行間の罫線も既定でうっすら表示されています。

以上、ご参考まで。