Display Azure DevOps Query Results on SharePoint Site

Introduction

In today's fast-paced development environment, seamless integration between tools is crucial for maintaining productivity and efficiency. One powerful combination is SharePoint Online and Azure DevOps. By integrating these two platforms, teams can leverage the collaborative features of SharePoint while accessing real-time data from Azure DevOps.

This article will guide you through the process of installing and configuring the Azure DevOps Query Viewer Web Part in SharePoint Online that displays Azure DevOps Query results.

Whether you're a developer looking to streamline your workflow or an administrator aiming to enhance your team's project management capabilities, this step-by-step guide will help you set up and customize the web part to meet your specific needs.

Azure DevOps Query Viewer Web Part

The Azure DevOps Query web part has been a valuable addition to the My Tasks solution since version 6.x and above.

Prerequisites

Before you begin installing and configuring the web part to display Azure DevOps Query results on your SharePoint Online site, ensure you have met the following prerequisites:

1. Approved API Access for the SharePoint Solution

Ensure that your SharePoint Online environment has the necessary API access approved. This involves registering your SharePoint solution with Entra ID and granting it the required permissions to interact with Azure DevOps REST APIs.

This step is crucial for enabling the web part to retrieve and display data from Azure DevOps.

2. Access to Azure DevOps Organization

You must have access to the Azure DevOps organization that will serve as the data source for the web part. This includes having an active Azure DevOps account and being a member of the organization where the queries are stored.

Without this access, the web part will not be able to fetch the necessary data.

3. Necessary Permissions to Read Information about Projects and Queries

End users who will interact with the web part need to have the appropriate permissions within Azure DevOps to read information about projects and queries. This typically means having at least read access to the projects and queries displayed on the SharePoint site.

Ensure that the user roles in Azure DevOps include these permissions to avoid any access issues during usage.

Adding the Web Part

Once you have met all the prerequisites, you can proceed with adding the Azure DevOps Query web part to your SharePoint Online site.

Navigate to the page where you want to add the web part and click on the "Edit" button. Next, click on the + icon to add a new web part. A list of available web parts will appear.

From the list of web parts, search for the Azure DevOps Query web part. Select it to add it to your page.

Once the web part is added to the page, you will see the following notification about the web part not configured:

You will need to configure it to display the desired Azure DevOps Query results.

Web Part Configuration

Click on the Edit Web Part icon (pencil icon) or Configure Web Part button to open the configuration pane.

Data Source

In the configuration pane, enter the necessary details to connect to your Azure DevOps organization. This includes:

• Azure DevOps Organization.
• Project from which you want to display query results.
• Specific Query you want to display.

Supported Query Types

The Azure DevOps Query web part currently supports only flat queries. Flat queries are straightforward and list work items without any hierarchical structure. This means that the web part can display a simple list of work items that match the specified criteria, but it does not support tree or direct links queries, which involve parent-child relationships or linked work items.

Display Options

Use Row Limit slider to choose how many work items you want to display in the directory at a time.

To enable pagination for the query select Display items in batches of the specified size and choose the position of the pagination control (top, bottom, or both).

If you want to disable pagination select Limit the total number of items returned to the specified amount and specify the desired amount.

Appearance

The last section offers several configuration options to customize how query results are displayed on your SharePoint Online site. Here are two key options:

1. Compact List. The compact mode option allows you to display the details list in a more condensed format. This is particularly useful when you want to fit more information on the screen without requiring users to scroll extensively.

2. Command Bar. The command bar provides users with quick access to various actions and commands related to the displayed query results. This includes options like refreshing the data, exporting to Excel, and more.

Result

By following the steps outlined in this guide, you will successfully integrate Azure DevOps Query results into your SharePoint Online site. This integration allows your team to view real-time data from Azure DevOps directly within SharePoint, enhancing collaboration and project management efficiency.

Conclusion

The Azure DevOps Query web part allows you to access real-time data by displaying up-to-date query results from Azure DevOps, ensuring your team always has the latest information. You can customize the display to meet your specific needs, including options for compact mode and a command bar. Additionally, it improves workflow by consolidating project management tools, reducing the need to switch between different platforms.

This powerful integration not only boosts productivity but also provides a unified view of your project tasks and progress, making it easier for your team to stay informed and aligned with project goals.