範例：建立相依 OptionSets (挑選清單)

發行項
07/06/2017

發行︰ 2016年11月

適用於： Dynamics CRM 2015

一個選項組欄位的值必須由其他選項組欄位中選取的值篩選，是一般需求。本主題描述使用可重複使用的 JScript 程式庫、表單事件和 XML Web 資源，達成此需求的一個方法。

若要查看和驗證此範例功能，從 SDK 下載檔案的下列位置安裝 DependentOptionSetsSample_1_0_0_2_managed.zip 受管理的解決方案：SDK\SampleCode\JS\FormScripts

下載 Microsoft Dynamics CRM SDK 套件。

此解決方案的目標

此解決方案設計用來符合下列需求：

它提供可用於所有一對選項組欄位使用的一般、可重複使用的 JScript 程式庫。
它允許相依選項組欄位的鏈結。因為每個相依選項組欄位的選項是根據另一個欄位值篩選，其他選項組欄位選項可以依第一個相依選項組欄位選取的選項篩選。這允許一組階層式相依選項組欄位的可能性。
相依選項篩選是在 XML Web 資源中設定。這允許變更選項對應，無需變更程式碼。編輯 Web XML 資源變得更輕鬆，非開發人員可以設定選項，破壞程式碼的機會降低。
解決方案支援多種語言。篩選完全是根據選項的資料值，不是選擇性的所有文字。
篩選適用於表單上任意數目的屬性控制項執行個體。

範例

本節描述此方法的應用程式和套用範例程式庫的程序。

Ticket (sample_ticket) 實體表單具有允許產品分類的三個選項組欄位和選項。下表顯示預期選項組選項篩選。

類別 (sample_category)	子類別 (sample_subcategory)	類型 (sample_type)
值：727000000 標籤：Software	值：727000000 標籤：Personal Productivity	值：727000000 標籤：Word Processor
		值：727000001 標籤：Spreadsheet
		值：727000002 標籤：Internet Browser
		值：727000003 標籤：E-mail
	值：727000001 標籤：Business Applications	值：727000004 標籤：Customer Relationship Management
		值：727000005 標籤：Enterprise Resource Management
		值：727000006 標籤：Human Resource Management
	值：727000002 標籤：Operating Systems	值：727000007 標籤：Windows Vista
		值：727000008 標籤：Windows 7
		值：727000009 標籤：Windows Server 2003
		值：727000010 標籤：Windows Server 2008
值：727000001 標籤：Hardware	值：727000003 標籤：Desktop Computer	值：727000011 標籤：Workstation x1000
		值：727000012 標籤：Workstation x2000
		值：727000013 標籤：Workstation x3000
		值：727000014 標籤：Workstation x4000
	值：727000004 標籤：Laptop Computer	值：727000015 標籤：Laptop 1000 series
		值：727000016 標籤：Laptop 2000 series
		值：727000017 標籤：Laptop 3000 series
		值：727000018 標籤：Laptop 4000 series
	值：727000005 標籤：Monitor	值：727000019 標籤：CRT-XYZ 17 inch
		值：727000020 標籤：LCD-XYZ 17 inch
		值：727000021 標籤：LCD-XYZ 21 inch
		值：727000022 標籤：LCD-XYZ 24 inch
	值：727000006 標籤：Printer	值：727000023 標籤：Series 1000 Printer - Private
		值：727000024 標籤：Series 2000 Color Printer - Private
		值：727000025 標籤：Series 9000 Printer - Shared
		值：727000026 標籤：Series 9000 Color Printer - Shared
	值：727000007 標籤：Telephone	值：727000027 標籤：PSTN Phone
		值：727000028 標籤：IP Phone
		值：727000029 標籤：Mobile Phone

啟用篩選

將預期選項篩選轉換成下列 XML 文件，並上傳為 XML Web 資源，名稱為 sample_TicketDependentOptionSetConfig.xml。標籤值包括是為了讓文件容易編輯，但無法用於篩選選項的指令碼。


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

使用下列程式碼，建立名為 sample_SDK.DependentOptionSetSample.js 的 JScript Web 資源。



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

新增 sample_SDK.DependentOptionSetSample.js 指令碼 Web 資源至表單可用的 JScript 程式庫。
在表單的 Onload 事件，請設定事件處理常式呼叫 SDK.DependentOptionSet.init 函數並傳入 XML Web 資源的名稱做為參數。在 [處理常式屬性] 對話方塊的 [以逗點分隔的參數清單，其會傳送至函數] 欄位中輸入："sample_TicketDependentOptionSetConfig.xml"。
在 [類別] 的 OnChange 事件中，將 [函數] 設為 SDK.DependentOptionSet.filterDependentField。

在 [以逗點分隔的參數清單，其會傳送至函數] 文字方塊中，輸入："sample_category", "sample_subcategory"。
在 [子類別] 的 OnChange 事件中，將 [函數] 設為 SDK.DependentOptionSet.filterDependentField。

在 [以逗點分隔的參數清單，其會傳送至函數] 文字方塊中，輸入："sample_subcategory ", "sample_type"。
儲存並發行所有自訂。

另請參閱

使用 Xrm.Page 物件模型
 撰寫 Microsoft Dynamics CRM 2015 表單的程式碼
 使用 JavaScript 搭配 Microsoft Dynamics CRM 2015
自訂實體表單
 Xrm.Page.data.entity 屬性 (用戶端參考)
Xrm.Page.ui 控制項 (用戶端參考)

共用方式為

範例：建立相依 OptionSets (挑選清單)

此解決方案的目標

範例

啟用篩選

另請參閱

其他資源