Dynamics 365 Client Programming example: two linked fields option set

I am a Microsoft Dynamics 365 & Power Platform aspects engineer Rayong, Microsoft Most Valuable Professional is the July 2015 to June 2018 for three consecutive years Dynamics CRM / Business Solutions aspects (Microsoft MVP), I welcome the attention of the public micro-channel number MSFTDynamics365erLuoYong, reply or 20,191,117 378 may facilitate access to this article, but you can get the latest information I Bowen issued in the first room, follow me!

For people just beginning to learn programming using JavaScript to do the client can refer to the official document: Walkthrough: the Write your First Client Script , Dynamics 365 which provides a client API can refer to the Client API Reference for Model-Driven Apps , I myself do here an example of the two options set field (provinces and cities) linkage effect. Of course, recommended for many optional items, easy to change with lookup field (Lookup) instead.

According to recommended set of options is recommended to use the global options field set, so I'll create a global set of options (Global Optionset, select the set of options to address [] scheme on the right after the node [New] button to create the global option is set), the following example, I've deliberately encoded with a new number that is encoded as a demonstration behind a specially prepared (the same cities and provinces top two coded coding first two, said the city belongs to the province). I am here to build three, Hunan code is 430000, Hubei code is 420000, Guangdong coding is 440000.

Then I create a global set of options - city, and entered into a number of cities, such as Changsha (430100), Zhuzhou City (430200), Guangzhou (440100), Shenzhen (440300), Wuhan (420,100) and so on.

I then create a new set of options in the field two entities, namely the use of these two options set, and place it on the form and publish the changes.

默认情况下，这两个字段可以选择任何值，比如我可以选择广东省，长沙市，这个是不合理的，需要让其只能选择省下面的城市。

首先我将城市字段在表单(Form)界面上设置默认为只读(不可编辑)，我让其等待选择了省份字段后再解锁可以编辑，如下：

然后我撰写如下代码，每个代码行为了初学者我都做了注释。

//定义命名空间，我一般用项目统一前缀加上实体去掉前缀后的架构名称(每个单词首字母大写)
var LuoYongWorkOrder = window.LuoYongWorkOrder || {};
(function () {
    //表单上省份字段的OnChange事件处理函数，记得第一个参数用来接受传递过来的executionContext
    this.ProvinceOnChange = function (executionContext) {
        var formContext = executionContext.getFormContext();
        //获取省份字段改变后的新值
        var provinceValue = formContext.getAttribute("ly_province").getValue();
        //将城市字段的值设置为空值
        formContext.getAttribute("ly_city").setValue(null);
        //将城市字段设置为可以更改，表单上已经设置该字段为只读
        formContext.getControl("ly_city").setDisabled(false);
        //获取城市字段的所有可用选项信息
        var cityValidOptions = formContext.getAttribute("ly_city").getOptions();
        //获取城市字段的现在可选的选项信息(用formContext.getControl(arg).removeOption(value)移除的选项不会包括在本结果中)
        var cityCurrentOptions = formContext.getControl("ly_city").getOptions();
        //城市是否展示给用户可以选择
        var cityIsExist = false;
        cityValidOptions.forEach(        
            element => {
                cityIsExist = false;
                cityCurrentOptions.forEach(ele => {
                    if (element.value == ele.value) {
                        cityIsExist = true;//城市展示给用户可以选择
                    }
                });
                //如果这个城市需要显示在可选列表中
                if (element.value >= provinceValue && element.value < provinceValue + 10000) {
                    if (!cityIsExist) {//如果没有显示需要将其添加进来显示
                        formContext.getControl("ly_city").addOption({"value":element.value,"text":element.text});
                    }
                }
                else {//这个城市不需要显示在可选列表中
                    if (cityIsExist) {//如果已经显示，需要将其移除
                        formContext.getControl("ly_city").removeOption(element.value);
                    }
                }
                console.log(element);
            }
        );
    }
}).call(LuoYongWorkOrder);

我再在解决方案中新建一个Web 资源，名称需要在整个组织的Web资源名称中唯一，我一般定义一个命名规范，一般是 /{实体去掉前缀后的逻辑名称}/js/{实体去掉前缀后的逻辑名称}{form|ribbon}.js，方便知道这个是给哪个实体用的，是用于表单编程的，还是命令栏的，用 / 符号来构建相对路径。显示名称我一般和我建立的实际文件名称保持一致。类型选择脚本(JScript) ,语言可以选可以不选，然后点击选择文件(Choose File)按钮选择自己的JavaScript文件，保存后发布。

再打开工单实体窗体类型为【主要】的窗体，点击Ribbon区的【窗体属性】按钮。

点击【添加】按钮。

选择前面步骤创建的Web资源后点击【确定】按钮关闭，我这里不涉及到在窗体的【OnLoad】或者【OnSave】事件执行我撰写的代码。

然后需要为表单上的省份字段关联字段值变更后执行的代码，双击表单上的【省份】字段(或者选择【省份】字段后点击Ribbon区的【更改属性】按钮)，在打开的【字段属性】窗口中，切换到【事件】这个Tab，默认事件是OnChange，刚好是我需要的，所以不需要更改，直接点击【添加】按钮。

设置如下，库选择我们前面步骤上传的Web资源，函数我这里输入LuoYongWorkOrder.ProvinceOnChange，记得【将执行上下文作为第一个参数传递】这个选项勾选，然后点击【确定】按钮关闭，保存并发布，刷新工单实体的表单页面(F5或者使用强制刷新Ctrl+F5) 就可以测试了。

我测试了一下，实现了选项集的联动。

Dynamics 365 Client Programming example: two linked fields option set

Guess you like