元の作成者がアイデア投稿を編集できるようにする

[アーティクル]
05/26/2022

Microsoft Teams の従業員アイデア投稿サンプルアプリは、さまざまなキャンペーン (つまり、共通のテーマに基づいてアイデアをグループ化するためのカテゴリ) のアイデアを従業員が送信するためのプラットフォームを提供します。

アイデア投稿アプリを使用すると、マネージャーはキャンペーンを設定でき、ユーザーはアイデアを送信したり、他のユーザーのアイデアを表示したり、自分が一番好きなアイデアに投票したりできます。管理者やマネージャーはキャンペーンを編集することでエクスペリエンスをカスタマイズして、アイデアを投稿する人が回答する必要のある根拠のある質問を指定したり、アイデアの投稿ができる期間のしきい値を指定したりできます。このアプリには、その週に誰が最も多くのアイデアを提出しているか、また誰が最も人気のあるアイデアを提出しているかについての洞察も含まれています。

しかし、ユーザーがアイデアを投稿した後で、アイデアに関する詳細を追加したい場合はどうでしょうか? 標準の従業員アイデア投稿アプリには編集ボタンがありません。ただし、編集ボタンを追加する場合には、他の人が投稿したアイデアを誰かに編集されたくない場合があるため、ユーザーが編集できるアイデアを制限するように注意しなければなりません。

この記事では、アイデアの元の作成者がアイデアを編集できるようにする方法を説明します。

注意

この記事の手順を開始する前に、従業員アイデア投稿アプリをカスタマイズするをお読みください。

このビデオでは、アイデアを作成者が編集できるようにする方法について説明します:

前提条件

このチュートリアルを完了するには、Microsoft Teams にサインインする必要があり、一部の Microsoft 365 サブスクリプションからサインインできます。また、従業員アイデア投稿サンプルアプリがインストールされている必要があります。このアプリは https://aka.ms/TeamsEmployeeIdeas を使用してインストールすることもできます。

Power Apps で従業員アイデア投稿を開く

Power Apps を使用して Microsoft Teams にある従業員アイデア投稿を開くには:

Microsoft Teams の左ペインにある Power Apps のアイコンを右クリックします。
ビルド タブを選択します。
左ペインから、従業員アイデア投稿アプリがインストールされているチームを選択します。
インストールされているアプリ を選択し、アイデア投稿 を選択してアプリを開きます。

キャンペーンの詳細画面に編集ボタンを追加します

次に、キャンペーンの詳細画面にアイデアを表示する際に編集画面を開くボタンを追加します。

ツリービューを選択して、キャンペーン概要画面 を開きます。
キーボードの Alt キーを押して、下からキャンペーンのうちの 1 つを選択します。このアクションで、選択したキャンペーンのアイデア投稿のリストから 概要詳細画面 を開きます。
左ペインのツリービューから conCampaignIdeaControls を選択します。
+ (挿入) を選択して、ボタン を選択し、コンテナーに新しいボタンを追加します。

次のボタンのプロパティを更新します:

プロパティ	値
件名	btnCampaignIdeaControls_Edit
テキスト	「編集」
ButtonType	「プライマリ」
X	Parent.Width - btnCampaignIdeaControls_Share.Width - Self.Width-30
年	(Parent.Height - Self.Height) / 2
幅	96
高さ	32
Visible	!locCreateNewIdea And locVisibleCampaignIdea

新しい画面を追加します

次に、編集ボタンを選択したときに選択したアイデアを編集するための画面を追加します。

左ペインからツリービューを選択します。
新規画面 ボタンを選択して新しい画面を追加します。
空白のレイアウト を選択します。
画面の名前を "Edit Idea Screen" に変更します。
画面の Fill プロパティを選択して、数式バーの値を gblAppStyles.Background.Fill に設定します。
キャンペーン詳細画面 に戻り、編集ボタンを選択します。

現在のアイデアレコードの詳細を取得して、編集画面に送信する必要があります。これを行うには、次の OnSelect プロパティを更新します

OnSelect = 

   Clear(colResponses);

   Collect(

   colResponses,

   {

   appRef: GUID(),

   msft_name: "Title",

   msft_snapshot_sequence: -2,

   msft_employeeidea_responsetypecode: 'Employee Idea Response Type'.'Text
   (Single Line)',

   msft_responsetext: gblRecordCampaignIdea.Title,

   msft_responserating: Blank(),

   msft_snapshot_ratinghightext: "",

   msft_snapshot_ratinglowtext: ""

   },

   {

   appRef: GUID(),

   msft_name: "Description",

   msft_snapshot_sequence: -1,

   msft_employeeidea_responsetypecode: 'Employee Idea Response Type'.'Text
   (Multiple Lines)',

   msft_responsetext: gblRecordCampaignIdea.Description,

   msft_responserating: Blank(),

   msft_snapshot_ratinghightext: "",

   msft_snapshot_ratinglowtext: ""

   }

   );

   Collect(

   colResponses,

   Filter(

   'Employee Idea Responses',

   Idea.msft_employeeideaid = gblRecordCampaignIdea.msft_employeeideaid

   )

   );

 Navigate('Edit Idea Screen')

ヘッダーコンポーネントを追加します

従業員アイデア投稿アプリは、ヘッダーコンポーネントを使用して、画面間で一貫したメニューエクスペリエンスを提供します。このコンポーネントを新しい画面にコピーして、ユーザーが新しい画面で他のアプリ画面に移動できるようにします。

キャンペーン詳細画面 に移動する。
comHeader_CampaignDetail をコピーして、その画面からコンテナーを作成し、いま追加した新しい画面に貼り付けます。
コンテナーの名前を comHeader_CampaignDetail_EditScreen に変更します。
comHeader_CampaignDetail_EditScreen の inputHeaderSettings プロパティを選択して、次の数式を貼り付けます。
```
{

headerLabel: "Edit Idea",

headerTooltip: "Edit Idea",

headerWidth: 240,

headerScreen: 'Edit Idea Screen'

}
```
関数リストから inputHelpIcon プロパティを選択して、数式バーから内容を削除します。
関数リストから inputHelpScreen プロパティを選択して、数式バーから内容を削除します。
実際には何もしませんが、リンクボタンがヘッダーに表示される場合があります。ボタンを削除するには:
- ヘッダーコンポーネントタブを選択して、ツリービューで コンポーネント タブに移動します。
- btnHeaderExternalLink タブを選択します。
- 表示コントロールのプロパティを選択して最後のかっこ ")" を削除し、再度追加します。

これで、画面に戻ると、表示されているプロパティが更新され、リンクボタンが表示されなくなります。

キャンペーン詳細画面 に戻り、conCampaignDetailNav をコンテナーにコピーします。
アイデア画面の編集 に戻り、コピーしたコンテナーを貼り付けます。
次のプロパティを設定します。

プロパティ値

件名 conCampaignDetailNav_EditScreen

X 0

この変更によりエラーが発生しますが、これは想定されたものです。これらは次のステップで修正します。
imgCampaignDetail_SortGallery_1 – DisplayMode の数式エラーについては、別の画面から数式をコピーしたために新しいアイデアかどうかを確認する変数がありました。この画面は編集のみに使用されるため、DisplayMode の数式を次のように更新してください。
```
If(

locVisibleCampaignView,

DisplayMode.Edit,

locVisibleCampaignIdea,

DisplayMode.Edit,

DisplayMode.Disabled

)
```
galCampaignDetailNav_1 – DisplayMode の数式エラーについては、別の画面から数式をコピーしたため、新しいアイデアかどうかを確認する変数がありました。この画面は編集のみに使用されるため、DisplayMode の数式を更新してください
```
If(

locVisibleCampaignView,

DisplayMode.Edit,

locVisibleCampaignIdea,

DisplayMode.Edit,

DisplayMode.Disabled

)
```

プロパティ	値
件名	conCampaignDetailNav_EditScreen
X	0

アイデアの詳細セクションに新しいコンテナーを追加します

次に、アイデア編集画面のアイデアの詳細セクションを含むコンテナーを追加します。

新しく追加した アイデア画面の編集 を選択します。
左ペインから + (挿入) ボタンを選択します。
レイアウト > コンテナー を選択します。コンテナーが追加されました。

コンテナーに次のプロパティを設定します。

プロパティ	値
件名	conIdeaEditPane
X	300
年	comHeader_CampaignDetail_EditScreen.Y + comHeader_CampaignDetail_EditScreen.Height
幅	Parent.Width - conCampaignDetailNav_EditScreen.Width
高さ	Parent.Height - Self.Y

上記の手順を使用して、この新しいコンテナー内に別のコンテナーを追加します。
コンテナーに次のプロパティを設定します

プロパティ値

件名 conCampaignIdeaControls_EditScreen

X 0

年 0

幅 Parent.Width

高さ 60
キャンペーン詳細画面 に移動して、btnCampaignIdeaControls_Edit、btnCampaignIdeaControls_Back、imgCampaignIdeaControls_Back コントロールをコピーします。
アイデア画面の編集 に戻り、最初に追加したコンテナーを選択します。
このコンテナーにコピーしたコントロールを貼り付けます。
btnCampaignIdeaControls_Back_1 の OnSelect プロパティを Navigate (キャンペーン詳細画面) に更新します。
btnCampaignIdeaControls_Edit_1 を選択して、次のプロパティを更新します。

プロパティ値

テキスト「更新」

Visible 正

X Parent.Width - Self.Width – 20

年 (Parent.Height - Self.Height) / 2

幅 96

高さ 32
先に追加した新しいコンテナー (conIdeaEditPane) にキャンバスを追加する必要があります。キャンバスを追加するには、新しい画面 > シナリオ > スクロール可能 で、スクロール可能な新しい画面を追加して、そのキャンバスをコピーします。
アイデア画面の編集 に戻り、コンテナー conIdeaEditPane を選択して、キャンバスを貼り付けます。キャンバスがコンテナーに貼り付けられました。
キャンバスに、次のプロパティを設定します。

プロパティ値

件名 canvasEditScreen

X 0

年 conCampaignIdeaControls_EditScreen.Y + conCampaignIdeaControls_EditScreen.Height

幅 Parent.Width

高さ Parent.Height - Self.Y
キャンペーン詳細画面 に戻り、galIdeaResponses ギャラリーをコピーします。
アイデア画面の編集 に戻り、前の手順で追加したキャンバスを選択します。
ギャラリーをキャンバスに貼り付けます。
shpIdeaResponseRating_Value_1 の BorderThickness プロパティにエラーが表示される場合があります。
galIdeaResponses にプロパティを設定します。

プロパティ値

BorderThickness If((ThisItem.appRefNo <> ThisItem.appRatingValue),1,0)

X 0

年 0

プロパティ	値
件名	conCampaignIdeaControls_EditScreen
X	0
年	0
幅	Parent.Width
高さ	60

プロパティ	値
テキスト	「更新」
Visible	正
X	Parent.Width - Self.Width – 20
年	(Parent.Height - Self.Height) / 2
幅	96
高さ	32

プロパティ	値
件名	canvasEditScreen
X	0
年	conCampaignIdeaControls_EditScreen.Y + conCampaignIdeaControls_EditScreen.Height
幅	Parent.Width
高さ	Parent.Height - Self.Y

プロパティ	値
BorderThickness	If((ThisItem.appRefNo <> ThisItem.appRatingValue),1,0)
X	0
年	0

編集エクスペリエンスを新しいアイデアエクスペリエンスと一致させるため、次の galIdeaResponseRating_1 の アイテム のプロパティを更新します。

With(
    {varRecord: ThisItem},
    Table(
        {
        appRefNo: 1,
        appRef: varRecord.'Employee Idea Response',
        appRatingValue: varRecord.'Response Rating',
        appRatingTextLow: varRecord.'Rating Text (Low)',
        appRatingTextHigh: varRecord.'Rating Text (High)'
        },
        {
        appRefNo: 2,
        appRef: varRecord.'Employee Idea Response',
        appRatingValue: varRecord.'Response Rating',
        appRatingTextLow: varRecord.'Rating Text (Low)',
        appRatingTextHigh: varRecord.'Rating Text (High)'
        },
        {
        appRefNo: 3,
        appRef: varRecord.'Employee Idea Response',
        appRatingValue: varRecord.'Response Rating',
        appRatingTextLow: varRecord.'Rating Text (Low)',
        appRatingTextHigh: varRecord.'Rating Text (High)'
        },
        {
        appRefNo: 4,
        appRef: varRecord.'Employee Idea Response',
        appRatingValue: varRecord.'Response Rating',
        appRatingTextLow: varRecord.'Rating Text (Low)',
        appRatingTextHigh: varRecord.'Rating Text (High)'
        },
        {
        appRefNo: 5,
        appRef: varRecord.'Employee Idea Response',
        appRatingValue: varRecord.'Response Rating',
        appRatingTextLow: varRecord.'Rating Text (Low)',
        appRatingTextHigh: varRecord.'Rating Text (High)'
        }
    )
)

imgIdeaResponseRating_Select_1 の OnSelect プロパティを更新します。

UpdateIf(
    colResponses,
    colResponses[@'Employee Idea Response'] = ThisItem.appRef,
    {msft_responserating: ThisItem.appRefNo}
);

キャンペーン詳細画面 からキャンバスへ、コントロールを dtcFilesImages からコピーする必要があります。
新しく展開した アイデア画面の編集 を選択します。
galIdeaResponses_2 を選択して、コピーしたコントロールを貼り付けます。コントロールを貼り付けた場合、一緒にいくつかのエラーも表示されます。
1 つを除いたすべてのエラーは、コントロールの可視性に関連しています。エラーを選択して、数式バーを編集する を選択します。
すべてのコンロールが ture になるように 可視化 プロパティを設定します。
テキスト プロパティに lbldeaFiles_Header_2 のエラーがあります。
テキスト のプロパティを “Attachments” に更新します。
lbldeaFiles_Header_1 の Y プロパティを "galIdeaResponses_1.Y + galIdeaResponses_1.Height +20" に更新します。
添付セクション imgIdeaFile_Delete_1 から削除アイコンを選択して、OnSelect プロパティに Remove(colFiles,ThisItem);Collect(colRemovedFiles,ThisItem) を設定します。
キャンバスとともに追加されたデータカードを選択し、次のプロパティを更新します。

プロパティ値

X 0

年 0

幅 Parent.Width

高さ galIdeaFiles_1.Y + galIdeaFiles_1.Height + 20
データカードの下の galIdeaFiles_1 を選択します。
OnSelect プロパティを選択して、 Launch(ThisItem.msft_file.Value) を設定します。

プロパティ	値
X	0
年	0
幅	Parent.Width
高さ	galIdeaFiles_1.Y + galIdeaFiles_1.Height + 20

次に、選択したアイデアにパッチを適用して更新するようにボタンを設定します。 アイデア画面の編集 – コンテナー 3 から更新ボタンを選択して、次の数式に OnSelect プロパティを設定します。

UpdateContext({locSelectedIdea: gblRecordCampaignIdea.'Employee Idea'});

Patch(

'Employee Ideas',

gblRecordCampaignIdea,

{

Title: LookUp(

colResponses,

Sequence = -2,

msft_responsetext

),

Description: LookUp(

colResponses,

Sequence = -1,

msft_responsetext

),

'Attachment Count': CountRows(

Filter(

colFiles,

appIsNew

)

)

}

);

ForAll(

RenameColumns(

Filter(

colResponses,

Sequence >= 0,

!IsBlank('Employee Idea Response')

),

"msft_employeeidea_responseid",

"ResponseId"

),

Patch(

'Employee Idea Responses',

LookUp(

'Employee Idea Responses',

'Employee Idea Response' = ResponseId

),

{

Instructions: ThisRecord.Instructions,

Question: ThisRecord.msft_employeeidea_questionid,

Sequence: ThisRecord.Sequence,

'Response Type': ThisRecord.'Response Type',

'Response Text': ThisRecord.'Response Text',

'Response Rating': ThisRecord.'Response Rating',

'Rating Text (Low)': ThisRecord.'Rating Text (Low)',

'Rating Text (High)': ThisRecord.'Rating Text (High)'

}

)

);

ForAll(

Filter(

colFiles,

appIsNew

),

Patch(

'Employee Idea Files',

Defaults('Employee Idea Files'),

{

Idea: gblRecordCampaignIdea,

Name: Text(ThisRecord.msft_name),

File: {

FileName: Text(ThisRecord.msft_name),

Value: ThisRecord.appFileValue

}

}

)

);

ForAll(

colRemovedFiles,

Remove(

'Employee Idea Files',

ThisRecord

)

);

Set(

gblRecordCampaignIdea,

LookUp(

'Employee Ideas',

'Employee Idea' = locSelectedIdea

)

);

ClearCollect(

colResponses,

Filter(

'Employee Idea Responses',

Idea.msft_employeeideaid = gblRecordCampaignIdea.msft_employeeideaid

)

);

ClearCollect(

colFiles,

Filter(

'Employee Idea Files',

'Employee Idea Files'[@Idea].'Employee Idea' = gblRecordCampaignIdea.'Employee
Idea'

)

);

Set(

gblRecordCampaignIdea,

LookUp(

'Employee Ideas',

'Employee Idea' = locSelectedIdea

)

);

Navigate(

'Campaign Detail Screen',

ScreenTransition.None,

{

locVisibleCampaignIdea: true,

locVisibleCampaignView: false,

locCreateNewIdea: false

}

)

##

アイデア投稿アプリを公開します

掲示板アプリの変更がすべて完了しました。これで、右上の Teams に公開 ボタンを選択してアプリを公開できます。

アプリをテストする

最後に、アプリをテストして、アイデアを編集してみましょう。

Teams にログインして、アイデア投稿アプリがインストールされているチームに移動します。
トップの アイデア投稿 タブを選択します。
キャンペーンの 1 つの例として、職場の安全 を選択します。
ユーザーによって作成されたアイデアを開きます。アイデアには、アイデアの作成者名が記載されている必要があります。
キャンペーン詳細画面 に編集ボタンが表示されているのを確認します。
編集ボタンを選択して、アイデアの編集 画面が開くことを確認します。
すべての詳細が画面に表示されていることを確認します。
アイデアにいくつかの変更を加えてから、更新ボタンを選択します。
キャンペーンアイデアの詳細 画面に戻り、行ったすべての変更が保存され、この画面に表示されていることを確認します。

元の作成者がアイデア投稿を編集できるようにする

前提条件

Power Apps で従業員アイデア投稿を開く

キャンペーンの詳細画面に編集ボタンを追加します

新しい画面を追加します

ヘッダーコンポーネントを追加します

左側のナビゲーションコンポーネントを追加します

アイデアの詳細セクションに新しいコンテナーを追加します

アイデア投稿アプリを公開します

アプリをテストする

関連項目

フィードバック

元の作成者がアイデア投稿を編集できるようにする

前提条件

Power Apps で従業員アイデア投稿を開く

キャンペーンの詳細画面に編集ボタンを追加します

新しい画面を追加します

ヘッダー コンポーネントを追加します

左側のナビゲーション コンポーネントを追加します

アイデアの詳細セクションに新しいコンテナーを追加します

アイデア投稿アプリを公開します

アプリをテストする

関連項目

フィードバック

ヘッダーコンポーネントを追加します

左側のナビゲーションコンポーネントを追加します