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

前回本データを登録する入れ物をつくるのと、ギャラリーへそのデータを表示させるところまでを解説しました。
今回は、

• 「本を借りる」ボタンを押したら書籍一覧へ移動する
• 書籍データを追加する

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

「本を借りる」ボタンを押したら書籍一覧へ移動する

1. 1. 画面からMainスクリーンにある、「btnKariru」をクリックします。
      
   2. 数式前にある部分から「OnSelect」を選択します。
      OnSelectになっていない場合には、▼をクリックし、OnSelectを選択します。
      
   3. 数式に、Navigateと入力します。
      予測が表示されるので、scrBookListを選択します。
      
   4. 画面遷移時のアニメーションとして、Fadeを選択します。
      数式は以下のように入力されているはずです。

      Navigate(scrBookList,ScreenTransition.Fade)

   5. 動作をテストしてみる
      F5キーを押して、実行して確認してもいいですし、Altキーを押しながら左クリックすると編集画面でも動作を確認することができます。
      こんな感じに画面が遷移するはずです。

書籍データを追加する

書籍登録画面をつくる

1. 新しい画面からフォームを選択します
   
2. 新しい画面が追加されました
   「データに接続してください」をクリックします。
   
3. 右ペインにデータソースの画面が表示されます。
   
4. 前回接続したデータソースの「社内書籍リスト」を選択します。
   
5. 自動生成されたフォームにはフィールドが少ししか出ていない状態です
   
6. これだけでは登録用項目として足りていないので、先ほどデータソースを選択した部分の下にフィールドが表示されているので
   必要なフィールドにチェックをつけていきます。また不要なフィールドのチェックを外します。
   登録に関して必要なものとして下記フィールドを表示するように変更しました。
   並び順もこの順番にしました。

   ISBN/管理番号
   タイトル
   著者
   出版日付
   カテゴリ
   保管場所
   状況	新規登録なので不要な気もします
   登録日

フィールドの入替やSPO側を変更した際の手順

フィールドの入替手順

1. 画面からEditForm1を選択します。（まだスクリーン名を変更していないのでScreen1の下のやつなはずです）
   
2. 右ペインに表示されるフィールド横の「Ｘ件選択済み」をクリックします
   
3. 移動したいフィールドを選択し、ドラッグ＆ドロップで移動させ並び順を入れ替えます

SPOリストを変更した場合の反映手順

あとからやっぱりこのフィールドを追加したい時や変更したいときありますよね。
その際には、下記の手順で最新の状態に更新してください。

1. 上記と同じようにEditForm1を選択し、右ペインに表示されるフィールド横にある「Ｘ件選択済み」または、データ横にある「社内書籍リスト」をクリックします。
2. 【最新の情報に更新】をクリックします。
   
3. フィールド欄にSPOリストに新しく追加した列名が表示されれば更新完了です。

書籍データを新しく追加する

自動生成されたフォームなので、追加ボタンにはすでに数式が入力された状態です。

F5キーを押して画面を実行します。
すると「表示するアイテムがありません」となってしまったかと思います。

これはFormの既定モードが「編集」となっているからのためです。
そのため、既定モードを変更します。

1. EditForm1を選択します
   
2. 「プロパティ」タブを選択し、既定モードを編集から新規に変更します
   
3. F5キーを押して実行してみます
4. 入力フォームが表示されればOKです！
   
5. 必要な項目を入力し、✔をクリックし、新しい書籍データを登録します
6. まだ登録完了後の遷移処理がないため、表示するアイテムがありません　の表示に切り替わります。
7. SPOリストに登録されたかを確認します
   

登録用画面の名前を変更し、書籍一覧から遷移できるようにする

1. 前回と同様に画面の名前を変更します
   ここではScreen1をscrBookAdd と変更しました
2. scrBookList画面にある＋アイコンを選択します
   
3. 数式前にある部分から「OnSelect」を選択します
4. 数式に下記を入力します

   NewForm(EditForm1);Navigate(scrBookAdd,ScreenTransition.Fade)

   EditForm1を新規モードにし、書籍データ追加用画面へフェードアニメーションで遷移させます

登録完了後書籍リストに戻るようにする

連続登録も考えると内容だけクリアして、新規フォームを再度開くほうが使いやすいかもしれませんが、今回は登録が成功した場合は前の画面に戻す処理を追加します。

1. EditForm1を選択します
2. 数式の前にある部分から「OnSuccess」を選択します
   
3. 数式欄に以下のように入力します

   Notify("登録しました",NotificationType.Success);Back()

   登録に成功した場合には、上部に「登録しました」と表示させ、その後1画面前に戻すという処理です

動作を確認する

ここまでの動きを実際に動作させて確認していきます。
下記のような動きをしてくれると思います

登録完了後に書籍一覧画面に戻りますが、その際追加したデータしか表示されなくなってしまいました。
全データが表示されるようにしたいので、下記手順で修正します。

1. scrBookListにあるBrowseGallery1を選択します
2. 数式の前にある部分から「OnSelect」を選択します
3. 数式欄に以下のように入力します

   Refresh(社内書籍リスト)

   

4. 同じ数式を、IconRefresh1にも登録しておきます
   リフレッシュアイコンを押した際に、リストを最新の状態にします。
   

これで書籍データを追加し、追加後書籍一覧に戻る＆最新状態のリストを表示するが完成しました！

それではまた次回！

前回(Part1)の記事はこちら！