Absolutely! This design is totally doable with Azure DevOps extensions. Let’s walk through how to build this step by step, using the Azure DevOps UI components and SDK you’re already working with:

First, you’ll want to wire up your button to trigger a modal (instead of a raw HTML window—this integrates way better with Azure DevOps’s native UI). Here’s how to extend your existing React component:

import * as React from "react";
import { Button } from "azure-devops-ui/Button";
import { Modal, ModalFooter, ModalHeader, ModalBody } from "azure-devops-ui/Modal";
import { TextField } from "azure-devops-ui/TextField";
import { VSS } from "azure-devops-extension-sdk";

export default class CustomWorkItemAction extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isModalOpen: false,
      userInputDetails: "",
      currentUserName: ""
    };
  }

  // Fetch current logged-in user when the component loads
  async componentDidMount() {
    await VSS.ready();
    const webContext = VSS.getWebContext();
    this.setState({ currentUserName: webContext.user.name });
  }

  openModal = () => this.setState({ isModalOpen: true });
  closeModal = () => this.setState({ isModalOpen: false });

  // Handle modal submission and update the work item field
  handleSubmit = async () => {
    try {
      // Get access to the work item form service
      const workItemFormService = await VSS.getService(VSS.ServiceIds.WorkItemForm);
      
      // Update your target user field (replace "System.AssignedTo" with your field's reference name)
      await workItemFormService.updateFields({
        "System.AssignedTo": this.state.currentUserName
        // Add other fields you want to populate from the modal input here
      });

      this.closeModal();
    } catch (error) {
      console.error("Failed to update work item:", error);
      // Add error handling (like a toast notification) here if needed
    }
  };

  render() {
    return (
      <>
        <Button onClick={this.openModal} text="Open Details Form" />
        
        <Modal
          isOpen={this.state.isModalOpen}
          onDismiss={this.closeModal}
          title="Enter Additional Details"
        >
          <ModalHeader onDismiss={this.closeModal}>Enter Additional Details</ModalHeader>
          <ModalBody>
            <TextField
              label="Details"
              value={this.state.userInputDetails}
              onChange={(e) => this.setState({ userInputDetails: e.target.value })}
              placeholder="Enter your details here..."
            />
            {/* Auto-filled user name field */}
            <TextField
              label="User Name"
              value={this.state.currentUserName}
              disabled // Make read-only if you don't want users to edit it
              marginTop={16}
            />
          </ModalBody>
          <ModalFooter>
            <Button onClick={this.closeModal} text="Cancel" />
            <Button onClick={this.handleSubmit} text="Submit" primary />
          </ModalFooter>
        </Modal>
      </>
    );
  }
}

• Extension Registration: Make sure your vss-extension.json has the right contributions and permissions to access the work item form and update fields:

  "contributions": [
    {
      "id": "custom-work-item-button",
      "type": "ms.vss-work-web.work-item-form-control",
      "targets": ["ms.vss-work-web.work-item-form-toolbar"],
      "properties": {
        "name": "Custom Action",
        "uri": "index.html"
      }
    }
  ],
  "scopes": ["vso.work_write"]
  

• Wait for SDK Ready: Always call await VSS.ready() before accessing SDK features (like getWebContext) to ensure everything is initialized properly.
• Field Reference Names: Replace "System.AssignedTo" with the actual reference name of the user field in your work item type (you can find this in the work item type editor under "Field Settings").

1. Package your extension with tfx extension create (make sure you have the TFX CLI installed).
2. Upload it to your Azure DevOps organization’s marketplace (use a private publisher for testing).
3. Install the extension, then verify it appears on your work item form—click the button to confirm the modal pops up, and submit to check if the user field updates correctly.

This approach gives you a polished, integrated experience that fits right into Azure DevOps’s UI, and hits all your requirements: a button-triggered modal, auto-filled user name, and work item field updates.

内容的提问来源于stack exchange，提问作者Jay K