以前の記事でも紹介しましたが、SharePoint Online でモダンUIになっているリストは "列の書式" が利用できるようになっています。Excel の条件付き書式のようなものですね。
[関連記事]
- [SharePoint Online] Viva ! リストの「列の書式」 (Column Formatting) 機能、登場。
- [SharePoint Online] 「列の書式」(Column Formatting) 機能に関する追加情報
これを使って Microsoft Flow も起動できるという話が去年の Microsoft Ignite 2017 では説明されていたのですが、しばらく書き方がわからずにいました。しかし、最近になって資料を見直したところ、情報が公開されていたので本ブログでも紹介しておきます。
列の書式の公式ドキュメントとしては次の資料を参照してください。
列の書式設定で SharePoint をカスタマイズする
SharePoint リストとライブラリに含まれるフィールドの表示方法をカスタマイズします。それには、フィールドがリストビューに組み込まれるときに表示する要素を記述し、それらの要素に適用するスタイルを記述する JSON オブジェクトを作成します。
今のところ "JSON" 形式で式を書く必要があるため、エンドユーザーにとってはハードルが高くなっていますが、もう少し簡単に設定できるようになる予定だそうです。ということで、資料をさっと見て、難しそうだなぁと思う方も少なくないと思います。ソースが読めることに越したことはありませんが、ちょっとでもトライしてみようという気持ちがあれば、コード部分をコピー&貼り付けでもある程度利用できるので、ぜひチャレンジしてみましょう。
リストの準備
手元で作成したデモ環境では、カスタム リストとして作成した「コース一覧」からコース申し込みができるようにしていきます。今回はコース一覧リストの作成方法は、本題から少しずれるので詳しく触れませんが、実際に取り組む方は、任意のカスタム リストを作成してみましょう。
コース申し込みはワークフローで処理し、別のカスタム リストにコース申し込みのエントリーを登録するように作成したいと考えています。たとえば、下記のようなイメージですね。
ちなみに、この手のアプリは "Notes で同じようなことをしていた" という話がよく出てくるもので割とニーズがあります。今回はデモ用であるため簡易作成していますが、これをベースに社内研修の申し込み管理などのアプリへと本格的に発展させることも可能です。
ということで、この例では2つのカスタム リストを用意しています。実際にフローの起動のみ試す場合はリストは1つあれば十分です。
Microsoft Flow の準備
さて、コース一覧の方に Microsoft Flow を実装します。ここからワークフローを使ってコース申し込みができるようにしたい。まずは目的のコースを選択してたら、手動でフローを開始できるようにします。フロー開始時には所属組織や氏名、連絡先のメールアドレスなどを入力できるようにしておきます。詳細は割愛しますが、大まかには次のような手順でフローを作成していきます。とはいえ手軽に試すのであれば、単純にメールを送信するフローを実装するのでもよいでしょう。
1. フローを作成するために、コマンドメニューから[Flow]>[フローの作成]をクリックします。
2. 選択したアイテムをベースにフローを開始することで、申し込み者が対象コースに関しての詳細を入力しなくてもフローで勝手に取得できるようにします。このために[選択したアイテムのカスタム アクションを完了する]というテンプレートからフローを作成するとよいでしょう。
3. ワークフロー開始時にユーザーに入力してもらいたい項目があれば、次のような手順で入力を求めるように設定していきます。
まずは最初のアクションの[編集]をクリックします。
出力の追加をクリックします。
出力の種類を選択します。コース申し込みなので、"テキスト" を選択して、ユーザーが所属組織や氏名を入力できるようにします。もちろん、フローではフロー開始者を申込者としてユーザー情報を自動取得することもできるので必要があればそういった設定も検討するとよいでしょう。とはいえ、大規模組織ではグループ企業からの代理申し込みなどいろいろと想定すると、必ずしもフローで自動取得できないケースも少なくないため、まずは手入力にした方が無難なので、ここでは手入力としています。
今回は「申込者の所属組織」というフィールドを用意しました。
同様の手順で次のように申込者の氏名や電子メールなどのフィールドを複数用意します。
後は[新しいステップ]をクリックし、追加したい処理を増やして構成していくだけです。
ちなみに、今回は別のリストに申込者情報を書き込むようにし、コース一覧に表示される登録者数を更新する処理と定員以上になった場合にコース一覧の Status 列を "申し込み可能"から"キャンセル待ち" に変更するような処理も加えてみました。運用環境であれば、これに申込者への 受付メール送信 やコース実施管理者への登録者情報のメール送信など、いろいろと処理を考える必要があります。あとは、定員オーバーになっているときに申し込みをクローズするなど。ただし、今回はデモ用に作成しているので、そこまで込み入った処理はまだしていません。
ちなみに、作成したフローは既定では作成者しか実行できないので、サイトにアクセスできるユーザーは誰でも実行できるようにMicrosoft Flowの画面から "実行のみのユーザーの管理" 設定を次の手順で変更しておきます。今回作成しているサイトは Training-PowerAppsFlow という Office 365 グループで利用しているサイトであるためこのグループに権限を付与しています。
さて、ここまで設定することで次のようにコース一覧のリストから目的のコースを選択すると [Flow]メニューに[コースの申し込み] というフロー(上記手順で予め作成したフローの名前) が表示され、フローが実行できるようになります。次のデモを確認してみてください。ちなみに、登録者数列がフローによりカウントアップしていることも確認できます。
このフローによって、先ほど紹介したように別リストである "Course Entries" リストにエントリーがフローによって自動的に登録できるようになっています。
列の書式設定
さて肝心要の列の書式設定です。今回はコース一覧にあらかじめ "申し込み" という名前で 1行テキストの列を用意しています。この列の値は空のままでかまいません。その代り、列の書式でボタンを生成します。ということで、"申し込み" 列をクリックし、[列の設定]>[この列の書式設定]とクリックします。
列の書式に次のようなJSON形式のデータを記述します。
[ソース] 列の書式 (ワークフロー起動サンプル)
図内でも指し示しているように実行したいフローのIDに関しては、自分の環境のフローのIDに置き換える必要があるので注意してください。フローのIDは フローの管理画面に表示される URLにあります。ちょうど下の画面の上部にある赤枠部分です。
このURLを以下に書き出しておきましょう。ちょうど色を指定している部分がIDであり、フローごとに異なります。
https://japan.flow.microsoft.com/manage/environments/Default-35bb248d-3041-46e1-9f25-800b2e9f7256/flows/6f5ec875-9ce4-4382-a6ae-4ee57c3f706d/details
フロー編集時なら下記の部分です。
https://japan.flow.microsoft.com/manage/environments/Default-35bb248d-3041-46e1-9f25-800b2e9f7256/flows/6f5ec875-9ce4-4382-a6ae-4ee57c3f706d?backUrl=%2Fflows%2F6f5ec875-9ce4-4382-a6ae-4ee57c3f706d%2Fdetails
フローのIDを書き換えたら、先ほどの列の書式にJSON形式で構文を書きます。すると下記のようなボタンが表示されます。これをクリックすると直接、フローが開始できるようにラウンチパネル(右側部分)が表示されるようになります。ユーザーにとっては、アイテムを選択して[Flow]をクリックして、目的のフローを選んで、、、という手間がなくなるため直感的に操作できますね。
研修のご案内
さて、ちょっと宣伝を。
Microsoft Flow については下記のコースで取り扱っていますし、弊社オフィスアイラーニングポータルなどでも学習できます。
ちなみに、列の書式については簡単に下記コースで説明はしていますが、 事前知識としてWeb技術の一つであるCascading Style Sheets の知識も必要です。
SharePoint経験者向け SharePoint モダンUI機能について学ぶワークショップ
SharePoint Online サイト管理基礎
このあたりの知識は、弊社オフィスアイラーニングポータルをご利用いただくことで対応できるほか、インターネット上にも書店にも資料は多くありますので、ご自身でしっかり身に着けておくようにしましょう。
コメント