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

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.

Activation du filtrage

1. 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>
   

2. 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);
     }
    };
   

3. Ajoutez la ressource Web Script sample_SDK.DependentOptionSetSample.js dans les bibliothèques JScript disponibles pour le formulaire.

4. 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.

5. 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".

6. 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".

7. 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)

© 2017 Microsoft. Tous droits réservés. Copyright