{"id":7320,"date":"2025-01-16T13:11:19","date_gmt":"2025-01-16T13:11:19","guid":{"rendered":"https:\/\/softreetechnology.com\/blog\/?p=7320"},"modified":"2025-01-16T13:11:21","modified_gmt":"2025-01-16T13:11:21","slug":"enhancing-sharepoint-online-with-spfx-building-interactive-panels-using-react-and-fluent-ui","status":"publish","type":"post","link":"https:\/\/softreetechnology.com\/blog\/sharepoint\/enhancing-sharepoint-online-with-spfx-building-interactive-panels-using-react-and-fluent-ui\/","title":{"rendered":"Enhancing SharePoint Online with SPFx: Building Interactive Panels Using React and Fluent UI"},"content":{"rendered":"\n<p>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.<\/p>\n\n\n\n<p><strong>Technologies Used<\/strong><\/p>\n\n\n\n<p>\u2022 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.<\/p>\n\n\n\n<p>\u2022 React is a JavaScript library for rendering user interfaces, which is why it is used in designing the interactive panel component.<\/p>\n\n\n\n<p>\u2022 TypeScript is an extended version of Javascript that helps in introducing static typing to help write well-organized and easy to manage code.<\/p>\n\n\n\n<p>\u2022 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.<\/p>\n\n\n\n<p>\u2022 SharePoint REST API \u2013 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.<\/p>\n\n\n\n<p><strong>.ts file(PanelAppWebPart.ts)<\/strong><br><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdY6LLLvlGn72oKx3b8ki6_Ma0TyXI3LHpgh37yqDU7QIT-KAlorRrs7aCOiky0-LaMqWbphv_aHvAXTF88paZhrPRd2up6_5OonZa2DMCo7yoen2-FNEmRxhWZAEBdIaDXxdf7pebhfJo1LYIxr6w?key=T6K9VnPdUSDWg5O5j-aUwLQj\" width=\"602\" height=\"320\"><br><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfzDfioPOfbwYvk3APJAwxVFQpt3IPKpXS8vrbywJZV_ncGnDnG_Fk0ioSGELfkrnzyljVsYXjt6MhDYY79lAQ0z9dpDQjRYRn4y_u9yTKLaDy8o9mni-VK2IoqmzgO_WBR5ORD1Iob1xeRlzuA1w?key=T6K9VnPdUSDWg5O5j-aUwLQj\" width=\"602\" height=\"320\"><\/p>\n\n\n\n<p><strong><br><\/strong><strong>src\\webparts\\panelApp\\components\\IPanelAppProps.ts File<\/strong><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXc0B9DjXAUMy-icmkPk2IXOsRF15AnElzU4WTJtOnOlWqOu6EMaCu5E7ARWRpc6Y6xsCGNeyv-djxmQQyKV-JF_dYko8wgcmllhx2uwXR1U1QD1x8YwyvS-MRbvowAHqYHisn3RMQoJleW_E7VRN-4?key=T6K9VnPdUSDWg5O5j-aUwLQj\" width=\"602\" height=\"320\"><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdRoL-crjLkTHSIZLGrQTNMDEzkdpjjilEuyWfXZHmupL5sLUKlSep9Viya0pXeqdrv1GpP5376aUTmMgKw3uWfbN6ueTdzlOlpyEh1AP8ZYFK4kVjM9ISJbHT4OuqIKakCZwTZzd2QXIAkMAwi7EY?key=T6K9VnPdUSDWg5O5j-aUwLQj\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>src\\webparts\\panelApp\\components\\PanelApp.tsx<\/strong><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfaq_tSpJrHqgIbeWxYLM3xAhkdA3nSotq0r0ovxXZfJwoQhiyAplHtIrkE9J2nUihkfcyfY771dDHoB6MSxz2MW4sNv7Ha1x2GodS-ztfaTX2OyBJFLAHPaECeAPky7z26LiTXI2UrcvwHZ4XMSs4?key=T6K9VnPdUSDWg5O5j-aUwLQj\" width=\"602\" height=\"320\"><\/p>\n\n\n\n<p><strong><br><\/strong><strong>Build and Deploy the Web Part:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Command for Build the project:<\/li><\/ul>\n\n\n\n<p>gulp build<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Command for Bundle the project:<\/li><\/ul>\n\n\n\n<p>gulp bundle &#8211;ship<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Command for Package the solution:<\/li><\/ul>\n\n\n\n<p>gulp package-solution &#8211;ship<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Deploy the .sppkg file to the SharePoint App Catalog.<\/li><li>Add the web part to a modern SharePoint page, and test the panel functionality.<\/li><\/ul>\n\n\n\n<p><strong><br><\/strong><strong>Output Screenshots:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXceg0mmncpCxMbEGlFHRLkI5f5rQkCa__54NYMfz35P7NhmVa58zIIRheWSqVyyekRWz-4DxdU5vEqbZlzAJNhiIq-xTivFonqVr7Rb1lFsqaNFyM1sWx9NFHwjSDFBcv8NAZL5bv-HibSIO21Y784?key=T6K9VnPdUSDWg5O5j-aUwLQj\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXef40cFkKpClynKiR40W-p6Bhc4ayCRyXJnCmoLkDx1Ro1Y0KS3GE97kXxJd42FgDO6Zvg5YhyDhSL4pDBcw1tVMKGKJm70lKjwuJnu0RBNeFO0fzObAVvWGheNPHrYvdRIzH_Hc4Qg_FNrq1Zdec0?key=T6K9VnPdUSDWg5O5j-aUwLQj\" alt=\"\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7321,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[503,56,505,159,507,395,502,504,506],"class_list":["post-7320","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sharepoint","tag-custom-sharepoint-development","tag-sharepoint","tag-sharepoint-app-catalog","tag-sharepoint-online","tag-sharepoint-rest-api","tag-spfx","tag-spfx-deployment","tag-typescript","tag-web-part-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Enhancing SharePoint Online with SPFx: Building Interactive Panels Using React and Fluent UI - Softree Technology<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/softreetechnology.com\/blog\/sharepoint\/enhancing-sharepoint-online-with-spfx-building-interactive-panels-using-react-and-fluent-ui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Enhancing SharePoint Online with SPFx: Building Interactive Panels Using React and Fluent UI - Softree Technology\" \/>\n<meta property=\"og:description\" content=\"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 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/softreetechnology.com\/blog\/sharepoint\/enhancing-sharepoint-online-with-spfx-building-interactive-panels-using-react-and-fluent-ui\/\" \/>\n<meta property=\"og:site_name\" content=\"Softree Technology\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-16T13:11:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-16T13:11:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2025\/01\/Enhancing-SharePoint-Online-with-SPFx-Building-Interactive-Panels-Using-React-and-Fluent-UI.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Enhancing SharePoint Online with SPFx: Building Interactive Panels Using React and Fluent UI - Softree Technology","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/softreetechnology.com\/blog\/sharepoint\/enhancing-sharepoint-online-with-spfx-building-interactive-panels-using-react-and-fluent-ui\/","og_locale":"en_US","og_type":"article","og_title":"Enhancing SharePoint Online with SPFx: Building Interactive Panels Using React and Fluent UI - Softree Technology","og_description":"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 [&hellip;]","og_url":"https:\/\/softreetechnology.com\/blog\/sharepoint\/enhancing-sharepoint-online-with-spfx-building-interactive-panels-using-react-and-fluent-ui\/","og_site_name":"Softree Technology","article_published_time":"2025-01-16T13:11:19+00:00","article_modified_time":"2025-01-16T13:11:21+00:00","og_image":[{"width":1080,"height":1080,"url":"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2025\/01\/Enhancing-SharePoint-Online-with-SPFx-Building-Interactive-Panels-Using-React-and-Fluent-UI.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/enhancing-sharepoint-online-with-spfx-building-interactive-panels-using-react-and-fluent-ui\/#article","isPartOf":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/enhancing-sharepoint-online-with-spfx-building-interactive-panels-using-react-and-fluent-ui\/"},"author":{"name":"admin","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/person\/98740297642f06debccdcee2de84086b"},"headline":"Enhancing SharePoint Online with SPFx: Building Interactive Panels Using React and Fluent UI","datePublished":"2025-01-16T13:11:19+00:00","dateModified":"2025-01-16T13:11:21+00:00","mainEntityOfPage":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/enhancing-sharepoint-online-with-spfx-building-interactive-panels-using-react-and-fluent-ui\/"},"wordCount":290,"commentCount":0,"publisher":{"@id":"https:\/\/softreetechnology.com\/blog\/#organization"},"image":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/enhancing-sharepoint-online-with-spfx-building-interactive-panels-using-react-and-fluent-ui\/#primaryimage"},"thumbnailUrl":"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2025\/01\/Enhancing-SharePoint-Online-with-SPFx-Building-Interactive-Panels-Using-React-and-Fluent-UI.png","keywords":["Custom SharePoint Development","SharePoint","SharePoint App Catalog","SharePoint Online","SharePoint REST API","SPFx","SPFx Deployment","TypeScript","Web Part Development"],"articleSection":["SharePoint"],"inLanguage":"en","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/softreetechnology.com\/blog\/sharepoint\/enhancing-sharepoint-online-with-spfx-building-interactive-panels-using-react-and-fluent-ui\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/enhancing-sharepoint-online-with-spfx-building-interactive-panels-using-react-and-fluent-ui\/","url":"https:\/\/softreetechnology.com\/blog\/sharepoint\/enhancing-sharepoint-online-with-spfx-building-interactive-panels-using-react-and-fluent-ui\/","name":"Enhancing SharePoint Online with SPFx: Building Interactive Panels Using React and Fluent UI - Softree Technology","isPartOf":{"@id":"https:\/\/softreetechnology.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/enhancing-sharepoint-online-with-spfx-building-interactive-panels-using-react-and-fluent-ui\/#primaryimage"},"image":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/enhancing-sharepoint-online-with-spfx-building-interactive-panels-using-react-and-fluent-ui\/#primaryimage"},"thumbnailUrl":"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2025\/01\/Enhancing-SharePoint-Online-with-SPFx-Building-Interactive-Panels-Using-React-and-Fluent-UI.png","datePublished":"2025-01-16T13:11:19+00:00","dateModified":"2025-01-16T13:11:21+00:00","breadcrumb":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/enhancing-sharepoint-online-with-spfx-building-interactive-panels-using-react-and-fluent-ui\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/softreetechnology.com\/blog\/sharepoint\/enhancing-sharepoint-online-with-spfx-building-interactive-panels-using-react-and-fluent-ui\/"]}]},{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/enhancing-sharepoint-online-with-spfx-building-interactive-panels-using-react-and-fluent-ui\/#primaryimage","url":"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2025\/01\/Enhancing-SharePoint-Online-with-SPFx-Building-Interactive-Panels-Using-React-and-Fluent-UI.png","contentUrl":"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2025\/01\/Enhancing-SharePoint-Online-with-SPFx-Building-Interactive-Panels-Using-React-and-Fluent-UI.png","width":1080,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/enhancing-sharepoint-online-with-spfx-building-interactive-panels-using-react-and-fluent-ui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/softreetechnology.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Enhancing SharePoint Online with SPFx: Building Interactive Panels Using React and Fluent UI"}]},{"@type":"WebSite","@id":"https:\/\/softreetechnology.com\/blog\/#website","url":"https:\/\/softreetechnology.com\/blog\/","name":"Softree Technology","description":"Celebrating 10+ Years in SharePoint Consulting !","publisher":{"@id":"https:\/\/softreetechnology.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/softreetechnology.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/softreetechnology.com\/blog\/#organization","name":"Softree Technology","url":"https:\/\/softreetechnology.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2023\/03\/cropped-white-logo-soft.png","contentUrl":"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2023\/03\/cropped-white-logo-soft.png","width":844,"height":230,"caption":"Softree Technology"},"image":{"@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/person\/98740297642f06debccdcee2de84086b","name":"admin","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6fc78c8a7aa3fb0bf43c3b9a2e3962d7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6fc78c8a7aa3fb0bf43c3b9a2e3962d7?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/softreeconsulting.com"],"url":"https:\/\/softreetechnology.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts\/7320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=7320"}],"version-history":[{"count":1,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts\/7320\/revisions"}],"predecessor-version":[{"id":7322,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts\/7320\/revisions\/7322"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/media\/7321"}],"wp:attachment":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=7320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=7320"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=7320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}