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'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

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="&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>

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 Types d'élément de travail et flux de travail avec modèle de processus Agile ou Types d'élément de travail et flux de travail avec modèle de processus CMMI.

Pour plus d'informations sur l'utilisation de contrôles spéciaux, consultez les rubriques suivantes :

• Fournir du texte d'aide, des liens hypertexte ou du contenu Web sur un formulaire d'élément de travail

• Ajouter le contrôle Pièces jointes

• Définir des contrôles de liens pour restreindre les relations de liens

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.

Six onglets organisés côte à côte par disposition

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.

Groupe de champs organisés sous un onglet

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

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

Un élément Group contenant des éléments Splitter et Column doit spécifier exactement trois éléments Column dans l'ordre suivant :

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>

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.

Contrôler la taille des éléments du formulaire

L'attribut Control de l'élément MinimumSize 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 :

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

• Fournir du texte d'aide, des liens hypertexte ou du contenu Web sur un formulaire d'élément de travail

• Ajouter le contrôle Pièces jointes

• Définir des contrôles de liens pour restreindre les relations de liens

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 Layout de l'élément Target. 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>

Voir aussi

Tâches

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