Udemy でのPower Platform 講座を開設: 作って学ぶPower Apps !

【質問コーナー】Power Apps のOutlook 会議スクリーンを一つの画面レイアウトにする

YouTubeから当サイトを発見いただき、以下のようなご質問をいただきました。

YouTubeチャンネルはこちら
チャンネル登録お願いします! 参考 ギークフジワラ YouTube チャンネルYouTube

YouTubeでご相談した者です。
大変申し訳ないのですが、どうしても分からないので、こちらにご相談させて下さい。

PowerApps+Outlookで予定表のアプリを作ろうとしています。
以下に詳細を記載します。

・会議スクリーン(新しい画面からの選択)を使用
・タブ分けされている内容を1つにまとめる
・時刻の選択を無くす
・期間をドロップダウン形式の時間に変える(2つのドロップダウンにして、○時:〇〇分にする)
・時刻、期間の枠以外は使用するためそのまま残す

このようなアプリを構想して作成しているのですが、この会議スクリーンが、「時刻」の選択をしないと送信ボタンが押せないようになっています。
時刻ではなくて自分で作った時間(ドロップダウン形式)にしてOutlookに書き込みできるようにするにはどの様に関数を変えたら良いか分かりません。
もし可能でしたら教えて頂ければ幸いです。よろしくお願い致します。

質問としては2つあると理解しております。

  1. Microsoft が標準でスクリーンテンプレートとして用意している会議スクリーンにて、タブ分けされている「招待」、「スケジュール」を一つのスクリーンにしたい。
  2. FromToの時間形式のドロップダウン2つで時間指定をしてスケジュールしたい。

本日は上記の1について答えていきます!
質問の2件目はこちらです。

会議スクリーンテンプレートとは

Power Apps にてスクリーンを追加すると、いろいろなテンプレートがあると思います。

その中でも上記「会議」を選択したときにできるものが会議テンプレートです。

MEMO
Outlook予定表と連携して、利用可能な人と会議室を確認してくれます。

招待とスケジュールのスクリーンが別れている

招待では人や件名、本文を編集することが出来ます。

スケジュールでは、その人や会議室の空き状況を表示してくれます。

一つのスクリーンで表示するにはどうしたらよいか

概要

そもそもどういう原理でこのタブが切り替わっているかというと、 _showDetails 変数がtrue / falseと連動して各コントロールの表示/非表示が切り替わっています。

先程のスクリーンショットをご覧いただくと、OnSelectで_showDetails 変数が Boolean値を切り替えていることがわかります。

したがって、 _showDetails 関数で Visible を制御しているコントロールすべてを長い一枚の画面として表示可能なスクリーンに移し替え、すべて Visible = true にしてあげればよいのです。

この作業の手順を以下に示します。

  1. スクロール可能なスクリーンを追加
  2. _showDetails 関数が Visible プロパティに含まれているコントロールを、「招待」側のタブなのか(false)、「スケジュール」側のタブに属するのかを分類する
  3. 切り取ってスクロール可能なスクリーンに貼り付ける
  4. Visible プロパティすべてをtrueにする

以上の4ステップで対応可能と思います。

作業量は、繰り返し作業が多いのですが、積み重ねていけば対応できるかと思います。

Visual Studio Codeでの編集がもうすぐできるようになるらしいです。すると、こういった一括系の作業がとても楽になりそうです。

回答例

いろいろな方法はあると思います。一つの例に過ぎないため例とさせていただきます。

スクロール可能なスクリーンを追加

今後の貼り付け先として備えるため、予めスクリーンを追加しておきます。

_showDetails 関数が Visible プロパティに含まれているコントロールを、「招待」側のタブなのか(false)、「スケジュール」側のタブに属するのかを分類する

会議スクリーンで追加したスクリーンに戻って、「招待」タブに属するコントロールにわかりやすさのため1というフラグを名前に入れていきます。

私の環境では上記のコントロールが 招待タブをクリックした時に_showDetails 変数で表示されるように制御されているようでした。

切り取ってスクロール可能なスクリーンに貼り付ける

1とフラグを付けたコントロールをすべて選択して(Shiftを押しながらクリックしていく)、右クリックして切りとります。

先ほど作成したスクロール可能スクリーンにて、カードを選択た状態で貼り付けします。すると、カードに属する形で貼り付けすることが出来ます。このカードに入っていることでスクロールができるようになります。

残りのスケジュールタブに属するコントロールも切り取って行きます。

以下のコントロールは_showDetailsにてVisibleが制御されていないコントロールですので、それ以外のコントロールをすべて切り取っていきます。

RectTabSelect3以下のコントロールはすべて対象外のものでした。

以下のように、RectTabSelect3 より上のコントロールをすべて切り取ります。

スクロール可能なスクリーンにて、セクションを追加します。

切り取ったコントロールを貼り付けます。ここまで、タブで区切理のスクリーンをカードを利用することで一つの画面に統合することが出来ました。

あとひとつ、紙飛行機のアイコンを持ってきてOutlookへの予約送信ができるようにします。そのアイコンのコントロールは以下の名称です。

スクロール可能なスクリーンにて、ヘッダーに貼り付けます。

[タイトル]も「会議」にします。

ここまでコントロールの一画面への移行は完了ですが、まだ表示非表示が切り替えられる状況になっているのですべてをVisible = true 行った感じになるように変更していきます。

Visible プロパティすべてをtrueにする

以下は簡単なケースです。単純に_showDetailsで制御されているのがわかります。

こういうのは以下のように trueにしましょう。

 

以下はちょっと複雑なケースです。複合条件になっています。

こういった場合は、_showDetails に関係するところを消去します。言い換えると赤枠のところだけを残します。

結果このようになります。

以上のようにすべてのコントロールから_showDetails 変数を消していきます。

消し終わると…完成!

以下のように一枚スクリーンでの会議設定ができるようになります。

ちなみにですが、ここまでできると元々会議テンプレートで追加されたScreen2は残りカス状態なので消去して問題ありません。

 

この質問の2件目の回答はこちらにございます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です