How to Extend Bizfx Interface to Support Import/Export Features in Sitecore Commerce 9 (Part 2)

In my previous blog post, I have explained what needs to be prepared from the Sitecore Commerce Engine part. Usually you do not need to extend the BizFx website interface. Sitecore Commerce provides different OOTB components, which you can reuse. Can be the situation, that you cannot reuse something OOTB and have to build your own BizFx component. In the current blog post, I will explain how to implement your custom component for BizFx website and how you can make it work with Sitecore Commerce Engine. The source code you can find here: https://github.com/Frog911/Sitecore.Commerce.ImportExport Based on my blog post series, I would explain how to implement components for file downloading and file uploading. As you know, I have implemented Export Price Books feature in Sitecore Commerce Engine. Now I have to implement any sort of button. By clicking on this button, I would save an exported Price Books on my local file storage via BizFx website interface. Also for Import Price Books, I would have any upload file interface.

Let’s start!

When you download Sitecore Commerce, you get Sitecore.BizFX.SDK.zip. You have to unzip it and follow the README file with the instructions to build this SDK. When you are ready with that, you can start to customize BizFx.

First, let’s create Custom folders under bizfx\src\app\components\actions. Under the Custom folder you have to create three folders:

• sc-bizfx-filedownload
• sc-bizfx-fileupload
• sc-bizfx-longrunningcommand
  

Under the sc-bizfx-filedownload folder, you have to create tree files:

• Empty sc-bizfx-filedownload.component.css
• sc-bizfx-filedownload.component.html
  
• sc-bizfx-filedownload.component.ts
  

Under the sc-bizfx-longrunningcommand folder, you have to create tree files:

• Empty sc-bizfx-longrunningcommand.component.css
• sc-bizfx-longrunningcommand.component.html
  
• sc-bizfx-longrunningcommand.component.ts
  

Under the sc-bizfx-fileupload folder, you have to create tree files:

• Empty sc-bizfx-fileupload.component.css
• sc-bizfx-fileupload.component.html
  
• sc-bizfx-fileupload.component.ts
  

For the Download File component, it’s required to add dependency to File Saver.

Navigate to package.json file and add this dependency.

Open bizfx\src\app\app.module.ts file and add our custom components in two places:

The last change needs to be done in bizfx\src\app\components\index.ts file:

Now you have to build your application and deploy it.

After all these changes, you can open Price Books Dashboard and see our custom components:

As you can see, it’s really easy to extend BizFx with your custom components.

Stay tuned!