LoadData 関数と SaveData 関数を使用して、セッション間で一貫したエクスペリエンスを実現します

[アーティクル]
03/09/2022

Microsoft Teams 用 Microsoft Dataverse は、Teams で使用する組み込み型のローコードデータプラットフォームです。リレーショナルデータストレージ、豊富なデータの種類、エンタープライズレベルのガバナンス、ワンクリックソリューションのデプロイを提供します。 Dataverse for Teams を使用すると、誰でも簡単にアプリをビルドしてデプロイできます。

Teams で Power Apps を使用することには多くの利点がありますが、デザイン上の最大の考慮点の 1 つは、セッション間で一貫したエクスペリエンスを維持する機能です。

アプリの使用時に、Teams のタブを切り替えて Wiki や Planner を見たり、チャットをしたりすると、アプリのセッションデータが失われ、最初からセッションをやり直さなければなりません。たとえば、検査アプリを使用して検査を行っている最中に、一瞬でもタブを切り替えてしまうと、検査で取得したデータがすべて失われてしまい、すべての情報を再取得しなければなりません。

この記事では、LoadData() 関数と SaveData() 関数を使ってセッションデータをアプリ内に保存し、Teams でタブを切り替えたことによる作業の損失を防ぐ方法を説明します。

このビデオでは、セッション間で一貫したエクスペリエンスを実現する方法について説明しています:

前提条件

このレッスンを完了するには、一部の Microsoft 365 サブスクリプションの一部として利用可能な、Teams 内でアプリを作成する機能が必要です。

Teams にログインします

Teams デスクトップを使用して Teams にログインします。

新しいチームを作成します

新しいチームを作成するには、以下の手順に従います:

Teams タブを選択します。
加入を選択するか、画面の左下でチームを作成します。
ゼロからクラウドフローを作成 を選択します。
公開を選択してチームに名前を付けます。この例では、"MSFT Partners" を使用しています。
作成を選択します。

新しいチームが作成され、[Teams] タブに一覧表示されます

新しいチームを作成します

Teams で Power App を作成する

チームで Power Apps アプリを作成するには、以下のように Teams で Power Apps Studio を開く必要があります。

Teams で Power App を作成する

アプリのリストから Power Apps を選択し、左ペインに固定して選択します。
今すぐ始める を選択して最初のアプリを作成します。
このアプリを作成するチームを選択すると、そのチームに Power Apps 環境が作成されます—(チームごとにひとつの Power Apps 環境が存在します)。
環境の構築中は、準備をする のダイアログボックスを閉じてください。
上部の ビルド タブを選択すると、作成されたアプリがリストに表示されます。
アプリを開くと、既定でタブレットレイアウト/フォームファクターに作成されていることがわかります。
永続的なセッション など、アプリの名前を入力し、保存を選択します。

アプリはギャラリーで作成されます。
新しいテーブルの作成 を選択して新しいテーブルを作成します。
Account と入力し、作成を選択します。
データ型が電話の—Phone とデータ型がテキストの City の 2 つの列を追加します。
3 つの列にサンプルデータを追加します。
この手順を繰り返して、少なくとも 5 つのレコードを追加します。
閉じる を選択します。

アカウントテーブルがデータテーブルとして追加されます
ツリービュー > BrowseGallery1 > を選択し、データソースに アカウント を選択します。

Teams にアプリを公開する

Teams に公開する を選択します。
次へを選択します。
+ を選択してアプリを「一般」チャネルに追加します。
永続セッションの例 チームに移動すると、永続セッションの例 アプリが上部のタブに表示されます。

問題をテストする

アプリ 永続セッションの例 チームから、永続セッションの例 アプリを開きます。
新規レコード を選択してアプリで新しいアカウントを作成します。
名前と電話番号を入力します
City を入力してレコードを保存する前に、別のタブ (上部のファイルや Wiki、別のチームなど) に切り替えてから、アプリに戻ります。
2 つの列に入力されたデータが、画面上では利用できなくなり、失われることに注意してください

解決策: SaveData() 関数と LoadData() 関数を使用します

上記の問題を解決するには、LoadData() 関数と SaveData() 関数を使用します。フォームに入力されたデータのコレクションを、データが入力されたときに作成し、レコードがコミットまたは保存されるまで、データをコレクションに保存し続けます。これにより、レコードが保存されていない状態で、何らかの理由で画面からタブで移動する必要がある場合、コレクションには保存されたデータが含まれ、アプリに戻ったときに読み込まれます。また、レコードが保存された後にコレクションをクリアして、次の新しいレコードが作成されたときにコレクションが新しいデータを取得できるようにします。

まず、ここでのの変更が新規レコードの場合にのみ適用されることを確認します。そこで、どのようなデータを表示する必要があるかを判断するために、編集フォームの条件として使用する変数 newMode を更新しています。 新規レコード を選択し、ボタンの OnSelect プロパティに以下の数式を追加します:
```
NewForm(EditForm1);
UpdateContext({newMode: true})
```
次に、個々の入力コントロールからのデータをコレクションに追加し、そのコレクションからデータをローカルファイルに保存します。テキスト入力ボックスを選択します—この例では、"EditForm1 "の "Name_DataCard1 "の "DataCardValue1 "の Name フィールドに、入力フィールドの OnChange—プロパティに以下の式を入力します:
```
Collect(
    colAccount,    
    { Column:"Name",Value:Self.Value}
);
SaveData(colAccount,"colAccount").
```
この変更により、データがローカルキャッシュに追加され、ユーザーがアプリを離れた場合にもデータが失われません。

同様に、Phone (DataCardValue2) の OnChange プロパティに以下のコードを入力します:
```
Collect(colAccount, {Column:"Phone",Value:Self.Value});
SaveData(colAccount,"colAccount");
```
同様に、City (DataCardValue3) の OnChange プロパティに以下のコードを入力します:
```
Collect(colAccount {Column:"City", Value:Self.Value});
SaveData(colAccount, "colAccount");
```
次に App OnStart を更新して、コレクションに保存されているデータがあれば、アプリの起動時にそれが読み込まれるようにします。

アプリ > OnStart プロパティに移動し、次の式を追加します:
```
LoadData(colAccount,"colAccount", true)
```
続いてに、データフィールドの既定プロパティを更新して、アプリに戻ってきてページが読み込まれたときに、コレクションにデータが存在していれば、既定でコレクションのデータが表示されるようにする必要があります。

フィールド DataCard を選択し、データカードの既定プロパティを、リストアップされたフィールドの以下の式に更新します。

名前フィールドに、Name_DataCard1: と入力します
```
If(
    newMode && !IsBlank(
        Last(
            Filter(colAccount, Column = "Name")
        ).Value
    ),
    Last(
        Filter(colAccount, Column = "Name")
    ).Value,
    If(newMode, Blank(), ThisItem.Name)
)
```
同様に、Phone (Phone_DataCard1): の既定のプロパティ式に以下の式を入力します。
```
If(
    newMode && !IsBlank(
        Last(
            Filter(colAccount, Column ="Phone")
        ).Value
    ),
    Last(
        Filter(colAccount, Column = "Phone")
    ).Value,
    If(newMode, Blank(), ThisItem.Phone)
)
```
City (City_DataCard1) には、次の式を使用します:
```
If(
    newMode && !IsBlank(
        Last(
            Filter(colAccount, Column = "City")
        ).Value
    ),
    Last(
        Filter(colAccount, Column = "City")
    ).Value,
    If(newMode,Blank(), ThisItem.City)
)
```
次に、2 つのシナリオでコレクションをクリアする必要があります:
1. ユーザーがフォームを送信すると、変更が保存されます。
2. ユーザーが変更をキャンセルするためにキャンセルボタンを選択したとき。
送信ボタンの OnSelect プロパティで次の式を使用します。
```
SubmitForm(EditForm1);
UpdateContext({editMode: false, newMode: false});
Clear(colAccount);
SaveData(colAccount, "colAccount");
```
キャンセル ボタンを選択し、次の式を入力します:
```
ResetForm(EditForm1);
UpdateContext({editMode: false, newMode: false});
Clear(colAccount);
SaveData(colAccount, "colAccount");
```
上記のすべての変更を行った後、Teams に公開する を選択してアプリを公開します。

再度アプリをテストする

チームに移動してアプリを実行します。
+ 新規 レコードを作成し、新しいレコードの名前と電話番号の詳細を追加します。
別のタブを選択して、アプリから移動します。
アプリに戻ると—最初のアカウントの詳細が表示されます。
ここで、再度 + 新規 を選択すると、これらのテキスト入力フィールドに名前と電話番号の詳細がすでに入力されているのがわかります。また、アプリからタブで移動する前に、アカウントの追加を再開できます。

検査アプリで SaveData と LoadData を使用する方法

検査サンプルアプリでは、検査フォームに読み込みデータとセーブデータを使用しています。—ユーザーが検査の途中で Teams 内のアプリを切り替えた場合 (メッセージの送信など)、検査中の場所を失うことは望ましくありません。タブに戻ると、アプリは進行中の検査を再開するオプションを提供します。

考慮事項

Dataverse for Teams で、SaveData() および LoadData() 機能にはいくつかの制限があります。

Teams デスクトップにおける 1MB の制限。
ブラウザでは動作しません。
モバイルのアプリは、アプリが利用できるローカルストレージの容量に制限があります。

LoadData 関数と SaveData 関数を使用して、セッション間で一貫したエクスペリエンスを実現します

前提条件

Teams にログインします

新しいチームを作成します

Teams で Power App を作成する

Teams にアプリを公開する

問題をテストする

解決策: SaveData() 関数と LoadData() 関数を使用します

再度アプリをテストする

検査アプリで SaveData と LoadData を使用する方法

考慮事項

関連項目

フィードバック