How to Add Custom Code to Viva Connections or SharePoint
Question details
The user needs to know how to add custom functionality, such as HTML or JavaScript widgets, to Microsoft Viva Connections or a modern SharePoint site.
- Product
- Microsoft SharePoint / Viva Connections
- Device & OS
- not provided
- Scenario
- Customizing modern SharePoint sites or Viva Connections pages with custom code or external widgets.
- Observed behavior
- Modern SharePoint and Viva Connections restrict arbitrary HTML and JavaScript from running directly on the page, requiring a specific deployment method.
Ensure you have the necessary administrative permissions to deploy apps to your organization's SharePoint App Catalog, and verify that your development environment is set up for SharePoint Framework (SPFx).
Create and Deploy an SPFx Client-Side Web Part
To bypass the restrictions on raw HTML and JavaScript, you must package your custom code as a secure client-side web part using the SharePoint Framework (SPFx).
Viva Connections and modern SharePoint sites prioritize strict security and high performance. Because of this, they do not allow arbitrary HTML or JavaScript widgets (like the classic Script Editor) to be embedded directly onto pages.
Instead, Microsoft mandates that all custom functionality be developed and packaged using the SharePoint Framework (SPFx). This ensures the code runs contextually, securely, and responsively across all devices.
Install Node.js, a code editor like Visual Studio Code, and the Yeoman SharePoint generator to prepare your system for SPFx development.
Run the Yeoman generator in your terminal to scaffold a new client-side web part project. Select the framework of your choice (e.g., React, plain JavaScript).
Embed your HTML, JavaScript, and CSS within the web part's render methods, ensuring it complies with SPFx guidelines.
Run the appropriate gulp commands to bundle and package your solution into an .sppkg file.
Upload your generated .sppkg file to your organization's SharePoint App Catalog. Once deployed, you can add the web part to your Viva Connections or SharePoint pages.
Boost Your Document Productivity with WPS Office
While SharePoint and Viva Connections manage your organization's intranet, you need a reliable suite to create the documents hosted there. WPS Office provides a free, lightweight, and robust alternative to Microsoft Office, ensuring seamless document creation and editing.
- 1. Download the Installer: Visit the official WPS website and download the free WPS Office installation package for your operating system.
- 2. Install WPS Office: Run the downloaded file and follow the brief on-screen instructions to complete the setup.
- 3. Edit Your Documents Seamlessly: Open your existing Microsoft Office files directly in WPS Office to edit them with full formatting preservation.
Frequently Asked Questions
Can I embed raw HTML or JavaScript directly into Viva Connections?
No, Viva Connections and modern SharePoint sites restrict arbitrary HTML and JavaScript from running directly on the page for security and performance reasons. You must package the code securely using the SharePoint Framework (SPFx).
Can I still use the Script Editor web part in modern SharePoint?
The classic Script Editor web part is not supported in modern SharePoint out of the box. While the community has created modern script editor web parts using SPFx, deploying custom SPFx code is the officially supported and secure approach.
Where do I deploy my custom SPFx web part?
Once your SPFx project is bundled and packaged, the resulting .sppkg file must be uploaded and deployed to your organization's SharePoint App Catalog by an administrator. From there, it can be added to individual site pages.
