How-to サンプル アプリを使用する (プレビュー)
[この記事はプレリリース ドキュメントであり、変更されることがあります。]
Microsoft Teams の How-to テンプレート アプリによって、データ モデル、画面、画面の接続の設計を段階的に行い、完全な Power Apps資産チェックアウト ソリューションを構築することで、簡単に Power Apps 開発者になれる方法を提供します。
How-to アプリを使用する利点:
- Power Apps の基本の理解。
- Teams でアプリを作成する方法を説明します。
- 作成した資産チェックアウト アプリを Teams の同僚と共有します。
- 開発者になるには
注意
このアプリを使用する前に、接続を使用するためのアクセス許可を求められる場合があります。 詳細: サンプル アプリで接続を許可する このアプリは、デフォルト、ダーク、ハイコントラストの 3 つの異なるチーム テーマで利用できます。 Teams でテーマを変更する 場合、アプリは選択したテーマに一致するように自動的に更新されます。 詳細: Teams 統合オブジェクトを使用して Teams テーマを取得する
重要
- これはプレビュー機能です。
- プレビュー機能は運用環境での使用を想定しておらず、機能が制限されている可能性があります。 これらの機能を公式リリースの前に使用できるようにすることで、顧客が一足先にアクセスし、そこからフィードバックを得ることができます。
前提条件
このアプリを使用する前に:
- How-to アプリをインストールします。
- 初めて使用するためにアプリを設定します。
上記の手順の詳細については、Teams ストアのサンプル アプリを使用する を参照してください。
資産管理アプリを作成します
How-to アプリで、ユーザーがライブラリから資産をチェックアウトして、終了したら返却できるように資産管理アプリを作成します。 手順はアプリに入っており、Team の Power Apps アプリで開発者がアプリを開くと、 studio の手順が表示されます。
この記事は、アプリ以外から手順を読みたい開発者向けに、アプリの手順を記載しています。 たとえば、2 台のモニターがあって手順を別の画面で開きたい場合や、印刷したい場合などです。
メイン画面から How-to アプリを構築する手順や、アプリのプレビュー機能を構築するための手順の概要を見ることができます。
Power Apps の開始する を選択すると、Teams Power Apps アプリが開いて開発者体験が始まります。 アプリのプレビュー を選択するとユーザーは資産画面にリダイレクトされ、資産チェックアウト アプリを使用して、アプリが終了したときの最終的なエクスペリエンスを確認できます。
資産チェックアウト アプリでアイテムを選択すると、アイテムをチェックアウトできる画面が表示されます。
左上のコーナーで、取引先企業で使用できるチェックアウト アイテムのアイコンを選択できます。
How-to で開発者体験を始めましょう
How-to は、Power Apps を作成する自己完結型のレッスンです。 すべての手順は、アプリに入っています。 学習を開始するには、Teams の Power Apps アプリを使用して How-to アプリを開きます。
Teams で、左ペインから ...(省略記号) を選択します。
Power Apps を検索して、 Power Apps アプリを選択します。
Power Apps ボタンを右クリックして選択して、ポップアウト アプリ を選択し、使いやすいように Power Apps アプリを新しいウィンドウで起動します。
ビルド タブを選択します。
How-to がインストールされているチームを選択します。
インストールされたアプリ を選択します。
How-to タイルで、How-to アプリを選択します。 アプリが Power Apps アプリで開きます。
ツリー ビューの画面で、概要画面 を選択します。
概要画面を理解する
概要画面は、開発者体験へのガイドです。 概要画面から、現在進行中の場所を確認できます。 手順を開始するには、キーボードの Alt キーを押しながら、開始 ボタンを選択します。 これにより、関連する画面が表示され、そこから手順を完了するための手順が表示されます。
完了したら概要画面に戻り、現在の手順のタイルのボタンを選択して手順を終了し、次のレッスンに進みます。
How-to の進捗状況をリセットする
How-to のレッスンを開始した後、最初からやり直したい場合は、次の手順に従ってプロセスを再開できます。
Teams で Power Apps アプリを右クリックして、ポップアウト を選択します。
ビルド タブを選択します。
How-to アプリをインストールしたチームを選択します。
インストール済みアプリ タブを選択します。
How-to タイルで 、すべて表示 を選択します。
テーブル を選択します。
アイテム チェックアウト アプリのステージ を選択します。
データの編集 を選択します。
テーブルの行を選択します。
レコードを削除します を選択します。
データ モデルの処理について説明します
この手順では、3 つのテーブルを追加します。 アイテム タイプ、アイテム、およびアイテム チェックアウトとしてテーブル名を作成します。 データを格納するためのテーブルが作成されます。
テーブルの作成方法の詳細手順については、Excel でテーブルデータを編集して、Dataverse for Teams に戻って公開する を参照してください
次のテーブルと列を作成します。
項目の種類
| 列名 | 日付タイプ | 値 |
|---|---|---|
| チェックアウト管理者 | テキスト | 適用なし |
| チェックアウト アドレス | テキスト | 適用なし |
アイテム
| 列名 | 日付タイプ | 値 |
|---|---|---|
| 数量 | 整数 | 適用なし |
| 内容 | 複数行テキスト | 適用なし |
| Image | Image | 適用なし |
| 項目の種類 | 参照 | 関連テーブル = アイテム タイプ |
アイテムのチェックアウト
| 列名 | 日付タイプ | 値 |
|---|---|---|
| 件名 | オートナンバー | 適用なし |
| アイテム | 参照 | 関連テーブル = アイテム |
| チェックアウトの理由 | 選択肢 | リモート ワーク、新しいプロジェクトの割り当て |
| チェックアウト オプション | 選択肢 | 集荷、配達 |
| チェックアウト期間 | 選択肢 | 7 日、30 日 |
| チェックアウトの状態 | 選択肢 | アクティブ、戻り |
サンプル データ
この手順では、前に作成したテーブルにデータを追加する必要があります。 このデータは、資産チェックアウト プロセスでのアイテムとアイテム タイプになります。 たとえば、このアプリを使用してマウスやキーボードなどのアイテムを管理している場合、ユーザーがチェックアウトできるコンピューター、電話、デスクなどのアイテム タイプを定義できます。
テーブルの編集可能なグリッドを使用して、アプリにサンプル データを入力します。 テーブルの編集可能なグリッドを使用するには、次の手順に従います。
Teams で Power Apps アプリを開きます。
ビルド タブを選択します。
How-to アプリをインストールしたチームを選択します。
インストール済みアプリ タブを選択します。
How-to タイルで 、すべて表示 を選択します。
テーブル を選択します。
アイテム チェックアウト アプリのステージ を選択します。
データの編集 を選択します。
注意
テーブルの編集可能なグリッドには、写真はインポートできません。
サンプル データ画面には、前の手順で作成したアイテムを選択して、それらに画像を関連付けできるギャラリーが含まれます。
UI コンポーネント
この手順では、アプリを作成するために、ボタンなどの事前に構築されたコントロールの詳細を確認します。 このアプリは Fluid UI フレームワーク上に構築されています。 新しいコントロールは、ボタン、チェック ボックス、コンボ ボックス、日付ピッカー、ラベル、ラジオ グループ、評価、スライダー、テキスト ボックス、トグルです。
Fluid UI フレームワークとコントロールの詳細については、次の Fluent UI フレームワーク およびPower Apps Teams に Fluent UI コントロールを使用する にアクセスしてください。
資産画面の作成
この手順では、チェックアウト可能なアイテムを表示する最初の画面を作成します。これがアプリケーションのプライマリ画面となり、ユーザーはそこからアイテムを検索して選択し、チェックアウトします。
次の手順でアプリの作成を始めます。
水平コンテナー conItemTypes は、ヘッダー ラベルとアイテム タイプのギャラリーを構成するために使用されます。 以下に示すように、そのプロパティを設定します:
プロパティ 値 件名 conItemTypes ギャップ 20 垂直方向のオーバーフロー LayoutOverflow.Scroll 最小幅 300 上部の余白 20 下部の余白 20 塗りつぶし If(gblThemeDark.ColorValue("#141414"), gblThemeHiCo,Black,White) conItemTypes に新しい水平コンテナーを追加します - conItemTypesHeader。 ヘッダー ラベルと画像で構成されます。
プロパティ 値 件名 conItemTypesHeader 右側の余白 10 最小高さ 12 高さ 32 左側の余白 20 conItemTypesHeader にラベルを追加します - lblAllAssetsHeader。 画面のヘッダー ラベルです。
プロパティ 値 件名 lblAllAssetsHeader フォント Segoe UI フォントの太さ 太字 高さ 32 幅 (伸縮可能) 正 X 20 テキスト 「すべての資産」 conItemTypesHeader に画像を追加します - imgCheckout。 これは、ユーザーを既存のチェックアウトにナビゲートするために使用されます。
プロパティ 値 件名 imgCheckout 高さ 32 幅 32 Image If(gblThemeDark||gblThemeHiCo,Checkout_Dark,Checkout) conItemTypes に空白の垂直ギャラリーを追加します – galItemTypes。 アイテムタイプのギャラリーです。 アイテム タイプを選択すると、関連アイテムが表示されます。
プロパティ 値 件名 galItemTypes 項目 アイテムの種類 最小の高さ 12 一部塗りつぶし 19 テンプレート サイズ 70 テンプレートの余白 12 OnSelect UpdateContext({ locSelectedItemType: ThisItem, locShowItems: true }) テンプレートの入力 If(!('Items Screen'.Size = ScreenSize.Small), If(ThisItem.IsSelected, ColorValue("#E2E2F6"), Transparent), Transparent) galItemTypes にラベルを追加する – lblName。 アイテム タイプ名を表示するためのラベルです。
プロパティ 値 件名 lblName 幅 Parent.Width 高さ 32 X 20 年 5 テキスト ThisItem.Name フォントの太さ If(ThisItem.IsSelected,FontWeight.Semibold,FontWeight.Normal) フォント サイズ 10.5 galItemTypes にラベルを追加する – lblItemCount。 特定のアイテム タイプに属するアイテムの数を表示するためのラベルです。
プロパティ 値 件名 lblItemCount 幅 Parent.Width 高さ 32 X 20 年 lblName.Y + lblName.Height テキスト CountRows(ThisItem.Items.Item) & " items" フォント サイズ 10.5 水平コンテナー conItems は、ヘッダー ラベルと選択されたアイテム タイプのアイテムのギャラリーを構成するために使用されます。 以下に示すように、そのプロパティを設定します:
プロパティ 値 件名 conItems ギャップ 20 上部の余白 20 左側の余白 20 右側の余白 20 垂直方向のオーバーフロー Overflow.Scroll conItems にラベルを追加する–lblRelatedItemsHeader。 選択されたアイテム タイプに関連するアイテムの数を表示するためのラベルです。
プロパティ 値 件名 lblRelatedItemsHeader テキスト CountRows(locSelectedItemType.Items.Item) & " items available" コンテナー内に配置 AlignInContainer.Stretch フォントの太さ FontWeight.Semibold フォント サイズ 15 X 707*1 年 265*1 conItems に空白の垂直ギャラリーを追加します – galItems。 これは、選択されたアイテム タイプに属するアイテムを表示するギャラリーです。
プロパティ 値 件名 galItems 項目 locSelectedItemType.Items TemplateSize 130 galItems にボタンを追加–btnItemsBackground。 これは、各アイテムに白い背景を追加するためです。
プロパティ 値 件名 btnItemsBackground X 5 年 12 塗りつぶし 白人 高さ Parent.TemplateHeight - 20 幅 Parent.TemplateWidth - Self.X*2 galItems に画像を追加する – imgItem。 これは、アイテムの画像またはロゴを表示するためのものです。
Control プロパティ 値 galItems に画像を追加する 件名 imgItem imgItem X 5 imgItem 年 12 imgItem 幅 125 imgItem 高さ 110 imgItem ImagePosition ImagePosition.Fill imgItem Image ThisItem.Image.Full galItems にラベルを追加する – lblItemName。 これは、アイテムの名前を表示するためのものです。
プロパティ 値 件名 lblItemName 年 imgItem.Y + 5 X imgItem.X + imgItem.Width +20 テキスト ThisItem.Name 幅 btnItemsBackground.Width - Self.X フォント サイズ 10.5 FontWeight FontWeight.Semibold galItems にラベルを追加する – lblItemQuantity。 これは、チェックアウト可能なアイテムの数を表示します。
プロパティ 値 件名 lblItemQuantity X lblItemName.X 年 lblItemName.Y + lblItemName.Height テキスト ThisItem.Quantity-CountRows(Filter('Item Checkouts',Item.Item=ThisItem.Item,'Checkout Status'='Checkout Statuses'.Active))&" available" 垂直方向の配置 下詰め 幅 btnItemsBackground.Width - Self.X フォント サイズ 10.5 galItems にラベルを追加する – lblItemDesc。 これは、アイテムの説明を表示するためのものです。
プロパティ 値 件名 lblItemDesc X lblItemName.X 年 lblItemQuantity.Y + lblItemQuantity.Height テキスト ThisItem.Description 垂直方向の配置 下詰め 幅 btnItemsBackground.Width - Self.X 折り返す 偽 galItems にボタンを追加 – btnItemsForeground。 これは、行全体を選択可能にするためのオーバーレイ ボタンです。
値 プロパティ btnItemsForeground 件名 RGBA(128, 128, 128, .06) HoverFill 透明 ホバー Fill を除く他のすべての Fill btnItemsBackground.X X btnItemsBackground.Y 年 btnItemsBackground.Width 幅
次に、以下に示すように、コントロール conItems および conItemTypes の一部塗りつぶしプロパティを設定します。アイテム タイプは画面の 25% をカバーし、残りの 75% はアイテムのリストでカバーされます。
| Control | プロパティ | 値 |
|---|---|---|
| conItems | 一部塗りつぶし | 3 |
| conItemTypes | 一部塗りつぶし | 6 |
Building checkout screen
この手順では、2番目の画面であるアイテムのチェックアウト画面を作成します。 この画面には、チェックアウトするアイテムの詳細と利用可能な数量が表示されます。
この画面から、ユーザーはチェックアウトの理由、期間、その他の詳細を入力し、チェックアウトプロセスを開始します。
| Control | プロパティ | 値 |
|---|---|---|
| チェックアウト画面 | OnVisible | UpdateContext({locShowCheckoutConfirmation: false}) |
| 親コンテナー | 件名 | conParent_Checkout |
| 1 番目の子コンテナー | 件名 | conItemTypes_Checkout |
| 2 番目の子コンテナー | 件名 | conCheckout |
| conItemTypes_Checkout | ギャップ | 20 |
| conItemTypes_Checkout | 垂直方向のオーバーフロー | LayoutOverflow.Scroll |
| conItemTypes_Checkout | 最小幅 | 300 |
| conItemTypes_Checkout | 上部の余白 | 20 |
| conItemTypes_Checkout | 下部の余白 | 20 |
| conItemTypes_Checkout | 塗りつぶし | If(gblThemeDark.ColorValue("#141414"),gblThemeHiCo,Black,White) |
conItemTypes_Checkout コントロールに水平コンテナーを追加します - conItemTypesHeader_Checkout。
Control プロパティ 値 conItemTypes_Checkout に水平コンテナーを追加します 件名 conItemTypesHeader_Checkout conItemTypesHeader_Checkout 左側の余白 20 conItemTypesHeader_Checkout 右側の余白 20 conItemTypesHeader_Checkout 最小高さ 12 conItemTypesHeader_Checkout 高さ 32 conItemTypesHeader_Checkout コントロールにラベルを追加します - lblAllAssetsHeader_Checkout。
Control プロパティ 値 conItemTypesHeader_Checkout にラベルを追加します 件名 lblAllAssetsHeader_Checkout lblAllAssetsHeader_Checkout フォント Segoe UI lblAllAssetsHeader_Checkout フォントの太さ 太字 lblAllAssetsHeader_Checkout 高さ 32 lblAllAssetsHeader_Checkout 幅 (伸縮可能) 正 lblAllAssetsHeader_Checkout テキスト 「すべての資産」 lblAllAssetsHeader_Checkout フォント サイズ 15 lblAllAssetsHeader_Checkout 最小幅 150 conItemTypesHeader_Checkout コントロールに画像を追加します - imgCheckout_Checkout。
Control プロパティ 値 conItemTypesHeader_Checkout に画像を追加します 件名 imgCheckout_Checkout imgCheckout_Checkout 高さ 32 imgCheckout_Checkout 太さ 32 imgCheckout_Checkout Image If(gblThemeDark||gblThemeHiCo,Checkout_Dark,Checkout) conItemTypes_Checkout コントロールに空白の垂直ギャラリーを追加します - galItemTypes_Checkout。
Control プロパティ 値 conItemTypes_Checkout に空白の垂直ギャラリーを追加します 件名 galItemTypes_Checkout galItemTypes_Checkout 項目 アイテムの種類 galItemTypes_Checkout 最小高さ 12 galItemTypes_Checkout 一部塗りつぶし 19 galItemTypes_Checkout テンプレート サイズ 70 galItemTypes_Checkout テンプレートの余白 12 テンプレートの入力 If(ThisItem.IsSelected, ColorValue("#E2E2F6"), Transparent) galItemTypes_Checkout コントロールにラベルを追加します - lblIName_Checkout。
Control プロパティ 値 galItemTypes_Checkout にラベルを追加します 件名 lblIName_Checkout lblIName_Checkout 幅 Parent.Width lblIName_Checkout 高さ 32 lblIName_Checkout X 20 lblIName_Checkout 年 5 lblIName_Checkout テキスト ThisItem.Name lblIName_Checkout フォントの太さ If(ThisItem.IsSelected,FontWeight.Semibold,FontWeight.Normal) galItemTypes_Checkout コントロールにラベルを追加します - lblItemCount_Checkout.
Control プロパティ 値 galItemTypes_Checkout にラベルを追加します 件名 lblItemCount_Checkout lblItemCount_Checkout 幅 Parent.Width lblItemCount_Checkout 高さ 32 lblItemCount_Checkout X 20 lblItemCount_Checkout 年 lblIName_Checkout.Y + lblIName_Checkout.Height lblItemCount_Checkout テキスト CountRows(ThisItem.Items.Item) & " items" 次に、以下に示すように、コントロール conMyCheckouts および conItemTypes_MyCheckouts の一部塗りつぶしプロパティを設定します。アイテム タイプは画面の 25% をカバーし、残りの 75% は自分のチェックアウトのリストでカバーされます。
Control プロパティ 値 conCheckout ギャップ 10 conCheckout 上部の余白 20 conCheckout 左側の余白 20 conCheckout 右側の余白 20 conCheckout 垂直方向のオーバーフロー Overflow.Scroll conCheckout Visible !locShowCheckoutConfirmation conCheckout コントロールにラベルを追加します - lblCheckoutHeader。
Control プロパティ 値 conCheckout にラベルを追加します 件名 lblCheckoutHeader lblCheckoutHeader テキスト 「チェックアウト」 lblCheckoutHeader 高さ 32 lblCheckoutHeader AlignInContainer AlignInContainer.Stretch lblCheckoutHeader フォント サイズ 15 lblCheckoutHeader フォントの太さ 中太字 conCheckout コントロールに画像を追加します - imgItem_Checkout。
Control プロパティ 値 conCheckout に画像を追加します 件名 imgItem_Checkout imgItem_Checkout Image locSelectedItem.Image.Full imgItem_Checkout 幅 375 imgItem_Checkout 高さ 300 imgItem_Checkout 境界線の半径 8 conCheckout コントロールにラベルを追加します - lblItemName_Checkout。
Control プロパティ 値 conCheckout にラベルを追加します 件名 lblItemName_Checkout lblItemName_Checkout テキスト locSelectedItem.Name lblItemName_Checkout 高さ 32 conCheckout コントロールにラベルを追加します - lblItemQuantity_Checkout。
Control プロパティ 値 conCheckout にラベルを追加します 件名 lblItemQuantity_Checkout lblItemQuantity_Checkout テキスト locSelectedItem.Quantity-CountRows(Filter('Item Checkouts',Item.Item=locSelectedItem.Item,'Checkout Status'='Checkout Statuses'.Active))&" available" lblItemQuantity_Checkout 高さ 32 conCheckout コントロールにラベルを追加します - lblItemDesc_Checkout。
Control プロパティ 値 conCheckout にラベルを追加します 件名 lblItemDesc_Checkout lblItemDesc_Checkout テキスト locSelectedItem.Description lblItemDesc_Checkout 高さ 59 conCheckout コントロールにラベルを追加します – lblCheckoutOptionsHeader。
Control プロパティ 値 conCheckout にラベルを追加します 件名 lblCheckoutOptionsHeader lblCheckoutOptionsHeader テキスト 「アイテムの受取方法」 lblCheckoutOptionsHeader 高さ 32 conCheckout コントロールにラジオ グループを追加します - rdoCheckoutOptions。
Control プロパティ 値 conCheckout にラジオ グループを追加します 件名 rdoCheckoutOptions rdoCheckoutOptions 項目 Choices('Checkout Options') rdoCheckoutOptions 高さ 50 rdoCheckoutOptions フィールド 値 conCheckout コントロールにラベルを追加します – lblCheckoutDurationHeader。
Control プロパティ 値 conCheckout にラベルを追加します 件名 lblCheckoutDurationHeader lblCheckoutDurationHeader テキスト 「アイテムを保持する期間」 lblCheckoutDurationHeader 高さ 32 conCheckout コントロールにコンボ ボックスを追加します – drpCheckoutDurationHeader。
Control プロパティ 値 conCheckout にコンボ ボックスを追加する 件名 drpCheckoutDurationHeader drpCheckoutDurationHeader 項目 Choices('Checkout Durations') drpCheckoutDurationHeader フィールド 値 conCheckout コントロールにラベルを追加します – lblCheckoutReasonHeader。
Control プロパティ 値 conCheckout にラベルを追加します 件名 lblCheckoutReasonHeader lblCheckoutReasonHeader テキスト 「アイテムをチェックアウトする理由」 lblCheckoutReasonHeader 高さ 32 conCheckout コントロールにコンボ ボックスを追加します – drpCheckoutReasonHeader。
Control プロパティ 値 conCheckout にコンボ ボックスを追加する 件名 drpCheckoutReasonHeader drpCheckoutReasonHeader 項目 Choices('Checkout Reasons') drpCheckoutReasonHeader フィールド 値 conCheckout コントロールにラベルを追加します – lblPickupAddressHeader。
Control プロパティ 値 conCheckout にラベルを追加します 件名 lblPickupAddressHeader lblPickupAddressHeader テキスト 「受取住所」 lblPickupAddressHeader 高さ 32 lblPickupAddressHeader Visible rdoCheckoutOptions.Selected.Value = 'Checkout Options'.Pickup conCheckout コントロールにラベルを追加します – lblPickupAddress。
Control プロパティ 値 conCheckout にラベルを追加します 件名 lblPickupAddress lblPickupAddress テキスト LookUp('Item Types','Item Type'=locSelectedItem.'Item Type'.'Item Type').'Checkout Address' lblPickupAddress 高さ 32*1 lblPickupAddress Visible rdoCheckoutOptions.Selected.Value = 'Checkout Options'.Pickup lblPickupAddress DisplayMode いいえ conCheckout コントロールにラベルを追加します – lblDeliveryAddressHeader。
Control プロパティ 値 conCheckout にラベルを追加します 件名 lblDeliveryAddressHeader lblDeliveryAddressHeader テキスト 「配送先住所」 lblDeliveryAddressHeader 高さ 32 lblDeliveryAddressHeader Visible rdoCheckoutOptions.Selected.Value = 'Checkout Options'.Delivery conCheckout コントロールにテキスト ボックスを追加します – txtDeliveryAddress。
Control プロパティ 値 conCheckout にテキスト ボックスを追加する 件名 txtDeliveryAddress lblPickupAddress 高さ 32*1 lblPickupAddress Visible rdoCheckoutOptions.Selected.Value = 'Checkout Options'.Delivery lblPickupAddress 値 「ここに住所を入力してください」 conCheckout コントロールに水平コンテナーを追加します – conCheckoutActions。
Control プロパティ 値 conCheckout に水平コンテナーを追加します 件名 conCheckoutActions conCheckoutActions LayoutJustifyContent LayoutJustifyContent.End conCheckoutActions LayoutAlignItems LayoutAlignItems conCheckoutActions ギャップ 20 conCheckoutActions 幅 500 conCheckoutActions 一部塗りつぶし 6 conCheckoutActions 最小高さ 100 conCheckoutActions コントロールにボタンを追加します – btnCancelCheckout。
Control プロパティ 値 conCheckoutActions にボタンを追加します 件名 btnCancelCheckout btnCancelCheckout 高さ 32*1 btnCancelCheckout 幅 110 btnCancelCheckout ボタンの種類 標準 btnCancelCheckout フォントの太さ 中太字 conCheckoutActions コントロールにボタンを追加します – btnSaveCheckout。
Control プロパティ 値 conCheckoutActions にボタンを追加します 件名 btnSaveCheckout btnCancelCheckout 高さ 32*1 btnCancelCheckout 幅 110 btnCancelCheckout ボタンの種類 基本 btnCancelCheckout フォントの太さ 中太字 btnCancelCheckout OnSelect Patch( 'Item Checkouts', Defaults('Item Checkouts'), { Item: locSelectedItem, Name: CountRows('Item Checkouts')+1000, 'Checkout Status': 'Checkout Statuses'.Active, 'Checkout Duration': drpCheckoutDurationHeader.Selected.Value, 'Checkout Option': rdoCheckoutOptions.Selected.Value, 'Checkout Reason': drpCheckoutReasonHeader.Selected.Value, 'Delivery Address': If( rdoCheckoutOptions.Selected.Value = 'Checkout Options'.Delivery, txtDeliveryAddress ) }); UpdateContext({locShowCheckoutConfirmation: true}) conParent_MyCheckouts コントロールに垂直コンテナーを追加します – conCheckoutConfirmation。
Control プロパティ 値 conParent_MyCheckouts に垂直コンテナーを追加します 件名 conCheckoutConfirmation conCheckoutConfirmation ギャップ 20 conCheckoutConfirmation 左側の余白 20 conCheckoutConfirmation 上部の余白 80 conCheckoutConfirmation 右側の余白 20 conCheckoutConfirmation 一部塗りつぶし 3 conCheckoutConfirmation Visible locShowCheckoutConfirmation conCheckoutConfirmation コントロールに画像を追加します - imgCheckoutConfirmation。
Control プロパティ 値 conCheckoutConfirmation に画像を追加します 件名 imgCheckoutConfirmation imgCheckoutConfirmation 幅 200 imgCheckoutConfirmation 高さ 200 imgCheckoutConfirmation ImagePosition ImagePosition.Fill imgCheckoutConfirmation Image 確認する conCheckoutConfirmation コントロールにラベルを追加します – lblCheckoutInfoMessage。
Control プロパティ 値 conCheckoutConfirmation にラベルを追加します 件名 lblCheckoutInfoMessage lblCheckoutInfoMessage X 707*1 lblCheckoutInfoMessage 年 225*1 lblCheckoutInfoMessage テキスト 準備が完了しました。 &If(rdoCheckoutOptions.Selected.Value='Checkout Options'.Delivery,"この"&locSelectedItem.Name&"は"&txtDeliveryAddress&"に配達予定です。",""&locSelectedItem.Name&"を"&locSelectedItem.'Item Type'.'Checkout Address'&"からピックアップできます。") lblCheckoutInfoMessage 幅 300*1 lblCheckoutInfoMessage 高さ 44 lblCheckoutInfoMessage フォント Segoe UI lblCheckoutInfoMessage フォント サイズ 10.5 lblCheckoutInfoMessage 配置 Align.Center conCheckoutConfirmation コントロールにラベルを追加します – lblCheckoutHelpMessage。
Control プロパティ 値 conCheckoutConfirmation にラベルを追加します 件名 lblCheckoutHelpMessage lblCheckoutHelpMessage X 707*1 lblCheckoutHelpMessage 年 225*1 lblCheckoutHelpMessage テキスト 「キャンセルとサポートについては、次の連絡先にお問い合わせください」 lblCheckoutHelpMessage 幅 400*1 lblCheckoutHelpMessage 高さ 32*1 lblCheckoutHelpMessage フォント Segoe UI lblCheckoutHelpMessage フォント サイズ 10.5 lblCheckoutHelpMessage 垂直方向の配置 VerticalAlign.Bottom conCheckoutConfirmation コントロールに空白のギャラリーを追加します – galCheckoutAdminContact。
Control プロパティ 値 conCheckoutConfirmation に空白のギャラリーを追加します 件名 galCheckoutAdminContact galCheckoutAdminContact TemplateSize 100 galCheckoutAdminContact 高さ 100 galCheckoutAdminContact 塗りつぶし If(gblThemeDark.ColorValue("#141414"),gblThemeHiCo,Black,White) galCheckoutAdminContact 幅 400 galCheckoutAdminContact ShowScrollbar 偽 galCheckoutAdminContact 項目 [1] galCheckoutAdminContact コントロールに画像を追加します - imgCheckoutAdmin_Photo。
Control プロパティ 値 galCheckoutAdminContact に画像を追加します 件名 imgCheckoutAdmin_Photo imgCheckoutAdmin_Photo X 10 imgCheckoutAdmin_Photo 年 (Parent.TemplateHeight - Self.Height) / 2 imgCheckoutAdmin_Photo 幅 64 imgCheckoutAdmin_Photo 高さ 64 imgCheckoutAdmin_Photo Image If(!IsBlank(locSelectedItem.'Item Type'.'Checkout Admin'), Office365Users.UserPhotoV2(locSelectedItem.'Item Type'.'Checkout Admin') ) galCheckoutAdminContact コントロールにラベルを追加します - lblCheckoutAdmin_DisplayName。
Control プロパティ 値 galCheckoutAdminContact にラベルを追加します 件名 lblCheckoutAdmin_DisplayName lblCheckoutAdmin_DisplayName X imgCheckoutAdmin_Photo.X + imgCheckoutAdmin_Photo.Width + 10 lblCheckoutAdmin_DisplayName 年 imgCheckoutAdmin_Photo.Y lblCheckoutAdmin_DisplayName テキスト If(!IsBlank(locSelectedItem.'Item Type'.'Checkout Admin'),Office365Users.UserProfileV2(locSelectedItem.'Item Type'.'Checkout Admin').displayName) lblCheckoutAdmin_DisplayName 高さ 32*1 lblCheckoutAdmin_DisplayName 幅 Parent.Width - Self.X - 80 lblCheckoutAdmin_DisplayName フォント Segoe UI lblCheckoutAdmin_DisplayName フォント サイズ 10.5 lblCheckoutAdmin_DisplayName フォントの太さ 中太字 lblCheckoutAdmin_DisplayName VerticalAlign VerticalAlign.Top galCheckoutAdminContact コントロールにラベルを追加します - lblCheckoutAdmin_JobTitle。
Control プロパティ 値 galCheckoutAdminContact にラベルを追加します 件名 lblCheckoutAdmin_JobTitle lblCheckoutAdmin_JobTitle X imgCheckoutAdmin_Photo.X + imgCheckoutAdmin_Photo.Width + 10 lblCheckoutAdmin_JobTitle 年 lblCheckoutAdmin_DisplayName.Y+lblCheckoutAdmin_DisplayName.Height lblCheckoutAdmin_JobTitle テキスト If(!IsBlank(locSelectedItem.'Item Type'.'Checkout Admin'),Office365Users.UserProfileV2(locSelectedItem.'Item Type'.'Checkout Admin').jobTitle) lblCheckoutAdmin_JobTitle 高さ 32*1 lblCheckoutAdmin_JobTitle 幅 Parent.Width - Self.X - 80 lblCheckoutAdmin_JobTitle フォント Segoe UI lblCheckoutAdmin_JobTitle フォント サイズ 10.5 lblCheckoutAdmin_JobTitle フォントの太さ 中太字 lblCheckoutAdmin_JobTitle VerticalAlign VerticalAlign.Top galCheckoutAdminContact コントロールに画像を追加します - imgCheckoutAdmin_Chat。
Control プロパティ 値 galCheckoutAdminContact に画像を追加します 件名 imgCheckoutAdmin_Chat imgCheckoutAdmin_Chat X Parent.Width - Self.Width - 20 imgCheckoutAdmin_Chat 年 (Parent.TemplateHeight - Self.Height)/2 imgCheckoutAdmin_Chat 幅 32 imgCheckoutAdmin_Chat 高さ 32 imgCheckoutAdmin_Chat PaddingTop 4 imgCheckoutAdmin_Chat paddingBottom 4 imgCheckoutAdmin_Chat PaddingLeft 4 imgCheckoutAdmin_Chat PaddingRight 4 imgCheckoutAdmin_Chat ImagePosition ImagePosition.Fit imgCheckoutAdmin_Chat Image If(gblThemeDark||gblThemeHiCo,ChatDark,Chat) ImgCheckoutAdmin_Chat OnSelect With( {varUserName: Office365Users.UserProfileV2(locSelectedItem.'Item Type'.'Checkout Admin').userPrincipalName}, If( Param("hostClientType") = "web", Launch( "https://teams.microsoft.com/l/chat/0/0?users=" & varUserName & "&topicName=&message=Hi!", {}, LaunchTarget.New ), Launch( "msteams://teams.microsoft.com/l/chat/0/0?users=" & varUserName & "&topicName=&message=Hi!", {}, LaunchTarget.New ) ) ) conCheckoutConfirmation コントロールにボタンを追加します – btnCheckoutBackToHome。
Control プロパティ 値 conCheckoutConfirmation にボタンを追加します 件名 btnCheckoutBackToHome btnCheckoutBackToHome X 40 btnCheckoutBackToHome 年 105 btnCheckoutBackToHome 幅 160 btnCheckoutBackToHome フォント サイズ 10.5 btnCheckoutBackToHome フォントの太さ 中太字 btnCheckoutBackToHome テキスト 「ホームに戻る」 btnCheckoutBackToHome ボタンの種類 標準
マイ チェックアウト画面の構築
この手順では、アプリの最終画面である [マイ チェックアウト] 画面を作成します。 このの画面では、ユーザーがチェックアウトしたアイテムを表示して、選択したアイテムの返却を選択できます。
| Control | プロパティ | 値 |
|---|---|---|
| マイ チェックアウト画面 | OnVisible | UpdateContext({locShowReturnConfirmation: false}) |
| 親コンテナー | 件名 | conParent_MyCheckouts |
| 1 番目の子コンテナー | 件名 | conItemTypes_MyCheckouts |
| 2 番目の子コンテナー | 件名 | conMyCheckouts |
| conItemTypes_MyCheckouts | ギャップ | 20 |
| conItemTypes_MyCheckouts | 垂直方向のオーバーフロー | LayoutOverflow.Scroll |
| conItemTypes_MyCheckouts | 最小幅 | 300 |
| conItemTypes_MyCheckouts | 上部の余白 | 20 |
| conItemTypes_MyCheckouts | 下部の余白 | 20 |
| conItemTypes_MyCheckouts | 塗りつぶし | If(gblThemeDark.ColorValue("#141414"),gblThemeHiCo,Black,White) |
conItemTypes_MyCheckouts コントロールに新しい水平コンテナーを追加します - conItemTypesHeader_MyCheckouts。
Control プロパティ 値 conItemTypes_MyCheckouts に新しい水平コンテナーを追加します 件名 conItemTypesHeader_MyCheckouts conItemTypesHeader_MyCheckouts 右側の余白 10 conItemTypesHeader_MyCheckouts 最小高さ 12 conItemTypesHeader_MyCheckouts 高さ 32 conItemTypesHeader_MyCheckouts 左側の余白 20 conItemTypesHeader_MyCheckouts にラベルを追加します - lblAllAssetsHeader_MyCheckouts
Control プロパティ 値 conItemTypesHeader_MyCheckouts にラベルを追加します 件名 lblAllAssetsHeader_MyCheckouts lblAllAssetsHeader_MyCheckouts フォント Segoe UI lblAllAssetsHeader_MyCheckouts フォントの太さ 太字 lblAllAssetsHeader_MyCheckouts 高さ 32 lblAllAssetsHeader_MyCheckouts 高さ (伸縮可能) 偽 lblAllAssetsHeader_MyCheckouts AlignInContainer AlignInContainer.Stretch lblAllAssetsHeader_MyCheckouts テキスト 「すべての資産」 conItemTypes_MyCheckouts コントロールに空白の垂直ギャラリーを追加します - galItemTypes_MyCheckouts。
Control プロパティ 値 conItemTypes_MyCheckouts に空白の垂直ギャラリーを追加します 件名 galItemTypes_MyCheckouts galItemTypes_MyCheckouts 項目 アイテムの種類 galItemTypes_MyCheckouts 一部塗りつぶし 19 galItemTypes_MyCheckouts テンプレート サイズ 70 galItemTypes_MyCheckouts テンプレートの余白 12 galItemTypes_MyCheckouts テンプレートの入力 If(!('Items Screen'.Size = ScreenSize.Small), If(ThisItem.IsSelected, ColorValue("#E2E2F6"), Transparent), Transparent) galItemTypes_MyCheckouts コントロールにラベルを追加します - lblIName_MyCheckouts。
Control プロパティ 値 galItemTypes_MyCheckouts にラベルを追加します 件名 lblIName_MyCheckouts lblIName_MyCheckouts 幅 Parent.Width lblIName_MyCheckouts 高さ 32 lblIName_MyCheckouts X 20 lblIName_MyCheckouts 年 5 lblIName_MyCheckouts テキスト Thisitem.Name lblIName_MyCheckouts フォントの太さ If(ThisItem.IsSelected,FontWeight.Semibold,FontWeight.Normal) lblIName_MyCheckouts フォント サイズ 10.5 galItemTypes_MyCheckouts コントロールにラベルを追加します - lblItemCount_MyCheckouts。
Control プロパティ 値 galItemTypes_MyCheckouts にラベルを追加します 件名 lblItemCount_MyCheckouts lblItemCount_MyCheckouts 幅 Parent.Width lblItemCount_MyCheckouts 高さ 32 lblItemCount_MyCheckouts X 20 lblItemCount_MyCheckouts 年 lblIName_MyCheckouts.Y + lblIName_MyCheckouts.Height lblItemCount_MyCheckouts テキスト CountRows(ThisItem.Items.Item) & " items" lblItemCount_MyCheckouts フォント サイズ 10.5 水平コンテナー conMyCheckouts は、ヘッダー ラベルとチェックアプトのギャラリーを構成するために使用されます。 以下に示すように、そのプロパティを設定します。
Control プロパティ 値 conMyCheckouts ギャップ 20 conMyCheckouts 上部の余白 20 conMyCheckouts 左側の余白 20 conMyCheckouts 右側の余白 20 conMyCheckouts 垂直方向のオーバーフロー Overflow.Scroll conMyCheckouts Visible !locShowReturnConfirmation conMyCheckouts コントロールにラベルを追加します – lblMyCheckoutsHeader。
Control プロパティ 値 conMyCheckouts にラベルを追加します 件名 lblMyCheckoutsHeader lblMyCheckoutsHeader テキスト 「マイ チェックアウト」 lblMyCheckoutsHeader コンテナー内に配置 AlignInContainer.Stretch lblMyCheckoutsHeader フォントの太さ FontWeight.Semibold lblMyCheckoutsHeader フォント サイズ 15 lblMyCheckoutsHeader X 707*1 lblMyCheckoutsHeader 年 265*1 conMyCheckouts に空白の垂直ギャラリーを追加します - galMyCheckouts
Control プロパティ 値 conMyCheckouts に空白の垂直ギャラリーを追加します 件名 galMyCheckouts galMyCheckouts 項目 Sort(Filter('Item Checkouts','Created By'.User=gblCurrUser.User,'Checkout Status'='Checkout Statuses'.Active),'Created On',Ascending) galMyCheckouts TemplateSize 130 galMyCheckouts コントロールにボタンを追加します - btnMyCheckouts_Background。
Control プロパティ 値 galMyCheckouts にボタンを追加する 件名 btnMyCheckouts_Background btnMyCheckouts_Background X 5 btnMyCheckouts_Background 年 12 btnMyCheckouts_Background 塗りつぶし 白人 btnMyCheckouts_Background 高さ Parent.TemplateHeight - 20 btnMyCheckouts_Background 幅 Parent.TemplateWidth - Self.X*2 galMyCheckouts コントロールに画像を追加します - imgMyCheckouts_Item。
Control プロパティ 値 galMyCheckouts に画像を追加する 件名 imgMyCheckouts_Item imgMyCheckouts_Item X 5 imgMyCheckouts_Item 年 12 imgMyCheckouts_Item 幅 125 imgMyCheckouts_Item 高さ 110 imgMyCheckouts_Item ImagePosition ImagePosition.Fill imgMyCheckouts_Item Image ThisItem.Item.Image.Full galMyCheckouts コントロールにラベルを追加します - lblIMyCheckouts_ItemName。
Control プロパティ 値 galMyCheckouts にラベルを追加します 件名 lblIMyCheckouts_ItemName lblIMyCheckouts_ItemName 年 imgMyCheckouts_Item.Y + 5 lblIMyCheckouts_ItemName X imgMyCheckouts_Item.X + imgMyCheckouts_Item.Width +20 lblIMyCheckouts_ItemName テキスト ThisItem.Name lblIMyCheckouts_ItemName 幅 btnMyCheckouts_Background.Width - Self.X lblIMyCheckouts_ItemName フォント サイズ 10.5 lblIMyCheckouts_ItemName FontWeight FontWeight.Semibold galMyCheckouts コントロールにラベルを追加します - lblMyCheckouts_DueDate。
Control プロパティ 値 galMyCheckouts にラベルを追加します 件名 lblMyCheckouts_DueDate lblMyCheckouts_DueDate X lblIMyCheckouts_ItemName.X lblMyCheckouts_DueDate 年 lblIMyCheckouts_ItemName.Y + lblIMyCheckouts_ItemName.Height lblMyCheckouts_DueDate テキスト With({varDays:DateDiff(Today(),Switch(ThisItem.'Checkout Duration','Checkout Durations'.'7 days',DateAdd(ThisItem.'Created On',7,Days),'Checkout Durations'.'30 days',DateAdd(ThisItem.'Created On',30,Days)))},If(varDays<0,"期限が "&0-varDays&" 日超過しています","期限は "&varDays&" 日後です")) lblMyCheckouts_DueDate 垂直方向の配置 下詰め lblMyCheckouts_DueDate 幅 btnMyCheckouts_Background.Width - Self.X lblMyCheckouts_DueDate フォント サイズ 10.5 galMyCheckouts コントロールにボタンを追加します – btnCheckoutsForeground。
Control プロパティ 値 galMyCheckouts にボタンを追加する 件名 btnCheckoutsForeground btnCheckoutsForeground HoverFill RGBA(128, 128, 128, .06) btnCheckoutsForeground ホバー Fill を除く他のすべての Fill 透明 btnCheckoutsForeground X btnMyCheckouts_Background.X btnCheckoutsForeground 年 btnMyCheckouts_Background.Y btnCheckoutsForeground 幅 btnMyCheckouts_Background.Width galMyCheckouts コントロールにボタンを追加します - btnMyCheckouts_Return。
Control プロパティ 値 galMyCheckouts にボタンを追加する 件名 btnMyCheckouts_Return btnMyCheckouts_Return テキスト 「戻る」 btnMyCheckouts_Return X lblIMyCheckouts_ItemName.X + 20 btnMyCheckouts_Return 年 lblMyCheckouts_DueDate.Y + lblMyCheckouts_DueDate.Height btnMyCheckouts_Return 幅 96 btnMyCheckouts_Return OnSelect Patch('Item Checkouts',ThisItem,{'Checkout Status':'Checkout Statuses'.Returned});UpdateContext({locSelectedItemForReturn:ThisItem.Item,locShowReturnConfirmation: true }); 次に、以下に示すように、コントロール comMyCheckouts および conItemTypes_MyCheckouts の一部塗りつぶしプロパティを設定します。アイテム タイプは画面の 25% をカバーし、残りの 75% はマイ チェックアウトのリストでカバーされます。
Control プロパティ 値 conMyCheckouts 一部塗りつぶし 3 conItemTypes_MyCheckouts 一部塗りつぶし 6 conParent_MyCheckouts コントロールに垂直コンテナーを追加します – conReturnConfirmation。
Control プロパティ 値 conParent_MyCheckouts に垂直コンテナーを追加します 件名 conReturnConfirmation conReturnConfirmation ギャップ 20 conReturnConfirmation 左側の余白 20 conReturnConfirmation 上部の余白 80 conReturnConfirmation 右側の余白 20 conReturnConfirmation 一部塗りつぶし 3 conReturnConfirmation Visible locShowReturnConfirmation conReturnConfirmation コントロールに画像を追加します - imgReturnConfirmation。
Control プロパティ 値 conReturnConfirmation に画像を追加します 件名 imgReturnConfirmation imgReturnConfirmation 幅 200 imgReturnConfirmation 高さ 200 imgReturnConfirmation ImagePosition ImagePosition.Fill imgReturnConfirmation Image 確認する conReturnConfirmation コントロールにラベルを追加します - lblReturnInfoMessage。
Control プロパティ 値 conReturnConfirmation にラベルを追加します 件名 lblReturnInfoMessage lblReturnInfoMessage X 707*1 lblReturnInfoMessage 年 225*1 lblReturnInfoMessage テキスト 「準備が完了しました。」 "&locSelectedItemForReturn.Name&"を"&LookUp(Items,Item=locSelectedItemForReturn.Item).'Item Type'.'Checkout Address'&"に返送してください。" lblReturnInfoMessage 幅 300*1 lblReturnInfoMessage 高さ 44 lblReturnInfoMessage フォント Segoe UI lblReturnInfoMessage フォント サイズ 10.5 lblReturnInfoMessage 配置 Align.Center conReturnConfirmation コントロールにラベルを追加します – lblReturnHelpMessage。
Control プロパティ 値 conReturnConfirmation にラベルを追加します 件名 lblReturnHelpMessage lblReturnHelpMessage X 707*1 lblReturnHelpMessage 年 225*1 lblReturnHelpMessage テキスト 「キャンセルとサポートについては、次の連絡先にお問い合わせください」 lblReturnHelpMessage 幅 400*1 lblReturnHelpMessage 高さ 32*1 lblReturnHelpMessage フォント Segoe UI lblReturnHelpMessage フォント サイズ 10.5 lblReturnHelpMessage 垂直方向の配置 VerticalAlign.Bottom conReturnConfirmation コントロールに空白のギャラリーを追加します – galReturnAdminContact。
Control プロパティ 値 conReturnConfirmation に空白のギャラリーを追加します 件名 galReturnAdminContact galReturnAdminContact TemplateSize 100 galReturnAdminContact 高さ 100 galReturnAdminContact 塗りつぶし If(gblThemeDark.ColorValue("#141414"),gblThemeHiCo,Black,White) galReturnAdminContact 幅 400 galReturnAdminContact ShowScrollbar 偽 galReturnAdminContact 項目 [1] galReturnAdminContact コントロールに画像を追加します - imgReturnAdmin_Photo。
Control プロパティ 値 galReturnAdminContact に画像を追加します 件名 imgReturnAdmin_Photo imgReturnAdmin_Photo X 10 imgReturnAdmin_Photo 年 (Parent.TemplateHeight - Self.Height) / 2 imgReturnAdmin_Photo 幅 64 imgReturnAdmin_Photo 高さ 64 imgReturnAdmin_Photo Image If(!IsBlank(LookUp(Items,Item=locSelectedItemForReturn.Item).'Item Type'.'Checkout Admin'),Office365Users.UserPhotoV2(LookUp(Items,Item=locSelectedItemForReturn.Item).'Item Type'.'Checkout Admin')) galReturnAdminContact コントロールにラベルを追加します - lblReturnAdmin_DisplayName。
Control プロパティ 値 galReturnAdminContact にラベルを追加します 件名 lblReturnAdmin_DisplayName lblReturnAdmin_DisplayName X imgReturnAdmin_Photo.X + imgReturnAdmin_Photo.Width + 10 lblReturnAdmin_DisplayName 年 imgReturnAdmin_Photo.Y lblReturnAdmin_DisplayName テキスト If(!IsBlank(LookUp(Items,Item=locSelectedItemForReturn.Item).'Item Type'.'Checkout Admin'),Office365Users.UserProfileV2(LookUp(Items,Item=locSelectedItemForReturn.Item).'Item Type'.'Checkout Admin').displayName) lblReturnAdmin_DisplayName 高さ 32*1 lblReturnAdmin_DisplayName 幅 Parent.Width - Self.X - 80 lblReturnAdmin_DisplayName フォント Segoe UI lblReturnAdmin_DisplayName フォント サイズ 10.5 lblReturnAdmin_DisplayName フォントの太さ 中太字 lblReturnAdmin_DisplayName VerticalAlign VerticalAlign.Top galReturnAdminContact コントロールにラベルを追加します - lblReturnAdmin_JobTitle。
Control プロパティ 値 galReturnAdminContact にラベルを追加します 件名 lblReturnAdmin_JobTitle lblReturnAdmin_JobTitle X imgReturnAdmin_Photo.X + imgReturnAdmin_Photo.Width + 10 lblReturnAdmin_JobTitle 年 lblReturnAdmin_DisplayName.Y + lblReturnAdmin_DisplayName.Height lblReturnAdmin_JobTitle テキスト If(!IsBlank(LookUp(Items,Item=locSelectedItemForReturn.Item).'Item Type'.'Checkout Admin'),Office365Users.UserProfileV2(LookUp(Items,Item=locSelectedItemForReturn.Item).'Item Type'.'Checkout Admin').jobTitle) lblReturnAdmin_JobTitle 高さ 32*1 lblReturnAdmin_JobTitle 幅 Parent.Width - Self.X - 80 lblReturnAdmin_JobTitle フォント Segoe UI lblReturnAdmin_JobTitle フォント サイズ 10.5 lblReturnAdmin_JobTitle フォントの太さ 中太字 lblReturnAdmin_JobTitle VerticalAlign VerticalAlign.Top galReturnAdminContact コントロールに画像を追加します - imgReturnAdmin_Chat。
Control プロパティ 値 galReturnAdminContact に画像を追加します 件名 imgReturnAdmin_Chat imgReturnAdmin_Chat X Parent.Width - Self.Width - 20 imgReturnAdmin_Chat 年 (Parent.TemplateHeight - Self.Height)/2 imgReturnAdmin_Chat 幅 32 imgReturnAdmin_Chat 高さ 32 imgReturnAdmin_Chat PaddingTop 4 imgReturnAdmin_Chat paddingBottom 4 imgReturnAdmin_Chat PaddingLeft 4 imgReturnAdmin_Chat PaddingRight 4 imgReturnAdmin_Chat ImagePosition ImagePosition.Fit imgReturnAdmin_Chat Image If(gblThemeDark||gblThemeHiCo,ChatDark,Chat) ImgReturnAdmin_Chat OnSelect With( {varUserName: Office365Users.UserProfileV2(locSelectedItem.'Item Type'.'Checkout Admin').userPrincipalName}, If( Param("hostClientType") = "web", Launch( "https://teams.microsoft.com/l/chat/0/0?users=" & varUserName & "&topicName=&message=Hi!", {}, LaunchTarget.New ), Launch( "msteams://teams.microsoft.com/l/chat/0/0?users=" & varUserName & "&topicName=&message=Hi!", {}, LaunchTarget.New ) ) ) conReturnConfirmation コントロールにボタンを追加します - btnReturnBackToHome。
Control プロパティ 値 conReturnConfirmation にボタンを追加します 件名 btnReturnBackToHome btnReturnBackToHome X 40 btnReturnBackToHome 年 105 btnReturnBackToHome 幅 160 btnReturnBackToHome フォント サイズ 10.5 btnReturnBackToHome フォントの太さ 中太字 btnReturnBackToHome テキスト 「ホームに戻る」 btnReturnBackToHome ボタンの種類 標準
画面の接続
この手順では、アプリ用に設計した画面を整理して、これまでの手順で作成した 3 つの画面を接続します。
次の式を更新して、このアプリの画面を接続します。
| Control | プロパティ | 値 |
|---|---|---|
| galItemTypes_Checkout | OnSelect | Navigate('Items Screen',ScreenTransition.Fade,{locSelectedItemType:ThisItem,locShowItems: true }) |
| imgCheckout_Checkout | OnSelect | Navigate('My Checkouts Screen',ScreenTransition.Fade) |
| btnCancelCheckout | OnSelect | Navigate('Items Screen',ScreenTransition.Fade) |
| btnCheckoutBackToHome | OnSelect | Navigate('Items Screen',ScreenTransition.Fade) |
| galItems | OnSelect | Navigate('Checkout Screen',ScreenTransition.Fade,{locSelectedItem:ThisItem}) |
| imgCheckout | OnSelect | Navigate('My Checkouts Screen',ScreenTransition.Fade) |
| galItemTypes_MyCheckouts | OnSelect | Navigate( 'Items Screen', ScreenTransition.Fade, { locSelectedItemType: ThisItem, locShowItems: true }) |
| btnReturnBackToHome | OnSelect | Navigate('Items Screen',ScreenTransition.Fade) |
アプリを Teams に公開する
この手順では、アプリを Teams に公開します。
キャンバス アプリへの変更を保存するたびに、使用者とアプリを編集するアクセス許可を持つ他のユーザーのみに、自動的にアプリが発行されます。
変更が完了したら、アプリを共有しているすべてのユーザーが利用できるように、明示的に発行する必要があります。
アプリを Teams に公開する方法の詳細な手順については、 Teams でアプリを公開する を参照してください。
同僚とアプリを共有する
この手順では、アプリを同僚と共有して、その基礎となるデータをアプリがインストールされている社内のチーム外の同僚と共有します。
アプリを共有する方法の詳細については、権限を設定して同僚とアプリを共有する を参照してください。
関連項目
注意
ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)
この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。
フィードバック
フィードバックの送信と表示