Exemple : Créer des OptionSets dépendants (listes déroulantes)

Article
07/06/2017

Date de publication : novembre 2016

S’applique à : Dynamics CRM 2015

Il est souvent requis que les valeurs d’un champ de groupe d’options soient filtrées selon une valeur sélectionnée dans un autre champ de groupe d’options. Cette rubrique décrit une méthode permettant d'y parvenir avec une bibliothèque JScript réutilisable, des événements de formulaire et une ressource Web XML.

Pour observer et vérifier la fonctionnalité de cet exemple, vous pouvez installer la solution gérée DependentOptionSetsSample_1_0_0_2_managed.zip à partir de l’emplacement suivant du téléchargement du kit de développement logiciel (SDK) : SDK\SampleCode\JS\FormScripts

Téléchargez le package Kit de développement logiciel (SDK) de Microsoft Dynamics CRM.

Objectifs de cette solution

Cette solution est conçue pour répondre aux exigences suivantes :

Elle fournit une bibliothèque JScript générique réutilisable qui peut être utilisée pour toutes les paires de champs de groupes d’options.
Elle autorise une chaîne de champs de groupes d’options dépendants. Comme les options de chaque champ de groupe d’options dépendantes sont filtrées selon la valeur d’un autre champ, les options de champ de groupe d’options supplémentaires peuvent être filtrées par l’option sélectionnée dans le premier champ de groupe d’options dépendant. Cela permet de disposer d’un ensemble de champs de groupe d’options dépendants hiérarchiquement.
Le filtrage des options dépendantes est défini dans une ressource Web XML. Cela permet de modifier les mappages d’options sans modifier le code. La modification d’une ressource Web XML constitue un moyen plus simple pour un non-développeur de configurer les options avec moins d’opportunité de déchiffrer le code.
La solution prend en charge plusieurs langages. Le filtrage est basé uniquement sur la valeur de données des options, et non sur le texte dans les options.
Le filtrage fonctionne pour n’importe quel nombre d’instances d’un contrôle d’attribut dans le formulaire.

Exemple

Cette section décrit une application de cette approche et la procédure permettant d’appliquer l’exemple de bibliothèque.

Le formulaire d’entité Ticket (sample_ticket) comporte trois champs de groupe d’options et les options qui permettent de catégoriser les produits. Le tableau suivant indique le filtre souhaité des options de groupes d’options.

Catégorie (sample_category)	Sous-catégorie (sample_subcategory)	Type (sample_type)
Valeur :727000000 Étiquette : Logiciel	Valeur :727000000 Étiquette : Productivité personnelle	Valeur :727000000 Étiquette : Traitement de texte
		Valeur :727000001 Étiquette : Feuille de calcul
		Valeur :727000002 Étiquette : Navigateur Internet
		Valeur :727000003 Étiquette : Courrier électronique
	Valeur :727000001 Étiquette : Applications d’entreprise	Valeur :727000004 Étiquette : Gestion de la relation client
		Valeur :727000005 Étiquette : Gestion des ressources d’entreprise
		Valeur :727000006 Étiquette : Gestion des ressources humaines
	Valeur :727000002 Étiquette : Systèmes d’exploitation	Valeur :727000007 Étiquette : Windows Vista
		Valeur :727000008 Étiquette : Windows 7
		Valeur :727000009 Étiquette : Windows Server 2003
		Valeur :727000010 Étiquette : Windows Server 2008
Valeur :727000001 Étiquette : Matériel	Valeur :727000003 Étiquette : Ordinateur de bureau	Valeur :727000011 Étiquette : Workstation x1000
		Valeur :727000012 Étiquette : Workstation x2000
		Valeur :727000013 Étiquette : Workstation x3000
		Valeur :727000014 Étiquette : Workstation x4000
	Valeur :727000004 Étiquette : Ordinateur portable	Valeur :727000015 Étiquette : Ordinateur portable série 1000
		Valeur :727000016 Étiquette : Ordinateur portable série 2000
		Valeur :727000017 Étiquette : Ordinateur portable série 3000
		Valeur :727000018 Étiquette : Ordinateur portable série 4000
	Valeur :727000005 Étiquette : Moniteur	Valeur :727000019 Étiquette : CRT-XYZ 17 pouces
		Valeur :727000020 Étiquette : LCD-XYZ 17 pouces
		Valeur :727000021 Étiquette : LCD-XYZ 21 pouces
		Valeur :727000022 Étiquette : LCD-XYZ 24 pouces
	Valeur :727000006 Étiquette : Imprimante	Valeur :727000023 Étiquette :Imprimante série 1000 - Privée
		Valeur :727000024 Étiquette :Imprimante couleur série 2000 - Privée
		Valeur :727000025 Étiquette :Imprimante série 9000 - Partagée
		Valeur :727000026 Étiquette :Imprimante couleur série 9000 - Partagée
	Valeur :727000007 Étiquette : Téléphone	Valeur :727000027 Étiquette : Téléphone RTC
		Valeur :727000028 Étiquette : Téléphone IP
		Valeur :727000029 Étiquette : Téléphone mobile

Activation du filtrage

Convertissez le filtre souhaité des options dans le document XML suivant et téléchargez-le en tant que ressource Web XML intitulée sample_TicketDependentOptionSetConfig.xml. Les valeurs d’étiquette sont incluses pour simplifier la modification du document, mais ne sont pas utilisées dans le script qui filtre les options.


<DependentOptionSetConfig entity="sample_ticket" >
 <ParentField id="sample_category"
              label="Category">
  <DependentField id="sample_subcategory"
                  label="Sub Category" />
  <Option value="727000000"
          label="Software">
   <ShowOption value="727000000"
               label="Personal Productivity" />
   <ShowOption value="727000001"
               label="Business Applications" />
   <ShowOption value="727000002"
               label="Operating Systems" />
  </Option>
  <Option value="727000001"
          label="Hardware">
   <ShowOption value="727000003"
               label="Desktop Computer" />
   <ShowOption value="727000004"
               label="Laptop Computer" />
   <ShowOption value="727000005"
               label="Monitor" />
   <ShowOption value="727000006"
               label="Printer" />
   <ShowOption value="727000007"
               label="Telephone" />
  </Option>
 </ParentField>
 <ParentField id="sample_subcategory"
              label="Sub Category">
  <DependentField id="sample_type"
                  label="Type" />
  <Option value="727000000"
          label="Personal Productivity">
   <ShowOption value="727000000"
               label="Word Processor" />
   <ShowOption value="727000001"
               label="Spreadsheet" />
   <ShowOption value="727000002"
               label="Internet Browser" />
   <ShowOption value="727000003"
               label="E-mail" />
  </Option>
  <Option value="727000001"
          label="Business Applications">
   <ShowOption value="727000004"
               label="Customer Relationship Management" />
   <ShowOption value="727000005"
               label="Enterprise Resource Management" />
   <ShowOption value="727000006"
               label="Human Resource Managment" />
  </Option>
  <Option value="727000002"
          label="Operating Systems">
   <ShowOption value="727000007"
               label="Windows Vista" />
   <ShowOption value="727000008"
               label="Windows 7" />
   <ShowOption value="727000009"
               label="Windows Server 2003" />
   <ShowOption value="727000010"
               label="Windows Server 2008" />
  </Option>
  <Option value="727000003"
          label="Desktop Computer">
   <ShowOption value="727000011"
               label="Workstation x1000" />
   <ShowOption value="727000012"
               label="Workstation x2000" />
   <ShowOption value="727000013"
               label="Workstation x3000" />
   <ShowOption value="727000014"
               label="Workstation x4000" />
  </Option>
  <Option value="727000004"
          label="Laptop Computer">
   <ShowOption value="727000015"
               label="Laptop 1000 series" />
   <ShowOption value="727000016"
               label="Laptop 2000 series" />
   <ShowOption value="727000017"
               label="Laptop 3000 series" />
   <ShowOption value="727000018"
               label="Laptop 4000 series" />
  </Option>
  <Option value="727000005"
          label="Monitor">
   <ShowOption value="727000019"
               label="CRT-XYZ 17 inch" />
   <ShowOption value="727000020"
               label="LCD-XYZ 17 inch" />
   <ShowOption value="727000021"
               label="LCD-XYZ 21 inch" />
   <ShowOption value="727000022"
               label="LCD-XYZ 24 inch" />
  </Option>
  <Option value="727000006"
          label="Printer">
   <ShowOption value="727000023"
               label="Series 1000 Printer - Private" />
   <ShowOption value="727000024"
               label="Series 2000 Color Printer - Private" />
   <ShowOption value="727000025"
               label="Series 9000 Printer - Shared" />
   <ShowOption value="727000026"
               label="Series 9000 Color Printer - Shared" />
  </Option>
  <Option value="727000007"
          label="Telephone">
   <ShowOption value="727000027"
               label="PSTN Phone" />
   <ShowOption value="727000028"
               label="IP Phone" />
   <ShowOption value="727000029"
               label="Mobile Phone" />
  </Option>
 </ParentField>
</DependentOptionSetConfig>

Créez une ressource Web JScript nommée sample_SDK.DependentOptionSetSample.js avec le code suivant.



//If the SDK namespace object is not defined, create it.
if (typeof (SDK) == "undefined")
{ SDK = {}; }
// Create Namespace container for functions in this library;
SDK.DependentOptionSet = {};
SDK.DependentOptionSet.init = function (webResourceName) {
 //Retrieve the XML Web Resource specified by the parameter passed
 var clientURL = Xrm.Page.context.getClientUrl();

 var pathToWR = clientURL + "/WebResources/" + webResourceName;
 var xhr = new XMLHttpRequest();
 xhr.open("GET", pathToWR, true);
 xhr.setRequestHeader("Content-Type", "text/xml");
 xhr.onreadystatechange = function () { SDK.DependentOptionSet.completeInitialization(xhr); };
 xhr.send();
};
SDK.DependentOptionSet.completeInitialization = function (xhr) {
 if (xhr.readyState == 4 /* complete */) {
     if (xhr.status == 200) {
         xhr.onreadystatechange = null; //avoids memory leaks
   var JSConfig = [];
   var ParentFields = xhr.responseXML.documentElement.getElementsByTagName("ParentField");
   for (var i = 0; i < ParentFields.length; i++) {
    var ParentField = ParentFields[i];
    var mapping = {};
    mapping.parent = ParentField.getAttribute("id");
    mapping.dependent = SDK.Util.selectSingleNode(ParentField, "DependentField").getAttribute("id");
    mapping.options = [];
    var options = SDK.Util.selectNodes(ParentField, "Option");
    for (var a = 0; a < options.length; a++) {
     var option = {};
     option.value = options[a].getAttribute("value");
     option.showOptions = [];
     var optionsToShow = SDK.Util.selectNodes(options[a], "ShowOption");
     for (var b = 0; b < optionsToShow.length; b++) {
      var optionToShow = {};
      optionToShow.value = optionsToShow[b].getAttribute("value");
      optionToShow.text = optionsToShow[b].getAttribute("label");
      option.showOptions.push(optionToShow);
     }
     mapping.options.push(option);
    }
    JSConfig.push(mapping);
   }
   //Attach the configuration object to DependentOptionSet
   //so it will be available for the OnChange events 
   SDK.DependentOptionSet.config = JSConfig;
   //Fire the onchange event for the mapped optionset fields
   // so that the dependent fields are filtered for the current values.
   for (var depOptionSet in SDK.DependentOptionSet.config) {
    var parent = SDK.DependentOptionSet.config[depOptionSet].parent;
    Xrm.Page.data.entity.attributes.get(parent).fireOnChange();
   }
  }
 }
};
 // This is the function set on the onchange event for 
 // parent fields
SDK.DependentOptionSet.filterDependentField = function (parentField, childField) {
 for (var depOptionSet in SDK.DependentOptionSet.config) {
  var DependentOptionSet = SDK.DependentOptionSet.config[depOptionSet];
  /* Match the parameters to the correct dependent optionset mapping*/
  if ((DependentOptionSet.parent == parentField) &amp;&amp; (DependentOptionSet.dependent == childField)) {
   /* Get references to the related fields*/
   var ParentField = Xrm.Page.data.entity.attributes.get(parentField);
   var ChildField = Xrm.Page.data.entity.attributes.get(childField);
   /* Capture the current value of the child field*/
   var CurrentChildFieldValue = ChildField.getValue();
   /* If the parent field is null the Child field can be set to null */
   if (ParentField.getValue() == null) {
    ChildField.setValue(null);
    ChildField.setSubmitMode("always");
    ChildField.fireOnChange();

    // Any attribute may have any number of controls
    // So disable each instance
    var controls = ChildField.controls.get()

    for (var ctrl in controls) {
     controls[ctrl].setDisabled(true);
    }
    return;
   }

   for (var os in DependentOptionSet.options) {
    var Options = DependentOptionSet.options[os];
    var optionsToShow = Options.showOptions;
    /* Find the Options that corresponds to the value of the parent field. */
    if (ParentField.getValue() == Options.value) {
     var controls = ChildField.controls.get();
     /*Enable the field and set the options*/
     for (var ctrl in controls) {
      controls[ctrl].setDisabled(false);
      controls[ctrl].clearOptions();

      for (var option in optionsToShow) {
       controls[ctrl].addOption(optionsToShow[option]);
      }

     }
     /*Check whether the current value is valid*/
     var bCurrentValueIsValid = false;
     var ChildFieldOptions = optionsToShow;

     for (var validOptionIndex in ChildFieldOptions) {
      var OptionDataValue = ChildFieldOptions[validOptionIndex].value;

      if (CurrentChildFieldValue == OptionDataValue) {
       bCurrentValueIsValid = true;
       break;
      }
     }
     /*
     If the value is valid, set it.
     If not, set the child field to null
     */
     if (bCurrentValueIsValid) {
      ChildField.setValue(CurrentChildFieldValue);
     }
     else {
      ChildField.setValue(null);
     }
     ChildField.setSubmitMode("always");
     ChildField.fireOnChange();
     break;
    }
   }
  }
 }
};

SDK.Util = {};
//Helper methods to merge differences between browsers for this sample
 SDK.Util.selectSingleNode = function (node, elementName) {
  if (typeof (node.selectSingleNode) != "undefined") {
   return node.selectSingleNode(elementName);
  }
  else {
   return node.getElementsByTagName(elementName)[0];
  }
 };
 SDK.Util.selectNodes = function (node, elementName) {
  if (typeof (node.selectNodes) != "undefined") {
   return node.selectNodes(elementName);
  }
  else {
   return node.getElementsByTagName(elementName);
  }
 };

Ajoutez la ressource Web Script sample_SDK.DependentOptionSetSample.js dans les bibliothèques JScript disponibles pour le formulaire.
Dans l’événement Onload pour le formulaire, configurez le gestionnaire d’événements pour appeler la fonction SDK.DependentOptionSet.init et transmettre le nom de la ressource Web XML en tant que paramètre. Utilisez le champ de la boîte de dialogue Propriétés du gestionnaire pour entrer "sample_TicketDependentOptionSetConfig.xml" dans le champ Liste séparée par des virgules des paramètres transmis à la fonction.
Dans l’événement OnChange pour le champ Catégorie, définissez Fonction sur SDK.DependentOptionSet.filterDependentField.

Dans la zone de texte Liste séparée par des virgules des paramètres transmis à la fonction, entrez "sample_category", "sample_subcategory".
Dans l’événement OnChange pour le champ Sous-catégorie, définissez Fonction sur SDK.DependentOptionSet.filterDependentField.

Dans la zone de texte Liste séparée par des virgules des paramètres transmis à la fonction, entrez "sample_subcategory ", "sample_type".
Enregistrez et publiez toutes les personnalisations.

Voir aussi

Utiliser le modèle d’objet Xrm.Page
Écrire du code pour les formulaires Microsoft Dynamics CRM 2015
Utiliser JavaScript avec Microsoft Dynamics CRM 2015
Personnaliser les formulaires d’entités
Attribut Xrm.Page.data.entity (référence côté client)
Contrôle Xrm.Page.ui (référence côté client)

Exemple : Créer des OptionSets dépendants (listes déroulantes)

Objectifs de cette solution

Exemple

Activation du filtrage

Voir aussi

Ressources supplémentaires