在 TFS 仪表板小部件上使用 VSS 控件答案

【问题标题】：Using a VSS Control on a TFS Dashboard Widget在 TFS 仪表板小部件上使用 VSS 控件
【发布时间】：2018-08-03 15:37:32
【问题描述】：

我正在尝试在自定义 tfs 仪表板小部件的配置页面中添加 Visual Studio Team Services (VSTS) Multivalue Combo Control。我能够让小部件出现，并且可以动态地向它添加值。但我无法“保存”该值。下面是我用来尝试创建和保存此控件值的 Javascript。我从第 34 行的浏览器控制台收到“未捕获的类型错误：无法读取未定义的属性'通知'”的错误（我的多选中的“更改”函数。我已尝试将逻辑放入“加载”函数中这通常是您放置小部件逻辑的地方，但随后我收到一个错误，指出在我的 var multiValueCombo = Controls.create(Combos.Combo, CustomContainer, multiValueOptions); 行中未定义“创建”。

关于当前代码的立场。当我更改控件中的值时，“保存按钮”不会启用。我相信这是由于“通知”功能没有触发。

VSS.require(["TFS/Dashboards/WidgetHelpers", "TFS/DistributedTask/TaskAgentRestClient", "VSS/Controls", "VSS/Controls/Combos"], function (WidgetHelpers, TFS_TaskAgentRestClient, Controls, Combos) {
VSS.register("DeploymentReports.Configuration", function () {
    var CustomContainer = $("#custom-combo-container");

    //Creating the Multiselect Control
    var multiValueOptions = {
        type: "multi-value",
        width: 250,
        source: [
            "Ford"],
        change: function () {
            //What it does when you change the value of the multiselect

            var customSettings = { data: JSON.stringify({ iteration: this.getText() }) };
            var eventName = WidgetHelpers.WidgetEvent.ConfigurationChange;
            var eventArgs = WidgetHelpers.WidgetEvent.Args(customSettings);
            widgetConfigurationContext.notify(eventName, eventArgs);   //I get an error for this line "Uncaught TypeError: Cannot read property 'notify' of undefined"
        }
    }
    $("<label />").text("Select the supported languages:").appendTo(CustomContainer);

    var multiValueCombo = Controls.create(Combos.Combo, CustomContainer, multiValueOptions);

    var commandArea = $("<div style='margin:auto' />").appendTo(CustomContainer);


    return {
        load: function (widgetSettings, widgetConfigurationContext, Controls, Combos) { 

            //adding items to the multiselect drop down
            multiValueOptions.source.push("Volvo");
            multiValueOptions.source.push("Jeep");
            return WidgetHelpers.WidgetStatusHelper.Success();
        },

        //Clicking the Save Button
        onSave: function() {
            var customSettings = {
                data: JSON.stringify({
                    cars: multiValueOptions.getText()
                    })
            };                              
            return WidgetHelpers.WidgetConfigurationSave.Valid(customSettings); 
        }
    }
});
VSS.notifyLoadSucceeded();

});

【问题讨论】：

标签： javascript tfs widget azure-devops

【解决方案1】：

根据您的描述，您似乎想将数据保存在组合控件中。 VSTS 扩展能够将用户偏好和复杂的数据结构直接存储在 Microsoft 提供的基础架构上。

与数据存储服务交互的方式有两种：REST API 或 Microsoft 提供的客户端服务，作为 VSS SDK 的一部分。强烈建议扩展开发人员使用提供的客户端服务 API，它为 REST API 提供了一个方便的包装器。

看看关于Data storage的概念。这可确保您的用户数据像其他帐户和项目数据一样安全和备份。这也意味着对于简单的数据存储需求，您（作为扩展提供商）无需设置或管理（或支付）第三方数据存储服务。

该服务旨在让您存储和管理两种不同的数据类型：

设置：简单的键值设置（如用户首选项）

文档：类似复杂对象（文档）的集合

更多关于如何设置存储请参考官方tutorial。

【讨论】：