Commerce POS

Extension deep dive

with the new
Independent POS
SDK

Luke Graham
Mugunthan Mani
1
Dynamics 365 Product
guidance
Implementation Guide General Case
guidance studies
Collective experience gained through
thousands of Dynamics 365 implementations

References to Guide Checklists

other guidance Experience

Highlights Recommended
deliverables
Conceptual
graphic
support

Available at: https://aka.ms/d365implementationguide

2
Agenda
❑ Overview of POS Extension.
❑ Packages and Project Types.

❑ Extension Patterns.

❑ Sample Extension scenario.

❑ Extension Deep dive.

❑ Session Takeaways

❑ Q & A.

3
Overview of POS Extensions

4
 POINT OF SALE ARCHITECTURE
COMMERCE SCALE UNIT (CSU) – CLOUD- OR SELF-HOSTED

AZURE WEB APP / IIS

UI LAYER (HTML + JAVASCRIPT)

OOB Pages and Extension Pages
Controls and Controls

MODERN POINT OF SALE (MPOS) CLOUD POINT OF SALE (CPOS) iOS POINT OF SALE ANDROID POINT OF SALE

WINDOWS APP BROWSER iOS APP ANDROID APP

UI LAYER (HTML + JAVASCRIPT) UI LAYER (HTML + JAVASCRIPT) NATIVE SHELL ANDROID SHELL
OOB Pages and Extension Pages
Controls and Controls UI LAYER UI LAYER

NATIVE CLIENT BROKER

HARDWARE STATION
NATIVE CLIENT BROKER
OOB Extension
Connectors Connectors
HARDWARE STATION
OOB
COMMERCE RUNTIME Connectors
Extension
OOB Services
Services

SQL EXPRESS / SQL SERVER

OFFLINE DATABASE
OOB Extension
Schema Schema

5
POS SDK and Packages

6
Commerce SDK

Packages published to the public feed -

https://pkgs.dev.azure.com/commerce-partner/Registry/_packaging/dynamics365-
commerce/nuget/v3/index.json

Samples available in GitHub -

https://github.com/microsoft/Dynamics365Commerce.InStore

Packages Description

Microsoft.Dynamics.Commerce.Sdk.Pos This package contains all POS libraries required for

Microsoft.Dynamics.Commerce.Sdk.Installers.ModernPos
Microsoft.Dynamics.Commerce.Sdk.ScaleUnit
extension development.
This package is required to generate the POS extension
installer for deployment.
This package is required to generate the Cloud POS
extension installer for deployment.

7
POS Extension Project Types

Projects Type Description

POS Extensions csproj Sample project contains all the POS extensions.

This project will be shared between Cloud POS and

Modern POS.
Modern POS jsproj Sample project to generate the POS appx, proxy and
Commerce runtime settings, and sign the appx.
Modern POS Installer csproj Sample project to generate the installer.

Scale unit csproj Sample project to generate the Cloud POS deployment
package for Cloud Scale unit.

8
Extension Patterns

9
POS Extension Patterns
Create Consume
➢ Dialogs
➢ APIs
➢ New Operations
➢ Runtime
➢ New Handlers
➢ Controls
➢ New Views
➢ Styles
➢ Custom control

Extend

➢ Custom App Bar Buttons

➢ Triggers
➢ Custom Column Sets
➢ Override
➢ Custom control

10
View Extensions
Screen layout designer supports:

❑ Custom fields.
❑ Custom column (Lines and Delivery tab)
❑ Custom controls.

11
View Extensions
Non-screen layout designer
based enhanced to supports:

❑ App bar button

❑ Custom column
❑ Custom controls.

Custom control

12
POS Extension Controls

13
Extension Controls

❑ DataList ❑ AlphanumericNumPad ❑ TransactionNumPad

❑ DatePicker ❑ CurrencyNumPad ❑ Toggle

❑ Menu ❑ NumericNumPad ❑ TimePicker

Use POS controls in extensions - Commerce | Dynamics 365 | Microsoft Docs

14
Extension Points Discovery

15
Extension points

POS Extensions consumes Microsoft.Dynamics.Commerce.Sdk.Pos package.

Dev dependencies:

❑ Pos.Api.d.ts – Extension points.

❑ Pos.Types.d.ts – Extension type definition.

❑ Schema definition file for the extension manifest.

❑ tsconfig file for compiler settings and third-party dependencies.

Microsoft Docs
https://docs.microsoft.com/en-us/dynamics365/commerce/dev-itpro/pos-extension/pos-extension-overview

16
Sample Extension Scenario

17
Scenario
POS must integrate with Gas pump service to show the pump status in the POS and Store user
must be able to sell Gasoline.
Extension Extensions
pattern
Create ❑ New view to show the pump status and button to sell the Gas.

❑ New Headless Commerce API and Commerce runtime services to get the Gas pump status.

❑ Create Custom dialogs to show the Pump Status.

Consume ❑ Consume the POS APIs - Add item to the cart, Save Extensions properties.

❑ Consume POS Controls.

❑ Generate Proxy to consume the Headless Commerce APIs.

Extend ❑ Add Custom button in the Header bar to navigate to the pump status view.

❑ Custom App bar button on the Product Details page to simulate pump flow.

❑ Overridden the Get Keyed in quantity request handler.

❑ Trigger Extension to initialize Pump Status and Knockout bindings.

18
Extension Samples
❑ Cart View extensions.

❑ Custom Controls.

❑ Operations.

Please refer the docs or extension samples.

19
Sample Extension Code walkthrough and Demo.

20
Key Takeaways
❑ Packages and Samples.

❑ Extension patterns and Project types.

❑ Create, Consume and Extend.

21
Upcoming Tech talks
Tech talk title Date Persona

Deep dive on Commerce Extension packaging and
Azure DevOps Build pipeline setup.
Hardware Station Extension deep dive with the
Commerce SDK
Migrate Commerce Runtime and Headless
Commerce (Retail Server) extension to the
Commerce SDK
Dec 14th, 2021 Learn how to package Commerce extension using Developer, Technical
the Commerce SDK and setup Azure DevOps build consultant and Architect.
pipeline to build and generate packages for the
Commerce extensions.
Jan 12th or 13th Deep dive on how to customize the Hardware Developer, Technical
TBD station (HWS) to integrate with Payment terminal or consultant and Architect.
hardware device with Commerce SDK.
Jan 26th or 27th Learn how to migrate the Commerce runtime and Developer, Technical
TBD Headless Commerce extension to the Commerce consultant and Architect.
SDK.

22
Q&A

23