Git Product home page Git Product logo

vsts-uservoice-ui-extension's Introduction

Sample extension: User Voice UI

This repo is a sample for how to add contributions to the work item form using the extensibility model of Visual Studio Team Services. You can find the result of this extension in the VSTS marketplace. You can learn more about about the integration cababilities of VSTS in our documentation.

Customer Feedback group on work item form

This sample shows a couple of concepts that can help you to understand better how to integrate with VSTS. The concepts that are showcased in this sample are the following:

  • Add a group to the work item form
  • Add configuration options to your extensions, including a page in the admin area
  • Use a Web API project to allow calling an external resource that doesn't allow Cross Domain

The sample contains the extension itself and a Web API project. The Web API project is hosted in the web-api folder and is using Visual Studio, and the extension itself is in the extension folder.

Web API

The project contains one controller which basically is nothing more than a proxy to call the User Voice APIs. User Voice has a v2 set of APIs, but they don't allow read-only access yet. And since the key that is used to call these APIs is not secured you don't want to use an api key that allows read/write operations. You can find more information about the User Voice APIs at https://developer.uservoice.com/docs/api/reference/. The Web API needs to be hosted in an environment which is publicly accessible when you install the extension on VSTS, and I chose to use Azure. You can publish a Web API in many different ways, including Continuous Deployment with Release Management in VSTS. In this sample I publish right from Visual Studio.

To create an API key for your User Voice account, go to https://[account name].uservoice.com/admin/settings/api (don't forget to replace the [account name]).

Extension

The extension consists of a manifest (vss-extension.json) to describe the extension. That is basically the only file that is in the installed package. All other files are again hosted on Azure. You could have chosen to include them in the package so you don't have to host them yourself, but since I needed the Web API project anyway I chose to host the files on Azure too. When there is an update to the extension, I only need to update the files on Azure.

The extension contains a couple of folders for the plumbing (like the images that you see in the marketplace), but the most important ones are vsts-extension-uviz-settings-hub and vsts-extension-uviz-wi-group. These folders contain the files that are used by the contribution points in the extension. The code should be pretty self explanatory, but if you have questions, don't hestitate to reach out to me.

Ewald Hofman

vsts-uservoice-ui-extension's People

Contributors

davidstaheli avatar ewaldhofman avatar ewaldhofman-zz avatar microsoft-github-policy-service[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vsts-uservoice-ui-extension's Issues

Customer Feedback - Authorization Error

We've enabled the UserVoice integration made available recently on our Team Services setup.

We can push UserVoice tickets into Team Services, however where we expect to see the customer feedback information (within a Team Services PBI) we receive an unauthorized error image and message.

We have added the UserVoice account details and API key into the UserVoice UI settings area of Team Services.

Please can we confirm why this authorization error occurs, if this is known bug or if there is something we can do to negate this?

Any advice would be greatly appreciated

Support custom UserVoice domain name

We have aliased our domain for .uservoice.com. They allow you to do this on paid subscriptions.

The problem is that when we link to a VSTS work item from UserVoice, it now supplies our aliased domain name, which works with their API and their integration, but this extension is specifically looking for hyperlinks following a convention of "*.uservoice.com"

While our domain alias still happens to contain the word "uservoice" I know that's not always going to be the case for all accounts.

Maybe fallback to checking the hyperlink route format matches this pattern?
"/fourms/{[0-9]+:[0-9]+}/suggestion/{[0-9]+:[0-9]+}"

The non-aliased hyperlinks still work even with the custom domain so upon match, you could still use:
<account_name>.uservoice.com/{matched_route}
to acquire the content for the work item details.

Show the comments and be able to reply

Add an indicator that shows the number of comments. Using a color show the age of the most recent comment.
Also allow to reply to the comment from the extension

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.