Add custom columns to a point of sale (POS) transaction grid

Article
08/02/2024

This article explains how to add a new custom column to a POS transaction page using the screen layout designer. You can add more information to a transaction page by using the custom column feature. A custom column can be added to the transaction page receipt grid by using the screen layout designer. You can adjust the width and position of the columns by using the designer. There are 10 custom columns in the layout for extensions scenarios. You can use all 10 in one layout. The custom columns are already added to the designer metadata. After adding the column to the layout, you run the distribution job so that the column shows up on the transaction page.

Note

This article applies to Dynamics 365 Finance, and to Microsoft Dynamics 365 Retail with platform update 8 and Retail App update 4 hotfix.

Add a custom column to the page

Sign in to Dynamics 365 Commerce.
Navigate to Retail and Commerce > Channel setup > POS setup > POS > Screen layouts. Or, search for Screen layout in the search bar.
Select the F3MGR screen layout ID and click the Designer button in the action bar.
Follow the instructions if prompted to install and enter the Microsoft Entra (Microsoft Entra ID) credentials to launch the designer.
Select 1440x960 – Full layout from the layout sizes and click the Layout designer button.
If prompted, click Open and follow the instruction to install the designer tool.
After installing, enter your Microsoft Entra credentials to launch the designer.
In the designer, right-click the transaction grid (receipt grid) and select Customize.
In the Customization – Receipt window, select the lines in the pivot panel drop-down menu.

Note

Similarly, you can add a custom column to the Payment and Delivery tab.
In the Available columns window, select Custom column 1, and then click the > (arrow) button to move the column to the Selected columns.
Click OK to save and close the window.
Adjust the column width in the transaction grid using the Screen layout designer. Make sure the column is visible.
Click the X button in the designer to close the designer.
When prompted to Save changes, click Yes. If you click No the changes will not be saved.
Go to Retail and Commerce > Retail and Commerce IT > Distribution schedule.
Select the Registers (1090) job and click Run now.

Add business logic to a custom column

Open Visual Studio 2015 in administrator mode.
Open the ModernPOS solution from …\RetailSDK\POS.
Under the POS.Extensions project create a new folder named CustomColumnExtensions.
Under CustomColumnExtensions, create a new folder named Cart.
Under Cart, create a new folder named LinesGrid.
In the LinesGrid folder, add a new Typescript file and name it CustomColumn1Configuration.ts.

Add the following import statements to import the relevant entities and context.

import {

    ICustomLinesGridColumnContext,
    CustomLinesGridColumnBase

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

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

Create a new class named LinesCustomGridColumn1 and extend it from CustomLinesGridColumnBase.
```
export default class LinesCustomGridColumn1 extends CustomLinesGridColumnBase {}
```
Inside the class declare a private variable to capture the selected tender lines.
```
private _selectedTenderLines: ProxyEntities.TenderLine[ ];
```

Create a class constructor method to initialize the context.

constructor(context: ICustomLinesGridColumnContext) {
    super(context);
}

Add the following methods for the columns title and alignment.

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

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

Add the column compute value method, which returns the line number.

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

The code for the entire class is:

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;
    }
}

Create a new .json file under the CustomColumnExtensions folder and name it manifest.json.

In the manifest.json file, replace the generated code with the following code.

{
    "$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" }
 }

Open the extensions.json file under the POS.Extensions project and update it with the CustomColumnExtensions sample, so that POS during runtime will include this extension.

{
    "extensionPackages": [
        {
            "baseUrl": "SampleExtensions2"
        },
        {
            "baseUrl": "CustomColumnExtensions"
        }
    ]
}

Open the tsconfig.json file and comment out the extension package folders from the exclude list. POS will use this file to include or exclude the extension. By default, the list contains all the excluded extensions. If you want to include any extension part of the POS, then you need add the extension folder name and comment the extension from the extension list as shown.
```
"exclude": [
    "AuditEventExtensionSample",
    "B2BSample",
    "CustomerSearchWithAttributesSample",
    "FiscalRegisterSample",
    "PaymentSample",
    "PromotionsSample",
    "SalesTransactionSignatureSample",
    //"SampleExtensions2",
    "SampleExtensions",
    "StoreHoursSample",
    "SuspendTransactionReceiptSample"
    //"CustomColumnExtensions"
],
```
Compile and rebuild the project.

Note

You can find the sample for the custom column in the Retail software development kit (SDK) architecture.

Validate the customization

Sign in to the Store Commerce app using 000160 as the operator ID and 123 as the password.
Click the Current transaction button on the Welcome screen.
Add item (0005) to the transaction.
The custom column should display the line number.

Share via

Add custom columns to a point of sale (POS) transaction grid

Add a custom column to the page

Add business logic to a custom column

Validate the customization

Feedback

Additional resources