Adding Web Content to a Work Item Form

You can add Web content or HTML content to a work item form by exporting the type definition XML file and adding a WebpageControl in the FORM section. After you modify and import the XML file, you can verify the display of the Web content in the updated work item type.

The Web content that you display can be specified in one of the following ways:

  • URL of a Web page

  • A URL path that is dynamically determined at run time based on one or more field values defined for the work item

  • HTML content

For information about the syntax structure of the elements used to add Web content to a work item form, see WebpageControlOptions XML Elements Reference and Link and Param XML Elements Reference.

Topic Contents

  • Export and Open the Work Item Type Definition File

  • Add Web Content to the FORM Section of the Definition File

  • Verify the Web Page or HTML Content Appears in the Work Item Form

Required Permissions

To perform this procedure, you must be a member of the Team Foundation Administrators group or a member of the Project Administrators group for the project. For more information, see Team Foundation Server Permissions.

Export and Open the Work Item Type Definition File

To export and open the work item type definition file

  • Perform one of the following steps based on the scope of the customization that you want to perform:

    If you are modifying a work item type for a single project:

    1. Run witadmin exportwitd to export the XML file for the work item type that you want to modify. For more information, see Export and Import Work Item Types from an Existing Project.

    2. In Visual Studio, click File, click Open, and then click File.

      The Open File dialog box appears.

    3. Under Look in, move to the location where you exported the file.

    If you are modifying a work item type to customize a process template:

    1. Find location where you downloaded the process template.

    2. Select the work item type XML file that you want to update, and then click Open. When you are prompted about line endings, click No.

Add Web Content to the FORM Section of the Definition File

To add Web content to a work item form

  1. Find the <TabGroup> section of the XML file. Notice that there are <Tab> elements for items such as Links and File Attachments in which each <Tab> element contains a <Control> element that renders the respective control.

    <Tab Label="Links">
      <Control Type="LinksControl" />
    </Tab>
    <Tab Label="File Attachments">
      <Control Type="AttachmentsControl" />
    </Tab>
    
  2. Add a new <Tab> element that will contain the Web or HTML content that you want to display in the work item form. Copy the following code into the <TabGroup> section of the file based on how you are defining the Web content.

    • To specify the URL of a Web page:

      <Tab Label="Tab Label">
         <Group>
            <Column PercentWidth="100">
               <Control Type="WebpageControl" Name="Webpage" Label=" Name of Web Page" LabelPosition="Top" Dock="Fill">
                  <WebpageControlOptions AllowScript="false">
                     <Link UrlRoot="URL of Web Page" />
                  </WebpageControlOptions>
               </Control>
            </Column>
         </Group>
      </Tab>
      

      Replace Tab Label and URL of Web Page with the information that you want to appear on the work item form.

    • To specify a dynamic URL to be determined at run time:

      <Tab Label="Tab Label">
         <Group>
            <Column PercentWidth="100">
               <Control Type="WebpageControl" Name="Webpage" Label=" Name of Web Page" LabelPosition="Top" Dock="Fill">
                  <WebpageControlOptions AllowScript="false">
                     <Link UrlRoot="URL of Web Page" URLPath="URL path with parameters >
            <Param index="0" value="Param Value 0"/>
            <Param index="1" value="Param Value 1"/>
            <Param index="2" value="Param Value 2"/>
                     </Link>
                  </WebpageControlOptions>
               </Control>
            </Column>
         </Group>
      </Tab>
      

      Replace Tab Label, URL of Web Page, URL path with parameters, and Param Value 1, 2, and 3 with the information that you want to appear on the work item form.

    • To specify HTML content:

      <Tab Label="Tab Label">
         <Group>
            <Column PercentWidth="100">
               <Control Type="WebpageControl">
                  <Content>
                     <![CDATA[HTML Content]]>
                  </Content>
               </Control>
            </Column>
         </Group>
      </Tab>
      

      Replace Tab Label and HTML Content with the information that you want to appear on the work item form.

      Note

      For best results, every control or group should display in a column even if the column spans the full width of the form. In turn, every column should display in a group even if the group has no visible label or boundary.

  3. On the toolbar, click Save to save your changes to the XML file.

  4. To import the new work item type to a single project, see Export and Import Work Item Types from an Existing Project. To add the work item type to your process template, see Add Type Definitions for Work Items to a Process Template.

Verify the Web Page or HTML Content Appears in the Work Item Form

To verify changes made to the work item form

  1. In Team Explorer, right-click the node of the team project that contains the work item type definition that you modified, and click Refresh.

    The latest updates are downloaded from the server, including the changes that you just imported. Wait several seconds until the Work Items node is refreshed. Nodes that are still loading display the word working.

  2. Create a work item using the work item type that you modified by right-clicking the Work Items node, pointing to Add Work Item, and then clicking the work item type.

    The work item is created from the work item type that you changed.

    Verify that the Web page or HTML content appears on the new tab that you added.

  3. Click Close to close the new work item. Click No when you are prompted to save the work item.

See Also

Tasks

Add and Customize a Type of Work Item

Reference

WebpageControlOptions XML Elements Reference

Link and Param XML Elements Reference

Customizing and Managing Work Item Types [witadmin]

Concepts

Specifying Work Item Form Controls

Designing and Customizing a Work Item Form