![]()

#### 

In my [previous blog post](https://www.brimit.com/blog/sitecore-commerce-9-extend-bizfx-part-1), 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](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](https://www.brimit.com/blog/sitecore-commerce-9-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](https://www.brimit.com/blog/sitecore-commerce-9-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

        [![Sitecore Commerce 9: Extend BizFx Part 2](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/1.png?w=350&hash=F28CEA6CCAB032CB74A4D9F9D8E938F9)](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/1.png)

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

- Empty *sc-bizfx-filedownload.component.css*
- *sc-bizfx-filedownload.component.html*

        [![Sitecore Commerce 9: Extend BizFx Part 2](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/2.png?w=900&hash=B2C7F975DE63B5545D0F51253A1D24BB)](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/2.png)
- *sc-bizfx-filedownload.component.ts*

        [![Sitecore Commerce 9: Extend BizFx Part 2](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/3.png?w=900&hash=E6B829EEE650C0265E78D01F02207124)](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/3.png)

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

- Empty *sc-bizfx-longrunningcommand.component.css*
- *sc-bizfx-longrunningcommand.component.html*

        [![Sitecore Commerce 9: Extend BizFx Part 2](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/4.png?w=900&hash=C714B84C58124FD1B16B2DE044B8D968)](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/4.png)
- *sc-bizfx-longrunningcommand.component.ts*

        [![Sitecore Commerce 9: Extend BizFx Part 2](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/5.png?w=900&hash=60EBCC6DE22034514D43283B1894C796)](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/5.png)

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

- Empty *sc-bizfx-fileupload.component.css*
- *sc-bizfx-fileupload.component.html*

        [![Sitecore Commerce 9: Extend BizFx Part 2](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/6.png?w=900&hash=FD43C4ACF5BAFD35737E94964527A8FF)](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/6.png)
- *sc-bizfx-fileupload.component.ts*

        [![Sitecore Commerce 9: Extend BizFx Part 2](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/7.png?w=900&hash=86AEF8745B5CF4646AAC5F772D0FB113)](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/7.png)

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

Navigate to package.json file and add this dependency.

[![Sitecore Commerce 9: Extend BizFx Part 2](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/8.png?w=350&hash=308962698F993FAFF79DB695A2FA19E1)](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/8.png)

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

[![Sitecore Commerce 9: Extend BizFx Part 2](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/9.png?w=350&hash=C9657DB9D13303BDBCB1F0809231D40B)](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/9.png)

[![Sitecore Commerce 9: Extend BizFx Part 2](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/10.png?w=350&hash=803D5D30A8FBE4E276CE9B47AC43C98A)](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/10.png)

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

[![Sitecore Commerce 9: Extend BizFx Part 2](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/11.png?w=900&hash=1B7C401AB6B141703F1AB764A9DB5196)](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/11.png)

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:

[![Sitecore Commerce 9: Extend BizFx Part 2](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/12.png?w=900&hash=7B3E214C9E8208F2D8055690FE538EF6)](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/12.png)

[![Sitecore Commerce 9: Extend BizFx Part 2](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/13.png?w=900&hash=559FE2ED61347BBA69D709FED8BFEC6C)](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/13.png)

[![Sitecore Commerce 9: Extend BizFx Part 2](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/14.png?w=900&hash=AE5156FAD3D2049860791015BEF9E05C)](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/14.png)

[![Sitecore Commerce 9: Extend BizFx Part 2](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/15.png?w=900&hash=6F435E5D72335AA74C177F612630A9D2)](https://www.brimit.com/-/media/project/brimit/blog/2020/apaliakou/post-6/15.png)

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

Stay tuned!

###### More from author

[##### Sitecore OrderCloud: Restricting access to a custom middleware endpoints for Anonymous customers
August 13, 2024](https://www.brimit.com/blog/sitecore-ordercloud-restricting-access-to-custom-middleware-endpoints-for-anonymous-customers)[##### Sitecore OrderCloud: Cannot Create a Buyer and a Supplier with the Same ID
March 31, 2023](https://www.brimit.com/blog/sitecore-ordercloud-cannot-create-a-buyer-and-a-supplier-with-the-same-id)[##### Sitecore OrderCloud: How to Start Using “Me and My Stuff”
November 29, 2021](https://www.brimit.com/blog/sitecore-ordercloud-how-to-start-using-me-and-my-stuff)

###### Author

[!\[apaliakou\](https://www.brimit.com/-/jssmedia/feature/blogs/authors/apaliakou.jpg?h=216&iar=0&w=360&hash=5BE96F17AE5B47F66D9F684B87773675)
Andrei Paliakou
Sitecore MVP/ Lead Developer](https://www.brimit.com/blog/author?authors=Andrei%20Paliakou)

###### More By Categories

[#Events](https://www.brimit.com/blog?categories=#Events)[#How-to](https://www.brimit.com/blog?categories=#How-to)[#News](https://www.brimit.com/blog?categories=#News)[#Guides](https://www.brimit.com/blog?categories=#Guides)

###### More by Platform

[Data and AI](https://www.brimit.com/blog?platforms=Data%20and%20AI)[DXP](https://www.brimit.com/blog?platforms=DXP)[E-commerce](https://www.brimit.com/blog?platforms=E-commerce)[Internet of Things](https://www.brimit.com/blog?platforms=Internet%20of%20Things)[Sales and marketing automation](https://www.brimit.com/blog?platforms=Sales%20and%20marketing%20automation)

#### More on Sitecore

[!\[How Vercel Will Help You Save Effort When Deploying Sophisticated Sitecore Projects\](https://www.brimit.com/-/jssmedia/project/brimit/blog/2024/vercel_cover-image.png)
#Guides#How-toDXPE-commerce
##### How Vercel Will Help You Save Effort When Deploying Sophisticated Sitecore Projects
Optimize and accelerate the development and deployment of complex multisite Sitecore projects.
Alexei Vershalovich on July 17, 2024](https://www.brimit.com/blog/how-vercel-will-help-you-save-effort-when-deploying-sophisticated-sitecore-projects)

[!\[Training Up Tomorrow's Sitecore MVPs: a Mentoring Success Story\](https://www.brimit.com/-/jssmedia/project/brimit/blog/2023/sitecore-mentoring---cover-image.png)
#How-toDXP
##### Training Up Tomorrow's Sitecore MVPs: a Mentoring Success Story
How to participate in the Sitecore Mentor program and help younger colleagues jump-start a career in Sitecore development.
Sergey Baranov on October 2, 2023](https://www.brimit.com/blog/training-up-tomorrows-sitecore-mvps)

[!\[Going Headless. Part 2: When a Headless CMS Is Your Best Bet (if you have Sitecore)\](https://www.brimit.com/-/jssmedia/project/brimit/blog/2022/headless/adobestock_456986731.jpg)
#How-toDXPE-commerce
##### Going Headless. Part 2: When a Headless CMS Is Your Best Bet (if you have Sitecore)
Discover how a headless CMS can benefit organizations that use Sitecore.
Daniil Raschupkin, Palina Trokhautsava on September 15, 2022](https://www.brimit.com/blog/going-headless-part-2-when-a-headless-cms-is-your-best-bet-if-you-have-sitecore)

![](https://bat.bing.net/action/0?ti=187017043&tm=gtm002&Ver=2&mid=0e9a34ec-d1b9-4d95-9a83-3bb63c2b9707&bo=2&gtm_tag_source=1&pi=0&lg=en-US&sw=800&sh=600&sc=24&nwd=1&tl=Sitecore%20Commerce%209%3A%20Extending%20BizFx%20(Part%202)&kw=Sitecore%20Commerce%209%3A%20Extending%20BizFx%20(Part%202)&p=https%3A%2F%2Fwww.brimit.com%2Fblog%2Fsitecore-commerce-9-extend-bizfx-part-2&r=&lt=398&evt=pageLoad&sv=2&asc=D&cdb=AQAY&rn=874144)