PowerApps│引継ぎにも対応！電話応対メモアプリの作り方

こんにちは、あんこ先生です。

電話応対メモ、まだ手書きしていませんか？

個人で使うならさほど問題になりませんが、組織になると話は別です。

人数分のノートをめくって対応記録を探したり、メモが飛んで行って伝わっていなかったりと問題は山積みです。

ひどいときは字が読めない、誤認を誘発するきわどいものまでありますよね。

データを一元化すれば、記録の検索や相互牽制が働き、生産性・品質の向上が見込めます。

そこで、それを実現するために今回は電話応対メモアプリを作成します。

いつもどおり、コードは極力コピペで動くようにしています。

電話応対メモアプリの作り方

電話応対メモとは

電話応対メモは、電話がかかってきた日時、かけてきた相手とその連絡先、用件などを記録するメモです。電話ノートとも言います。

また、担当者不在の場合、電話を受けた人がその人に伝えるためのメモでもあります。

伝言メモとも言います。

今回のアプリは、それらを統合したものです。

アプリの機能

電話応対メモを入力し、SharePointリストに登録・修正します。

いつ・だれが受けて、いつ・だれが完了させたのか自動記録します。

メモ内容は、顧客名とその連絡先、応対内容に進捗状況の４つです。

進捗状況は「対応中」「引継」「完了」で管理します。

「対応中」「引継」は「完了」になるまで件数を表示し続けます。

「引継」の場合、引継先の人にメールを送信します。

検索機能を有します。（委任させていないため、500レコードまで）

本日を起点としたカレンダーを表示します。

複数人がおなじアプリを使用することを想定しています。

工夫した点

レイアウトに幅を持たせるため、SharePointリストへの書き込みは、フォームコントロールではなくPatch関数で行っています。

ひとつのスクリーン内で完結させています。そのため、レイヤー処理を多用しています。

アプリの構成

電話応対メモアプリは３つのコンテナコントロールで構成されています。

作成手順はコンテナコントロール単位で説明していきます。

電話応対メモの事前準備

SharePointリスト│T_応対記録

今回使用するデータソースは１つのSharePointリストで、実質青枠の４項目のみのシンプルな構成です。

オレンジ枠は標準項目なので、別途作成する必要はありません。

Excelでサクッと作ってみましょう。

使用コネクタ

使用するコネクタは全部で４つです。

作成者向けPowerApps
アプリの更新日時を取得するために使用します。
次の記事でも軽く触れています。

Office365ユーザー
ユーザー情報の取得に使います。

Office365グループ
引継先の選択肢にまとめて社員情報を放り込むために使います。

Office365Outlook
アプリから直接メールを送るために使います。

アプリの作成│Container01

電話応対メモアプリは３つのコンテナコントロールで構成されています。

上段│Container01

使用するコントロールは全部で８つです。

便宜上、上から順に作成していきますがどこから作成しても構いません。

ただし、塗りつぶし背景などが上側にくるとそれより下側は隠れてしまうので、並びは合わせてください。

RectangleUpperを背景として設置しています。

アプリタイトル│LabelTitle

アプリのタイトル名です。フォントサイズは大きめにしましょう。

更新日時表示│LabelUpdate

アプリが古い版数ではないかわかるよう、更新日時を表示します。

更新の都度、手動で設定しても構いませんが自動化した方が便利ですよね。

アプリの更新日時は作成者向けPowerAppsコネクタで取得できます。

Text関数を組み合わせれば、時間部分を省くこともできます。

"LastUpdate│"&
    First(作成者向けPowerApps.GetAppVersions("5b404c15-f1f4-4ee4-a8c9-00c3636b53f4").value).properties.appVersion

GetAppVersionsの戻り値valueはテーブルです。

そのため、First関数でレコードに変換しています。

対応中件数の表示│LabelCount系

対応中件数の色を変えるために、３つのラベルコントロールで構成しています。

それぞれの配置は、背景を白くしたLabelCountFillに「対応中・・・」を記述し、他のラベルを重ねています。

それぞれの件数算出はCountRows関数を使用しています。

今回、参照テーブルにGallery.AllItemsを使用しているため、通常100レコードまでの読み込みに対応しています。

//LabelCount01│対応中件数
CountRows(Filter(GalleryLog.AllItems,Processing<>"完了"))

//LabelCount02│引継ぎ件数
CountRows(Filter(GalleryLog.AllItems,Processing="引継"))

検索ワード入力欄│TextInputFind

Search関数で参照させるためのテキスト入力コントロールです。

ここは、Resetプロパティをtrueに、HintTextプロパティにヒントを埋め込んでおきます。

設定機能

拡張性を持たせるためにアイコンを設定しています。

別記事で機能を追加する際に使用します。

アプリの作成│Container02

中段│Container02

使用するコントロールはたくさんあります。

新規登録用のContainerNewと記録一覧と編集を兼ねたGalleryLogで構成されています。

ギャラリータイトル│LabelName01-04

ギャラリーの項目に対応させたタイトルです。

作り方は凝っていないので特に説明はいらないと思います。

新規登録機能│ContainerNew

新規登録用のコンテナで、待機用と登録用のレイヤーで構成されています。

動作としては下図のように、普段は待機用として＋アイコンのみ表示しています。

アイコンが押されると、登録用の入力フォームに切り替わります。

仕組みは単純で、待機用を上側に被せておき、アイコンが押されたら非表示にしているだけです。

それでは、この部分を順に作成していきます。

アプリの作成│Container02の登録用

登録用

下側になるレコードの新規登録を行う部分です。

フォームコントロールではレイアウトの自由が制限されるため、適当にコントロールを配置しています。

そのため、更新はPatch関数で行います。

キャンセル処理│IconCancel01

登録を取りやめる際のアイコンです。

上側の表示条件で使用している変数_newをfalseにします。

Set(_new,false);

受付者登録│ImageSt01 & LabelSt01

登録を取りやめる際のアイコンです。

この時点でレコードは登録されていないため、画像は自身のもの、時間は変数_nowを使用します。

変数_nowは待機系の＋アイコンで作成しています。

User().Image

"開始│"&Text(_now,"yyyy.mm.dd ddd hh:mm")

入力欄│TextInput01-03

それぞれ図の内容を入力するコントロールです。

電話アイコンは電話番号をイメージさせるために配置しているだけで深い意味はありません。

これら電話番号を除いた２点が入力されていれば、保存アイコンが押せるようになります。

また、入力コントロールはすべてReset関数をtrueにしておきます。

処理欄│Dropdown04-05

電話応対の処理進捗を入力します。

“対応中”,”引継”,”完了”の３種類を設けており、”引継”の場合のみ引継先のドロップダウンコントロールが表示されます。

この引継先はOffice365グループコネクタで全社員を参照させています。

事業所単位など絞り込みたい場合は、別グループを指定してください。

保存アイコン押下後、ここで選択した引継先にメールが送付されます。

また、入力コントロールはすべてReset関数をtrueにしておきます。

["対応中","引継","完了"]

Sort(Office365グループ.ListGroupMembers("9fb08af4-0850-4c0e-9a15-f02b5a5ab7e1").value,displayName,Ascending)

Dropdown04.Selected.Value="引継"

保存欄│IconNew

入力した内容をSharePointリストに登録します。

TextInput01-03のすべてが入力されていないと押せません。

”引継”が選択されている場合のみ、引継先にメールを送付します。

登録後は変数_newがfalseになり、待機用が表示されます。

//データ追加
Patch(T_応対記録,
    {
        ClientName:TextInput01.Text,
        Phone:TextInput02.Text,
        Responding:TextInput03.Text,
        Processing:Dropdown04.Selected.Value
    }
);

//引継ならメール
If(Dropdown04.Selected.Value="引継",
    Office365Outlook.SendEmailV2(
        "ankostar@hotmail.co.jp",//Dropdown05.Selected.mail,
        "電話引継メモ",
        TextInput01.Text&" 様から電話がありました。<BR><BR>"&TextInput03.Text&"<BR><BR>"&TextInput02.Text
    )
);

Set(_new,false);

If(IsBlank(TextInput01) || IsBlank(TextInput03),DisplayMode.Disabled,DisplayMode.Edit)

アプリの作成│Container02の待機用

待機用

上側になる登録用を隠す部分です。

構成は＋アイコンと図形のみです。ふたつとも表示条件に変数_newを指定しています。

＋アイコンを押すと各種変数が更新され、後述する修正用が非表示、登録用が表示されます。

また、前回入力分をリセットします。

Set(_new,true);Set(_mainte,false);Set(_now,Now());

Reset(TextInput01);Reset(TextInput02);Reset(TextInput03);Reset(Dropdown04);Reset(Dropdown05)

アプリの作成│Container02のGalleryLog

続いて記録一覧と編集機能の部分です。

これはギャラリーコントロールで作成します。

テンプレートは表示用とコンテナに格納された編集用のレイヤーで構成されています。

登録時と逆で、アイコンを押すと上層が表示されます。

電話応対記録│GalleryLog

電話応対メモアプリの本体ともいうべき、ギャラリー部分です。

色々と盛り込んだので入れ子がひどいですね。

順に説明すると、検索に対応するためSearch関数を一番外側につけています。

つぎに、未対応分を上位に表示させるためSortByColumns関数を使います。

Sort関数と異なり、文字列を任意の順で表示できるため、こちらを採用しました。

一番内側になるFilter関数ではDateAdd関数を使って今日から14日間を表示するようにしています。

ここは、標準で委任できる500レコードの制限を超えない範疇で設定してください。

Search(
    SortByColumns(
        Filter(T_応対記録,更新日時>DateAdd(Today(),-14))    //直近14日間
        ,"Processing",["対応中","引継","完了"]),           　//ソートキー
    TextInputFind.Text,"Title","Phone","Responding"         //検索範囲
)

ギャラリーの設定は終わりました。

テンプレート部分について、まずは下層側の表示用から作成していきます。

進捗状況表示│IconStatus

記録ごとの進捗状況をアイコンで表現します。

Switch関数で進捗に応じて、アイコンと色を変更します。

Switch(ThisItem.Processing,
    "対応中",Icon.Warning,
    "引継",Icon.AddUser,
    "完了",Icon.CheckBadge
)

Switch(ThisItem.Processing,"対応中",
    RGBA(246, 88, 16, 1),"引継",
    RGBA(246, 88, 16, 1),"完了",
    RGBA(39,113,194,1)
)

受付者と対応者│ImageSt02 & LabelSt02他

上段は受付者とその日時、下段は対応者とその日時を表示します。

冒頭で少しお話したSharePointリストの登録者と登録日時等を使っています。

登録はレコードを作成したときに一度だけ更新されます。

つまり、電話を受け付けた人と日時になります。

更新は最後にレコードを更新したときに更新されます。

レコード登録時点では登録者と同じですが、編集されると都度更新されます。

この仕組みを流用しています。

なお、下段は進捗が”完了”以外非表示とさせています。

ThisItem.登録者.Picture

"開始│"&Text(ThisItem.登録日時,"yyyy.mm.dd ddd hh:mm")

ThisItem.更新者.Picture

If(ThisItem.Processing="完了",
    "終了│"&Text(ThisItem.更新日時,"yyyy.mm.dd ddd hh:mm")
)

入力欄│LabelClientName他

ここは記録をそのまま表示しているだけです。

電話アイコンも飾りです。

ThisItem.ClientName

ThisItem.Phone

ThisItem.Responding

編集│IconEditOn

編集モード（上層を表示）に移行するためのアイコンです。

複数レコードで同時編集させないようIsSelectedプロパティで選択したギャラリーのみ、このアイコンが表示されます。

このアイコンを押すと、各種編集が切り替わり、上層の表示と登録モードが終了されます。

また、編集用フォームがリセットされます。

ThisItem.IsSelected

Set(_mainte,true);Set(_new,false);

Reset(TextInput11);Reset(TextInput12);Reset(TextInput13);Reset(Dropdown14);Reset(Dropdown14)

アプリの作成│Container02のContainerMainte

編集用│ContainerMainte

ギャラリーのテンプレートにあるコンテナコントロールです。

中身は編集用フォームです。

基本、上層にあたるため、表示用のコントロールはほとんど隠れますが、登録更新部分は表示されます。

保存アイコンを押すと、ここで入力した値で更新されます。

ThisItem.IsSelected && _mainte

ColorFade(RGBA(39,113,194,1), 80%)

キャンセル処理│IconCancel02

編集を取りやめる際のアイコンです。

表示条件で使用している変数_mainteをfalseにします。

Set(_mainte,false);

入力欄│TextInput11-13

それぞれ修正する内容を入力するコントロールです。

初期値から変更された場合は、わかりやすく背景色を変えます。

これら電話番号を除いた２点が入力されていれば、保存アイコンが押せるようになります。

コードはほぼ同じなので、TextInput11のみ紹介します。

ThisItem.ClientName

If(ThisItem.ClientName=Self.Text,
    RGBA(255, 255, 255, 1),
    RGBA(253, 222, 207, 1)
)

true

処理欄│Dropdown14-15

電話応対の処理進捗を入力します。

登録時と同様、”引継”の場合のみ引継先のドロップダウンコントロールが表示されます。

保存アイコン押下後、ここで選択した引継先にメールが送付されます。

["対応中","引継","完了"]

If(ThisItem.Processing=Self.Selected.Value,
    RGBA(255, 255, 255, 1),
    RGBA(253, 222, 207, 1)
)

Sort(Office365グループ.ListGroupMembers("9fb08af4-0850-4c0e-9a15-f02b5a5ab7e1").value,displayName,Ascending)

Dropdown14.Selected.Value="引継"

保存欄│IconEdit

入力した内容でSharePointリストを更新します。

TextInput11と13が入力されていないと押せません。

”引継”が選択されている場合のみ、引継先にメールを送付します。

登録後は変数_mainteがfalseになり、編集用が非表示になり表示用が見えるようになります。

//データ更新
Patch(T_応対記録,ThisItem,
    {
        ClientName:TextInput11.Text,
        Phone:TextInput12.Text,
        Responding:TextInput13.Text,
        Processing:Dropdown14.Selected.Value
    }
);

//引継ならメール
If(Dropdown14.Selected.Value="引継",
    Office365Outlook.SendEmailV2(
        Dropdown15.Selected.mail,
        "電話引継メモ",
        TextInput11.Text&" 様から電話がありました。<BR><BR>"&TextInput13.Text&"<BR><BR>"&TextInput12.Text
    )
);

Set(_mainte,false);

If(IsBlank(TextInput11) || IsBlank(TextInput13),DisplayMode.Disabled,DisplayMode.Edit)

アプリの作成│Container03

下段│Container03

最後になります。

スペースが余ったので、ここには電話応対時に日付や曜日がわかるようカレンダーを表示します。

RectangleLowerを背景として設置しています。

カレンダーの作成│GalleryCalendar

今回は、祝日に対応していません。

本日を起点に向こう９日間を表示させます。

コードを変えることで本日を起点で前後４日間といったことも簡単にできます。

構成は、ギャラリーコントロールのテンプレートに、日付用ラベルコントロールと曜日用テキスト入力コントロールを設置しています。

カレンダーの作成は、アプリ起動時に実行されるOnStartプロパティに記述しています。

曜日の〇囲みは、テキスト入力コントロールのRadiusTopLeftプロパティで表現しています。

詳しくは次の記事をご覧ください。

//本日からSequenceで指定した数値分のカレンダーを作成
Clear(_Calendar);
ForAll(Sequence(9,0),
    Collect(_Calendar,{Date:DateAdd(Today(),ThisRecord.Value,Days)})
)

//データ成形
_Calendar

Text(ThisItem.Date,"mm月dd日")

//曜日は先頭１文字のみ表示
Left(Text(ThisItem.Date,"ddd"),1)

ご支援よろしくおねがいします
この記事を気に入ってくださった方、寄付してあげてもいいよという方がいらっしゃっいましたら、ご支援いただけると助かります。
下記リンクからAmazonギフト券で、金額は15円からお気持ちを入力してください。
受取人のメールアドレスは amazon@anko7793.com までお願いします。
メッセージもいただけるとたいへん喜びます。
よろしくお願いします。
Amazonギフト券(Eメールタイプ)