代码之家 › 专栏 › 技术社区 › Journeyman1234

了解TFS小部件的JavaScript

azure-devops-rest-api azure-devops tfs javascript

0

Journeyman1234 · 技术社区 · 8 年前

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

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

然而,我不得不承认,我无法理解扩展它所需的结构

接近尾声时,它使用“load:function”并返回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 只是想看看会发生什么-我得到了“未定义”或类似的东西(它肯定是一个有效的JavaScript对象)

当您有“load:function”时,该键似乎就在末尾,只是只允许返回一件事?我之所以知道这一点,是因为如果我将它返回的函数更改为我编写的函数,而不是示例中的函数,它工作得很好,但问题仍然是,我只能处理一个API调用的结果。

1 回复 | 直到 6 年前

1

starian chen-MSFT 8 年前

您可以调用多个API,本文中的代码只是一个简单的示例。

对于Widget扩展,您只需要在load函数中返回状态(例如Success()),这样您就可以在函数末尾返回状态。例如:

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");
                        }
                    }