How I can access URL parameters from Azure DevOps extension

1
votes

how can I access URL parameters from Azure DevOps Extension?

I am developing a hub-like extension based on this example. Basically it is a simple page that displays data in a simple table. Data are loaded from an external REST API server.

I want to call this page from some external link and for this, I need to read URL parameter idBuild from this extension. Is this possible?

Example on my URL: http://server/tfs/org/proj/_apps/hub/devops-plugin.default-hub?idBuild=15987

Edit: More details about this plugin:

For Pull requests, my Pull Request server posts Pull request status with the information about some additional checks (x86 integration tests here).

Pull request Status extension

I want this Status to have a URL, so a user can display some additional information about this status on a separate page. This page is my extension.

My plugin page

In this extension, I read some data from an external API and idBuild is the key. So I want to make URL containing idBuild and pass idBuild to this extension page through this URL.

2
azure-devopsazure-devops-extensions
Can you explain how your extension url works? From the extension example you mentioned, I didn't find the idBuild parameter. Where is this parameter obtained from, or where is this parameter used? - Hugh Lin
I edited my question to be more specific about the plugin and URL. I did some investigation and maybe is the react-router the right direction? - Karel Kral

2 Answers

1
votes

Some months ago I faced the same problem as you have now. While using aurelia / typescript I was not able to read the URL parameters, but I found a workaround to retrieve them.

Use the following function to get all the parameters:

function getUrlParameters() {
  var parameters = {};
    window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, (m, key, value) => {
      parameters[key] = value.split("#")[0];
        return parameters[key];
    });
    return parameters;
}

And this piece of code to get the idBuild parameter:

var buildId = getUrlParameters()["idBuild"];
1
votes

Thanks to R Pelzer answer, here is TypeScript version of his function:

private getUrlParameters(): Map<string, string> {
    const parameters: Map<string, string> = new Map<string, string>();
    window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, (m, key: string, value: string) => {
        const val = value.split("#")[0];
        parameters.set(key, val);
        return val;
    });

    return parameters;
}

And here is a usage example:

public async componentDidMount() {

    const idBuildParam = this.getUrlParameters().get("idBuild");
    if (!idBuildParam)
    {
        throw RangeError("Missing 'idBuild' URL parameter");
    }

    const response = await axios.get<PoirotResultDto[]>(`http://localhost:50584/Poirots/${idBuildParam}`);
        .... rest of code
}