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

Articolo
07/06/2017

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.

Categorie (sample_category)	Sottocategoria (sample_subcategory)	Tipo (sample_type)
Valore:727000000 Etichetta: Software	Valore:727000000 Etichetta: Produttività personale	Valore:727000000 Etichetta: Elaboratore di testo
		Valore:727000001 Etichetta: Foglio di calcolo
		Valore:727000002 Etichetta: Browser Internet
		Valore:727000003 Etichetta: Posta elettronica
	Valore:727000001 Etichetta: Applicazione aziendale	Valore:727000004 Etichetta: Gestione relazioni con il cliente
		Valore:727000005 Etichetta: Gestione risorse aziendali
		Valore:727000006 Etichetta: Gestione risorse umane
	Valore:727000002 Etichetta: Sistemi operativi	Valore:727000007 Etichetta: Windows Vista
		Valore:727000008 Etichetta: Windows 7
		Valore:727000009 Etichetta: Windows Server 2003
		Valore:727000010 Etichetta: Windows Server 2008
Valore:727000001 Etichetta: Hardware	Valore:727000003 Etichetta: Computer desktop	Valore:727000011 Etichetta: Workstation x1000
		Valore:727000012 Etichetta: Workstation x2000
		Valore:727000013 Etichetta: Workstation x3000
		Valore:727000014 Etichetta: Workstation x4000
	Valore:727000004 Etichetta: Computer laptop	Valore:727000015 Etichetta: Laptop 1000 series
		Valore:727000016 Etichetta: Laptop 2000 series
		Valore:727000017 Etichetta: Laptop 3000 series
		Valore:727000018 Etichetta: Laptop 4000 series
	Valore:727000005 Etichetta: Monitor	Valore:727000019 CRT-XYZ Etichetta: CRT-XYZ 17 pollici
		Valore:727000020 Etichetta: LCD-XYZ 17 pollici
		Valore:727000021 Etichetta: LCD-XYZ 21 pollici
		Valore:727000022 Etichetta: LCD-XYZ 24 pollici
	Valore:727000006 Etichetta: Stampante	Valore:727000023 Etichetta:Stampante Series 1000 - Privata
		Valore:727000024 Etichetta: Stampante a colori Series 2000 - Privata
		Valore:727000025 Etichetta: Stampante Series 9000 - Condivisa
		Valore:727000026 Etichetta: Stampante a colori Series 9000 - Condivisa
	Valore:727000007 Etichetta: Telefono	Valore:727000027 Etichetta: Telefono PSTN
		Valore:727000028 Etichetta: Telefono IP
		Valore:727000029 Etichetta: Cellulare

Abilitare il filtro

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>

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

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

Condividi tramite

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

Obiettivi della soluzione

Esempio

Abilitare il filtro

Vedere anche

Risorse aggiuntive