Concevoir le formulaire d'élément de travail
Quand vous concevez un formulaire d'élément de travail, vous devez positionner les champs du formulaire de manière à ce qu'ils prennent en charge les processus d'entrée de données et de flux de travail qui seront suivis par les membres de l'équipe. Si vous ajoutez simplement quelques champs à un formulaire existant, vous devez déterminer à quel emplacement vous souhaitez les positionner sur le formulaire. Si vous ajoutez plusieurs champs pour prendre en charge une nouvelle collection de données à suivre, vous pouvez ajouter un nouvel onglet réservé exclusivement à ces champs. Pour minimiser les défilements sur un formulaire, vous pouvez regrouper les champs en plusieurs colonnes en haut du formulaire ou sous un onglet.
Si vous ajoutez un nouveau type d'élément de travail, vous pouvez copier un type existant et le modifier pour afficher les champs et processus de flux de travail qui prennent en charge le nouveau type.
Quand vous concevez la disposition, tenez compte des conseils suivants pour obtenir de meilleurs résultats :
Placez en haut du formulaire les champs que les membres de l'équipe doivent fréquemment référencer ou mettre à jour.
Regroupez sous un même onglet les champs qui sont rarement référencés ou mis à jour par seulement quelques membres de l'équipe. Par exemple, les contrôles qui permettent de lier des éléments de travail ou de joindre des fichiers sont généralement positionnés sous des onglets distincts.
Pour optimiser l'affichage des champs de données, regroupez les champs dans des colonnes. Vous pouvez insérer des colonnes en haut du formulaire ou sous un onglet. Vous pouvez aussi afficher les onglets dans un format multicolonne.
Utilisez un ou plusieurs contrôles de lien sous des onglets séparés ou sous le même onglet pour limiter les types de liens pouvant être créés entre les champs de types d'éléments de travail.
Pour plus d'informations sur l'exportation, l'importation et la vérification des modifications apportées à un formulaire d'élément de travail, consultez Modifier la disposition du formulaire d'élément de travail.
Dans cette rubrique
Segmenter le formulaire en zones
Utiliser des onglets
Regrouper des champs
Dimensionner des colonnes
Utiliser un séparateur pour prendre en charge le dimensionnement de colonnes variables
Contrôler la taille du formulaire et des éléments de formulaire
Spécifier différentes dispositions pour différentes cibles
Segmenter le formulaire en zones
Les éléments de disposition vous permettent de segmenter votre formulaire d'élément de travail en différentes zones. Vous pouvez ainsi regrouper des champs connexes et allouer de l'espace sur le formulaire en fonction des spécifications d'entrée des données. Le tableau suivant décrit les éléments utilisés pour segmenter le formulaire en différentes zones.
Élément |
Description |
|---|---|
FORM |
Contient les éléments Layout qui spécifient l'affichage des champs et des contrôles pour le type d'élément de travail. |
Layout |
Contient tous les éléments qui spécifient l'affichage des champs et des contrôles pour une cible spécifique. Vous pouvez spécifier différentes dispositions pour différentes cibles, notamment Visual Studio ou Team Web Access. Dans un élément Layout, vous pouvez spécifier, entre autres, les éléments Control, Group, TabGroup et Splitter. |
Group |
Regroupe dans un cluster les éléments enfants du formulaire. Un groupe est délimité visuellement par une bordure et une étiquette facultative. Les groupes définis de manière adjacente dans la pile XML sont fractionnés verticalement dans le formulaire affiché. Vous pouvez spécifier l'élément Column comme enfant d'un élément Group. |
Column |
Conserve tous les éléments enfants dans une colonne verticale ou fractionne un formulaire verticalement. Les colonnes doivent apparaître dans un Group. Vous pouvez utiliser des éléments Group dans des éléments Column pour créer des zones imbriquées. Par défaut, les colonnes fractionnent un Group de façon uniforme. Vous pouvez éventuellement spécifier un attribut de largeur (en pourcentage) pour allouer plus d'espace à une ou plusieurs colonnes. Dans un élément Column, vous pouvez spécifier, entre autres, les éléments Control, Group, TabGroup et Splitter. |
Splitter |
Permet aux utilisateurs de redimensionner la largeur allouée à deux colonnes dans un formulaire. |
Tab |
Ajoute différents onglets à un formulaire pour prendre en charge l'affichage de champs et de contrôles supplémentaires. Dans un élément Tab, vous pouvez spécifier, entre autres, les éléments Control, Group, TabGroup et Splitter. |
TabGroup |
Contient un groupe d'éléments TAB. En général, vous ajoutez des onglets à un groupe d'onglets unique. Vous pouvez toutefois empiler verticalement deux groupes d'onglets ou plus dans un formulaire. |
L'illustration suivante montre un formulaire avec, dans la partie supérieure, huit champs répartis en deux colonnes. La partie inférieure comprend deux ensembles de trois onglets qui sont organisés en deux colonnes.
Personnaliser un formulaire avec trois onglets dans une disposition à deux colonnes
.png "Formulaire d'élément de travail personnalisé")
Haut du formulaire
Le code suivant définit la partie supérieure du formulaire. Vous pouvez introduire des colonnes si nécessaire. Comme indiqué dans cet exemple, la première colonne, qui mesure 70 % de la largeur du formulaire, contient deux groupes de champs. Le deuxième groupe de champs, qui contient les champs PU (Use Area Path) et Priority, est défini selon une disposition à deux colonnes. La deuxième colonne s'étend sur la partie restante (30 % de la largeur du formulaire). Quand le formulaire est redimensionné, les zones allouées aux colonnes varient proportionnellement.
<FORM>
<Layout>
<Group>
<Column PercentWidth="70">
<Group>
<Column PercentWidth="100">
<Control FieldName="System.Title" Type="FieldControl" Label="Title" LabelPosition="Left" />
<Control FieldName="System.AreaPath" Type="WorkItemClassificationControl" Label="Area Path" LabelPosition="Left" />
<Control FieldName="System.IterationPath" Type="WorkItemClassificationControl" Label="&Iteration Path:" LabelPosition="Left" />
<Group>
<Column PercentWidth="50">
<Control FieldName="Microsoft.VSTS.Common.ProductUnit" Type="FieldControl" Label="PU (Use Area Path)" LabelPosition="Left" />
</Column>
<Column PercentWidth="50">
<Control FieldName="Microsoft.VSTS.Common.Priority" Type="FieldControl" Label="Priority" LabelPosition="Left" />
</Column>
</Group>
</Column>
</Group>
</Column>
<Column PercentWidth="30">
<Group Label="Status">
<Column PercentWidth="100">
<Control FieldName="System.Id" Type="FieldControl" Label="Id" LabelPosition="Left" />
<Control FieldName="System.State" Type="FieldControl" Label="State" LabelPosition="Left" />
<Control FieldName="System.AssignedTo" Type="FieldControl" Label="Assigned To" LabelPosition="Left" />
</Column>
</Group>
</Column>
</Group>
<Group Label="">
<Column PercentWidth="60">
. . .
</Layout>
</FORM>
Utiliser des onglets
Les onglets vous permettent de mettre en cluster un groupe de champs ou de prendre en charge un ou plusieurs contrôles spéciaux, par exemple pour lier des éléments de travail, lier l'historique d'éléments ou encore joindre des fichiers. Les définitions des types d'éléments de travail pour les modèles de processus Microsoft Solutions Framework (MSF) utilisent différents onglets pour contrôler les types de liens qui peuvent être créés, selon le type de lien. Pour plus d'informations, consultez Éléments de travail et workflow (Agile) ou Éléments de travail et flux de travail (CMMI).
Pour plus d'informations sur l'utilisation de contrôles spéciaux, consultez les rubriques suivantes :
En utilisant les attributs décrits dans le tableau suivant, vous pouvez étiqueter l'onglet et spécifier le remplissage et les marges qui contrôlent le nombre de pixels à l'intérieur et à l'extérieur de la bordure du contrôle Tab.
Attribut |
Description |
|---|---|
Label |
Requis. Texte qui spécifie le nom de la page d'onglets. |
Margin |
Facultatif. Spécifie, en pixels, la quantité d'espace autour de l'onglet. |
Padding |
Facultatif. Spécifie, en pixels, la quantité d'espace autour des bordures externes et internes de l'onglet. |
Six onglets organisés côte à côte par disposition
.png "Formulaire personnalisé affichant deux groupes de 6 onglets")
Le code suivant montre la syntaxe utilisée pour créer la disposition illustrée précédemment.
<FORM>
<Layout>
. . .
<TabGroup>
<Tab Label="Planning">
<Group Label="Status" Padding="(0,0,0,3)">
<Column PercentWidth="50">
<Control FieldName="Microsoft.DevDiv.Importance" Type="FieldControl" Label="Importance" LabelPosition="Left" />
<Control FieldName="Microsoft.DevDiv.Commitment" Type="FieldControl" Label="Commitment / Confidence" LabelPosition="Left" />
. . .
</Column>
<Column PercentWidth="50" />
</Group>
<Group>
<Column PercentWidth="100">
<Control FieldName="Microsoft.DevDiv.Story" Type="HtmlFieldControl" Label="Story Board" LabelPosition="Top" />
</Column>
</Group>
<Group>
<Column PercentWidth="100">
<Control FieldName="System.Description" Type="HtmlFieldControl" Label="Value Proposition Description" LabelPosition="Top" />
</Column>
</Group>
</Tab>
<Tab Label="Marketing">
<Group>
<Column PercentWidth="100">
<Control FieldName="Microsoft.DevDiv.MarketingOwner" Type="FieldControl" Label="Marketing Owner" LabelPosition="Top" />
<Control FieldName="Microsoft.DevDiv.MarketingDescription" Type="HtmlFieldControl" Label="Marketing Description" LabelPosition="Top" />
</Column>
</Group>
</Tab>
<Tab Label="Relationships">
<Control Type="LinksControl" Label="Pillars" LabelPosition="Top" Name="Pillars">
. . .
</Control>
<Control Type="LinksControl" Label="Experiences - Feature Groups" LabelPosition="Top" Name="Experiences">
. . .
</Control>
<Control Type="LinksControl" Label="Flags / Associations" LabelPosition="Top" Name="Flags">
. . .
</Control>
</Tab>
</TabGroup>
</Column>
<Column PercentWidth="40">
<TabGroup>
<Tab Label="History">
<Control FieldName="System.History" Type="WorkItemLogControl" Label="Detailed Description and History" LabelPosition="Top" />
</Tab>
<Tab Label="Links">
<Control Type="LinksControl" LabelPosition="Top" >
. . .
</Control>
</Tab>
<Tab Label="File Attachments">
<Control Type="AttachmentsControl" LabelPosition="Top" />
</Tab>
</TabGroup>
</Column>
</Group>
</Layout>
</FORM>
Regrouper des champs
Semblable au contrôle Windows GroupBox, l'élément Group vous permet de regrouper visuellement des éléments. En utilisant les attributs décrits dans le tableau suivant, vous pouvez étiqueter chaque groupe et spécifier le remplissage et les marges qui contrôlent le nombre de pixels à l'intérieur et à l'extérieur de la bordure de la zone de groupe. L'élément Group doit toujours être suivi d'un élément Column, même si le groupe ne comprend qu'une seule colonne.
Il est conseillé d'utiliser l'élément Group comme conteneur pour les champs d'une colonne et comme conteneur pour les colonnes d'une zone segmentée sur le formulaire. Vous pouvez uniquement spécifier l'élément Column en tant qu'élément enfant dans un élément Group.
Vous pouvez contrôler l'espacement et la taille de la disposition du formulaire d'ensemble en spécifiant les attributs décrits dans le tableau suivant.
Attribut |
Description |
|---|---|
Label |
Facultatif. Texte qui spécifie le nom du groupe. |
Margin |
Facultatif. Spécifie, en pixels, la quantité d'espace autour du groupe et entre le contrôle et ses voisins. Vous pouvez varier la quantité d'espace sur chaque côté. |
Padding |
Facultatif. Spécifie la quantité d'espace, en pixels, autour de la bordure externe du groupe. Vous pouvez varier la quantité d'espace sur chaque côté. |
Groupe de champs organisés sous un onglet
.png "Groupe de plusieurs champs")
Le code suivant montre la syntaxe utilisée pour créer le groupe de champs illustré précédemment. Pour plus d'informations sur la façon de spécifier les champs à l'aide de l'élément Control, consultez Contrôler l'affichage des champs d'éléments de travail.
<TabGroup>
<Tab Label="Planning">
<Group Label="Status" Padding="(0,0,0,3)">
<Column PercentWidth="5100">
<Control FieldName="Microsoft.DevDiv.Importance" Type="FieldControl" Label="Importance" LabelPosition="Left" />
<Control FieldName="Microsoft.DevDiv.Commitment" Type="FieldControl" Label="Commitment / Confidence" LabelPosition="Left" />
<Control FieldName="Microsoft.DevDiv.VisionDoc" Type="FieldControl" Label="Vision Doc" LabelPosition="Left" />
<Control FieldName="Microsoft.DeveloperDivision.Features.EstimatedCost" Type="FieldControl" Label="Estimated Cost" LabelPosition="Left" />
<Control FieldName="Microsoft.DevDiv.BusinessUnit" Type="FieldControl" Label="BU (Use Area Path)" LabelPosition="Left" />
<Control FieldName="Microsoft.DevDiv.Website" Type="FieldControl" Label="Website" LabelPosition="Left" />
</Column>
</Group>
. . .
</Tab>
</TabGroup>
Dimensionner des colonnes
Vous pouvez concevoir une zone dans un formulaire comprenant deux colonnes ou plus. Vous pouvez spécifier la largeur de la colonne sous forme d'une valeur fixe (à l'aide de l'attribut FixedWidth) ou sous forme d'un pourcentage de la largeur de l'élément conteneur (à l'aide de l'attribut PercentWidth). Ces deux attributs Column s'excluent mutuellement. Pour autoriser un utilisateur à redimensionner la colonne, vous pouvez spécifier un contrôle Splitter, comme décrit dans la section Utiliser un séparateur pour prendre en charge le dimensionnement de colonnes variables.
Disposition à trois colonnes
.png "Affichage sur 3 colonnes")
Le code suivant produit la disposition à trois colonnes des champs ci-dessus. Quand vous organisez des groupes de champs en colonnes, utilisez l'élément Group pour contenir chaque colonne de champs. Vous pouvez éventuellement étiqueter les groupes de champs.
<FORM>
<Layout>
<Group>
<Column PercentWidth="36">
<Group>
<Control FieldName="System.Title" Type="FieldControl" Label="Title" LabelPosition="Left" />
<Control FieldName="System.AreaPath" Type="WorkItemClassificationControl" Label="Area" LabelPosition="Left" />
<Control FieldName="Microsoft.VSTS.Common.ProductUnit" Type="FieldControl" Label="Product Unit" LabelPosition="Left" />
<Control FieldName="Microsoft.DevDiv.BusinessUnit" Type="FieldControl" Label="Business Unit" LabelPosition="Left" />
</Group>
</Column>
<Column PercentWidth="33">
<Group>
<Control FieldName="Microsoft.DevDiv.SubTitle" Type="FieldControl" Label="Sub Title" LabelPosition="Left" />
<Control FieldName="System.IterationPath" Type="WorkItemClassificationControl" Label="Iteration" LabelPosition="Left" />
<Control FieldName="Microsoft.DevDiv.Other" Type="FieldControl" Label="Other" LabelPosition="Left" />
</Group>
</Column>
<Column PercentWidth="31">
<Group>
<Control FieldName="Microsoft.DevDiv.Type" Type="FieldControl" Label="Type" LabelPosition="Left" />
<Control FieldName="System.AssignedTo" Type="FieldControl" Label="Assigned To" LabelPosition="Left" />
<Control FieldName="System.State" Type="FieldControl" Label="State" LabelPosition="Left" />
</Group>
</Column>
</Group>
. . .
</Layout>
</FORM>
Utiliser un séparateur pour prendre en charge le dimensionnement de colonnes variables
L'élément Splitter vous permet d'autoriser la visionneuse du formulaire à redimensionner dynamiquement les colonnes. Le séparateur se présente sous la forme d'une ligne en pointillés sur le formulaire, comme le montre l'illustration suivante. Vous ne pouvez pas spécifier d'éléments enfants dans l'élément Splitter.
Disposition à 2 colonnes avec séparateur
.png "Disposition à 2 colonnes avec séparateur")
Un élément Group contenant des éléments Splitter et Column doit spécifier exactement trois éléments Column dans l'ordre suivant :
un élément Column à gauche du séparateur ;
un élément Column qui contient uniquement l'élément Splitter ;
un élément Column à droite du séparateur.
Pour plus d'informations, consultez l'exemple suivant.
<Group>
<Column PercentWidth="50">
<Group Label="First Group Left ">
<Column PercentWidth="50">
<Control FieldName="Microsoft.VSTS.Common.Priority" Type="FieldControl" Name="Pri2" Label="Priority:" />
<Control FieldName="Microsoft.VSTS.Common.Rank" Type="FieldControl" Label="Stack Rank:" />
<Control FieldName="Microsoft.VSTS.Scheduling.BaselineWork" Type="FieldControl" Label="Original Estimate:" />
<Control FieldName="Microsoft.VSTS.Scheduling.RemainingWork" Type="FieldControl" Label="Remaining:" />
</Column>
<Column>
<Splitter>
</Column>
<Column PercentWidth="50">
<Group Label="Second Group Right">
<Control Type="DateTimeControl" FieldName="ABC_Company.Project.Manual.ChangeDate" Label="Change Date" Format="Short" LabelPosition="Right" />
<Control Type="DateTimeControl" FieldName="ABC_Company.Project.Manual.EstimateStartDate" Label="Estimated Start Date" Format="Short" LabelPosition="Right" />
<Control Type="DateTimeControl" FieldName="ABC_Company.Project.Manual.ActualStartDate" Label="Actual Start Date" Format="Short" LabelPosition="Right" />
<Control Type="DateTimeControl" FieldName="ABC_Company.Project.Manual.FinishDate" Label="Finish Date" Format="Short" LabelPosition="Right" />
</Group>
</Column>
</Group>
Contrôler la taille du formulaire et des éléments de formulaire
Vous pouvez spécifier les tailles horizontale et verticale minimales de chaque disposition de formulaire à l'aide de l'attribut de disposition MinimumSize. Toutefois, le formulaire est redimensionné selon les dimensions combinées lorsque les tailles horizontale et verticale combinées des contrôles de champ et des dispositions définies pour chaque formulaire sont supérieures aux dimensions minimales spécifiées. Par ailleurs, la taille verticale de tous les onglets est conforme à la dimension requise pour dimensionner l'onglet selon la disposition verticale maximale. Le dernier contrôle de champ sous chaque onglet peut être redimensionné en conséquence pour remplir la dimension verticale.
Des barres de défilement s'affichent lorsque le conteneur qui affiche la disposition du formulaire est plus petit que la taille horizontale ou verticale minimale du formulaire. Si cela se produit, un problème de double défilement peut se produire. En cas de double défilement, les utilisateurs peuvent être amenés à faire défiler à la fois le formulaire et le contrôle de champ pour trouver les informations désirées. Pour éviter ce problème, essayez de placer les contrôles de champ soumis au défilement, comme les champs HTML et Historique, sous leur propre onglet.
Contrôler la taille de la disposition
Vous pouvez contrôler l'espacement et la taille de la disposition du formulaire d'ensemble en spécifiant les attributs décrits dans le tableau suivant.
Attribut |
Description |
Exemple de valeur de modèle |
|---|---|---|
MinimumSize |
Facultatif. Chaîne se présentant sous la forme (Largeur, Hauteur). Cette valeur spécifie la taille minimale du formulaire lui-même. Lorsque la taille du conteneur qui affiche la disposition du formulaire est inférieure à cette taille, des barres de défilement horizontale et verticale apparaissent. Lorsque la taille combinée des contrôles de champ dans la disposition du formulaire est supérieure à celle définie par l'attribut MinimumSize, l'attribut est ignoré. |
(100,100) |
Margin |
Facultatif. Chaîne se présentant sous la forme (Gauche, Haut, Droite, Bas) qui spécifie, en pixels, la quantité d'espace autour de la disposition. Vous pouvez varier la quantité d'espace sur chaque côté. |
(2,0,2,0) |
Padding |
Facultatif. Chaîne se présentant sous la forme (Gauche, Haut, Droite, Bas) qui spécifie, en pixels, la quantité d'espace entre la bordure externe de la disposition et la bordure interne. Vous pouvez varier la quantité d'espace sur chaque côté. |
(2,0,2,0) |
ControlSpacing |
Facultatif. Spécifie l'espacement vertical entre les contrôles du formulaire. Integer. |
N/A |
Contrôler la taille des éléments du formulaire
L'attribut MinimumSize de l'élément Control vous permet de spécifier la largeur et la hauteur minimales que doit occuper chaque élément du formulaire. Si l'espace vertical est insuffisant, une barre de défilement s'affiche pour conserver sa taille minimale. Sans cet attribut, les contrôles sont dessinés selon leur taille par défaut, sauf si des contrôles situés sous d'autres onglets prennent plus de place et augmentent la taille de l'onglet. Vous pouvez utiliser d'autres attributs, tels que Margin et Padding, pour aligner ou étirer le contrôle et définir la taille de la bordure autour du contrôle. Pour plus d'informations, consultez les rubriques suivantes :
Spécifier différentes dispositions pour différentes cibles
Vous pouvez spécifier différentes dispositions pour différentes cibles à l'aide de l'attribut Target de l'élément Layout. Pour cibler Visual Studio ou Team Explorer Everywhere, spécifiez WinForms ; pour cibler Team Web Access, spécifiez Web.
<FORM>
<Layout Target="WinForms" >
. . .
</Layout>
<Layout Target="Web" >
. . .
</Layout >
</FORM>