- [Home page](https://www.brimit.com/) - [Blog](https://www.brimit.com/blog) # How to Extend Bizfx Interface to Support Import/Export Features in Sitecore Commerce 9 (Part 2) [#How-to](https://www.brimit.com/blog?categories=#How-to) [DXP](https://www.brimit.com/blog?platforms=DXP) [Andrei Paliakou](https://www.brimit.com/blog/author?authors=Andrei%20Paliakou) on December 8, 2020 ![Sitecore Commerce 9: Extending BizFx](https://www.brimit.com/-/jssmedia/project/brimit/blog/2020/sitecore-techtalks.png?h=476&iar=0&w=716&hash=0BE2628F3BA744B18C11741903BB4DC2) 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! ###### 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 [Andrei Paliakou](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)