How to add a Business Manager Extension in Salesforce Commerce Cloud

What’s a Business Manager Extension?

Let’s start with an example. Suppose you want to integrate an Auction feature in your Storefront and Business Manager. SFCC doesn’t have an integrated auction solution. You need to create your solution and integrate it with the existing BM. For this, you need to extend the BM functionalities and use them to create a new feature.

Let’s work on a small use case. Let us create a new screen in the BM that can be used as an Auction Dashboard.

The first thing that we need to do is create a custom cartridge. We can name it bm_auction. Run the script to create it!

sgmf-scripts —-createCartridge bm_auction

This will create four folders inside the cartridge — client, controllers, models, and templates. For this use case, we only need to use a controller and a template.

But before that, we need to create the most important file! — bm_extensions.xml

Let’s see how our BM menu is going to look after implementation -

As you can see, we have a new menu item under Merchant Tools. On clicking ‘Auction Library’, the user should be taken to the Auction Dashboard.

So let’s create the bm_extensions.xml file inside the bm_auction root location. Paste the following code in the file.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<extensions xmlns="http://www.demandware.com/xml/bmmodules/2007-12-11" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.demandware.com/xml/bmmodules/2007-12-11 bmext.xsd">
<menuitem id="auction-library-item" site="true" position="1">
<name xml:lang="x-default">Auction Admin</name>
<short_description xml:lang="x-default">
Auction Administration
</short_description>
<icon>icons/auction-logo.png</icon>
</menuitem>
<menuaction id="auction-library-action" menupath="auction-library-item" site="true" position="1">
<name xml:lang="x-default">Auction Library</name>
<short_description xml:lang="x-default">Auction Library</short_description>
<description xml:lang="x-default">Auction Library</description>
<exec pipeline="Auctions" node="Start" />
<sub-pipelines>
<pipeline name="Auctions-Start" />
</sub-pipelines>
<icon>icons/auction-logo.png</icon>
</menuaction>
</extensions>

In the above code, site = “true” means that it will be displayed under Merchant tools, otherwise, it will be under the Administration navigation menu. Use the position attribute to place the new menu item in the preferred order in the navigation list. The higher the number, the higher in the list it appears.

If you see the pipeline, it’s calling the Start function in the Auctions Controller. Create an Auctions.js controller inside the controllers folder!

'use strict';
var ISML = require('dw/template/ISML');
/**
* Renders the BM template*/
function start() {
ISML.renderTemplate('extensions/custom_auction_page')
}
start.public = true;
exports.Start = start;

This controller renders the custom_auction_page.isml that is the Auction Dashboard page!

Create an extensions folder inside the templates folder and create a custom_auction_page.isml file.

Just add a simple div in this file.

<isdecorate template="application/MenuFrame">
<div>
This is the Auction Dashboard!
</div>
</isdecorate>

There are a couple of steps remaining before we can view our changes in the BM. Let’s do them!

First of all, we need to upload our newly created cartridge.

sgmf-scripts — uploadCartridge bm_auction

Then, we need to register this cartridge in the BM.

Go to Administration > Sites > Manage Sites. Click on ‘Business manager’ under Business Manager Site.

Add bm_auction cartridge and click on ‘Apply’.

The last step is to enable write permission for the Auction module. Only after enabling this, you will be able to see the new menu item.

Go to Administration > Organization > Roles & permissions. Click on Administrator.

Select ‘Business Manager Modules’ and click on ‘Select context’.

Select your site.

Check the write permissions for Auction admin.

That’s it!

Now you will be able to view the new navigation menu items and navigate to the Auction Dashboard by clicking it!

Thanks for reading! :)