In contemporary SharePoint websites, opening a panel through a custom SPFx (SharePoint Framework) solution helps users view extra content, forms, or interactive features without leaving the page. Using SPFx and React, a panel can be added to the SharePoint experience otherwise debugging obstacles enhancing the UI and providing a non-disruptive way of presenting detailed information. This technique can be utilized in all SharePoint Online to enrich interaction and simplify user tasks.
Technologies Used
• SharePoint Framework (SPFx)- It is a development framework used to develop SharePoint Online customizations and applications. It enables the developers to leverage the modern client-side capabilities to enhance SharePoint.
• React is a JavaScript library for rendering user interfaces, which is why it is used in designing the interactive panel component.
• TypeScript is an extended version of Javascript that helps in introducing static typing to help write well-organized and easy to manage code.
• Office UI Fabric/Fluent UI are sets of UX frameworks that assist in the development of decent looking and uniform UI interfaces in line with the Office 365 design principles.
• SharePoint REST API – This API is not mandatory and can be implemented whenever there is a need to pull in Some dynamic data which would help viewers with some fresh information.
.ts file(PanelAppWebPart.ts)
src\webparts\panelApp\components\IPanelAppProps.ts File
src\webparts\panelApp\components\PanelApp.tsx
Build and Deploy the Web Part:
- Command for Build the project:
gulp build
- Command for Bundle the project:
gulp bundle –ship
- Command for Package the solution:
gulp package-solution –ship
- Deploy the .sppkg file to the SharePoint App Catalog.
- Add the web part to a modern SharePoint page, and test the panel functionality.
Output Screenshots:
