Azure DevOps Extension: Passing query parameters to custom build report view

Question

I am building a custom extension for Azure DevOps, specifically a build tab extension . I have a rather basic definition in my manifest.json file.

{
  "id": "my-report-hub",
  "type": "ms.vss-build-web.build-results-tab",
  "targets": [
    "ms.vss-build-web.build-results-view"
  ],
  "properties": {
    "name": "My Build Report",
    "uri": "build/myReport.html"
  }
}

The HTML for the report is dynamic, and there are generated variables that help define the page contents. Essentially the report page shows a list of build errors, and if you click on the error I dynamically bring up a more detailed description of the error.

What I am trying to do is deep link one of these generated pages, which means calling the URL for my build view but somehow passing it parameters. The URL generally looks like this:

https://dev.azure.com/{org}/{project}/_build/results?buildId=302&view=thrillo.my-extension-debug.my-report-hub

But of course this brings up the main page. I want to pass parameters that my TypeScript/JavaScript can read and subsequently pop up the generated page associated with the error number. For example I could add a parameter like this:

https://dev.azure.com/{org}/{project}/_build/results?buildId=302&view=thrillo.my-extension-debug.my-report-hub&errno=11

But when my actual asset's HTML/JS is called it is within an iframe and does not get the arguments (in fact it gets a link to the asset page itself with no query parameters, more or less). I cannot get the "top document" in order to get the view parameters, of course, because that jumps across domains and I have no access (security!)

So the question is: how can I pass an argument through a link/url to my build report view, if that is indeed possible?

Thanks for the help!

Answer 1

I had the same requirement. It's a bit confusing as parts of the documentation point to the new SDK, some to the old; however, using this: https://docs.microsoft.com/en-us/javascript/api/azure-devops-extension-api/ihostnavigationservice I was able to get to:

    import * as SDK from "azure-devops-extension-sdk";
    import { CommonServiceIds, IHostNavigationService} from "azure-devops-extension-api";

    public componentDidMount() {
        SDK.init();
        const hostNavigationService = await SDK.getService<IHostNavigationService>(CommonServiceIds.HostNavigationService);
        let pageNavigationParams = await hostNavigationService.getQueryParams();
        console.log(pageNavigationParams)
    }

Then, adding &errno=11 to the URL should show up in pageNavigationParams .