Extending Business Tools in Sitecore Experience Commerce 9

Sitecore XC9 offers a new rich & responsive Business Tools UI that allows merchandisers and CSRs to manage products, orders, customers, and promotions among other things with ease. It is built on SPEAK 3 which is Angular based & is hosted in as a separate app on IIS or Azure App Service.

In this post, we'll explore how to extend the service using a data driven approach using the Commerce engine plugin framework.

Business Tools Overview

Business Tools (BizFX) interacts with the Commerce Authoring role to:

• Populate the user interface
• Get catalog data
• Get order data
• Edit and persist commerce entities
• Catalog data driven commerce indexes- CatalogItemsScope, CustomersScope, OrdersScope

Commerce Views Service

The Commerce Views service is provided by the Sitecore.Commerce.Plugin.Views plugin, and provides a data-driven mechanism to dynamically create the UI. The view components are defined on the server side instead of client side. These views are exposed through the Commerce Authoring API. Some of the advantages to using this approach are:

• Plugin architecture used to extend views
• Custom views can be isolated with associated business functionality
• Views can be easily and instantly added or removed by adding/removing the relevant engine plugins.
• Makes upgrades easier

Composite EntityView

A page in Business Tools is composed of a Composite EntityView which is made up of a set of EntityViews. The Master view is the page itself, which contains Child views that are the individual UI components/sections of the page:

EntityView

An EntityView is a POCO class that let's you define the view. It primarily provides a list of properties the view will render. You can also specify how the view should be rendered (such as Flat, Table, Grid etc) by providing a hint to the UI (UiHint). Note that and EntityView can also be further broken down into child views.

The list of ViewProperties allows you to define the values (Value) to display as well as specify how the value should be rendered (such as string, Boolean, DatTime) by providing a render type (UiType).You can even inject your own html by setting UIType = Html!

For a list of supported UIHints and UITypes, refer to this excellent post by Andrew Sutherland from Sitecore/

EntityAction

An EntityAction is associated to an EntityView and allows users to edit values in an EntityView, e.g. selecting a SellableItem in a table and deleting it. The sequence of steps is as follows:

1. View renders available actions
2. User clicks on action (button)
3. Based on the button clicked, the UI gets the Edit View for that action.
4. Dialog box opens for user to edit properties
5. User completes action

Plugin Building Blocks

To tie this all together, here's an example of a plugin that allows you to extend a SellableItem with an additional section with custom properties. There are three main blocks:

Get View block

This block builds the view:

Note that you must make sure that the view is rendered to the correct view, since the block will be hit every time any page is dynamically built up in Business Tools:

Populate Actions Block

This block configures the action. In this example, it adds an icon with an associate action the view:

Do Action Block

This block performs the action. E.g. updating and persisting custom properties on the SellableItem:

Note that you must make sure that your block validates whether the action requested by the UI is supposed to be handled by your block or note:

Hopefully this gives you a good overview of the basics.

Here's a recording and slides from a presentation I recently did at Sitecore User Group Bangalore (SUGBLR) on the same subject: