{"id":26745,"date":"2017-01-13T16:12:32","date_gmt":"2017-01-14T00:12:32","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/visualstudioalm\/?p=26745"},"modified":"2019-02-14T15:55:55","modified_gmt":"2019-02-14T23:55:55","slug":"new-work-item-form-in-tfs-2017","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/devops\/new-work-item-form-in-tfs-2017\/","title":{"rendered":"New work item form in TFS 2017"},"content":{"rendered":"<p>About a year ago <a href=\"https:\/\/blogs.msdn.microsoft.com\/visualstudioalm\/2015\/12\/11\/the-new-work-item-form\/\">we released the new work item<\/a> form to Visual Studio Team Services. This was the beginning of our vision for managing work items in a more social and visual way. Over the past year, we focused on realizing this vision through continual improvements and listening to customer feedback.<\/p>\n<p>We added many useful features along the way, such as:<\/p>\n<ul>\n<li>A discussion control with @mention support to better collaborate on a work item.<\/li>\n<li>Ability to follow a work item to be notified when it changes.<\/li>\n<li>A work item extensibility model which lets you extend the form with custom controls, groups and pages.<\/li>\n<li>A responsive links control to better visualize related work.<\/li>\n<li>Integrated development control to both track existing code assets and to create new ones.<\/li>\n<li>An attachment control that supports drag\/drop, uploading multiple files and image preview.<\/li>\n<li>A more visual history control to better review changes.<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2017\/01\/new-form-user-story-3-col.png\" alt=\"New form for user story\" border=\"1\" \/><\/p>\n<p>With all these changes, we now have a modern and extensible work item form. And, we\u2019re very excited that you\u2019ll be able to access it with the TFS 2017 release.<\/p>\n<h2>Enabling the new form in TFS 2017<\/h2>\n<p>After installing TFS 2017, all newly created collections will have the new form enabled by default. However, since we know the new form is a big change we built <a href=\"https:\/\/www.visualstudio.com\/en-us\/docs\/work\/customize\/manage-new-form-rollout\">an opt in experience<\/a> for existing collections. This lets administrators enable the new work item form in stages and make changes to the layout before deploying it broadly.<\/p>\n<p>Start by enabling the new form in the collection administration page:<\/p>\n<p><img decoding=\"async\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2017\/01\/image428.png\" alt=\"image\" width=\"679\" height=\"295\" border=\"1\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Once enabled you can configure who can see the new form:<\/p>\n<p><img decoding=\"async\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2017\/01\/image-1.png\" alt=\"image\" width=\"817\" height=\"395\" border=\"1\" \/><\/p>\n<p>We recommend that you start with enabling for Administrators so that you can review and apply changes until you are happy with the layout. When you are ready to share with the rest of your team, enable as opt-in for all users.<\/p>\n<p>When enabled as opt-in, each user will see a link that lets them toggle to the new form and try it out. This gives the opportunity to test out the layout changes and give feedback.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2017\/01\/m-new-form-try-switch.png\" alt=\"Old web form, user story, Try the new form option\" \/><\/p>\n<p>Once you have made any necessary updates to the layout to address feedback, you can migrate everyone to the new form for a consistent management experience.<\/p>\n<p>&nbsp;<\/p>\n<h2>Anatomy of the new work item form<\/h2>\n<p>The new form consists of a System Header and Pages.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2017\/01\/FormOverviewGood2.png\" width=\"735\" height=\"706\" class=\"alignnone wp-image-27235 size-full\" border=\"1\" \/><\/p>\n<h4><\/h4>\n<h3>System header<\/h3>\n<p>The system header contains vital parts of the work item \u2013 this includes Title, Assigned To, Discussion indicator, Tags, Follow, as well as the History, Links and Attachment pages.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2017\/01\/weblayout-system-controls-details-page.png\" alt=\"Header element within web form\" border=\"1\" \/><\/p>\n<p>We have become more restrictive with the system header so that we can bring consistency and utility across all work item experiences. Currently, the only customization you can make to the system header is changing the labels. You can still customize the underlying fields through the\u00a0rules. We are looking for <a href=\"https:\/\/developercommunity.visualstudio.com\/spaces\/22\/index.html\">your feedback<\/a> on these changes, and any additional customization you may need on the system header.<\/p>\n<h4><\/h4>\n<h3>Pages<\/h3>\n<p>All the other content of the work item is organized into Pages, represented as tabs on the form.\n<img decoding=\"async\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2017\/01\/image-2.png\" alt=\"image\" width=\"500\" height=\"56\" border=\"1\" \/><\/p>\n<p>Each page consists of Sections \u2013 the picture below shows a page with 3 sections. The first section is allocated 60% of the page width, the other two sections are allocated 20% each.<\/p>\n<p><img decoding=\"async\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2017\/01\/image-3.png\" alt=\"image\" width=\"644\" height=\"190\" border=\"1\" \/><\/p>\n<h4><\/h4>\n<h3>Groups<\/h3>\n<p>Sections are made up of groups. For example, the second section (colored in blue) has 2 groups \u2013 Planning and Classification. You can collapse and expand groups. Also, you can maximize certain groups, such as those containing an HTML or rich-text field control.\n<img decoding=\"async\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2017\/01\/image-4.png\" alt=\"image\" width=\"426\" height=\"250\" border=\"1\" \/><\/p>\n<h4><\/h4>\n<h3>Controls<\/h3>\n<p>Groups are containers of field or custom controls. For example, the Story Point field control is shown below.\n<img decoding=\"async\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2017\/01\/image-5.png\" alt=\"image\" width=\"252\" height=\"55\" border=\"1\" \/><\/p>\n<p>By arranging the contents in sections the new form provides an adaptive experience based on the width of your screen. For wide screens, we give each section its own vertical column. However, for small screens we wrap sections to preserve space and readability.<\/p>\n<h2>Customizing the new work item form in TFS 2017<\/h2>\n<p>The new work item form has a <a href=\"https:\/\/www.visualstudio.com\/en-us\/docs\/work\/reference\/weblayout-xml-elements\">simplified XML layout<\/a> which is very easy to modify. The page, section, group and control elements map directly to what you see on the form.<\/p>\n<p>When the new form is enabled <a href=\"https:\/\/www.visualstudio.com\/en-us\/docs\/work\/customize\/customize-wit-form\">you can export your work item type<\/a> to see the new layout automatically added in the\u00a0<strong>WebLayout <\/strong> node.\u00a0This new layout is auto-generated by transforming your existing form layout. Below is an example of a simple form xml containing\u00a0a couple groups and links controls:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2017\/01\/WebLayoutexample.png\" alt=\"weblayoutexample\" width=\"922\" height=\"1037\" class=\"alignnone size-full wp-image-27205\" border=\"1\" \/><\/p>\n<p>Given that this is auto-generated, not everything may be perfect and to your liking but you can make changes and apply them using the familiar import command (witadmin importwitd).<\/p>\n<h2>Extensibility with the new work item form<\/h2>\n<p>The new form brings with it a vastly improved extensibility model. You can <a href=\"https:\/\/www.visualstudio.com\/en-us\/docs\/integrate\/extensions\/develop\/add-workitem-extension\">add your own pages, groups and controls<\/a> to the form or choose from the <a href=\"https:\/\/marketplace.visualstudio.com\/vsts\">marketplace<\/a> to get ready-made extensions like an updated <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ms-devlabs.vsts-extensions-multivalue-control\">Multi Value Control<\/a>. After <a href=\"https:\/\/www.visualstudio.com\/en-us\/docs\/marketplace\/get-vsts-extensions\">installing<\/a> to your collection, you can enable them in your work item type and <a href=\"https:\/\/www.visualstudio.com\/en-us\/docs\/work\/reference\/weblayout-xml-elements#extensions\">add them to your form<\/a>.<\/p>\n<p>The easiest way to do this is to export your work item type after the extension is installed. We inject a comment into the exported layout describing all extensions available targeting the work item form:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2017\/01\/ExtensionCommentA.png\" alt=\"extensioncommenta\" width=\"902\" height=\"461\" class=\"alignnone size-full wp-image-27175\" border=\"1\" \/><\/p>\n<p>You can use this information to turn on extensions for your work item type and position them. In the example below, we add an <strong>Extension<\/strong> node that enables the Multi Value Control extension for the type and then add a <strong>ControlContribution<\/strong> node to add the custom control to the planning group. The &lt;Extensions&gt; node <strong>must<\/strong> be the first element after the &lt;WebLayout&gt; node.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2017\/01\/ConfigureExtension1.png\" alt=\"configureextension\" width=\"916\" height=\"244\" class=\"alignnone size-full wp-image-27195\" border=\"1\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>After importing the work item type the custom control extension will show on the form.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2017\/01\/MVControl.png\" alt=\"mvcontrol\" width=\"448\" height=\"321\" class=\"alignnone wp-image-27125 size-full\" border=\"1\" \/><\/p>\n<p>We are planning a future blog post dedicated to work item form extensibility where we\u2019ll go into greater depth about how to build them.<\/p>\n<p>&nbsp;<\/p>\n<h2>Conclusion<\/h2>\n<p>The new form landing in TFS 2017 culminates a lot of work and we are looking forward to receiving your <a href=\"https:\/\/developercommunity.visualstudio.com\/spaces\/22\/index.html\">feedback<\/a> and exploring your ideas for <a href=\"https:\/\/visualstudio.uservoice.com\/forums\/121579-visual-studio-ide\">improvements<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<h2>Links<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.visualstudio.com\/en-us\/docs\/work\/customize\/manage-new-form-rollout\">Rolling out the new form<\/a><\/li>\n<li><a href=\"https:\/\/www.visualstudio.com\/en-us\/docs\/work\/reference\/weblayout-xml-elements\">Customizing the new form layout<\/a><\/li>\n<li><a href=\"https:\/\/www.visualstudio.com\/en-us\/docs\/work\/customize\/customize-wit-form\">Importing\/Exporting a work item type<\/a><\/li>\n<li><a href=\"https:\/\/www.visualstudio.com\/en-us\/docs\/work\/process\/custom-controls-process\">Add or modify a custom control for a process and WIT<\/a><\/li>\n<li><a href=\"https:\/\/www.visualstudio.com\/en-us\/docs\/integrate\/extensions\/develop\/add-workitem-extension\">Creating Form Extension<\/a><\/li>\n<li><a href=\"https:\/\/www.visualstudio.com\/en-us\/docs\/work\/reference\/weblayout-xml-elements#extensions\">Using Form Extensions<\/a><\/li>\n<li><a href=\"https:\/\/developercommunity.visualstudio.com\/spaces\/22\/index.html\">Reporting Bugs\/Issue\/Feedback<\/a><\/li>\n<li><a href=\"https:\/\/visualstudio.uservoice.com\/forums\/121579-visual-studio-ide\">Submitting new ideas and enhancements<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>Thanks,<\/p>\n<div>\u2013 Matthew Manela\u00a0<a href=\"https:\/\/twitter.com\/mmanela\">@mmanela<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>About a year ago we released the new work item form to Visual Studio Team Services. This was the beginning of our vision for managing work items in a more social and visual way. Over the past year, we focused on realizing this vision through continual improvements and listening to customer feedback. We added many [&hellip;]<\/p>\n","protected":false},"author":196,"featured_media":45953,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-26745","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-devops"],"acf":[],"blog_post_summary":"<p>About a year ago we released the new work item form to Visual Studio Team Services. This was the beginning of our vision for managing work items in a more social and visual way. Over the past year, we focused on realizing this vision through continual improvements and listening to customer feedback. We added many [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/posts\/26745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/users\/196"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/comments?post=26745"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/posts\/26745\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/media\/45953"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/media?parent=26745"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/categories?post=26745"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/tags?post=26745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}