Make custom view datasources observable

[ax365]

Extensibility request:

Allow for custom view datasources to be observable.

---

Context:

This post is related to issue #182.

In that issue, I had the following screenshot:

Selected in red, there is the initialization of the custom view datasource.

In the legacy RetailSDK, when creating custom views, we were able to define the custom view datasource as ObservableArray<ProxyEntities.SalesLine>.

With the new CommerceSDK, it appears that there is an explicit requirement to define the custom view datasource as readonly ProxyEntities.SalesLine[].

---

As a result, with CommerceSDK, we no longer have the ability to easily update/redraw grid column values on the custom view because the data is static.

For example, when the user scans an item on the custom view using the NumPad from issue #182:

The handler methods are indeed triggered and the code manages to update the datasource values properly.

• The RETURN_QTY is incremented
• The AVAILABLE_QTY is decremented

But, the custom view does not render (redraw) these changes because the datasource is no longer an observable.

---

[lukedgr]

Hi, one of the big differences between the Commerce SDK and the Retail SDK is the decoupling of the POS extensions from the knockout.js library that defines observables. Accordingly, we will not be able to modify the control interfaces to include observables.

Please refer to the gas pumps sample view linked below for an example on how to use knockout.js observables and the data list in the Commerce SDK.

https://github.com/microsoft/Dynamics365Commerce.InStore/blob/release/9.47/src/StoreCommerceSamples/Solutions/GasStationSample/Pos/Create/Views/GasPumpStatusView.ts

[ax365]

Hi @lukedgr, thank you for the response.

Please refer to the gas pumps sample view linked below for an example on how to use knockout.js observables and the data list in the Commerce SDK.

I've reviewed the sample GasPumpStatusView.ts.

On first glance, this doesn't quite seem like it translates to what our customization is doing.

• The columns defined inside the gas pumps view datasource, inside the onReady method, are still readonly and static
• Our customization code (in commerce_sdk) is actually already written in this same exact way causing a blocker
• Our customization code (in legacy_sdk) is written differently though, with the view datasource being an observable

It seems like the GasPumpStatusView.ts does have some observables defined but these are external to the grid datasource. Rather, these observables are on the flyout dialog when the user selects a gas pump. They are unbound controls (not tied with the retrieved recordset).

Just sending a bit more context here about our customization as described below:

---

We have a custom view here (replacing the OOTB return transaction view) which displays returnable products (with RETURN_QTY and AVAIL_QTY).

Each time the cashier scans any returnable item, the RETURN_QTY and AVAIL_QTY columns need to be updated +/- by one increment per scan (code and ui).

With legacy_sdk, our view's datasource was defined as observable.

Hence upon scanning in the legacy_sdk, we were able to apply the +/- updates in code and then simply (re)assign the updated observable datasource like this and the framework would redraw the grid with the updated values:

---

I understand that the commerce_sdk would have decoupled from knockout.js. Wondering though if our customization is still compatible with the new design -- readonly grid datasource doesn't seem to allow for much flexibility.

[lukedgr]

@ax365, the IDataList interface has a data property that is settable. When the sales lines are updated you should set the data property to equal the new, updated value. This can be done in a knockout ObservableArray subscribe method if needed, but the scenario you are working on is achievable using the new Commerce SDK controls.