Forum Discussion
How to edit existing Sharepoint Document Library with SPFx
Dear all,
I'm currently researching how I can edit my existing Sharepoint Document library with SPFx, because I need to hide certain elements in my view that cannot be done the normal way. I also need advanced button functionality in the columns. I'm pretty new to Sharepoint development - but willing to learn!
However, I'm a bit stuck on how to progress further. I followed all the steps of the Setup of the Sharepoint Framework Environment from the official docs until the Self-Signed Developer certificate (Set up your SharePoint Framework development environment | Microsoft Learn) I'm also wondering if I need to setup the MS 365 tenant, because I already have an existing Sharepoint Document Library (which I'm the owner of) Set up your Microsoft 365 tenant | Microsoft Learn Is this step also needed?
In conclusion I'm a bit stuck how to progress further. I kind of expect to be able to load in the Document Library code-wise in VS Studio and then start editing views/columns etc. Or do I have the wrong image of how SPFx works?
You can definitely add more than 2 buttons or more than 2 nested if conditions in JSON formatting expressions.
For example, I have used more than 200 nested if conditions here: SharePoint Online: Display Country Flags using JSON Formatting – multiple selections
Also, you can show/hide buttons in JSON formatting based on existing column values with the help of display CSS property.
For customizing list/library forms, you can either use Power Apps (low code solution) or using SPFx form customizer (coding experience required).
Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
- What are the exact changes you want to do in SharePoint document library view?
- You can show/hide columns from library view using SharePoint out of the box options
- If you need to show/hide other elements based on DOM manipulation, you might need to create SPFx Application Customizer. Read more about it at: How can I include the same JS and CSS files on multiple SharePoint Modern Page?
- What advanced button functionality you need in your library?
- You can do few things like updating column values, calling flow using SharePoint JSON formatting. Examples:
- For more advanced functionalities which cannot be achieved using JSON formatting, you can use SPFx Field Customizer (button for each row) or SPFx ListView Command Set (buttons in library command bar at the top)
You do not need to setup the MS 365 developer tenant if you already have access to Microsoft 365 tenant where you can test and deploy your SPFx solution.
Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
ganeshsanap
First of all thank you for your extensive reply! Really appreciate it. To address some of your questions:1. As for manipulating the view I'm trying to solve this issue that I previously inquired about at the Power Platform Community
2. As for the buttons, for example I have a button that has 3 states based on the flow with different text and color:
From my understanding the JSON formatting can only handle 2 versions with the if statement. I tried adding a third state but this was unsuccesful. I also kind of need to 'disable' buttons, meaning that once an user has clicked on the TEXT 1 button it should be non clickable. I now use a different cursor but users can still technically click on it and start the flow again.
You can definitely add more than 2 buttons or more than 2 nested if conditions in JSON formatting expressions.
For example, I have used more than 200 nested if conditions here: SharePoint Online: Display Country Flags using JSON Formatting – multiple selections
Also, you can show/hide buttons in JSON formatting based on existing column values with the help of display CSS property.
For customizing list/library forms, you can either use Power Apps (low code solution) or using SPFx form customizer (coding experience required).
Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
- What are the exact changes you want to do in SharePoint document library view?
