VSTS 扩展网格控制标题样式答案

【问题标题】：VSTS extensions Grid Control header styleVSTS 扩展网格控制标题样式
【发布时间】：2017-12-25 18:40:56
【问题描述】：

制作我自己的 VSTS 扩展。该扩展返回一个网格，其中包含项目中的错误列表以及对这些错误进行的一些计算。

我想设置网格标题的样式以使字体更大并具有不同的背景。

我检查了 MS (https://www.visualstudio.com/en-us/docs/integrate/extensions/reference/client/controls/grid) 的文档，他们提到了指定 HeaderCss 类的可能性。所以我做了以下事情： - 我在我的 html 标头中创建了一个 CSS 类：

<head>
    <style>
    .mystyle {
        background-color: coral;
        color: white;
        font-size: 25px;
    }
    </style>
    <title>Weighted Defect Count Calculation</title>
    <script src="sdk/scripts/VSS.SDK.js"></script>
</head>

我在 javascript 中添加了类名，其中定义了网格列选项：

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

我在运行扩展程序时收到 401 Unauthorized 错误。如果我删除 HeaderCss 东西，那么它会完美运行。

我尝试了“mystyle”（双引号）。我收到语法错误
我尝试了“mystyle”（使用单个 qoute）。我收到语法错误

有人可以帮忙吗？

来自 MS 的文档：https://www.visualstudio.com/en-us/docs/integrate/extensions/reference/client/controls/grid

我遵循的扩展教程在这里：http://nocture.dk/2016/01/02/lets-make-a-visual-studio-team-services-extension/

【问题讨论】：

你能在一个驱动器中显示你的整个扩展吗？此外，您还可以参考 Build-Inspector 示例扩展 github.com/Microsoft/vsts-extension-samples/blob/master/…。
当然。可以在此处找到扩展 index.html 文件 (1drv.ms/u/s!AkWmBwckPdKZgQcRdU__hqwtiQVw)。这是扩展中唯一的文件，其他是标准文件（vss-extension.json和VSS.SDK）。
我无法重现此问题。另外我认为指定 headerCss 不会导致 401 错误。打包前是否更改了扩展的版本？您可以尝试清除 Internet 浏览器的 cookie 并检查结果。您也可以通过开发者工具 (F12) 调试代码。另一方面，HeaderCss 的值是字符串而不是数组或对象，所以它应该像HeaderCss: "mystyle"。
你的扩展的范围是什么？（在 vss-extension.json 文件中）
范围是vso.work

标签： javascript tfs azure-devops visual-studio-extensions

【解决方案1】：

改用headerCss:"mystyle"。（第一个字符是小写的）。

另一方面，headerCss 的值是字符串而不是数组或对象。

【讨论】：

谢谢。现在可以了。所以实际上MS文档是错误的，因为它指定了 headerCss: {string} 而不是 headerCss: "string"