【Amazon Connect】画面遷移を含んだステップバイステップガイドを作成する

はじめに

こんにちは、クラウド事業部の菅家です。
Amazon Connectのステップバイステップガイド続きです。

前回はノーコードUIビルダーの使用を目的に1画面だけ作成しましたが、
どうせなら複数画面を作って画面遷移も試してみたく、本検証を実施しました。
いずれは短いデモシナリオを立て、シナリオに沿ったステップバイステップガイドを作成出来たらいいなと思います。
今回はその準備検証となります。

前回： techblog.ap-com.co.jp

どんなひとに読んで欲しい

複数画面を使って、Amazon Connectのステップバイステップガイドを作成したい方、
本記事の検証を通して、一緒に学んでいけますと幸いです。

目標

やりたいこと

メニュー画面、フォーム画面の2画面を使ったステップバイステップガイドを作成する。
各画面にはボタンを使って遷移する。

検証ステップ

画面作成2画面（メニュー、フォーム）
画面で押したボタンによって分岐をする設定を行う
2画面を行き来できるフローの作成

検証

①画面作成2画面（メニュー、フォーム）

Amazon Coonnectのインスタンスにログインし、ビューを作成します。
フロー＞ビュー＞ビューを作成

メニュー画面
　フォームに移動するボタンのみ配置します。
　部品として、Form＞Submit Buttonを選択し、配置します。
　プロパティ＞Actionに「transition Form」を設定します。Actionについては次の②にて説明。

フォーム画面
　テキストボックスとボタンを用意、ボタンはCancel、Submitの2つ作成します。
　部品として、
　　Container＞Sectionを選択し、配置します。
　　Container＞Button Groupを選択し、Sectionの中に配置します。
　　Form＞Form Inputを選択し、Sectionの中に配置します。

②画面で押したボタンによって分岐をする設定を行う

ビュー（画面作成）にて設定します。
作成したボタンに対してActionを設定することでフローで分岐をさせることができます。

docs.aws.amazon.com

今回はフォーム画面に設定します。
フォームのビューを開き、②にて配置した「Button Group」を選択します。
右のプロパティから、Itemsをクリック。

「Button Group」に所属する部品一覧が表示されます。
items-1がCancelボタン、items-2がSubmitボタンとなっています。

items-1、items-2をクリックし、各々のボタンのプロパティを展開します。
Actionにitems-1は「cancel」items-2は「submit」を入力。

コンタクトフローにて「ビューを表示」ブロックを配置してみます。
Actionにて設定した、cancelとsubmitが分岐として用意されていることがわかります。

③2画面を行き来できるフローの作成

フローは電話がかかって来たものと、ビュー表示用と2つ用意しています。
前回のものを流用しておりますので、作り方は前回の記事をご参照ください。
techblog.ap-com.co.jp

ビュー用のフローに「ビューを表示」ブロックを配置し、作成した2つのビューをそれぞれ設定します。
ボタンクリックの挙動として、単純にメニューとフォームを行き来するよう設定します。

ビューのタイムアウトは60秒設定とします。
短いと画面操作が無い場合にステップバイステップガイドが閉じてしまうためです。
タイムアウトのベストプラクティスについては要調査です。

動かしてみる

Amazon Connectインスタンスより、「エージェント Workspace」を開き、ステータスをAvailableとします。
電話をかけて確認します。

メニューから「フォームへ移動」ボタンを押し、フォームに移動します。

今度はフォーム側から「Cancel」を押し、メニューに戻ります。

フォームの「Submit」ボタンの方はビュー側のプロパティを色々いじってはみたのですが、残念ながら反応せず。
ただし、Cancelボタンとは別のボタンだとは認識されているようです。
こちらについては使用部品やフローの修正含めて次回以降にFormの値を送る際に解決していこうと思います。