Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Viva Connections ToolkitNew to Visual Studio Code? Get it now.
Viva Connections Toolkit

Viva Connections Toolkit

M365 Platform Community (PnP)

|
1,365 installs
| (2) | Free
With the Viva Connections Toolkit extension, you can create and manage your Viva Connections solutions on your tenant. All actions you need to perform during the development flow are at your fingertips. Extensions also works with any SharePoint Framework. This toolkit is provided by the community.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Viva Connections Toolkit for Visual Studio Code

Viva Connections Toolkit for Visual Studio Code

version installs

Viva Connections Toolkit is a Visual Studio Code extension that aims to boost your productivity in developing and managing SharePoint Framework solutions helping at every stage of your development flow, from setting up your development workspace to deploying a solution straight to your tenant without the need to leave VS Code.

Architecture | Capabilities | Wiki | Contributing | Support | Code of Conduct | Changelog | Sharing is Caring | Additional resources

Sample Gallery

⚙️ Architecture

Viva Connections Toolkit for Visual Studio Code is an abstraction layer on top of the SPFx Yeoman generator and CLI for Microsoft 365. All operations and actions are performed on the command line level using these two tools with the environment settings on your computer.

This means that the features and capabilities provided through this tool are available for any solution which has been built with SPFx.

⭐ Capabilities

The extension provides the following capabilities:

1️⃣ Welcome experience

The extension automatically detects if you are in a SharePoint Framework project. If not, it will show helpful actions to allow you to create a new SPFx or ACE solution.

Welcome experience

Directly from this view, you may create a new project from scratch or from an existing web part, extension or ACE sample, or ACE scenario.

It is also possible to open an already existing project using Open folder button.

Last but not least it is possible to check your local workspace for the needed global dependencies to develop the SPFx project, like the correct Node version, gulp, yeoman etc., and install them if needed with a single click.

2️⃣ Set up your development environment

To ensure that you can develop SPFx solutions, in Viva Connections Toolkit you may use the check dependencies functionality.

Validate dependency

This action will check if you have the required dependencies to create a new Viva Connections app.

  • Node version: 16
  • NPM dependencies:
    • gulp
    • yo
    • @microsoft/generator-sharepoint

In case when you do not have all dependencies installed, you can use the install dependencies action to install them.

Info: This list is based on the set up your development environment recommendations

3️⃣ Don't Start from scratch. Reuse an SPFx (web part or extension) or ACE sample

From one of the samples gallery, you can kick-start your development with a new project. Create a new SPFx web part Extension or ACE solution with a click of a button. The samples are coming from PnP Samples repo.

Check out how easy it is to create a new project based on a web part sample 👇.

Create project based on web part sample

Or ACE sample 👇.

Create project based on ace sample

4️⃣ Start from an ACE scenario

Start your solution based on the provided set of ACE scenarios with ready-to-use code to showcase what's possible. Scenarios are provided with detailed guidance using the Code Tour to provide you with more details on the structure and options.

5️⃣ Create a new project

Creating a new project was never easier. Just use the create a new project action, and the extension will guide you through the process.

Check it out 👇.

Create new project

It's possible to scaffolding any kind of SPFx project.

Create new project

6️⃣ Login to your tenant & retrieve environment details

The extension also allows you to log in to your Microsoft 365 tenant using CLI for Microsoft 365.

login

Thanks to that the extension will retrieve helpful URLs from your tenant like the link to SharePoint main site and tenant level App Catalog as well as site level.

tenant details

Login-in is also required for some actions to work properly like the deploy action which allows to upload of the .sppkg file to the tenant or site-level App Catalog.

Additionally, when an SPFx project is opened the extension will check serve.json file and suggest updating it to set the initialPage property based on the currently logged-in tenant.

7️⃣ Gulp tasks

One of the sections of the extension shows all possible Gulp tasks one may run on an SPFx project. The tasks allow you to clean, bundle, package, serve the project with a single click.

Gulp Tasks

8️⃣ Actions

The actions section allows unique functionalities that may significantly boost productivity when working with SPFx projects.

Actions

Currently the extension allows you to:

  • Upgrade project - Uses CLI for Microsoft 365 to create a .md report with upgrade guidance to the latest supported SPFx version by the extension. Check out our docs for more details

Upgrade project

  • Validate current project - Creates a validation .md report against the currently used SPFx version in the project. The action will automatically detect the SPFx version used and will validate if the project is properly set up. Check out our docs for more details

  • Rename current project - Forget about manual work and let the extension rename your project and generate a new solution ID. Check out our docs for more details

Rename

  • Grant API permissions - The action will Grant all API permissions specified in the package-solution.json of the current project. This is especially helpful if you just want to debug your SPFx solution using Workbench. No longer do you need to bundle, package, and deploy the project to then go to the SharePoint admin portal and consent to the permissions. All of that is now done with just a single click. Check out our docs for more details

Grant permissions

  • Deploy project - This action will only work when the user is logged in to tenant and the sppkg file is present. The action will deploy the project to the selected (tenant or site) app catalog. Check out our docs for more details

Deploy

  • Add new component - Allows scaffolding a new SPFx project as a new component of the currently opened project. The action under the hood uses the same SharePoint Yeoman generator to scaffold a new project and this feature is an abstraction UI layer. Check out our docs for more details

Add component

  • CI/CD GitHub Workflow - This action will allow you to generate yaml GitHub workflow that uses CLI for Microsoft 365 GitHub actions to bundle, package, and deploy your project to an app catalog on every code push. Check out our docs for more details

CI CD pipeline

  • Open sample/scenario galleries of the SPFx web part, extensions, or ACEs projects - Viva Connections Toolkit supports a couple of sample galleries that may be used to scaffold a new SPFx project. Check out our docs for more details

9️⃣ Help and feedback section

The help and feedback section is a group of links that will redirect the user to documentation, learning paths, ACE designer, MS Graph Explorer, PnP Discord channel, Viva Connections Toolkit repo, and many more.

help and feedback

1️⃣0️⃣ Coding Snippets

The Viva Connections Toolkit comes together as a bundle with two other extensions. One of them is SPFx Snippets created by Elit Struyf.

It contains snippets for working in:

  • JavaScript (resource files)
  • React
  • SASS (SCSS)
  • TypeScript
  • JSON

In order to start using it simply start typing from spfx- and you should see a full list of snippets that will inject code into the current file.

code snippets

Check out the extension details to find out more

Check it out in action 👇

code snippets

📚 Wiki

For more information on how to use the extension, please refer to the wiki.

👩‍💻 Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to grant us the right to use your contribution. For details, visit https://cla.microsoft.com.

When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

If you have ideas for new features or feedback, let us know by creating an issue in the issues list. Before you submit a PR with your improvements, please review our contributing guide.

🙋 Support

This project is a community lead extension provided by the Microsoft 365 and Power Platform Community members. Microsoft employees are closely involved in this work, but the solution is provided under the community brand without direct supportability channels from Microsoft.

👍 Community

Are you building experiences for Microsoft 365? - Everyone is welcome to join our Microsoft 365 and Power Platform Community efforts with community calls, samples and guidance. Join our weekly community calls for Microsoft 365 and Power Platform topics or engage with us on Discord. Everyone is welcome 🧡

🧾 Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information, see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

📄 Changelog

See the changelog for the latest changes.

😍 "Sharing is Caring"

Microsoft 365 & Power Platform Community

🔍 Additional resources

  • Join the Microsoft 365 Developer Program today to get your free Microsoft 365 tenant
  • Join the Microsoft 365 and Power Platform Community community and engage with us on Discord

⚠️ Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft