Connecter deux vues de données

Important :  Cet article a été traduit automatiquement, voir l’avertissement. Vous pouvez consulter la version en anglais de cet article ici.

Dans Microsoft Office SharePoint Designer 2007, vous avez probablement l'habitude de créer des applications faisant fréquemment appel à des sources de données et à des vues de données. En connectant des vues de données insérées en tant que vues ou formulaires, vous pouvez créer des connexions entre ces vues, de manière à ce que les actions effectuées sur une vue de données modifient le contenu de l'autre vue. La connexion de vues de données constitue un moyen rapide et puissant pour augmenter l'interactivité de votre site ou de votre application.

Remarque : Une vue de données est un type particulier de composant WebPart. Les concepts et procédures de cet article s'appliquent donc à tous les couples de composants WebPart pouvant être connectés.

Cet article explique comment créer deux vues de données et comment les connecter à l'aide de l'Assistant Connexions des composants WebPart

Pour en savoir plus sur les vues de données, voir créer une vue de données.

Dans cet article

Pourquoi connecter des composants WebPart ?

Créer la première vue de données en utilisant Products.xml

Créer un fichier XML en tant que source de données exemple

Créer une vue de données en utilisant Suppliers.xml

Connecter les composants WebPart

Tester la connexion de composants WebPart

Supprimer une connexion de composants WebPart

Pourquoi connecter des composants WebPart ?

La connexion de deux composants WebPart permet de transmettre des données entre les deux composants et de synchroniser leur comportement. Ainsi, vous pouvez connecter un composant WebPart Affichage de liste, affichant une liste d'employés, à un composant WebPart Image. Une fois que les deux composants WebPart sont associés, chaque fois que vous cliquez sur le nom d'un employé dans le composant WebPart Affichage de liste, l'image de l'employé sélectionné s'affiche dans le composant WebPart Image.

Vous pouvez établir une connexion de composants WebPart simple en travaillant dans le navigateur. Il est par exemple possible de connecter un composant WebPart à un autre composant WebPart résidant dans la même page de composants WebPart. Toutefois, les fonctionnalités de la connexion seront plus abouties si vous vous utilisez Office SharePoint Designer 2007. Par exemple, vous pouvez utiliser le composant WebPart Formulaire pour filtrer les données d'un autre composant WebPart, ou vous pouvez établir des connexions entre composants WebPart se trouvant sur deux pages de composants WebPart différentes, faisant partie d'un même site Web de niveau supérieur. Ces deux opérations nécessitent Office SharePoint Designer 2007 et ne peuvent être effectuées dans le navigateur.

Haut de la Page

Créer la première vue de données en utilisant Products.xml

La société Northwind Traders, entreprise de distribution de produits alimentaires d'épicerie fine, utilise un fichier .xml appelé Products.xml pour effectuer son suivi d'inventaire et affiche les données issues de ce fichier dans une vue de données. Cette vue de données a été insérée en tant que formulaire de manière à ce que les membres de l'équipe puissent mettre à jour l'inventaire par le biais du navigateur en enregistrant les modifications dans Products.xml. Lorsque le stock est faible, un membre de l'équipe contacte le fournisseur du produit, passe une commande et met à jour l'inventaire en utilisant la vue de données. Chaque fois qu'un membre de l'équipe passe une commande, il doit également rechercher les coordonnées du fournisseur.

Vous proposez d'insérer une deuxième vue de données affichant les coordonnées du fournisseur et de créer une connexion entre les deux composants WebPart. Ainsi, lorsqu'un membre de l'équipe est prêt à passer commande, il peut afficher simultanément, pour chaque produit, les données d'inventaire et les coordonnées du fournisseur en cliquant sur un lien hypertexte.

La procédure suivante nécessite l’utilisation de deux fichiers .xml comme sources de données et création d’une vue de données à partir de chacune de ces sources de données. Pour suivre l’exemple, créer la première vue de données à partir de Products.xml en suivant les procédures décrites dans l’article Insérer une vue de données en tant que formulaire. Revenez ensuite à cet article pour créer la deuxième vue de données à partir de Suppliers.xml.

Haut de la Page

Créer un fichier XML comme exemple de source de données

Northwind Traders enregistre les coordonnées des fournisseurs dans un fichier .xml appelé Suppliers.xml.

Créer Suppliers.xml

  1. Dans le menu Fichier, cliquez sur Ouvrir le site.

  2. Dans la boîte de dialogue Ouvrir le site, recherchez et sélectionnez votre site, puis cliquez sur Ouvrir.

  3. Le cas échéant, tapez votre nom et votre mot de passe dans la boîte de dialogue Connecter à, puis cliquez sur OK.

  4. Dans le menu Fichier, cliquez sur Nouveau.

  5. Dans la boîte de dialogue Nouveau, double-cliquez sur Fichier texte.

    Un nouveau fichier texte s'ouvre dans votre site.

  6. Copiez les lignes de code suivantes en les sélectionnant et en appuyant sur CTRL+C.

    <?xml version="1.0" encoding="utf-8"?>
    <SuppliersRoot>
    <Suppliers>
    <SupplierID>1</SupplierID>
    <CompanyName>Exotic Liquids</CompanyName>
    <ContactName>Charlotte Cooper</ContactName>
    <ContactTitle>Purchasing Manager</ContactTitle>
    <Address>49 Gilbert St.</Address>
    <City>London</City>
    <PostalCode>EC1 4SD</PostalCode>
    <Country>UK</Country>
    <Phone>(171) 555-2222</Phone>
    </Suppliers>
    <Suppliers>
    <SupplierID>2</SupplierID>
    <CompanyName>New Orleans Cajun Delights</CompanyName>
    <ContactName>Shelley Burke</ContactName>
    <ContactTitle>Order Administrator</ContactTitle>
    <Address>P.O. Box 78934</Address>
    <City>New Orleans</City>
    <Region>LA</Region>
    <PostalCode>70117</PostalCode>
    <Country>USA</Country>
    <Phone>(100) 555-4822</Phone>
    <HomePage>#CAJUN.HTM#</HomePage>
    </Suppliers>
    </SuppliersRoot>
  7. Dans Office SharePoint Designer 2007, placez le point d'insertion en haut de la page, puis appuyez sur CTRL+V pour coller dans la page le code que vous venez de copier.

  8. Dans le menu Fichier, cliquez sur Enregistrer sous.

  9. Dans la boîte de dialogue Enregistrer sous, dans la zone nom de fichier, tapez suppliers.xml.

  10. Dans la liste Type de fichier, cliquez sur XML, puis sur Enregistrer.

Haut de la Page

Créer une vue de données en utilisant Suppliers.xml

  1. Ouvrez la page qui contient la première vue de données, vous avez créé à l’article Insérer une vue de données en tant que formulaire.

    Même s'il n'est pas obligatoire que les deux vues de données se trouvent sur la même page, nous voulons, dans cet exemple, que les membres de votre équipe puissent voir en un clin d'œil les coordonnées du fournisseur en cliquant sur un produit.

    Données sélectionnées affichées sous la forme de formulaire

  2. Sélectionnez la première vue de données, puis appuyez deux fois sur la touche DROITE pour placer le curseur sous la vue de données.

  3. Dans le menu Vue de données, cliquez sur Insérer une vue de données.

    Une vue de données vide s'affiche alors sous la première vue de données et le volet de tâches Bibliothèque de sources de données s'ouvre.

    Vue de données vide

  4. Dans le volet de tâches Bibliothèque de sources de données, localisez votre source de données, cliquez dessus, puis cliquez sur Afficher les données.

    Dans cet exemple, sous Fichiers XML, cliquez sur Suppliers.xml, puis sur Afficher les données. Si le titre Fichiers XML est réduit, cliquez sur le signe plus (+) pour le développer.

  5. Dans le volet de tâches Détails de la source de données, cliquez sur les champs que vous souhaitez insérer dans la vue de données.

    Conseil : Pour sélectionner plusieurs champs, maintenez la touche CTRL enfoncée pendant que vous les sélectionnez.

    Dans cet exemple, dans le dossier SuppliersRoot, sous Suppliers, cliquez sur CompanyName. Appuyez sur la touche CTRL et maintenez-la enfoncée pendant que vous cliquez sur ContactName, Country, et Phone.

  6. Cliquez sur Insérer les champs sélectionnés en tant que, puis sur Affichage d'un élément unique pour insérer les données sélectionnées dans la vue de données.

    Nous choisissons dans cet exemple d'afficher un seul élément dans la vue de données, car nous souhaitons afficher les coordonnées d'un seul fournisseur à la fois.

    Les champs sélectionnés dans le volet de tâches Détails de la source de données apparaissent maintenant dans une deuxième vue de données située sous la première.

    La vue de données de fournisseurs s'affiche sous la vue des données de produits
    Une vue de données de Suppliers.xml (entourée en rouge) s’affiche sous la vue de données de Products.xml.

Haut de la Page

Connecter les composants WebPart

Suppliers.xml et Products.xml sont liés par un champ commun nommé SupplierID. Grâce à l'Assistant Connexions des composants WebPart, vous connectez les composants WebPart en liant le champ SupplierID de Products.xml au champ SupplierID de Suppliers.xml.

Maintenant que vous avez créé les deux vues de données, vous devez ajouter du texte près de chacun des produits de la vue de données de Products.xml. Ce texte sera lié par lien hypertexte à la vue de données de Suppliers.xml. Lorsque vous cliquez sur le lien hypertexte d'un produit dans la première vue de données, les coordonnées du fournisseur de ce produit s'affichent dans la deuxième vue de données.

La vue de données de Products.xml est le composant WebPart source et la vue de données de Suppliers.xml est le composant WebPart cible. Comme vous travaillez avec une vue de données insérée en tant que formulaire, vous devez créer le texte du lien hypertexte en dehors du champ de formulaire. Une fois que le texte est tapé, sélectionnez-le et utilisez l'Assistant Connexions des composants WebPart pour créer le lien hypertexte dans Products.xml, lien qui mène à la vue de données de Suppliers.xml.

  1. Dans la vue de données créé à partir de Products.xml, placez le curseur à droite de la zone de texte qui contient le nom du produit, appuyez sur la barre d’espace et tapez ordre. Une vue de données utilisant XSLT mise en forme, l’ordre « texte » est ajoutée à tous les champs produit dans la liste.

    Commander s'affiche dans la colonne ProductName pour tous les produits de la liste

  2. Dans la vue de données, sélectionnez le texte « commander », cliquez dessus avec le bouton droit, puis cliquez sur Connexions des composants WebPart dans le menu contextuel.

    L'Assistant Connexions des composants WebPart s'ouvre.

  3. Dans la liste Choisissez l'action à effectuer sur le composant WebPart source à utiliser pour cette connexion, cliquez sur Envoyer la ligne de données vers, puis cliquez sur Suivant.

    Page dans l'Assistant Connexions des composants WebPart

  4. Dans la section Choisissez la page contenant le composant WebPart auquel se connecter, cliquez sur Se connecter à un composant WebPart sur cette page, puis sur Suivant.

    Page dans l'Assistant Connexions des composants WebPart

  5. Dans la liste Composant WebPart cible, cliquez sur suppliers.xml.

  6. Comme nous voulons filtrer les données de Suppliers.xml de manière à ce qu'elles correspondent au SupplierID du produit spécifié dans la première vue de données, dans la liste Action cible, cliquez sur Obtenir les valeurs de filtre à partir de, puis cliquez sur Suivant.

    Page dans l'Assistant Connexions des composants WebPart

  7. Dans la colonne Entrées dans Suppliers.xml, faites défiler la liste jusqu'à voir SupplierID. Dans la liste, à gauche de SupplierID, dans la colonne Colonnes dans Products.xml, cliquez sur la cellule puis sur la flèche et cliquez sur SupplierID dans la liste. Cliquez sur Suivant.

    Page dans l'Assistant Connexions des composants WebPart

  8. Dans la liste Créer un lien hypertexte sur, cliquez sur [ Sélection actuelle ], puis sur Suivant.

    Page dans l'Assistant Connexions des composants WebPart

  9. Cliquez sur Terminer.

  10. Dans le menu Fichier, cliquez sur Enregistrer. Vous pouvez également appuyer sur CTRL+S.

Le texte « commander » est désormais un lien hypertexte et la connexion de composants WebPart est configurée.

Haut de la Page

Tester la connexion de composants WebPart

Maintenant que la connexion de composants WebPart est configurée, vous pouvez tester la connexion en affichant un aperçu de la page dans le navigateur.

  • Pour afficher un aperçu du fichier dans le navigateur, cliquez sur Aperçu dans la barre d'outils Commun, ou appuyez sur F12.

Les deux composants WebPart s'affichent sur la page dans le navigateur. Pour afficher le fournisseur d'un produit spécifique, dans la première vue de données, cliquez sur le lien hypertexte commander situé près du produit que vous souhaitez dans la colonne ProductName. Les coordonnées du fournisseur concerné s'affichent dans la deuxième vue de données ci-dessous.

Deux vues de données connectées sur une page

Remarque : Exotic Liquids est le fournisseur des produits Chai, Chang, et Aniseed Syrup. New Orleans Cajun Delights est le fournisseur des produits Chef Anton’s Cajun Seasoning et Chef Anton’s Gumbo Mix.

Haut de la Page

Supprimer une connexion de composants WebPart

Vous pouvez également supprimer une connexion de composants WebPart de manière à ce que les deux composants WebPart ne soient plus liés. Lorsque vous connectez deux composants WebPart, chacun de ces composants fait état de cette connexion : vous pouvez donc supprimer la connexion aussi bien en travaillant sur le composant WebPart source que sur le composant WebPart cible. La suppression de la connexion à partir du composant WebPart source supprime également la connexion du côté du composant WebPart cible.

  1. Cliquez avec le bouton droit sur l'une ou l'autre des vues de données, puis cliquez sur Connexions des composants WebPart dans le menu contextuel.

  2. Dans la boîte de dialogue Connexions des composants WebPart, cliquez sur la connexion à supprimer, puis sur Supprimer.

Haut de la Page

Remarque : Avertissement traduction automatique : cet article a été traduit par un ordinateur, sans intervention humaine. Microsoft propose cette traduction automatique pour offrir aux personnes ne maîtrisant pas l’anglais l’accès au contenu relatif aux produits, services et technologies Microsoft. Comme cet article a été traduit automatiquement, il risque de contenir des erreurs de grammaire, de syntaxe ou de terminologie.

Développez vos compétences
Découvrez des formations
Accédez aux nouvelles fonctionnalités en avant-première
Rejoignez le programme Office Insider

Ces informations vous ont-elles été utiles ?

Nous vous remercions pour vos commentaires.

Merci pour vos commentaires. Il serait vraisemblablement utile pour vous de contacter l’un de nos agents du support Office.

×