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.

image

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:
    image
  3. Generate a personal access token: Login to VSTS, go to My Security:

    security

    then to the Personal access tokens section:

    image

    generate a token for All accessible accounts:

    image
    copy and save the generate token for later:

    image
  4. Clone (or download as zip and extract) the seed project from:
    https://github.com/cschleiden/vsts-extension-ts-seed-simple
  5. Install nodejs
  6. cd into the folder where you placed the project in step 4
  7. Install required dependencies with
    npm install
  8. Open the extension manifest, vss-extension.json
  9. Change <your-publisher> to the publisher ID you created in step 2:

    image
  10. 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
    tfx login --service-url https://marketplace.visualstudio.com

    when prompted for the token, use the one generated in step 3. This will save the login information for subsequent operations:
    image(Update: the uri has changed, please use https://marketplace.visualstudio.com)

  11. Finally, execute
    grunt publish-dev
    to build, package, and publish the extension using the development configuration. If everything works the output should be similar to this:

    image
  12. 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 Marketplace. When you login again you should now see the extension and a Share button:

    image

    Just share it with your account

    image
  13. Install: After sharing the extension, it should show up in the Manage extensions page of your VSTS account:

    image
    to install, select it, confirm, and allow the requested OAuth scopes:

    imageimage

    image
  14. Test: 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:

    image
    click will execute the registered action and show the id of the selected work item:

    image
Advertisements

4 comments

  1. Thanks Christopher. This is super helpful. I noticed that there’s no extension point on the toolbar. Do you maybe know the right team to nudge to make that happen? 😉

  2. When I compile the latest I get this,
    Property ‘componentDidMount’ is protected in type ‘Component’
    but public in type ‘Component’.
    typings/globals/vss/index.d.ts(19454,14): error TS2415: Class ‘Component’ incorrectly extends base class ‘Component’.
    Property ‘shouldComponentUpdate’ is protected in type ‘Component’ but public in type ‘Component’.
    Any ideas?

    1. That should’ve been fixed with my last push, the typings directory should not have been created.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s