販売時点管理 (POS) トランザクショングリッドへのカスタム列の追加

[アーティクル]
08/02/2024

この記事では、画面レイアウトデザイナーを使用して POS トランザクションページに新しいカスタム列を追加する方法について説明します。カスタム列フィーチャーを使用して、トランザクションページにさらに情報を追加することができます。カスタム列は、画面レイアウトデザイナーを使用して、トランザクションのページ入庫グリッドに追加できます。デザイナーを使用して、列の幅および配置を調整することができます。拡張シナリオのレイアウトには、10 個のカスタム列があります。 10 のすべてを 1 つのレイアウトで使用することができます。カスタム列は既にデザイナーのメタデータに追加されています。レイアウトに列を追加した後、トランザクションページで列が表示できるように配送ジョブを実行します。

メモ

この記事は Dynamics 365 Finance、Microsoft Dynamics 365 Retail プラットフォーム更新プログラム 8、および Retail アプリ更新プログラム 4 修正プログラムに適用されます。

ページへのカスタム列の追加

Dynamics 365 Commerce へサインインします。
Retail とコマース>チャネル設定>POS 設定>POS>画面レイアウトの順に移動します。または、検索ばーで 画面レイアウト を検索します。
F3MGR 画面レイアウト ID を選択した後、アクションバーで デザイナー ボタンをクリックします。
デザイナーを起動する Microsoft Entra (Microsoft Entra ID) の資格情報をインストールおよび入力するよう求められる場合、指示に従ってください。
レイアウトサイズから 1440 x 960: フルレイアウト を選択し、レイアウトデザイナー ボタンをクリックします。
プロンプトが表示されたら、開くをクリックし、指示に従ってデザイナーツールをインストールする手順に従いします。
インストール後、Microsoft Entra の資格情報を入力してデザイナーを起動します。
デザイナーで、トランザクショングリッド (受領書グリッド) を右クリックし、カスタマイズを選択します。
カスタマイズ – 入庫ウィンドウで、ピボットパネルのドロップダウンメニューの明細行を選択します。

メモ

同様に、支払および配送タブにカスタム列を追加できます。
使用可能な列ウィンドウで、カスタム列 1 を選択してから、> (矢印) ボタンをクリックして選択済列に列を移動します。
OK をクリックして保存し、ウィンドウを閉じます。
画面レイアウト デザイナーを使用してトランザクショングリッドの列幅を調整します。列が表示されていることを確認します。
デザイナーを閉じるには、デザイナーの X ボタンをクリックします。
変更の保存 を求められるときは、はいをクリックします。 いいえをクリックすると、変更は保存されません。
Retail とコマース>Retail とコマース IT>配送スケジュールの順に移動します。
1090 レジスター ジョブを選択し、今すぐ実行 をクリックします。

カスタム列へのビジネスロジックの追加

管理者モードで Visual Studio 2015 を開きます。
ModernPOS ソリューションを …\RetailSDK\POS から開きます。
POS.Extensions プロジェクトで、CustomColumnExtensions という名前の新しいフォルダーを作成します。
CustomColumnExtensions の下で Cart という名前の新しいフォルダーを作成します。
Cart の下で LinesGrid という名前の新しいフォルダーを作成します。
LinesGrid フォルダーに、新しい Typescript ファイルを追加し、CustomColumn1Configuration.ts と名前を付けます。

次の import 明細書を追加して、関連するエンティティおよびコンテキストをインポートします。

import {

    ICustomLinesGridColumnContext,
    CustomLinesGridColumnBase

} from "PosApi/Extend/Views/CartView";

import { CustomGridColumnAlignment } from "PosApi/Extend/Views/CustomGridColumns";
import { ProxyEntities } from "PosApi/Entities";

LinesCustomGridColumn1 という名前の新しいクラスを作成し、CustomLinesGridColumnBase から拡張します。
```
export default class LinesCustomGridColumn1 extends CustomLinesGridColumnBase {}
```
クラス内で、選択した支払/入金明細行をキャプチャするプライベート変数を宣言します。
```
private _selectedTenderLines: ProxyEntities.TenderLine[ ];
```
クラスのコンストラクターメソッドを作成して、コンテキストを初期化します。
```
constructor(context: ICustomLinesGridColumnContext) {
    super(context);
}
```

次の列のタイトルと配置のメソッドを追加します。

public title(): string {
    return "Line number";
} 

public alignment(): CustomGridColumnAlignment {
    return CustomGridColumnAlignment.Right;
}

行番号を返す列計算値メソッドを追加します。

public computeValue(cartLine: ProxyEntities.CartLine): string {
    return cartLine.LineNumber.toString();
}

クラス全体のコードは次のとおりです。

import {
    ICustomLinesGridColumnContext,
    CustomLinesGridColumnBase
} from "PosApi/Extend/Views/CartView";
import { CustomGridColumnAlignment } from "PosApi/Extend/Views/CustomGridColumns";
import { ProxyEntities } from "PosApi/Entities";

export default class LinesCustomGridColumn1 extends CustomLinesGridColumnBase {
    constructor(context: ICustomLinesGridColumnContext) {
        super(context);
    }

    public title(): string {
        return "Line number";
    }

    public computeValue(cartLine: ProxyEntities.CartLine): string {
        return cartLine.LineNumber.toString();
    }

    public alignment(): CustomGridColumnAlignment {
        return CustomGridColumnAlignment.Right;
    }
}

新しい .json ファイルを CustomColumnExtensions フォルダーの下に作成し、manifest.json という名前を付けます。

manifest.json ファイルで、生成されたコードを次のコードに置き換えます。

{
    "$schema": "../manifestSchema.json",
        "name": "Pos_Extensibility_Samples",
            "publisher": "Microsoft",
                "version": "7.2.0",
                    "minimumPosVersion": "7.2.0.0",
                        "components": {
        "extend": {
            "views": {
                "CartView": {
                    "linesGrid": {
                        "customColumn1": { "modulePath": "Cart/LinesGrid/CustomColumn1Configuration" }
                    }
                }
            }
        }
    }
}

> [!NOTE]
> If you are adding a custom column to payment or delivery grid, you need to update the manifest with the following code.
"paymentsGrid": {
    "customColumn1": { "modulePath": "Cart/PaymentsGrid/CustomColumn1Configuration" }
 },
 "deliveryGrid": {
     "customColumn1": { "modulePath": "Cart/DeliveryGrid/CustomColumn1Configuration" }
 }

extensions.json ファイルを POS.Extensions プロジェクトで開いて、CustomColumnExtensions サンプルで更新し、実行時に POS にこの拡張機能が含まれるようにします。
```
{
    "extensionPackages": [
        {
            "baseUrl": "SampleExtensions2"
        },
        {
            "baseUrl": "CustomColumnExtensions"
        }
    ]
}
```
tsconfig.json ファイルを開いて、拡張パッケージフォルダーを除外リストからコメントアウトします。 POS では、このファイルを使用して、拡張機能を追加または除外します。既定では、リストにすべての除外された拡張子が含まれています。 POS の一部である拡張子を含める場合は、拡張子フォルダー名を追加し、以下のように拡張子リストから拡張子をコメントする必要があります。
```
"exclude": [
    "AuditEventExtensionSample",
    "B2BSample",
    "CustomerSearchWithAttributesSample",
    "FiscalRegisterSample",
    "PaymentSample",
    "PromotionsSample",
    "SalesTransactionSignatureSample",
    //"SampleExtensions2",
    "SampleExtensions",
    "StoreHoursSample",
    "SuspendTransactionReceiptSample"
    //"CustomColumnExtensions"
],
```
プロジェクトをコンパイル、およびリビルドします。

メモ

カスタム列のサンプルは Retail ソフトウェア開発キット (SDK) アーキテクチャで見つけることができます。

カスタマイズの検証

オペレーター ID として 000160、パスワードとして 123 を使用し、Store Commerce アプリにサインインします。
ようこそ画面の 現在のトランザクション ボタンをクリックします。
トランザクションに品目 (0005) を追加します。
カスタム列に行番号が表示されます。

次の方法で共有

販売時点管理 (POS) トランザクショングリッドへのカスタム列の追加

ページへのカスタム列の追加

カスタム列へのビジネスロジックの追加

カスタマイズの検証

フィードバック

その他のリソース

次の方法で共有

販売時点管理 (POS) トランザクション グリッドへのカスタム列の追加

ページへのカスタム列の追加

カスタム列へのビジネス ロジックの追加

カスタマイズの検証

フィードバック

その他のリソース

販売時点管理 (POS) トランザクショングリッドへのカスタム列の追加

カスタム列へのビジネスロジックの追加