Utiliser le composant WebPart Formulaire HTML pour filtrer et afficher des données dans un autre composant WebPart

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

Vous pouvez utiliser le composant WebPart formulaire HTML pour vous connecter à et passer des données à un autre composant WebPart, tels que le composant WebPart Affichage de liste.

Contenu de cet article :

Utilisation du composant WebPart formulaire

Ajouter un composant WebPart à une page

Connecter le composant WebPart formulaire HTML à un autre composant WebPart

Personnaliser le composant WebPart formulaire HTML

Personnaliser le composant WebPart formulaire HTML par défaut

Utiliser une zone de texte multiligne

Utiliser des cases d’option

Utiliser une liste déroulante de choix

Utilisez les cases à cocher

Configurer les propriétés communes d’un composant WebPart

Apparence

Mise en page

Avancées

Utilisation du composant WebPart formulaire

Vous pouvez utiliser le composant WebPart formulaire HTML pour vous connecter et passer des données à un autre composant WebPart. Par exemple, vous pouvez utiliser le composant WebPart formulaire HTML par défaut Tapez un nom de région, passez la valeur à un composant WebPart Affichage de liste de données client et filtrer les données par cette zone. Vous pouvez également personnaliser le composant WebPart formulaire HTML, pour permettre à un utilisateur, par exemple, sélectionnez le nom de la région dans la liste déroulante. Vous pouvez utiliser des zones de texte, listes déroulantes, zones de texte sur plusieurs lignes, cases à cocher ou des cases d’option dans le composant WebPart formulaire HTML.

La façon de vous connecter à des champs à l’autre composant WebPart dépend de comment l’autre composant WebPart a été défini pour utiliser une connexion de composant WebPart.

Bien que vous pouvez avoir plusieurs éléments (zone de texte, cases d’option et ainsi de suite) sur votre formulaire, qu’un seul champ pouvant être connecté à un composant WebPart Affichage de liste. Toutefois, plusieurs champs pouvant être connectés à différents composants WebPart en même temps. Par exemple, vous pouvez avoir un composant WebPart formulaire HTML, avec une zone de texte et d’un ensemble de cases d’option. La zone de texte peut être connectée à un composant WebPart Affichage de liste et les cases d’option à l’autre. Lorsque l’utilisateur clique sur le bouton OK, les deux composants WebPart Affichage de liste sont filtrés selon les informations entrées dans le composant WebPart formulaire HTML.

Vous pouvez connecter deux ou plusieurs champs dans le composant WebPart formulaire HTML à un autre composant WebPart, si ce composant WebPart peut accepter plusieurs paramètres. Dans ce cas, vous devrez peut-être un programme de conception Web compatible avec SharePoint, tel que SharePoint Designer 2010 pour terminer les connexions.

Haut de la Page

Ajouter un composant WebPart à une page

Pour modifier une page, vous devez au moins disposer des autorisations obtenues lorsque vous avez été ajouté en tant que membre du groupe SharePoint par défaut du site <Nom du site>.

  1. À partir d’une page, dans le ruban, cliquez sur l’onglet Page, puis sur la commande Modifier.

    Commande Modifier de l’onglet Modifier

    Si la commande Modifier est désactivée, il est possible que vous ne disposiez pas des autorisations nécessaires pour modifier la page. Contactez l’administrateur.

  2. Cliquez sur la page dans laquelle vous voulez ajouter un composant WebPart. Cliquez sur l’onglet Insertion, puis cliquez sur Composant WebPart.

    Commande Composant WebPart

  3. Sous Catégories, sélectionnez une catégorie, telle que Listes et bibliothèques, sélectionnez le composant WebPart que vous voulez ajouter à la page, tel que Annonces, puis cliquez sur Ajouter.

    Sélecteur de composant WebPart

  4. Lorsque vous sélectionnez un composant WebPart, les informations relatives au composant WebPart sont affichées dans À propos du composant WebPart.

  5. Quand vous avez terminé de modifier la page, cliquez sur l’onglet Page, puis sur Enregistrer et fermer.

Haut de la Page

Connecter le composant WebPart formulaire HTML à un autre composant WebPart

Pour utiliser le composant WebPart formulaire HTML, connectez-le à un autre composant WebPart capable de valeurs réception via une connexion de composants WebPart, tels que le composant WebPart Affichage de liste. La liste que vous voulez filtrer et la colonne sur lequel vous voulez filtrer, doivent être visibles dans un composant WebPart sur la même page en tant que le composant WebPart formulaire HTML. Pour plus d’informations sur l’ajout d’un composant WebPart formulaire HTML à une page, voir Ajouter un composant WebPart à une Page.

  1. Accédez à la page contenant le composant WebPart que vous voulez filtrer.

  2. Dans le ruban, cliquez sur l’onglet Page, puis cliquez sur la commande Modifier.

    Si la commande Modifier est désactivée, il est possible que vous ne disposiez pas des autorisations nécessaires pour modifier la page. Contactez l’administrateur.

  3. Pointez sur le composant WebPart formulaire HTML et cliquez sur la flèche vers le bas, cliquez sur connexions, pointez sur Fournir la valeur du formulaire à, puis cliquez sur le nom du composant WebPart à laquelle vous souhaitez lier.

  4. Dans la boîte de dialogue Choisir la connexion, cliquez sur l’onglet Configurer la connexion.

  5. Dans le menu Type de connexion, sélectionnez le champ qui correspond aux informations dans le composant WebPart de formulaire HTML.

Remarque : Les champs n’ont pas avoir le même nom, ni elles doivent être les mêmes types de données. Les valeurs envoyées par le composant WebPart formulaire HTML sont des valeurs de texte.

  1. Cliquez sur Terminer, puis cliquez sur Quitter le Mode Édition en haut de la page.

Par défaut, vous pouvez entrer du texte dans la zone de texte puis cliquez sur OK ou appuyez sur ENTRÉE. L’autre composant WebPart affiche uniquement les données correspondant au texte que vous avez entré. Pour effacer la zone de texte afin que vous pouvez entrer un nouveau texte, sélectionnez le texte actuel et supprimez-le.

Haut de la Page

Personnaliser le composant WebPart formulaire HTML

Vous pouvez personnaliser le composant WebPart formulaire HTML à l’aide de l' Éditeur de code Source, qui est disponible à partir du volet d’outils du composant WebPart formulaire HTML, ou un programme de conception Web compatible avec SharePoint, tel que SharePoint Designer 2010. Au lieu de la zone de texte standard, vous pouvez utiliser des cases d’option, des cases à cocher, des zones de texte sur plusieurs lignes et des zones de liste. Vous pouvez également ajouter des étiquettes et affecter une valeur par défaut.

Si vous personnalisez le composant WebPart formulaire HTML, gardez à l’esprit les points suivants :

  • Seul bouton Atteindre (qui utilise l’élément INPUT) peut être utilisé pour passer des données à un autre composant WebPart.

  • Le composant WebPart formulaire HTML utilise l’élément de formulaire. Certains éléments HTML ne peuvent pas être utilisés dans l’élément de formulaire, y compris les éléments HTML et corps du formulaire.

  • Tous les noms de champs de formulaires doivent être uniques. Chacun de ces noms sert à assurer la connexion avec le nom d'une colonne correspondante dans le composant WebPart auquel vous connectez le composant WebPart Formulaire.

Pour personnaliser le composant WebPart formulaire, utilisez le bouton de l’Éditeur de code Source pour afficher la boîte de dialogue Éditeur de texte puis réviser ou ajouter le code source HTML.

Remarque : Le composant WebPart formulaire HTML fournit des données à un autre composant WebPart peuvent-elles être connectées, il ne peut pas obtenir des données à partir d’un autre composant WebPart peuvent-elles être connectées. Par exemple, vous ne pouvez pas utiliser le composant WebPart formulaire HTML comme formulaire de détail pour afficher une ligne de données.

Haut de la Page

Personnaliser le composant WebPart formulaire HTML par défaut

Pour personnaliser le composant WebPart formulaire HTML par défaut, procédez comme suit :

  1. Dans la page affichant le composant WebPart formulaire HTML, dans le ruban, cliquez sur le onglet Modifier, puis cliquez sur le commande Modifier.

  2. Pointez sur le composant WebPart formulaire HTML, cliquez sur la flèche vers le bas, puis sur Modifier le composant WebPart.

  3. Dans le volet d’outils, cliquez sur le bouton de l’Éditeur de code Source .

  4. La boîte de dialogue d’Entrée de texte s’ouvre avec le code HTML par défaut.

Pour rendre le code plus facile à lire et modifier, insérez les retours chariot dans le texte sur deux lignes comme illustré ici :

<div onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_">
<input type="text" name="T1"/>
<input type="button" value="Go" onclick="javascript:_SFSUBMIT_"/>
</div>

Vous pouvez modifier le premier élément INPUT de différentes manières en modification du nom d’un champ, en ajoutant une étiquette à un champ ou en ajoutant une valeur par défaut.

Propriété

Description

Nom de champ

Le nom de la zone de texte par défaut dans le composant WebPart formulaire est T1. Il s’agit le nom qui apparaît dans la boîte de dialogue de Connexion de Configuration . Pour attribuer un nom plus significatif au champ, tapez un nouveau nom à la place de T1. Ne supprimez pas les guillemets.

Étiquette de champ

Vous pouvez ajouter le texte d’étiquette avant ou après le champ de formulaire. Tapez le texte sans guillemets.

valeur par défaut

Vous pouvez ajouter une valeur par défaut pour le champ de zone de texte. L’utilisateur peut accepter la valeur en cliquant sur le bouton OK ou remplacer en tapant leur propre entrée. Pour ajouter une valeur par défaut, utilisez l’attribut value.

Pour exemple si vous souhaitez fournir un nom plus significatif, ajoutez une valeur par défaut et ajouter une étiquette, procédez comme suit :

Region: <input type="text" name="Region" value="India"/>

Vous pouvez modifier le deuxième élément de saisie en modifiant le nom du bouton, comme le montre l’exemple suivant :

<input type="button" value="SUBMIT" onclick="javascript:_SFSUBMIT_"/>

Vous pouvez également ajouter d’autres éléments HTML avant et après l’élément DIV. Par exemple, un moyen très simple et utile pour permettre l’utilisateur rapidement actualisez la page et réinitialiser les éléments de formulaire consiste à ajouter une balise d’ancrage de la page active après l’élément DIV fermant. Par exemple :

<br/>
<a href="http://contoso/SitePages/CustByRegion.aspx">Refresh</a>

Important : Ne modifiez pas l’autre code HTML dans la boîte de dialogue Éditeur de texte. Le composant WebPart formulaire HTML crée dynamiquement une routine écriture de script en cours d’exécution pour créer la connexion à l’autre composant WebPart. Ne modifiez pas le code d’événement onkeydown ou onclick, ou vous risquez de rompre involontairement le composant WebPart formulaire HTML.

Haut de la Page

Utiliser une zone de texte multiligne

L’élément TEXTAREA définit un contrôle de saisie de texte multiligne. L’attribut lignes spécifie le nombre de lignes qui sont visibles dans la zone de texte. L’attribut Réf spécifie la largeur de la zone de texte en caractères. Dans l’exemple suivant, l’utilisateur voit une zone de texte de 5 lignes et 30 caractères de largeur. Lorsque l’utilisateur entre du texte dans la zone, le texte s’ajuste à 30 caractères.

<textarea name="Region" rows=5 cols=30></textarea>

Conseil : Vérifiez que n’est pas d’espace dans le code source immédiatement après le crochet angulaire à droite (>).

Haut de la Page

Utiliser des cases d’option

Cases d’option, également appelées cases d’option, fournissent excluent mutuellement à un utilisateur. L’exemple suivant affiche trois cases d’option. Utiliser le même nom pour chaque case d’option. Il est habituel pour ajouter les étiquettes après chaque bouton. Si vous voulez mettre en forme de chaque case d’option sur une ligne distincte, utilisez l’élément BR.

<input type="radio" name="Region" value="India"/> India<BR/>
<input type="radio" name="Region" value="USA"/> USA<BR/>
<input type="radio" name="Region" value="Spain"/> Spain<BR/>

Haut de la Page

Utiliser une liste déroulante de choix

S’il existe de nombreuses options sont disponibles qui s’exclus mutuellement, envisagez d’utiliser un menu déroulant liste déroulante située à l’aide de l’élément SELECT. Chaque option apparaît sous la forme d’un choix dans la liste distinct, mais l’utilisateur peut sélectionner uniquement un choix. Le texte après le signe de fermeture de l’élément OPTION est ce qui apparaît dans la liste déroulante.

<select name="Region">
<option value="India">India</option>
<option value="USA">USA</option>
<option value="Spain"> Spain </option>
</select>

Pour fournir une valeur par défaut, comme Espagne, procédez comme suit :

<option value="Spain" selected="selected"> Spain </option>

Haut de la Page

Utilisez les cases à cocher

S’il existe plusieurs choix non exclusives, envisagez d’utiliser des cases à cocher. Chaque option apparaît sous la forme d’une case à cocher distincte, et l’utilisateur peut sélectionner tout ou partie des choix. À l’aide de cette option nécessite un composant WebPart qui accepte plusieurs paramètres dans le cadre de la connexion de composants WebPart.

<input type="checkbox" name="region1" value="India"/> India<BR/>
<input type="checkbox" name="region2" value="USA"/> USA<BR/>
<input type="checkbox" name="region3" value="Spain"/> Spain<BR/>

Pour fournir une valeur par défaut, comme Espagne, procédez comme suit :

<input type="checkbox" name="region3" value="Spain" checked="checked"/> Spain<BR/> 

Haut de la Page

Configurer les propriétés communes d’un composant WebPart

Tous les composants WebPart ont un ensemble de propriétés en commun qui permet de contrôler l’apparence, la disposition et les caractéristiques avancées.

Remarque :  Les propriétés communes des composants WebPart que vous voyez dans le volet des outils peuvent différer de celles présentées dans cette section pour plusieurs raisons

  • Pour voir la section Avancé du volet d'outils, vous devez bénéficier de l'autorisation appropriée.

  • Pour un composant WebPart spécifique, un développeur de composant WebPart peut avoir choisi de ne pas afficher une ou plusieurs de ces propriétés communes ou peut avoir choisi de créer et afficher les propriétés supplémentaires qui ne sont pas indiquées ci-dessous dans les sections apparence, disposition et Avancé du volet d’outils.

  • Certains paramètres d'autorisations et de propriétés peuvent désactiver ou masquer des propriétés WebPart.

Apparence

Propriété

Description

Titre

Indique le titre du composant WebPart s'affichant dans la barre de titre WebPart.

Hauteur

Indique la hauteur du composant WebPart.

Largeur

Indique la largeur du composant WebPart.

État de chrome

Indique si le composant WebPart s’affiche en entier lorsqu’un utilisateur ouvre la page sur laquelle il se trouve. Par défaut, l’état de chrome est défini sur Normal et le composant WebPart s’affiche en entier. Si l’état est défini sur Réduit, seule la barre de titre s’affiche.

Style de cadre

Indique si la barre de titre et la bordure du cadre WebPart sont affichées.

Disposition

Propriété

Description

Masqué

Indique si le composant WebPart est visible lorsqu’un utilisateur ouvre la page. Si la case est cochée, le composant WebPart n’est visible que lorsque vous êtes en train de créer la page et le suffixe (Masqué) est ajouté à son titre.

Vous pouvez masquer un composant WebPart si vous souhaitez l’utiliser pour fournir des données à un autre composant WebPart à l’aide d’une connexion WebPart, mais que vous ne souhaitez pas afficher le composant WebPart.

Orientation

Indique le sens du texte dans le contenu du composant WebPart. Par exemple, l’arabe se lit de droite à gauche, alors que le français et la plupart des langues européennes se lisent de gauche à droite. Ce paramètre peut ne pas être disponible pour tous les types de composant WebPart.

Zone

Indique la zone dans la page où se trouve le composant WebPart.

Remarque : Les zones dans la page ne sont pas indiquées dans la zone de liste lorsque vous n’êtes pas autorisé à modifier la zone.

Index de zone

Spécifie la position du composant WebPart dans une zone lorsque celle-ci contient plusieurs composants WebPart.

Pour indiquer l’ordre, tapez un entier positif dans la zone de texte.

Si les composants WebPart contenus dans la zone sont organisés de haut en bas, la valeur 0 signifie que le composant WebPart apparaît en haut de la zone. Si les composants WebPart contenus dans la zone sont organisés de gauche à droite, la valeur 1 signifie que le composant WebPart apparaît dans la partie gauche de la zone.

Par exemple, lorsque vous ajoutez un composant WebPart à une zone vide organisée de haut en bas, son index de zone est 0. Lorsque vous ajoutez un deuxième composant WebPart au bas de la zone, son index de zone est 1. Pour déplacer le deuxième composant WebPart vers le haut de la zone, tapez 0, puis tapez 1 pour le premier composant WebPart.

Remarque :  Chaque composant WebPart dans la zone doit avoir une valeur Index de zone unique. Par conséquent, si vous changez la valeur Index de zone du composant WebPart actif, cela peut changer la valeur Index de zone d’autres composants WebPart dans la zone.

Options avancées

Propriété

Description

Autoriser la réduction

Indique si le composant WebPart peut être réduit.

Autoriser la fermeture

Indique si le composant WebPart peut être supprimé de la page.

Autoriser les éléments masqués

Indique si le composant WebPart peut être masqué.

Autoriser le changement de zone

Indique si le composant WebPart peut être déplacé vers une autre zone.

Autoriser les connexions

Indique si le composant WebPart peut participer à des connexions à d'autres composants WebPart.

Autoriser les modifications en mode Affichage personnel

Indique si les propriétés du composant WebPart peuvent être modifiées en mode Affichage personnel.

Mode d’exportation

Indique le niveau des données autorisées à être exportées pour ce composant WebPart. Selon votre configuration, ce paramètre peut ne pas être disponible.

URL de titre

Indique l’URL d’un fichier qui contient des informations supplémentaires sur le composant WebPart. Le fichier est affiché dans une fenêtre distincte du navigateur lorsque vous cliquez sur son titre WebPart.

Description

Indique l’info-bulle qui s’affiche lorsque vous placez le pointeur de la souris sur le titre ou l’icône WebPart. La valeur de cette propriété est utilisée lorsque vous recherchez des composants WebPart avec la commande Rechercher du menu Rechercher des composants WebPart du volet d’outils.

URL de l’aide

Indique l’emplacement d’un fichier contenant des informations d’aide sur le composant WebPart. Ces informations sont affichées dans une fenêtre distincte du navigateur lorsque vous cliquez sur la commande Aide du menu Composant WebPart.

Mode d’aide

Indique la manière dont un navigateur doit afficher le contenu de l'aide d'un composant WebPart.

Effectuez l'une des opérations suivantes :

Modal Ouvre une fenêtre distincte du navigateur, si celui-ci en est capable. La fenêtre doit être fermée pour revenir à la page web.

Non modal Ouvre une fenêtre distincte du navigateur, si celui-ci en est capable. Il n’est pas obligatoire de fermer la fenêtre pour revenir à la page web. Il s’agit de la valeur par défaut.

Naviguer Ouvre la page web dans la fenêtre du navigateur active.

Remarque : Même si les composants WebPart Microsoft ASP.NET personnalisés prennent en charge cette propriété, les rubriques d’aide SharePoint par défaut s’ouvrent uniquement dans une fenêtre distincte du navigateur.

URL de l’image de l’icône de catalogue

Indique l’emplacement d’un fichier contenant une image destinée à être utilisée comme icône de composant WebPart dans la liste des composants WebPart. La taille de l’image doit faire 16 x 16 pixels.

URL de l’image de l’icône de titre

Indique l’emplacement d’un fichier contenant une image destinée à être utilisée dans la barre de titre du composant WebPart. La taille de l’image doit faire 16 x 16 pixels.

Message d'erreur d'importation

Indique un message qui s'affiche si un problème est généré par l'importation d'un composant WebPart.

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.

×