---
title: "【質問コーナー】Power Apps のOutlook 会議スクリーンを一つの画面レイアウトにする"
url: "https://www.geekfujiwara.com/tech/1361/"
author: ギークフジワラ
published: "2021-03-26T08:20:00+00:00"
updated: "2026-10-23T22:16:31+00:00"
categories: [Power Platform, Technology]
tags: [Microsoft, Power Platform, PowerApps, 質問コーナー]
description: "YouTubeから当サイトを発見いただき、以下のようなご質問をいただきました。 [memo title=\"YouTubeチャンネルはこちら\"]チャンネル登録お願いします！[sanko href=\"https://www.youtube.co…"
---

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

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

\[memo title="YouTubeチャンネルはこちら"\]チャンネル登録お願いします！\[sanko href="https://www.youtube.com/channel/UCEgJePfIaNFwJYDRrJy5u3A" title="ギークフジワラ YouTube チャンネル" site="YouTube"\]\[/memo\]  
\[open title='質問内容'\]

> YouTubeでご相談した者です。  
> 大変申し訳ないのですが、どうしても分からないので、こちらにご相談させて下さい。
> 
> PowerApps＋Outlookで予定表のアプリを作ろうとしています。  
> 以下に詳細を記載します。
> 
> ・会議スクリーン(新しい画面からの選択)を使用  
> ・タブ分けされている内容を１つにまとめる  
> ・時刻の選択を無くす  
> ・期間をドロップダウン形式の時間に変える(2つのドロップダウンにして、○時:〇〇分にする)  
> ・時刻、期間の枠以外は使用するためそのまま残す
> 
> このようなアプリを構想して作成しているのですが、この会議スクリーンが、「時刻」の選択をしないと送信ボタンが押せないようになっています。  
> 時刻ではなくて自分で作った時間(ドロップダウン形式)にしてOutlookに書き込みできるようにするにはどの様に関数を変えたら良いか分かりません。  
> もし可能でしたら教えて頂ければ幸いです。よろしくお願い致します。

\[/open\]  
質問としては２つあると理解しております。

\[list class="ol-circle li-mainbdr main-bc-before"\]

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

\[/list\]

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

\[sc\_blogcard url="https://www.geekfujiwara.com/tech/powerplatform/1363/"\]

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

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

<figure class="wp-block-image size-large">![【質問コーナー】Power Apps のOutlook 会議スクリーンを一つの画面レイアウトにする](https://www.geekfujiwara.com/wp-content/uploads/2021/03/gphotos-1361-1.png)</figure>その中でも上記「会議」を選択したときにできるものが会議テンプレートです。  
\[memo title="MEMO"\]Outlook予定表と連携して、利用可能な人と会議室を確認してくれます。\[/memo\]

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

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

<figure class="wp-block-image size-large">![【質問コーナー】Power Apps のOutlook 会議スクリーンを一つの画面レイアウトにする](https://www.geekfujiwara.com/wp-content/uploads/2021/03/gphotos-1361-2-1024x184.png)</figure>スケジュールでは、その人や会議室の空き状況を表示してくれます。

<figure class="wp-block-image size-large">![【質問コーナー】Power Apps のOutlook 会議スクリーンを一つの画面レイアウトにする](https://www.geekfujiwara.com/wp-content/uploads/2021/03/gphotos-1361-3-1024x190.png)</figure>## 一つのスクリーンで表示するにはどうしたらよいか

### 概要

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

<div class="information-box common-icon-box">先程のスクリーンショットをご覧いただくと、OnSelectで_showDetails 変数が Boolean値を切り替えていることがわかります。</div>したがって、 \_showDetails 関数で Visible を制御しているコントロールすべてを長い一枚の画面として表示可能なスクリーンに移し替え、すべて Visible = true にしてあげればよいのです。

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

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

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

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

<div class="memo-box common-icon-box">Visual Studio Codeでの編集がもうすぐできるようになるらしいです。すると、こういった一括系の作業がとても楽になりそうです。</div>## 回答例

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

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

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

<figure class="wp-block-image size-large">![【質問コーナー】Power Apps のOutlook 会議スクリーンを一つの画面レイアウトにする](https://www.geekfujiwara.com/wp-content/uploads/2021/03/gphotos-1361-4.png)</figure>### \_showDetails 関数が Visible プロパティに含まれているコントロールを、「招待」側のタブなのか（false）、「スケジュール」側のタブに属するのかを分類する

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

<figure class="wp-block-image size-large">![【質問コーナー】Power Apps のOutlook 会議スクリーンを一つの画面レイアウトにする](https://www.geekfujiwara.com/wp-content/uploads/2021/03/gphotos-1361-5.png)</figure>私の環境では上記のコントロールが 招待タブをクリックした時に\_showDetails 変数で表示されるように制御されているようでした。

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

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

<figure class="wp-block-image size-large">![【質問コーナー】Power Apps のOutlook 会議スクリーンを一つの画面レイアウトにする](https://www.geekfujiwara.com/wp-content/uploads/2021/03/gphotos-1361-6.png)</figure>先ほど作成したスクロール可能スクリーンにて、カードを選択た状態で貼り付けします。すると、カードに属する形で貼り付けすることが出来ます。このカードに入っていることでスクロールができるようになります。

<figure class="wp-block-image size-large">![【質問コーナー】Power Apps のOutlook 会議スクリーンを一つの画面レイアウトにする](https://www.geekfujiwara.com/wp-content/uploads/2021/03/gphotos-1361-7.png)</figure>残りのスケジュールタブに属するコントロールも切り取って行きます。

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

<div class="information-box common-icon-box">RectTabSelect3以下のコントロールはすべて対象外のものでした。</div><figure class="wp-block-image size-large">![【質問コーナー】Power Apps のOutlook 会議スクリーンを一つの画面レイアウトにする](https://www.geekfujiwara.com/wp-content/uploads/2021/03/gphotos-1361-8.png)</figure>以下のように、RectTabSelect3 より上のコントロールをすべて切り取ります。

<figure class="wp-block-image size-large">![【質問コーナー】Power Apps のOutlook 会議スクリーンを一つの画面レイアウトにする](https://www.geekfujiwara.com/wp-content/uploads/2021/03/gphotos-1361-9.png)</figure>スクロール可能なスクリーンにて、セクションを追加します。

<figure class="wp-block-image size-large">![【質問コーナー】Power Apps のOutlook 会議スクリーンを一つの画面レイアウトにする](https://www.geekfujiwara.com/wp-content/uploads/2021/03/gphotos-1361-10.png)</figure>切り取ったコントロールを貼り付けます。ここまで、タブで区切理のスクリーンをカードを利用することで一つの画面に統合することが出来ました。

<figure class="wp-block-image size-large">![【質問コーナー】Power Apps のOutlook 会議スクリーンを一つの画面レイアウトにする](https://www.geekfujiwara.com/wp-content/uploads/2021/03/gphotos-1361-11.png)</figure>あとひとつ、紙飛行機のアイコンを持ってきてOutlookへの予約送信ができるようにします。そのアイコンのコントロールは以下の名称です。

<figure class="wp-block-image size-large">![【質問コーナー】Power Apps のOutlook 会議スクリーンを一つの画面レイアウトにする](https://www.geekfujiwara.com/wp-content/uploads/2021/03/gphotos-1361-12.png)</figure>スクロール可能なスクリーンにて、ヘッダーに貼り付けます。

<figure class="wp-block-image size-large">![【質問コーナー】Power Apps のOutlook 会議スクリーンを一つの画面レイアウトにする](https://www.geekfujiwara.com/wp-content/uploads/2021/03/gphotos-1361-13.png)</figure>\[タイトル\]も「会議」にします。

<figure class="wp-block-image size-large">![【質問コーナー】Power Apps のOutlook 会議スクリーンを一つの画面レイアウトにする](https://www.geekfujiwara.com/wp-content/uploads/2021/03/gphotos-1361-14.png)</figure><div class="memo-box common-icon-box">ここまでコントロールの一画面への移行は完了ですが、まだ表示非表示が切り替えられる状況になっているのですべてをVisible = true 行った感じになるように変更していきます。</div>### Visible プロパティすべてをtrueにする

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

<figure class="wp-block-image size-large">![【質問コーナー】Power Apps のOutlook 会議スクリーンを一つの画面レイアウトにする](https://www.geekfujiwara.com/wp-content/uploads/2021/03/gphotos-1361-15-1024x400.png)</figure>こういうのは以下のように trueにしましょう。

<figure class="wp-block-image size-large">![【質問コーナー】Power Apps のOutlook 会議スクリーンを一つの画面レイアウトにする](https://www.geekfujiwara.com/wp-content/uploads/2021/03/gphotos-1361-16-1024x199.png)</figure>以下はちょっと複雑なケースです。複合条件になっています。

<figure class="wp-block-image size-large">![【質問コーナー】Power Apps のOutlook 会議スクリーンを一つの画面レイアウトにする](https://www.geekfujiwara.com/wp-content/uploads/2021/03/gphotos-1361-17-1024x384.png)</figure>こういった場合は、\_showDetails に関係するところを消去します。言い換えると赤枠のところだけを残します。

<figure class="wp-block-image size-large">![【質問コーナー】Power Apps のOutlook 会議スクリーンを一つの画面レイアウトにする](https://www.geekfujiwara.com/wp-content/uploads/2021/03/gphotos-1361-18-1024x384.png)</figure>結果このようになります。

<figure class="wp-block-image size-large">![【質問コーナー】Power Apps のOutlook 会議スクリーンを一つの画面レイアウトにする](https://www.geekfujiwara.com/wp-content/uploads/2021/03/gphotos-1361-19-1024x364.png)</figure>以上のようにすべてのコントロールから\_showDetails 変数を消していきます。

### 消し終わると…完成！

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

<figure class="wp-block-image size-large">![【質問コーナー】Power Apps のOutlook 会議スクリーンを一つの画面レイアウトにする](https://www.geekfujiwara.com/wp-content/uploads/2021/03/gphotos-1361-20.png)</figure>ちなみにですが、ここまでできると元々会議テンプレートで追加されたScreen2は残りカス状態なので消去して問題ありません。

<figure class="wp-block-image size-large">![【質問コーナー】Power Apps のOutlook 会議スクリーンを一つの画面レイアウトにする](https://www.geekfujiwara.com/wp-content/uploads/2021/03/gphotos-1361-21-1024x569.png)</figure>この質問の２件目の回答はこちらにございます。

\[sc\_blogcard url="https://www.geekfujiwara.com/tech/powerplatform/1363/"\]
