了解 TFS 小部件的 JavaScript

Question

我一直在尝试修改此位置的示例仪表板小部件

https://docs.microsoft.com/en-us/vsts/extend/develop/add-dashboard-widget?view=vsts#part-2-hello-world-with-vsts-rest-api

然而，不得不承认我根本无法理解扩展它所需要的结构

接近尾声时，它使用“加载：函数”和 returns REST API 调用的输出，我可以随心所欲地使用它

但是，我需要进行不止一次不同的 REST 调用，而且我根本不知道如何让该信息在我的函数中可用

我修改了代码，所以它开始是这样的：

VSS.require(["TFS/Dashboards/WidgetHelpers", "TFS/Work/RestClient","VSS/Service", "TFS/WorkItemTracking/RestClient" ],

然后我为我想进行的另一个调用创建了一个句柄：

var queryClient = VSS_Service.getCollectionClient(TFS_Wit_QueryAPI.WorkItemTrackingHttpClient);

var queryResults = queryClient.getQuery(projectId, "Shared Queries/My Bugs");

但是，我无法使用 queryResults 的内容 - 我知道它在某种程度上就像我输入了无效的 URL 它会出错，因为它知道它无法访问那里的任何内容。如果 URL 是正确的，无论我尝试了什么 - 甚至 stringify 只是为了看看返回了什么 - 我得到 'undefined' 或类似的东西（这绝对是一个有效的 JavaScript 对象）

当你有“加载：功能”时，关键似乎就在最后，除了只允许返回一个东西？我知道这是因为如果我将函数 returns 更改为我编写的函数而不是示例中的函数，它工作正常 - 但问题仍然存在，因为我只能处理一次 API 调用的结果。

Answer 1

您可以调用多个API，那篇文章中的代码只是简单的示例。

对于 Widget 扩展，您只需要在加载函数中 return 状态（例如 Success()），因此您可以在函数末尾 return 状态。例如：

var getQueryInfo = function (widgetSettings) {
                        // Get a WIT client to make REST calls to VSTS
                        return TFS_Wit_WebApi.getClient().getQuery(projectId, "Shared Queries/Feedback")
                            .then(function (query) {
                                // Create a list with query details                                
                                var $list = $('<ul>');
                                $list.append($('<li>').text("Query ID: " + query.id));
                                $list.append($('<li>').text("Query Name: " + query.name));
                                $list.append($('<li>').text("Created By: " + (query.createdBy ? query.createdBy.displayName: "<unknown>") ));

                                // Append the list to the query-info-container
                                var $container = $('#query-info-container');
                                $container.empty();
                                $container.append($list);

                                // Use the widget helper and return success as Widget Status
                                return true;
                            }, function (error) {
                                // Use the widget helper and return failure as Widget Status
                           console.log(error);     
                           return false;
                            });
                    }

var getAnOhterQueryInfo = function (widgetSettings) {
                        // Get a WIT client to make REST calls to VSTS
                        return TFS_Wit_WebApi.getClient().getQuery(projectId, "Shared Queries/Bug")
                            .then(function (query) {
                                // Create a list with query details                                
                                var $list = $('<ul>');
                                $list.append($('<li>').text("Query ID: " + query.id));
                                $list.append($('<li>').text("Query Name: " + query.name));
                                $list.append($('<li>').text("Created By: " + (query.createdBy ? query.createdBy.displayName: "<unknown>") ));

                                // Append the list to the query-info-container
                                var $container = $('#query-info-container');
                                $container.empty();
                                $container.append($list);

                                // Use the widget helper and return success as Widget Status
                                return true;
                            }, function (error) {
                                // Use the widget helper and return failure as Widget Status
                           console.log(error);     
                           return false;
                            });
                    }

return {
                        load: function (widgetSettings) {
                            // Set your title
                            var $title = $('h2.title');
                            $title.text('Hello World');

                            var r1= getQueryInfo(widgetSettings);
                            var r2=getAnOhterQueryInfo(widgetSettings);
                            if(r1==true && r2==true){
                                return WidgetHelpers.WidgetStatusHelper.Success();
                             }else{

                           return WidgetHelpers.WidgetStatusHelper.Failure("failed, check error in console");
                        }
                    }

了解 TFS 小部件的 JavaScript

Understanding JavaScript for TFS widget

javascript

tfs

azure-devops

azure-devops-rest-api