SPFx webpart development with office fabric ui controls

Question

Hi,

I am new to SPFx development, in my new project we decided to develop the webparts using SPFx React js framework with office fabric ui controls and our environment is SP 2019 onprem.

Below is the mockup for webpart, In this webpart titles(EC-20/DEC.10) and below to the title we have 6 buttons with native language text. When user clicks on specific language button same version of the file needs to be opened
​
Here it is required to display only few recently uploaded files in the document set and max 5 files over the home page.

can someone kindly let me know if there is any office fabric control suits this task and how to proceed with spfx ?

Regards,
Nagendra.

Answer 1

Hi anonymous user-9029 ,

Per my research, there is no Office Frabic UI Control which can fully meet this requirement, please check the Frabic UI Control list here:

https://developer.microsoft.com/en-us/fluentui#/controls/web

Only Pivot control can display a similiar UI like tab to display different file type:

pivot Control

And get recent documents from document set, I suggest you can use PnP js to achieve:

Reading Files

Here is some samples for your reference to get started:

Office UI Frabic Integration

Use PnP Js with SPFX Web Part

---

If an Answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

you can use Basic List control for that: it can be used for displaying data in list-like form:
"A list provides a base component for rendering large sets of items. It’s agnostic of layout, the tile component used, and selection management."

In provided link there are examples of various layouts which can be created with List control.