Esempio: creare set di opzioni dipendenti (elenchi a discesa)

Data di pubblicazione: novembre 2016

Si applica a: Dynamics CRM 2015

È requisito comune che i valori in un campo del set di opzioni devono essere filtrati in base a un valore scelto in un altro campo del set di opzioni. In questo argomento viene descritto un metodo per ottenere questo requisito con una risorsa Web XML, gli eventi di modulo e una libreria JScript riutilizzabile.

Per osservare e verificare la funzionalità di questo esempio è possibile installare la soluzione gestita DependentOptionSetsSample_1_0_0_2_managed.zip dal percorso seguente nel download dell'SDK: SDK\SampleCode\JS\FormScripts

Scarica il pacchetto SDK di Microsoft Dynamics CRM.

Obiettivi della soluzione

Questa soluzione è progettata per soddisfare i requisiti seguenti:

• Contiene una libreria generica e riutilizzabile JScript che può essere usata per qualsiasi coppia di campi di set di opzioni.

• Consente una catena di campi dipendenti del set di opzioni. Poiché le opzioni di ogni campo del set di opzioni dipendente sono filtrate in base al valore di un altro campo, è possibile filtrare ulteriori opzioni dei campi del set di opzioni in base all'opzione scelta nel primo campo dipendente del set di opzioni. Questo consente la possibilità di un set di campi gerarchicamente dipendenti del set di opzioni.

• Il filtro delle opzioni dipendenti è impostato in una risorsa Web XML. Questo consente di modificare i mapping dell'opzione senza modificare il codice. La modifica di una risorsa Web XML è più semplice per uno sviluppatore per configurare le opzioni con meno probabilità di interrompere il codice.

• La soluzione supporta più lingue. Il filtro viene solamente basato sul valore dei dati delle opzioni anziché sul testo delle opzioni.

• Il filtro funziona per qualsiasi numero di istanze di un controllo di attributo nel modulo.

Esempio

In questa sezione sono descritte un'applicazione di questo approccio e la procedura per applicare la libreria di esempio.

Il modulo di entità Ticket (sample_ticket) ha tre campi del set di opzioni e opzioni che consentono la categorizzazione dei prodotti. Nella tabella seguente indica il filtro desiderato delle opzioni del set di opzioni.

Abilitare il filtro

1. Convertire il filtro di opzioni desiderato nel seguente documento XML e caricarlo come risorsa Web XML denominata sample_TicketDependentOptionSetConfig.xml. I valori delle etichette sono inclusi per rendere il documento più semplice da modificare ma non possono essere utilizzati nello script che filtra le opzioni.

   
   <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. Creare una risorsa Web JScript denominata sample_SDK.DependentOptionSetSample.js tramite codice seguente.

   
   
   //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. Aggiungi la risorsa Web script sample_SDK.DependentOptionSetSample.js alle librerie JScript disponibili per il modulo.

4. Nell'evento Onload per il modulo, configurare il gestore eventi per chiamare la funzione SDK.DependentOptionSet.init e passare il nome della risorsa Web XML come parametro. Utilizzare il campo nella finestra di dialogo Proprietà gestore per immettere: "sample_TicketDependentOptionSetConfig.xml" nel campo Elenco parametri delimitati da virgole da passare alla funzione.

5. Nell'evento OnChange per il campo Categoria, impostare Funzione su SDK.DependentOptionSet.filterDependentField.

   Nella casella di testo Elenco delimitato da virgole di parametri da passare alla funzione immettere: "sample_category", "sample_subcategory".

6. Nell'evento OnChange per il campo Sottocategoria, impostare Funzione su SDK.DependentOptionSet.filterDependentField.

   Nella casella di testo Elenco delimitato da virgole di parametri da passare alla funzione immettere: "sample_subcategory ", "sample_type".

7. Salvare e pubblicare tutte le personalizzazioni.

Vedere anche

Utilizzare il modello a oggetti Xrm.Page
Creare il codice per moduli di Microsoft Dynamics CRM 2015
Usare JavaScript con Microsoft Dynamics CRM 2015
Personalizzare moduli di entità
Attributo Xrm.Page.data.entity (riferimento lato client)
Controllo Xrm.Page.ui (riferimento lato client)

© 2017 Microsoft. Tutti i diritti sono riservati. Copyright