Power Apps＋Power Automate バーコードスキャンで本の情報を取得するアプリ作成③

概要

前回は書籍コードからGoogle Gooks APIで本の情報を取得するフローを作成しました。今度は、アプリからフローを起動させて、フローからアプリに返した値をアプリ上で表示させる方法の手順についてです。

(8)アプリ画面の作成続き

アプリ編集画面です。まずは接続していたフローを最新の情報に更新しておきます。

検索ボタン

ボタンコンポーネントを置き、テキストを"検索"に変更します。OnSelectプロパティを以下のとおり設定します。
UpdateContext({Result:書籍情報取得フロー.Run(TextInput1.Text)})
TextInput1に入っている書籍コードをフローに渡して起動し、返ってきた結果を「Result」という変数に入れる式です。

ついでに、TextInput1に文字が入っていないときは検索ボタンを押せないようにしておきます。
DisplayModeプロパティを以下のとおり設定します。
If(IsBlank(TextInput1.Text),DisplayMode.Disabled,DisplayMode.Edit)

タイトル表示ラベル

検索ボタンの下に、テキストラベルコンポーネントを置き、Textプロパティを Result.タイトル にします。

著者名表示ラベル

さらにその下にもう一つテキストラベルコンポーネントを置き、Textプロパティを以下のとおり設定します。

Substitute(
    Substitute(
        Substitute(Result.著者名,"""","") //ダブルクォーテーションマークを削除
    ,"[","") //[を削除
,"]","") //]を削除

※（補足）上の式の説明をしておきます。ここで単純にResult.著者名とすると、テキストラベルには
["著者１","著者２",...]
という形のテキスト値が表示されてしまいます。見栄が悪いので、「"」と「[」と「]」の文字を削除するために上のような式にしています。
（補足おわり）

表紙画像

最後にその下に画像コンポーネントを置き、Imageプロパティを Result.表紙画像url にします。

(9)完成

アプリを保存・公開して再びスマホからアプリを起動して試してみます！

無事表示されました。
お好みで、デザインを整えるなどしてみてください。

まとめ

バーコードを読み取って、書籍情報を表示させるという目的は達成できました。
この情報をさらにデータベースに蓄積して、マイ本棚を作ったり、ChatGPTと繋いでおすすめの本を聞く機能なんかも追加してみたいです。