Extending VSTS – Setup

Last year Visual Studio Team Services (formerly known as Visual Studio Online) released support for extensions. There are some great samples on GitHub and a growing number of finished extensions in the marketplace. One of my published extensions is Estimate, a planning poker implementation for VSTS.

Extending VSTS is really easy, there is documentation and some great examples at the official GitHub repository.

Since I work on the Agile planning tools and work item tracking, I would like to show with a few simple examples how you can add functionality to your backlogs, boards, and queries. To make it really easy I’ve published  a small seed project that contributes a single menu item to the work item context menu and which will be the base for some extensions with a bit more functionality. If you’re already familiar with VSTS extensions feel free to skip immediately to part 2.

The seed project is available at GitHub; here is a step by step description how to build, publish, and install it:

  1. First you need a VSTS account, it’s free, just register with your Microsoft account.
  2. Create a publisher: With your Microsoft account, sign in at the marketplace and pick an ID and a display name:
  3. Generate a personal access token: Login to VSTS, go to My Security:

    then to the Personal access tokens section:

    generate a token for All accessible accounts:

    copy and save the generate token for later:

  4. Clone (or download as zip and extract) the seed project from:
  5. Install nodejs
  6. cd into the folder where you placed the project in step 4
  7. Install required dependencies with
<pre>npm install</pre>
  1. Open the extension manifest, vss-extension.json
  2. Change to the publisher ID you created in step 2:

  3. As part of step 5, the TFS Cross Platform Command Line Interface was installed. This will be used to package and publish the extension. Login to your account by executing <pre>tfx login –service-url https://marketplace.visualstudio.com</pre>
when prompted for the token, use the one generated in step 3. This will save the login information for subsequent operations:  
[<img style="margin-right:auto;margin-left:auto;float:none;display:block;background-image:none;" title="image" src="/assets/wp-content/uploads/2016/02/image_thumb12.png" alt="image" width="673" height="149" border="0" />](/assets/wp-content/uploads/2016/02/image12.png)(**Update:** the uri has changed, please use <https://marketplace.visualstudio.com>)</li> 

  * <div align="justify">
      Finally, execute
    <pre>grunt publish-dev</pre>
    <div align="justify">
      to build, package, and publish the extension using the development configuration. If everything works the output should be similar to this:<br /> <a href="/assets/wp-content/uploads/2016/02/image13.png"><br /> <img style="margin-right:auto;margin-left:auto;float:none;display:block;background-image:none;" title="image" src="/assets/wp-content/uploads/2016/02/image_thumb13.png" alt="image" width="934" height="643" border="0" /><br /> </a>

  * <div align="justify">
      Share with your account: The extension has now been published as a private extension, no one else can see it yet. To test it, we need to share it with our account. There are two ways, one is using the tfx command line, the other is using again the <a href="https://app.market.visualstudio.com/manage" target="_blank">Marketplace</a>. When you login again you should now see the extension and a <em>Share</em> button:<br /> <a href="/assets/wp-content/uploads/2016/02/image14.png"><br /> <img style="margin-right:auto;margin-left:auto;float:none;display:block;background-image:none;" title="image" src="/assets/wp-content/uploads/2016/02/image_thumb14.png" alt="image" width="1296" height="69" border="0" /></a><br /> Just share it with your account<br /> <a href="/assets/wp-content/uploads/2016/02/image15.png"><br /> <img style="margin-right:auto;margin-left:auto;float:none;display:block;background-image:none;" title="image" src="/assets/wp-content/uploads/2016/02/image_thumb15.png" alt="image" width="597" height="280" border="0" /><br /> </a>

  * <div align="justify">
      <strong>Install:</strong> After sharing the extension, it should show up in the <em>Manage extensions</em> page of your VSTS account:<br /> <a href="/assets/wp-content/uploads/2016/02/image16.png"><br /> <img style="margin-right:auto;margin-left:auto;float:none;display:block;background-image:none;" title="image" src="/assets/wp-content/uploads/2016/02/image_thumb16.png" alt="image" width="483" height="188" border="0" /></a>to install, select it, confirm, and allow the requested OAuth scopes:<br /> <a href="/assets/wp-content/uploads/2016/02/image17.png"><br /> <img class=" aligncenter" style="margin-right:auto;margin-left:auto;float:none;display:block;background-image:none;" title="image" src="/assets/wp-content/uploads/2016/02/image_thumb17.png" alt="image" width="185" height="244" border="0" /><img class=" aligncenter" title="image" src="/assets/wp-content/uploads/2016/02/image_thumb18.png" alt="image" width="269" height="208" border="0" /></a> <a href="/assets/wp-content/uploads/2016/02/image19.png"><br /> <img class=" aligncenter" style="margin-right:auto;margin-left:auto;float:none;display:block;background-image:none;" title="image" src="/assets/wp-content/uploads/2016/02/image_thumb19.png" alt="image" width="567" height="501" border="0" /><br /> </a>

  * <div align="justify">
      <strong>Test</strong>: If you now navigate to a query result (create a query and some work items if you haven’t) and open the context menu for any work item, you should see the menu action contributed by the extension:<br /> <a href="/assets/wp-content/uploads/2016/02/image20.png"><br /> <img class="" style="margin-right:auto;margin-left:auto;float:none;display:block;background-image:none;" title="image" src="/assets/wp-content/uploads/2016/02/image_thumb20.png" alt="image" width="433" height="673" border="0" /></a>click will execute the registered action and show the id of the selected work item:<br /> <a href="/assets/wp-content/uploads/2016/02/image21.png"><br /> <img style="margin-right:auto;margin-left:auto;float:none;display:block;background-image:none;" title="image" src="/assets/wp-content/uploads/2016/02/image_thumb21.png" alt="image" width="704" height="246" border="0" /></a>

© 2019 Christopher Schleiden. All rights reserved.

Powered by Hydejack v8.4.0