← all posts

VSTS widget for GitHub badges

Gordon Beeming
Gordon Beeming
On this page2 sections ▾

When I first heard about the SDK for widgets in Visual Studio Team Services (VSTS) I wanted to make a couple of widgets, one of these was a GitHub widget that would show some info from any GitHub repo on your VSTS dashboard. This can can be helpful when you have your source open on GitHub but still work out of VSTS.

The implementation is very simple and you can see it and contribute on GitHub on one of my projects VSTS.GitHubWidget.

#Install

Go to the Visual Studio Marketplace and head over to the Integration section and look for GitHub Widget

GitHub Widget in Visual Studio Marketplace
Finding the GitHub Widget in the Visual Studio Marketplace Integration section

You can also follow this link for GitHub Widget. Now all you need to do is hit Install

Install button for GitHub Widget in Visual Studio Marketplace
Clicking the Install button for the GitHub Widget

Click Continue

VSTS extension installation continue prompt
Confirming VSTS extension installation

and then click on Confirm to install the extension

VSTS extension installation confirm prompt
Final confirmation for VSTS extension installation

and you will now have the extension installed in the account you selected.

VSTS extension installation success message
GitHub Widget extension successfully installed

#Usage

On your dashboard click the add widget button

Original image lost
Original image lost...

This will popup the widgets catalog and you will notice the GitHub widget in the list of widgets in the catalog, click on it and then click Add.

Adding GitHub Widget from VSTS widget catalog
Adding the GitHub Widget from the VSTS widget catalog

Your new widget will appear on your dashboard blank

Blank GitHub Widget on VSTS dashboard
Newly added blank GitHub Widget on the dashboard

Click on the Configure icon and the settings will fly out from the right. Enter a name for the widget as well as the username and repo that you want to get information for

Configuring GitHub Widget settings
Configuring the GitHub Widget with repository details

Now click Save and your widget configuration will be applied to your widget and it will show you the counts for Stars, Watches and Forks on your dashboard.

Configured GitHub Widget displaying repository stats
GitHub Widget displaying Stars, Watches, and Forks

When you are finished editing your dashboard the tick icon to complete editing your dashboard

Original image lost
Original image lost...

Now every time you land on your dashboard you will automatically gain insights into your GitHub projects.

GitHub Widget on VSTS dashboard showing project insights
VSTS dashboard with the configured GitHub Widget

Enjoy

Gordon Beeming
Gordon Beeming

Father • Husband • Triathlete • SSW Solution Architect

Related posts