作業項目を追跡するための新しい列をマイルストーンサンプルアプリに追加する

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

Microsoft Teams の Power Apps テンプレートには、それぞれのシナリオで最も一般的なデータポイントを追跡できるように、事前定義の列が多数含まれています。たとえば、マイルストーンアプリ (https://aka.ms/TeamsMilestones) では、作業項目のカテゴリと優先度が追跡できます。

この記事では、作業項目に新しい列/フィールドを追加する方法について説明します。この例では、特定の作業項目に必要な工数 (Effort) をキャプチャするための新しいフィールドを追加します。フィールドの追加先は、デスクトップとモバイルの両方の新規と編集の作業項目画面です。

このビデオでは、マイルストーンサンプルアプリに新しい列を追加して、作業項目を追跡する方法について説明しています:

前提条件

この演習を完了するには、Teams にログインする機能が必要です—この機能は、選択した Microsoft 365 サブスクリプションの一部として提供され、マイルストーンアプリも Teams チャネルにインストールされます。インストールされていない場合は、からインストールできますhttps://aka.ms/teamsmilestones。

Power Apps のオープン

Teams で Power Apps を開く方法:

Teams アプリの Power Apps Studio は、以下に示すようにポップアウトできます。
Teams Web アプリの使用中に Power Apps Studio をポップアウトするには、上部にあるビルドタブを右クリックし、新しいタブで開くオプションを選択して別のタブにエディターを開きます。

マイルストーンアプリをカスタマイズする

アプリに列を追加するには、まず基になるテーブルにフィールドを追加し、それをアプリ画面に追加します。

作業項目テーブルに新しいフィールドを作成する

Power Apps でビルドタブを選択します。
Teams リストから、マイルストーンアプリがインストールされているチームを選択します。
インストールされたアプリ を選択します。
マイルストーンタイルからマイルストーンアプリを選択します。
アプリが Power Apps で開きます。
左側のペインで データ ボタンを選択します。
プロジェクト作業項目テーブルを選択してから、省略記号をし、データの編集

を選択します。
列の追加 を選択して、新しい列を追加し、以下のスクリーンショットに示すような詳細を入力します。
- 名前 – Effort
- 種類 – 選択肢
- 選択肢 – S、M、L、XL
[作成]

を選択します。

新しい列がテーブルに追加されます。

作業項目の追加/編集ページに新しいフィールドを追加する

作業項目の追加/編集ページに Effort フィールド/列を追加するには、次のような変更が必要です。

カテゴリラベルをコピーして画面に貼り付けます。この手順を行うことで、コンポーネントのスタイルがアプリ内の他のコントロールと一致します。

注意

新しいコントロールは、非表示のコントロール画面からコピーして貼り付けることもできます。この方法のメリットは、コントロールのすべてのスタイリングプロパティがすでに設定されているため、すべてのスタイリングプロパティを更新する必要がない点です。
新しく追加したラベルの名前を lblAddWorkItemEffort に変更します。
Text プロパティを Effort に設定します。
X プロパティを lblAddWorkItemAssignedTo.X に設定します。
Y プロパティを cmbAddWorkItemCategory.Y+cmbAddWorkItemCategory.Height+20 に設定します。
説明ラベルを選択します。
X プロパティを lblAddWorkItemMilestone.X に更新します。
Y プロパティを cmbAddWorkItemCategory.Y+cmbAddWorkItemCategory.Height+20 に更新します。
説明テキストボックスを選択します。
X プロパティを lblAddWorkItemMilestone.X に更新します。
Y プロパティを lblAddWorkItemDesc.Y + lblAddWorkItemDesc.Height に更新します。
Width プロパティ 'Parent.Width --Self.X –30` を更新します。
次に、カテゴリコンボボックス (cmbAddWorkItemCategory) をコピーして貼り付けます。
新しく追加したコンボボックスの名前を「cmbAddWorkItemEffort」に変更します。
Width プロパティ 'lblAddWorkItemAssignedTo.X' を設定します。
X プロパティ 'lblAddWorkItemAssignedTo.X' を設定します。
Y プロパティ 'lblAddWorkItemEffort.Y + lblAddWorkItemEffort.Height を設定します。
Items プロパティ 'Choices('Effort (Project Work Items)')** を設定します。
SelectionFill プロパティ 'gblAppStyles.Dropdown.SelectionFill を設定します。
DefaultSelectedItems 'If(locEditWorkItem, [locSelectedWorkItem.Effort]) を設定します。
完了ボタンを選択し、説明式 'Description: txtAddWorkItemDesc.Text,' のすぐ後にある両方の Patch 関数 'Effort: cmbAddWorkItemEffort.Selected.Value' に以下を追加します。

説明式の更新

下のように、新しく追加した列が画面に表示されます。

更新された画面

モバイル作業項目の詳細画面に新しいフィールドを追加する

フィールドを追加したので、今度はそれをモバイル画面に追加します。

ツリービューでモバイル作業項目の詳細画面を選択します。
アプリをプレビューモードで実行し、作業項目を開きます。
作業項目の詳細コンテナーが開きます。
Effort というテキストの新しいラベルと、工数の値をキャプチャする新しいコンボボックスを追加し、画面の書式を設定してから、最後に完了ボタンの OnSelect プロパティの Patch 関数にフィールド値を追加します。
状態ラベルをコピーして貼り付けます。
新しく追加したラベルの名前を 'lblMobileWorkItemDetailEffortLabel' に変更します。
Text プロパティを 'Effort' に設定します。

注意

このドキュメントでは、ローカライズを意図していないため、Text プロパティは Effort のままにします。アプリをローカライズする場合は、ローカライズドキュメントを更新して Effort という言葉のすべての言語のタグを含めてから、新しく追加したフィールドをローカライズするのが理想的です。

X プロパティ '80*1' を設定します。
Y プロパティ 'shpMobileWorkItemDetailSeparator_6.Y+shpMobileWorkItemDetailSeparator_6.Height+10` を設定します。
shpMobileWorkItemDetailSeparator_6 コントロールをコピーして貼り付けます。
新しくした図形コントロールの名前は shpMobileWorkItemDetailSeparator_8 です。
X プロパティ 'lblMobileWorkItemDetailNameLabel.X + 5` を設定します。
Y プロパティ 'lblMobileWorkItemDetailEffortLabel.Y + lblMobileWorkItemDetailEffortLabel.Height + 10` を設定します。
shpMobileWorkItemDetailSeparator_7 を選択し、Height プロパティを shpMobileWorkItemDetailSeparator\_8.Y + shpMobileWorkItemSeparator.Height - Self.Y に更新します。
説明ラベルを選択します。
X プロパティ 'imgMobileWorkItemDetailStatus.X` を更新します。
Y プロパティ 'shpMobileWorkItemDetailSeparator_8.Y + shpMobileWorkItemDetailSeparator_8.Height + 20` を更新します。
説明テキストボックスを選択します。
X プロパティ 'imgMobileWorkItemDetailStatus.X` を更新します。
Y プロパティ 'lblMobileEditWorkItemDesc.Y + lblMobileEditWorkItemDesc.Height` を更新します。
次に、状態値ラベル (lblMobileWorkItemDetailStatus) をコピーして貼り付けます。
新しく追加したコンボボックスの名前を **cmbMobileEditWorkItemEffort に変更します。
Width プロパティ 'Parent.Width - Self.X – 80` を設定します。
X プロパティ 'shpMobileWorkItemDetailSeparator_7.X + shpMobileWorkItemDetailSeparator_7.Width + 20` を設定します。
Y プロパティ 'shpMobileWorkItemDetailSeparator_6.Y+shpMobileWorkItemDetailSeparator_6.Height+10` を設定します。
Text プロパティを locMobileSelectedWorkItem.Effort に設定します。
完了ボタンを選択し、次の手順を Patch 関数 Effort: cmbAddWorkItemEffort.Selected.Value に追加します。

工数値の修正

更新された画面は、下のようになります。

モバイル作業項目の詳細画面

上記のシナリオと同様に、新しい作業項目の詳細画面に Effort フィールドを追加する必要があります。

新しい作業項目の詳細画面に新しいフィールドを追加する

ツリービューでモバイル作業項目の詳細画面を選択します。
アプリをプレビューモードで実行し、+ 記号を選択して新しい作業項目を追加します。
新しい作業項目コンテナー画面が開きます。
新しい作業項目コンテナー画面が表示されるようになります。
優先度ラベルをコピーして貼り付けます。
新しく追加したラベルの名前を lblMobileAddWorkItemEffort に変更します。
Text プロパティを Effort に設定します。

注意

X プロパティ 'lblMobileAddWorkItemMilestone.X` を設定します。
Y プロパティ 'datMobileAddWorkItemTargetDate.Y + datMobileAddWorkItemTargetDate.Height + 20` を設定します。
優先度コンボボックス (cmbMobileEditWorkItemStatus) をコピーして貼り付けます。
新しく追加したコンボボックスの名前を cmbMobileAddWorkItemEffort に変更します。
X プロパティ 'lblMobileAddWorkItemMilestone.X` を設定します。
Y プロパティ 'lblMobileAddWorkItemEffort.Y + lblMobileAddWorkItemEffort.Height` を設定します。
Width プロパティ 'txtMobileAddWorkItemName.Width` を設定します。
Items プロパティ 'Choices('Effort (Project Work Items)')` を設定します。
SelectionFill プロパティ 'gblAppStyles.Dropdown.SelectionFill` を設定します。
説明ラベルを選択します。
X プロパティ 'lblMobileAddWorkItemProjectName.X` を更新します。
Y プロパティ 'cmbMobileAddWorkItemEffort.Y + cmbMobileAddWorkItemEffort.Height + 20` を更新します。
説明テキストボックスを選択します。
X プロパティ 'lblMobileAddWorkItemProjectName.X` を更新します。
Y プロパティ 'lblMobileAddWorkItemDesc.Y + lblMobileAddWorkItemDesc.Height` を更新します。
作成ボタンを選択し、次の手順を Patch 関数 Effort: cmbMobileAddWorkItemEffort.Selected.Value に追加します。
Effort フィールドを追加して更新された画面は、下のようになります。

更新されたモバイル画面

任意: 新しいフィールドをホームページの作業項目リストに追加する

データテーブルに新しいフィールドを追加し、デスクトップ画面とモバイル画面にも追加して作業項目として表示されるようにしました。

作業項目は、アプリのメイン画面でも、選択したプロジェクトのコンテキストで一覧表示されます。メイン画面のプロジェクト作業項目のリストに新しいフィールドを表示するには、次の手順を実行します。

注意

作業項目ギャラリーは、レスポンシブに設計されています。ギャラリーのヘッダーは、ギャラリーの外部にあるボタンを使用します。ギャラリーの外部のボタンを使用する場合は、ボタンがギャラリーの横方向にはスクロールしないことに注意してください。横に並べるフィールドの数を画面の幅に合わせて制限し、スクロールしなくてもすべて表示されるようにする必要があります。応答性が低下したり、ギャラリーのスクロールが必要になったりしないよう、フィールドを追加するのではなく、既存のフィールドの 1 つを置き換えることをお勧めします。

ツリービューから galWorkItems を選択し、展開します。
新しいフィールドに置き換える列を特定します。たとえば、ターゲットを新しいトラッカーフィールドで置き換える場合は、lblWorkItemETA コントロールを選択します。
このフィールドの Text プロパティの式を新しいフィールド参照で更新します。

アプリの公開とテスト

エディターの右上にある Teams で公開ボタンを選択します。
アプリを Teams で開き、新しい作業項目画面でテストを行います。
エディターに移動して作業項目テーブルを調べ、レコードが作成されていること、更新されて Effort フィールド値が加わっていることを確認します。
同様に、モバイル Teams アプリでもテストを実行し、モバイル画面に加えられた変更を確認します。

作業項目を追跡するための新しい列をマイルストーンサンプルアプリに追加する

前提条件

Power Apps のオープン