Partager via

Définition de la disposition du formulaire d'élément de travail

  • Article

Lorsque vous concevez un formulaire d'élément de travail, vous pouvez positionner les champs sur le formulaire afin qu'ils prennent en charge les processus de flux de travail et d'entrée de données qui seront suivis par les membres de l'équipe. Si vous ajoutez simplement quelques champs à un formulaire existant, vous devez déterminer où vous souhaitez les ajouter 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 simplement pour ces champs. Afin d'éviter d'avoir à faire défiler un formulaire, vous pouvez regrouper des champs dans plusieurs colonnes en haut du formulaire ou dans 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.

Lorsque vous concevez la disposition, prenez en compte les conseils suivants afin d'obtenir les meilleurs résultats :

  • Placez en haut du formulaire les champs que les membres de l'équipe doivent référencer ou mettre à jour fréquemment.

  • Placez sous un onglet les champs que quelques membres de l'équipe seulement doivent référencer ou mettre à jour de temps en temps. Par exemple, les contrôles qui permettent de lier des éléments de travail ou de joindre des fichiers sont généralement placés sous des onglets séparés.

  • Regroupez les champs dans des colonnes pour maximiser l'affichage des champs de données. Vous pouvez utiliser les colonnes situées en haut du formulaire ou sous un onglet. Vous pouvez également afficher des onglets dans un format multicolonne.

  • Utilisez un ou plusieurs contrôles de liens sous des onglets séparés ou sous le même onglet pour restreindre les types de liens qui peuvent être créés entre des champs de types d'éléments de travail.

Pour plus d'informations sur l'exportation, l'importation et la vérification de modifications apportées à un formulaire d'élément de travail, consultez Modification de la disposition du formulaire d'élément de travail.

Dans cette rubrique

  • Segmentation du formulaire en zones

  • Utilisation des onglets

  • Regroupement de champs

  • Dimensionnement de colonnes

  • Utilisation d'un séparateur pour prendre en charge le dimensionnement variable des colonnes

  • Contrôle de la taille du formulaire et de ses éléments

  • Spécification de différentes dispositions pour différentes cibles

Segmentation du formulaire en zones

Vous utilisez des éléments de disposition pour segmenter votre formulaire d'élément de travail en différentes zones, en regroupant les champs connexes et en allouant de l'espace sur le formulaire en fonction des conditions 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 contrôles pour le type d'élément de travail.

Layout

Contient tous les éléments qui spécifient l'affichage des champs et contrôles pour une cible spécifique. Vous pouvez spécifier différentes dispositions pour différentes cibles, telles que Visual Studio ou Team Web Access. Les éléments enfants que vous pouvez spécifier dans un élément Layout incluent Control, Group, TabGroup et Splitter.

Group

Regroupe des éléments enfants sur le formulaire. Un groupe est délimité visuellement par une bordure et une étiquette facultative. Les groupes définis dans une position adjacente de la pile XML sont fractionnés verticalement dans le formulaire affiché. Vous pouvez spécifier l'élément Column en tant qu'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 élément Group. Les éléments Group contenus dans des éléments Column peuvent être utilisés pour créer des zones imbriquées. Par défaut, les colonnes fractionnent les éléments Group en parties égales. Vous pouvez spécifier un attribut facultatif de largeur en pourcentage pour allouer plus d'espace à une ou plusieurs colonnes.

Les éléments enfants que vous pouvez spécifier dans un élément Column incluent Control, Group, TabGroup et Splitter.

Splitter

Permet aux utilisateurs de redimensionner la largeur allouée à deux colonnes d'un formulaire.

Tab

Ajoute différents onglets à un formulaire pour prendre en charge l'affichage de champs et contrôles supplémentaires. Les éléments enfants que vous pouvez spécifier dans un élément Tab incluent 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. Toutefois, vous pouvez empiler verticalement deux groupes d'onglets ou plus dans un formulaire.

L'illustration suivante présente un formulaire dont la zone supérieure affiche huit champs répartis en deux colonnes. La partie inférieure affiche deux ensembles de trois onglets dont la disposition forme deux colonnes.

Personnaliser un formulaire avec trois onglets en une disposition à deux colonnes

Formulaire d'élément de travail personnalisé

Haut du formulaire

Le code suivant définit le haut du formulaire. Vous pouvez ajouter autant de colonnes que nécessaire. Comme illustré dans cet exemple, la première colonne, dimensionnée à 70 % de la largeur du formulaire, contient deux groupes de champs. Le second groupe de champs, qui contient les champs PU (Use Area Path) et Priority, présente une disposition à deux colonnes. La seconde colonne occupe les 30 % restants de la largeur du formulaire. Lorsque 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="&amp;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>

Retour au début

Utilisation des onglets

Vous utilisez les onglets pour regrouper un groupe de champs ou prendre en charge un ou plusieurs contrôles spéciaux, tels que les contrôles qui permettent de lier des éléments de travail, de lier l'historique des éléments de travail ou de joindre des fichiers. Plusieurs définitions de types d'éléments de travail pour les modèles de processus Microsoft Solutions Framework (MSF) utilisent plusieurs 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 ajouter une étiquette à l'onglet et spécifier la marge intérieure et les marges qui contrôlent le nombre de pixels à l'intérieur et à l'extérieur de la bordure du contrôle onglet.

Attribut

Description

Label

Obligatoire. 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 de la bordure externe et interne de l'onglet.

Six onglets disposés côte à côte

Formulaire personnalisé affichant deux groupes de 6 onglets

Le code suivant répertorie 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" Dock="Fill" />
              </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>

Retour au début

Regroupement de champs

Vous utilisez l'élément Group pour fournir un regroupement visuel des éléments, semblable à Windows GroupBox. En utilisant les attributs décrits dans le tableau suivant, vous pouvez ajouter une étiquette à chaque groupe et spécifier la marge intérieure 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 par un élément Column, même si le groupe n'a qu'une seule colonne.

Vous devez 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 ne pouvez spécifier l'élément Column qu'en tant qu'élément enfant d'un élément Group.

Vous pouvez contrôler l'espacement et la taille de la disposition de formulaire globale 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, en pixels, la quantité d'espace 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

Groupe de plusieurs champs

Le code suivant répertorie la syntaxe utilisée pour créer le groupe de champs illustré précédemment. Pour plus d'informations sur la spécification des champs à l'aide de l'élément Control, consultez Contrôle de 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>

Retour au début

Utilisation des colonnes

Vous pouvez concevoir une zone dans un formulaire qui a deux colonnes ou plus. Vous pouvez spécifier la largeur de colonne comme étant fixe ou comme un pourcentage de la largeur de l'élément conteneur, à l'aide des attributs FixedWidth ou PercentWidth, respectivement. Ces deux attributs Column s'excluent mutuellement. Pour permettre à un utilisateur de redimensionner la colonne, vous pouvez spécifier un contrôle Splitter, comme le décrit la section Utilisation d'un séparateur pour prendre en charge le dimensionnement variable des colonnes.

Disposition à trois colonnes

Affichage sur 3 colonnes

Le code suivant a permis de créer la disposition à trois colonnes précédente des champs. Lorsque vous organisez des groupes de champs en colonnes, utilisez l'élément Group pour contenir chaque colonne de champs. Éventuellement, vous pouvez ajouter une étiquette aux 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>

Utilisation d'un séparateur pour prendre en charge le dimensionnement variable des colonnes

Vous utilisez l'élément Splitter lorsque vous souhaitez permettre à celui ou celle qui verra le formulaire de redimensionner les colonnes dynamiquement. Le séparateur s'affiche sous forme de trait en pointillé sur le formulaire, comme dans l'illustration suivante. Vous ne pouvez pas spécifier d'élément enfant dans l'élément Splitter.

Disposition à 2 colonnes avec séparateur

Disposition à 2 colonnes avec séparateur

Un élément Group qui contient les éléments Splitter et Column doit spécifier exactement trois éléments Column dans la séquence suivante :

  1. un élément Column à gauche du séparateur

  2. un élément Column qui contient uniquement l'élément Splitter

  3. 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>

Retour au début

Contrôle de la taille du formulaire et de ses éléments

Vous pouvez spécifier la taille minimale horizontale et verticale de chaque disposition de formulaire à l'aide de l'attribut MinimumSize pour la disposition. Toutefois, le formulaire est redimensionné d'après les dimensions combinées lorsque les tailles horizontales et verticales combinées des contrôles de champs et les dispositions définies pour chaque formulaire sont supérieures aux dimensions minimales spécifiées. De plus, la taille verticale de tous les onglets est conforme à la dimension requise pour dimensionner l'onglet avec 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 de formulaire est plus petit que la taille horizontale ou verticale minimale du formulaire. Si le cas se présente, un problème de double défilement peut survenir. Le double défilement signifie que les utilisateurs devront peut-être faire défiler à la fois le formulaire lui-même et le contrôle de champ pour trouver les informations qu'ils cherchent. Pour éviter ce problème de double défilement, vous pouvez placer les contrôles de champs soumis au défilement, tel que les champs HTML et Historique, sous leur propre onglet.

Retour au début

Contrôle de la taille de la disposition

Vous pouvez contrôler l'espacement et la taille de la disposition de formulaire globale 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 le conteneur qui affiche la disposition de formulaire est plus petit que cette taille, des barres de défilement horizontale et verticale s'affichent. Lorsque la taille combinée des contrôles de champs sur le formulaire de disposition 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 sur le formulaire. Integer.

N/A

Retour au début

Contrôle de la taille des éléments du formulaire

Vous utilisez l'attribut MinimumSize de l'élément Control pour spécifier la largeur et la hauteur minimales que chaque élément de formulaire doit occuper. Si vous n'avez pas un espace vertical suffisant, une barre de défilement s'affiche pour conserver sa taille minimale. Sans cet attribut, les contrôles sont dessinés avec leur taille par défaut, à moins que des contrôles d'autres onglets n'occupent un espace plus important qui augmente la taille de l'onglet. Vous pouvez utiliser d'autres attributs, tels que Dock, 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 :

Retour au début

Spécification de différentes dispositions pour différentes cibles

Vous pouvez spécifier des dispositions différentes pour des cibles différentes en utilisant l'attribut Target de l'élément Layout. Pour cibler Visual Studio ou Team Explorer Everywhere, vous spécifiez WinForms, et pour cibler Team Web Access, vous spécifiez Web.

<FORM>
   <Layout Target="WinForms" >
      . . . 
   </Layout>
   <Layout Target="Web" >
      . . . 
   </Layout >
</FORM>

Retour au début

Voir aussi

Tâches

Modification de la disposition du formulaire d'élément de travail

Concepts

Conception et personnalisation d'un formulaire d'élément de travail

Autres ressources

Contrôle de l'affichage des champs d'éléments de travail

Ajout de texte d'aide, guide de processus, contenu Web et liens vers les pages Web sur un formulaire d'élément de travail

Ajout de AttachmentsControl

Définition des contrôles de liens pour restreindre les relations de liens

Historique des modifications

Date

Historique

Motif

Mai 2011

La casse de plusieurs éléments XML a été corrigée. La définition de schéma pour le suivi des éléments de travail définit tous les éléments enfants de l'élément FORM en casse mixte et met en majuscule toutes les lettres qui composent les noms de tous les autres éléments.

Résolution des bogues de contenu.

Juin 2010

Illustrations et exemples de code ajoutés.

Améliorations apportées aux informations.

Juillet 2010

Sections réécrites pour plus de clarté. Référence à Team Explorer Everywhere corrigée dans la dernière section.

Améliorations apportées aux informations.