Listes déroulantes en cascade dans SharePoint

Une demande récurrente dans SharePoint est de créer des listes déroulantes en cascade entre deux listes minimum. Cette technique permet de limiter les valeurs affichées en fonction du choix précédent. Par exemple, la première liste peut contenir la liste des régions françaises. Lors du choix d’une région, la seconde liste ne fait apparaître que les départements de la région sélectionnée.

Il existe de nombreuses possibilités pour obtenir ce résultat. Toutefois, l’utilisateur voulait une méthode simple pour le faire, sans l’apport de produits tiers.

Création des deux listes

La première liste contiendra la Régions: elle est nommée Régions. Cette liste sera aussi appelée la liste parent.

La seconde liste contiendra la liste des départements: elle est nommée Départements. Cette liste aura une colonne de recherche, nommée Région (nom affiché) qui pointera sur la liste des régions.

La procédure pour créer ses deux listes est détaillée dans l’article intitulée Comment créer une colonne de recherche.

Créer le questionnaire

Le questionnaire est un formulaire qui permet d’interroger l’utilisateur sur la région de la liste parent puis le département de la liste enfant.

Concrètement, il suffit de créer une simple liste personnalisée, nommée Questionnaire. Cette liste aura 2 colonnes supplémentaires de type Recherche (informations déjà sur ce site). La première colonne s’intitule Region (sans accent, pour le nom interne), la seconde colonne s’intitule Departement (sans accent aussi).

Créer la liste qui relie les listes parent et enfant

Pour créer la liste Questionnaire, cliquez sur Actions du site > Autres options > Liste > Liste personnalisée.

Nommez la liste Questionnaire puis cliquez sur le bouton Créer.

Ajout de la première colonne qui relie la liste « parent »

Pour ajouter la colonne Region (sans accent), cliquez sur le ruban Liste (en haut) et sur le menu Créer une colonne.

Nommez la colonne Region (sans accent) puis sélectionnez le type Recherche (informations déjà sur ce site)

Puis, dans Paramètres de colonne supplémentaires, sous Obtenir des informations à partir de, sélectionnez la liste Régions. Sous Dans cette colonne, sélectionnez la colonne Titre (pas Titre lié à un élément) puis cliquez sur le bouton OK.

Pour des raisons esthétiques, vous allez renommer la colonne Region (sans accent) en Région (avec accent). La raison pour laquelle la saisie directe du nom Région n’a pas été faite directement est expliquée dans l’article consacrée au nom interne.

Allez dans les paramètres de la liste puis cliquez sur la colonne Region.

Modifiez le nom de la colonne en Région puis cliquez sur le bouton OK.

Ajout de la première colonne qui relie la liste « enfant »

Pour ajouter la colonne Departement (sans accent), cliquez sur le ruban Liste (en haut) et sur le menu Créer une colonne.

Nommez la colonne Departement (sans accent) puis sélectionnez le type Recherche (informations déjà sur ce site)

Puis, dans Paramètres de colonne supplémentaires, sous Obtenir des informations à partir de, vérifiez que la liste Départements est bien sélectionnée. Si ce n’est pas le cas, sélectionnez-là. Vérifiez aussi que la colonne Titre est bien sélectionnée (pas Titre lié à un élément). Si ce n’est pas le cas, sélectionnez-là puis cliquez sur le bouton OK.

Pour des raisons esthétiques, vous allez renommer la colonne Departement (sans accent) en Département (avec accent).

Allez dans les paramètres de la liste puis cliquez sur la colonne Departement.

Modifiez le nom de la colonne en Département puis cliquez sur le bouton OK.
Liste déroulante en cascade relie parent enfant
Si vous cliquez sur le lien Ajouter un nouvel élément, vous n’aurez pas de liaison entre la liste parent et la liste enfant: pas de JavaScript, pas de liste déroulante en cascade !

JavaScript

En effet, pour indiquer à SharePoint de faire des listes déroulantes en cascade entre la liste parent et la liste enfant, il est nécessaire d’introduire quelques lignes de JavaScript.

Pour simplifier le travail, nous utilisons JQuery et SPServices.

Les procédures pour utiliser ses deux bibliothèques sont détaillées dans les articles d’initiation à jQuery et d’initiation à SPServices.

Implémenter la logique métier en JavaScript

Une fois que vous savez que les bibliothèques JQuery et SPServices fonctionnement correctement, vous pouvez implémenter la logique métier qui permet d’avoir deux listes en cascade.

Créez un fichier ListeDeroulanteEnCascade.js avec Notepad avec le contenu suivant:
<script type= »text/javascript » src= »/Scripts/jQuery.js »></script>
<script type= »text/javascript » src= »/Scripts/jQuery.SPServices.js »></script>
<script type= »text/javascript »>

$(document).ready(function() {
$().SPServices.SPCascadeDropdowns({
relationshipList: « Départements »,
relationshipListParentColumn: « Region »,
relationshipListChildColumn: « Title »,
parentColumn: « Région »,
childColumn: « Département »,
});
});
</script>
relationshipList doit contenir le nom de la liste qui fait le lien avec la liste parent (« Régions »). Dans notre cas, c’est la liste Départements.

Au lieu du nom, vous pouvez mettre aussi le GUID de la liste Départements.

relationshipListParentColumn doit contenir le nom interne de la colonne de la liste enfant (« liste Départements ») qui pointe vers la colonne de la liste parent (« Régions »). Dans notre cas le nom interne de la colonne est Region.

Pour savoir comment récupérer le nom interne, consultez l’article sur le nom interne.

relationshipListChildColumn doit contenir le nom interne de la colonne de la liste enfant (« liste Départements ») qui affiche les valeurs filtrées. Dans notre cas le nom interne de la colonne Département est Title.

parentColumn doit contenir le nom d’affichage de la colonne du formulaire (« Questionnaire ») qui pointe vers la colonne de la liste parent (« Régions »). Dans notre cas le nom d’affichage de la colonne est Région.

childColumn doit contenir le nom d’affichage de la colonne du formulaire (« Questionnaire ») qui pointe vers la colonne de la liste parent (« Départements »). Dans notre cas le nom d’affichage de la colonne est Département.

Normalement, vous n’avez pas à modifier le script (ListeDeroulanteEnCascade.js) sauf si vous avez nommé différemment vos colonnes.

Modifier le formulaire avec SharePoint Designer

L’ajout du JavaScript doit être fait dans la liste Questionnaire. Plus précisément, il est nécessaire de modifier les formulaires NewForm.aspx et EditForm.aspx de la liste. Le formulaire NewForm.aspx sert à créer un nouvel élément, tandis qu’EditForm.aspx permet de modifier les éléments existants.

La modification des formulaires de la liste Questionnaire se fait à l’aide de SharePoint Designer.

A partir de votre site, cliquez sur Actions du site puis Modifier dans SharePoint Designer.

Dans SharePoint Designer, cliquez sur Listes et bibliothèques (à gauche).
Liste déroulante en cascade SharePoint Designer Listes bibliotheques
Cliquez sur la liste Questionnaire pour gérer ses paramètres.

Pour vérifier le bon fonctionnement du script ListeDeroulanteEnCascade.js, vous allez modifier le fichier NewForm.aspx.

Pour cela, faites un clic droit sur le fichier NewForm.aspx puis choisissez Modifier le fichier en mode avancé.
modifier-le-fichier-en-mode-avancé
Basculez dans la fenêtre Code, si ce n’est pas déjà fait.
Lancez une recherche dans le code source sur la chaîne de caractères « <asp:Content ContentPlaceHolderId= »PlaceHolderMain » runat= »server »> »
Recherche dans SharePoint Designer
En dessous de la chaîne recherchée, copiez tout le contenu du fichier ListeDeroulanteEnCascade.js.
Import du JavaScript dans NewForm.aspx
Enregistrez les modifications faites sur NewForm.aspx: une fenêtre apparait qui vous informe que l’enregistrement de vos modifications personnalise la page de telle sorte qu’elle ne se base plus sur la définition de site. Cliquez sur le bouton Oui pour enregistrer vos modifications. Ce message n’apparaîtra plus sur ce fichier.

Appuyez directement sur la touche F12 pour lancer le navigateur web.

Dans le questionnaire qui s’affiche, saisissez un titre (par exemple Question 1) puis cliquez sur la zone déroulante du Région.

Sélectionnez Corse grâce à un double clic. Si la liste déroulante ne se ferme pas, appuyez sur la touche tabulation de votre clavier.

Dans la zone Département, vous devez voir apparaître:
Création réussie d'un élément avec la liste déroulante
Sélectionnez Corse-du-Sud puis cliquez sur le bouton Enregistrer: laissez ouvert votre navigateur Internet.
Revenez à SharePoint Designer.

Dans SharePoint Designer, refaites exactement les mêmes manipulations que vous venez de faire sur le formulaire EditForm.aspx.

Une fois vos modifications terminées, retournez sur le navigateur Internet puis modifiez l’élément Question 1.
Modification en cours de l'élément
Dans Région, double-cliquez sur Franche-Comté.

Dans Département, sélectionnez Doubs puis cliquez sur le bouton Enregistrer.
Modification réussie d'un élément
Si tout va bien, fermez SharePoint Designer.

Remarques

  • Par analogie avec cet exemple, il est facile de l’étendre pour mettre en oeuvre des listes déroulantes sur 3 ou 4 niveaux.
  • Des problèmes apparaissent à cause des noms de colonnes tronqués au-delà des 32 caractères. Une cause possible d’un nom interne tronqué est l’utilisation d’accent ou d’espace dans le nom de la colonne à sa création.

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *