販売時点管理 (POS) Totals パネルへカスタムフィールドを追加

[アーティクル]
03/08/2023

この記事では、画面レイアウトデザイナーを使用して、POS トランザクション画面の合計パネルに新しいカスタムフィールドを追加する方法について説明します。この記事は、Microsoft Dynamics 365 Finance 7.3 およびそれ以降と、Microsoft Dynamics 365 Retail 7.3 およびそれ以降に適用されます。

カスタムフィールドページの合計パネルに追加するカスタムフィールドが、デザイナーに表示されます。次に、左右の列にあるカスタムフィールドを選択することができます。カスタムフィールドのロジックは、販売時点管理 (POS) 拡張機能でコーディングされる必要があります。

シナリオ/ビジネスの問題

画面レイアウトデザイナーを使用して、POS トランザクション画面の合計パネルにカスタムフィールドを追加します。また、POS 拡張のカスタム項目のビジネスロジックをコード化します。

必要な手順の概要

まず、バックオフィスをコンフィギュレーションするには、これらの手順を完了する必要があります。

言語テキストページで、カスタムフィールドの言語テキストを追加します。
カスタムフィールドページで、新しいカスタムフィールドを追加します。
画面レイアウトデザイナーで、合計パネルに新しいカスタムフィールドを追加します。
レジスター (1090) ジョブを実行します。

POS の拡張機能プロジェクトでは、この手順を行う必要があります。

ビジネスロジックをカスタムフィールドへ追加します。

バックオフィスのコンフィギュレーション

コマースにサインインします。
Retail とコマース > チャネル設定 > POS 設定 > POS プロファイル > 言語テキストの順に移動します。
POS タブで、追加を選択して新しい POS 言語テキストを追加します。

合計パネルに表示されるテキストはローカライズすることができます。したがって、同じテキスト ID の異なる言語で複数のテキストを作成することができます。次に例を示します。

言語 ID テキスト ID テキスト

ja 1 サンプル

en-UK 1 デモ
アクションウィンドウで、保存を選択して変更を保存します。
Retail とコマース > チャネル設定 > POS 設定 > POS プロファイル > カスタムフィールドの順に移動します。
アクションウィンドウで、新規を選択して新しいカスタムフィールドを追加し、次の情報を指定します。
1. 名前フィールドに、カスタムフィールドの名前を入力します。
2. タイプフィールドで、合計エリアを選択します。
3. キャプションテキスト ID フィールドで、手順 3 で使用したテキスト ID を指定します。
次に例を示します。

氏名種類キャプションテキスト ID

サンプル合計エリア 1
アクションウィンドウで、保存を選択して変更を保存します。
Retail とコマース > チャネル設定 > POS 設定 > POS > 画面レイアウトの順に移動します。
F3MGR 画面レイアウト ID を選択した後、アクションウィンドウで デザイナー を選択します。

メモ

既存のレイアウトを選択するか、新しいレイアウトを作成することができます。 F3MGR 画面レイアウト ID は、デモデータを使用している場合にのみ使用できます。
1440x960 – フルレイアウトサイズを選択し、レイアウトデザイナーを選択します。
アプリケーションを開いて確認するよう求めるメッセージが表示されたら、開くを選択して、インストールの指示に従ってください。
デザイナーをインストールすると、Microsoft Entra の資格情報を要求されます。デザイナーを開始するための情報を入力します。
デザイナーで、左ウィンドウから画面レイアウトへ合計パネルコントロールをドラッグします。レイアウトに既に合計パネルが含まれている場合、コントロールは左ウィンドウに淡色表示されます。
画面レイアウトで、合計パネルを右クリックし、カスタマイズを選択します。
カスタマイズ - 合計パネルダイアログボックスで、SAMPLE カスタムフィールドが利用可能なフィールドリストに表示されます。矢印ボタンを使用して左列または右列のいずれかに移動します。
カスタムフィールドを上下に移動するには、アップおよびダウン ボタンを使用します。
OK を選択して変更を保存し、カスタマイズ - 合計パネルダイアログボックスを終了します。
右上隅の閉じるボタン (X) を選択して、デザイナーを閉じます。
変更の保存を求められたら、はいを選択します。 いいえを選択した場合、変更は保存されません。
Retail とコマース > Retail とコマース IT > 配送スケジュールの順に移動します。
レジスター (1090) ジョブを選択し、今すぐ実行を選択します。

言語 ID	テキスト ID	テキスト
ja	1	サンプル
en-UK	1	デモ

氏名	種類	キャプションテキスト ID
サンプル	合計エリア	1

ビジネスロジックをカスタムフィールドへ追加

同様のサンプルコードは、\RetailSDK\POS\Extensions\SampleExtensions\ViewExtensions\Cart\TipsCustomField.ts の Retail ソフトウェア開発キット (SDK) で見つけることができます。

Microsoft Visual Studio 2015 を管理者モードで起動します。
ModernPOS ソリューションを …\RetailSDK\POS から開きます。
POS.Extensions プロジェクトで、CustomFieldExtensions というフォルダーを作成します。
CustomFieldExtensions フォルダーで、Cart というフォルダーを作成します。
カートフォルダーで、SampleCustomField.ts という .ts (typescript) ファイルを作成します。
SampleCustomField.ts ファイルで、次の import ステートメントを追加して関連するエンティティおよびコンテキストをインポートします。
```
import { CartViewTotalsPanelCustomFieldBase } from "PosApi/Extend/Views/CartView";
import { ProxyEntities } from "PosApi/Entities";
```
SampleCustomField という名前のクラスを作成し、CartViewTotalsPanelCustomFieldBase クラスから拡張します。この方法で、基本クラスからの computeValue メソッドでは、カスタムフィールドの任意のカスタムロジックが実行されます。
```
export default class SampleCustomField extends CartViewTotalsPanelCustomFieldBase {

}
```

SampleCustomField クラス内で、カスタムフィールドのロジックを設定するため computeValue 抽象メソッドを実装します。

public computeValue(cart: ProxyEntities.Cart): string {

    // Let's show 10% of total amount in the custom field.

    if (isNaN(cart.TotalAmount) || cart.TotalAmount <= 0) {
        return "$0.00";
    }
    return "$" + (cart.TotalAmount * 0.1).toFixed(2).toString();
}

全体的なクラスは、次のようになります。

import { CartViewTotalsPanelCustomFieldBase } from "PosApi/Extend/Views/CartView";
import { ProxyEntities } from "PosApi/Entities";

export default class SampleCustomField extends CartViewTotalsPanelCustomFieldBase {
    public computeValue(cart: ProxyEntities.Cart): string {

        // Let's show 10% of total amount in the custom field.
        if (isNaN(cart.TotalAmount) || cart.TotalAmount <= 0) {
            return "$0.00";
        }
        return "$" + (cart.TotalAmount * 0.1).toFixed(2).toString();
    }
}

CustomFieldExtensions フォルダーで、manifest.json という .json ファイルを作成します。
manifest.json ファイルに、以下のコードを貼り付けます。
```
{
    "$schema": "../manifestSchema.json",
    "name": "Pos_Extensibility_Samples",
    "publisher": "Contoso",
    "version": "7.3.0",
    "minimumPosVersion": "7.3.0.0",
    "components": {
        "extend": {
            "views": {
                "CartView": {
                    "totalsPanel": {
                        "customFields": [
                            {
                                "fieldName": "Sample",
                                "modulePath": "Cart/SampleCustomField"
                            }
                        ]
                } }
        }  }
} }
```
マニフェストでは、customFields セクションの fieldName値が、バックオフィスで追加されたカスタムフィールドの名前、および "バックオフィスのコンフィギュレーション" 手順のステップ 6 のカスタムフィールドで指定した名前と一致している必要があることに注意してください。 modulePath は、実装ファイルの名前です。その実装ファイル名は、"ビジネスロジックをカスタムフィールドへ追加" 手順のステップ 5 で作成したファイルの名前です。

複数のカスタムフィールドを追加する場合は、複数の実装ファイルを追加し、custonFileds セクションの情報を更新する必要があります。

たとえば、2 つのカスタムフィールド、サンプル 1 とサンプル 2 を追加する場合、同じ基本クラスの CartViewTotalsPanelCustomFieldBase から拡張された 2 つの実装ファイルが必要になります。

この場合、マニフェストは次のようになります。
```
"customFields": [
    {
        "fieldName": "Sample1",
        "modulePath": "Cart/SampleCustomField1"
    },
    {
        "fieldName": "Sample2",
        "modulePath": "Cart/SampleCustomField2"
    }
]
```
この例では、SampleCustomField1 と SampleCustomField2 は、ビジネスロジックを実行する typescript ファイルの名前になります。
extensions.json ファイルを POS.Extensions プロジェクトで開いて、CustomFieldExtensions サンプルで更新し、実行時に POS にこの拡張機能を読み込むようにします。
```
{
    "extensionPackages": [
        { 
            "baseUrl": "SampleExtensions2" 
        }, 
        {
            "baseUrl": "CustomFieldExtensions"
        }
    ]
}
```
tsconfig.json ファイルを開き、拡張子フォルダ名 CustomFieldExtensions を追加し除外リストで拡張子フォルダをコメントアウトします。 POS では、このファイルを使用して、拡張機能を追加または除外します。既定では、除外リストには除外されたすべての拡張リストが含まれています。拡張機能を POS の一部として含めるには、次に示すように、拡張フォルダーの名前を追加し、拡張リストの拡張をコメントアウトします。
```
"exclude": [
    "SampleExtensions",
    //"SampleExtensions2",
    //"CustomFieldExtensions"
],
```
プロジェクトをコンパイル、およびリビルドします。
ローカルコンピューター ボタンをクリックすることで、Retail Modern POS (MPOS) のカスタマイズされたバージョンを配置します。ソリューションプラットフォームが x86 であることを確認します。または、配置可能パッケージの作成およびパッケージから MPOS のインストールが可能です。

メモ

この記事で MPOS を使用しても、MPOS またはクラウド POS のいずれかを使用できます。

カスタマイズの検証

オペレーター ID に 000160、パスワードに 123 を使用して MPOS にサインインします。
ようこそ画面で、現在のトランザクションボタンを選択します。
品目をトランザクションに追加します。

カスタムフィールドが合計パネルに表示されます。

次の方法で共有

販売時点管理 (POS) Totals パネルへカスタムフィールドを追加

シナリオ/ビジネスの問題

必要な手順の概要

バックオフィスのコンフィギュレーション

ビジネスロジックをカスタムフィールドへ追加

カスタマイズの検証

フィードバック

その他のリソース

次の方法で共有

販売時点管理 (POS) Totals パネルへカスタム フィールドを追加

シナリオ/ビジネスの問題

必要な手順の概要

バックオフィスのコンフィギュレーション

ビジネス ロジックをカスタム フィールドへ追加

カスタマイズの検証

フィードバック

その他のリソース

販売時点管理 (POS) Totals パネルへカスタムフィールドを追加

ビジネスロジックをカスタムフィールドへ追加