PowerAppsを利用して社内書籍管理アプリを作成する~Part3~

PowerAppsを利用して社内書籍管理アプリを作成する~Part3~

前回は、新規書籍データ登録までを行いました
今回は、

  • 書籍一覧から書籍を選択し詳細画面を表示させる
  • 貸出処理を追加する

をやっていきたいと思います。

とその前に、前回の書籍一覧画面のタイトルを変更していなくて格好悪いためまずはこちらを変更しておきます。

  1. scrBookList内の、「LblAppName1」を選択します
  2. 数式前にある部分から「Text」を選択します
  3. 数式欄に以下のように入力します
    "書籍一覧"
  4. 同じ手順で、scrBookAdd内の「LblAppName2」のTextの数式欄に以下のように入力します
    "書籍登録"

 

書籍一覧から書籍を選択し詳細画面を表示させる

書籍一覧から本を選択した際に詳細画面へ遷移するようにします。

書籍の詳細画面を作成する

  1. 新しい画面からフォームの画面を追加します。
    ※追加方法は、前回の記事を参照
  2. 画面の名前を「scrDetailBook」と変更します
    ※変更方法は、Part1を参照
  3. データソースを「社内書籍リスト」に設定します
  4. 自動的にフォームに項目が表示されますが、詳細画面に必要な項目だけに変更します。
  5. 右ペインから【フィールドの編集】をクリックします。
  6. レイアウトを横に変更しました(このあたりはお好みで)
    ↓こうなります
  7. 既定モードを「ビュー」にします

詳細画面への遷移設定

  1. 書籍一覧の>アイコン(NextArrow1)を選択します。
  2. OnSelect数式に、以下のように入力します。
    Navigate(scrDetailBook, ScreenTransition.None,{SelectedItem:BrowseGallery1.Selected});Refresh(社内書籍リスト)
  3. 書籍リストから>をクリックして、遷移させてみます。
  4. 画面は繊維しましたが、選択した本の情報が表示されません。
  5. EditForm2を選択します。
  6. Item欄に、「SelectedItem」と入力します
  7. 入力し確定した瞬間に選択した書籍データの詳細データが表示されました!
  8. 貸出中等を表示するための状況フィールドが表示されていないので表示するようにします
    EditForm2を選択し、【フィールドの編集】をクリックします
  9. 【フィールドの追加】をクリックします
  10. 状況にチェックをつけ、【追加】をクリックします
  11. EditForm2に状況項目が表示されます

詳細画面から書籍一覧に戻る遷移を作成する

他のも試したいところですが、この画面から戻ることがこの状態だとできないので、上部にある「×」アイコンを戻るアイコンに変更し、書籍一覧に戻る遷移を作成したいと思います。

  1. 上部の「×」アイコンを選択します。
  2. DELキー等でアイコンを削除します。
  3. 挿入 → アイコンから<アイコンを選択します。
  4. アイコンの名前を「IconDetailPrevBookList」とでも名前を変更します。
    ※変更方法はを参照
    アイコンの名前は任意なので自由につけてください。
  5. 文字色が黒で見づらいので、白に変更します。
  6. 左ペインのColor欄に「RGBA(255,255,255,1)」と入力します。
  7. 「<」アイコンのOnSelectに下記のように入力します。
    Navigate(scrBookList,ScreenTransition.Fade)
  8. 戻る遷移が作成されたので、書籍一覧に戻り他の書籍を選択し、選択した書籍詳細が表示されることを確認します。

 

貸出処理を追加する

ようやく図書アプリの要っぽいところまで来ました!
貸出処理を追加していきます!

データソースを追加する

なんでデータソースを追加するの?と思われるかもしれませんが、貸出先としてPowerApps実行ユーザーを取得したいためOffice365ユーザーというデータソースを追加します。

  1. ビュー → データソース をクリックします。
  2. 【データソースの追加】をクリックします。
  3. Office365ユーザーをクリックします。

 

貸出ボタンを追加する

  1. scrDetailBookを選択します。
  2. EditFormが画面いっぱいに設定されているのでまずEditFormを少し縮めます。
    とりあえず表示されるくらいに縮めました。
  3. 挿入 →  ボタン をクリックします。
    ボタンをいい塩梅に配置します。
  4. ボタンの表示を「借りる」に変更します。
  5. OnSelectに下記のように入力します。
    DataCardValue4となっていますが、環境によって異なる可能性があるので、ISBN/管理番号が表示されている箇所を指定してください。
    ここで@odata.type等がでてきますが、こちらこちらの記事を参照してください。

    UpdateIf(
        社内書籍リスト,
        'ISBN/管理番号' = DataCardValue4.Text,
        {
            貸出先: {
                Value: Office365ユーザー.MyProfile().Mail,
                '@odata.type': "#Microsoft.Azure.Connectors.SharePoint.SPListExpandedUser",
                Claims: "i:0#.f|membership|" & Lower(User().Email),
                Department: "",
                DisplayName: User().Email,
                Email: User().Email,
                JobTitle: ".",
                Picture: "."
            },
            状況: {
                Value: "貸出中",
                '@odata.type': "#Microsoft.Azure.Connectors.SharePoint.SPListExpandedReference"
            }
        }
    );Refresh(社内書籍リスト);Back()
  6. 借りるボタンを押してみます。
  7. 書籍リストに戻ったと思いますので、借りるボタンを押した書籍詳細をもう一度みてみます
  8. 貸出先と状況の値が変わっていることを確認します
    マスクした都合上貸出先表示があれですが、表示が入りきらない場合には自動的にすべて表示のリンクが表示されます

これで本の貸出処理、誰が借りたのかの処理が追加できました!
このままだとまた借りるボタンが押せてしまったりとか図書管理としては中途半端なので次回へ続きます。

Power Appsカテゴリの最新記事

%d人のブロガーが「いいね」をつけました。