SPFx webpart development with office fabric ui controls

Nagendra 121 Reputation points
2020-11-25T12:03:59.423+00:00

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 ?

42480-officialseries.png

Regards,
Nagendra.

SharePoint Server
SharePoint Server
A family of Microsoft on-premises document management and storage systems.
2,249 questions
SharePoint Server Development
SharePoint Server Development
SharePoint Server: A family of Microsoft on-premises document management and storage systems.Development: The process of researching, productizing, and refining new or existing technologies.
1,577 questions
0 comments No comments
{count} votes

2 answers

Sort by: Most helpful
  1. Jerryzy 10,566 Reputation points
    2020-11-26T06:22:17.957+00:00

    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.

    0 comments No comments

  2. sadomovalex 3,626 Reputation points
    2020-11-27T14:53:20.93+00:00

    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.

    0 comments No comments