Search code examples
javascriptazure-devopsazure-devops-extensions

VSTS extensions - Hyperlinks in Grid Source

Made my own VSTS extension that returns a Grid with a list of bugs read using a wiql.

I want the (UI Control) Grid to include the bug title and hyperlink to the bug url so that it is possible to click on the title to jump to the bug. I could not find any possibility to do that, but I do not believe that it is not possible.

This is how I'm building my source to the grid:

    var sourceArray = workItems.map(function (w) {
        return [
            w.id, 
            w.fields["System.Title"], 
            w.fields["System.State"], 
            w.fields["GrundfosScrum.gfSeverity"], 
            w.fields["GrundfosScrum.gfLikelihood"], 
            w.fields["System.AssignedTo"]];
    });

And later:

    var options = {
        width: "100%",
        height: "500px",
        source: sourceArray,
        columns: [
            { text: "ID", index: 0, width: 100, headerCss: "mystyle" },
            { text: "Title", index: 1, width: 200, headerCss: "mystyle" },
            { text: "State", index: 2, width: 100, headerCss: "mystyle" },
            { text: "Severity", index: 3, width: 200, headerCss: "mystyle" },
            { text: "Likelihood", index: 4, width: 200, headerCss: "mystyle" },
            { text: "Assigned To", index: 5, width: 300, headerCss: "mystyle" },
        ]
    };

I tried to replace w.fields["System.Title"] with w.fields["System.Title"].link(w.url), the result was html hyperlink in the table instead of a hyperlink inside the grid.

Any ideas?

Solution

  • This is not supported by add link in the grid. But you can call Open row details method to to achieve the feature you want. Get the URL information and open a new window when the openRowDetail method is triggered.

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Open Row Sample</title>
    <script src="sdk/scripts/VSS.SDK.js"></script>
</head>
<body>
    <script type="text/javascript">
        VSS.init({
            explicitNotifyLoaded: true,
            usePlatformScripts: true,
            usePlatformStyles: true       
        });
    </script>
    <h1>Open Row Sample</h1>
    <div id="grid-container"></div>
    <script type="text/javascript">
    VSS.require(["VSS/Controls", "VSS/Controls/Grids"],
    function (Controls, Grids) {
    var dataSource = [];
    dataSource.push({key: "VisualStudio", value: "https://www.visualstudio.com/"});
    dataSource.push({key: "Bing", value: "https://www.bing.com/"});

    var grid = Controls.create(Grids.Grid, $("#grid-container"), {
        height: "1000px",
        columns: [
            { text: "Property key", index: "key", width: 150 },
            { text: "Property value", index: "value", width: 600 }
        ],
        source: dataSource,
        openRowDetail: (index) => {
        var info = grid.getRowData(index);
        window.open(info.value);
    }
    });
    VSS.notifyLoadSucceeded();
    });
    </script>
</body>
</html>