This is a Part-2 of customizing Sitecore Commerce Business Tools. To see how to setup the environment for customization before you could start creating a custom component see Part-1
Often you have seen entity details are shown in Flat view i.e. horizontally, fields and there values are displayed. If you have too many fields to display flat view doesn’t seem to be user friendly. In this case the best way to display such details will a vertical view.
This post assumes Instance of Commerce Engine deployed in development environment and a custom entity is created. This is just a example on how to extend Business Tools using Angular which shows the flexibility of Business Tools in terms of cusotmization.
I have a entity named Organization and captures details for same which has quite a few properties as seen in below screen-
There are around 10 fields in the details section of the entity. These fields are squeezed and also doesn’t look user friendly. This would go more ugly if there are more fields added in the entity.
Sitecore Entity View default UIHint is Flat where a single row is displayed in a form of table.
This would look better if it is displayed in Vertical View or Form View i.e. each field in a different row.
Lets see how this can be done using BizFx SDK and the development environment we have created in this post – <<ENTER SETUP DEV BUSINESS TOOL ENVIRONMENT LINK HERE>>
Sitecore business tools already have Flat and Table View. Flat been default. Lets create a new view called as Vertical View.
Open the folder where the SDK zip file was extracted and navigate to src/app/components/views folder
View folder should look like this-
Copy paste and rename following files-
Copy and Rename sc-bizfx-flatview.component.css to sc-bizfx-verticalview.component.css
Copy and Rename sc-bizfx-flatview.component.html to sc-bizfx-verticalview.component.html
Copy and Rename sc-bizfx-flatview.component.ts to sc-bizfx-verticalview.component.ts
Open sc-bizfx-verticalview.component.html. Change the table to display the property name and value-
That’s all changes required to have a custom component in Business Tools.
Next open PowerShell and build the changes made and run the Business Tools site
The site should now listen to 4200 port.
Now lets create/update a entity view with a Vertical view UIHint. I already have entity with the Flat view. I will change the UIHint to “Vertical” to display the properties and there values vertically.
Build and deploy engine changes to Authoring site. (Not covered in this blog)
Using Flat view either squeezes the table or a horizontal scroll which is not user friendly. With the Verticalview Organization details are now shown vertical with the Property Names and Values in different rows.
This view is more readable for user specially with the long text in Address.
Easy to implement and test on development environment you can build more complex controls with the same approach
Next post will see how to deploy these changes to production.
One of the highlights of newly released Sitecore Experience Platform (10.0) is that it brings support to rapid deployment and more efficient solution and team onboarding with modern Docker technology i.e. Sitecore Containers.
To know more about containers here is the official documentation from Sitecore on Containers
Lets get started to create a Sitecore XP 10 development environment using docker.
After installation Restart the machine, this should enable the Hyper-V feature
This should also have Docker running and should see the same in system tray
Switch to Windows containers
Right click on Docker icon and switch to Windows Container. See this link for more details as per guide
Download and Prepare for installation
Download and extract the Sitecore Container Deployment Package from the Sitecore Developer Portal and store it on your local workstation
Login to Sitecore portal before download
Copy and extract SitecoreContainerDeployment 10.0.0 rev. 004346-027.zip for e.g:- C:/SitecoreXPDocker
Navigate to C:/SitecoreXPDocker/ltsc2019/sitecore-xp0
Open .env file, we need to fill in this parameters before starting installation. You can find more details in guide for each option.
Download PowerShell script to initialize (init.ps1) the parameters from docker-examples. Parameter values in .env can be populated manually by individually executing the commands for required for each parameter in guide(see Appendices) but I would recommend to use init.ps1 as this is provided by Sitecore and hence tried and tested.
Folder structure should look like this-
Change parameter values in init.ps1 file.
Change the SitecoreAdminPassword, SqlSaPassword and host entries as per requirement. If you are changing host entries also ensure the same is updated in .env file for CM_HOST and ID_HOST parameters. Lets keep the default values.
Populate .env file using init command
Open PowerShell as a Administrator, navigate to the folder having init.ps1 file.
Execute init.ps1 script. You may have to set the execution rights to current user to execute the script-
1. Switch to sitecorexp10 folder. Open Solr-SingleDeveloper.json file
2. Change the Install Root for SOLR – DefaultValue
"Description": "The file path to install Solr. This config will add the prefix and solr version e.g C:\\Solr becomes C:\\Solr\\[SolrServicePrefix]Solr-8.4.0",
Resolution- Check or reset the service account credentials that are created for the app pools as part of deployment. You can find the credentials in installation script with variable name $UserName (CSFndRuntimeUser) and $Password. Try accessing the https://commerceops.sc.com site if there are any other errors.
After installing Sitecore 10 using Sitecore Installation Assistant (see the blog here how to install Sitecore XP 10 usig SIA) you might find the Identity Server not working since it is not able to start the process with command line ‘dotnet .\Sitecore.IdentityServer.Host.dll’
You may see this error in Application logs.
You may also see Sitecore login been not redirected to identity server site instead redirects to XP login page.
To identify the problem first try manually starting the process in powershell. You can find command to start the process in error.
Navigate to the identity server site physical folder and execute this command
This should tell the solution to the issue i.e. it needs AspNetCore version 2.1.16 to be installed.
Are you wondering why this error occurred while registering user?
You may come across this error when the engine is trying to create a customer in Commerce and the domain you have created for Storefront is not available in Commerce. The customer in commerce are mapped to the domain and if the domain is not found or matched with what is configured in Storefront this error will come.
So how to resolve this error-
Lets say your Storefront is mapped to use the default environment i.e. HabitatShops.
Follow steps below to make this work-
Open PlugIn.Habitat.CommerceAuthoring-1.0.0.json and find the CustomerPropertiesPolicy
You may see the list of Domains default been Storefront, extranet and CommerceUsers
Add the domain you have configured in your storefront in this list e.g.:- HabitatStorefront
Add the same domain to PlugIn.Habitat.CommerceShops-1.0.0.json
Ensure the domain is created and mapped in the Storefront correctly
Bootstrap Habitat Environment using Postman and now you should see the domain in the list whilst creating a customer
You should now able to see the domain in the list whilst creating a customer in business tool
Should also allow to create a customer with the new domain-
In my previous post we saw the first step to create a new plugin by adding a new plugin project to the solution, restoring the correct binaries and reference new plugin to the Engine project.
In this post I will share what comes with the Plugin project template.
Sitecore Commerce Plugin project template creates folders and classes which helps to quick start creating a plugin, lets see what are these files –
To my understanding command is unit of work to perform set of actions. Commands allows to execute a pipeline and blocks within a transaction scope. Create a custom command by inheriting from CommerceCommand class. Use PerformTransaction method to run a pipeline in a transaction scope.
2. Components –
If you want to extend existing or custom entities, use component. Component has attributes that support entities.
3. Controllers –
Controllers expose commerce functionality implemented in plugins. They are the api endpoints. Sitecore Commerce has various Controller type- Entity, Api, Devops and Command. Create your own controllers by inheriting from CommerceController
They are the persistable unit and represent the business concept. Inherited from the CommerceEntity they has a unique identifier that helps to retrieve the entity by using a Entity controller type.
5. Models –
They are the POCO classes that are reusable in entities and components. Can be used to present data as part of command response .
6. Pipelines – They do the heavy lifting in plugin by making it possible to define the extensible behavior. Create your own pipeline and add blocks you want to execute to implement your business logic. Blocks within pipelines execute in a sequence they are registered.
7. Policies –
Policies defines behavior for the functionality provided by the plugin. Its is recommended to not extend or inherit out-of-box plugins instead create your own. Plugins can be changed or created new by updating the JSON files provided in environment folder of the various roles site.
ConfigureSitecore class helps to register the pipeline and block definitions that a plugin defines. You can create a new plugin and AddPipeline or extend the existing pipeline by adding a block After or Before any existing blocks. ConfigureSitecore class registers pipelines every time engine loads. You can also register commands or register your custom class in this class.
This registers customer entities, components and controller action with ODATA model. It allows to these elements to be used when a REST API call is made and available when generating a proxy.
On a XC installed instance you might want to customize the XC by adding your own Entities, Components, Entity Views etc. In this topic I will describe how to setup your development environment to add your custom plugin.
This topic assumes a Sitecore CMS and Commerce engine version 9.3 are running under IIS. I am using Visual Studio 2019.
Steps to setup-
Step 1- Extract Commerce Engine SDK
Copy the downloaded SDK Sitecore.Commerce.Engine.SDK.5.0.76.zip on your development folder.
Add the site name in AllowedOrigins in config.json
Open Global.json in wwwroot/bootstrap folder in Engine project
Update SQL Server, UserName and Password in EntityStoreSqlPolicy
Check the database name
7. Update Host to your site host name in SitecoreConnectionPolicy
Note: You may copy the config.json and gloal.json file from Authoring Site hosted in IIS to your project, but to better understand the changes required I have noted the changes.
Step 5 – Update allowed origins in Identity Site
Open Sitecore.Commerce.IdentityServer.Host.xml file. Should be in /config/production/Sitecore.Commerce.IdentityServer.Host.xml
Navigate to section <CommerceEngineConnectClient><AllowedCorsOrigins>
Add https://localhost:5000 to the
Step 6 – Ready for running the Engine
Set Engine as your Startup Project
Change the debug profile to “Engine” instead of “IIS Express”
In IIS stop Authoring site. i.e. for your default instance it might be CommerceAuthoring_sc930 site
Run the Engine from Visual Studio. This will open the console.
Once the plugins are instantiated, it should listen to 5000 port. At this point you have configured Engine to run/debug from Visual Studio. Any calls from the business tool should be received by engine and console should be able to show the request that’s been received.
And here we have business tool sending request to engine running on Visual Studio, see GetNavigationView() been called in console-
Each Storefront in Sitecore Commerce has its own Storefront settings and Catalog configuration. Whilst configuring multiple environment in a single Commerce instance you might come up with the layout not found error on the Product Listing or Details page.
If you see the image above the path is directly been severed from Sitecore Content i.e. a direct navigation is used. To resolve this issue goto- /sitecore/Commerce/Commerce Control Panel/Storefront Settings/Storefronts/Storefront/Catalog Configuration
Uncheck Use Direct Navigation
The product listing and details page should be shown.