Microsoft Dynamics 365 CE 扩展定制 - 2. 客户端扩展

Martin-Mei

已于 2023-11-30 21:06:11 修改

阅读量444

点赞数 3

于 2023-09-23 08:41:13 首次发布

本文链接：https://blog.csdn.net/mwjcxl/article/details/133146902

版权

Microsoft Dynamics 365 CE 扩展专栏收录该内容

9 篇文章 1 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

在本章中，我们将介绍以下方法：

创建您的第一个JavaScript函数
以编程方式连接事件
编写可重复使用的JavaScript函数
使用Web API终结点查询365数据
查询365元数据服务
使用AngularJS构建自定义UI
使用Edge调试JavaScript
使用Chrome调试JavaScript
单元测试您的JavaScript
自定义功能区

介绍

Dynamics365套件最大的优势之一是其基于web的前端。用户不需要在他们的机器上安装胖客户端就可以访问该平台；一个网络浏览器就足以访问它。大多数最终用户认为前端用户体验对他们的日常工作至关重要。Dynamics 365 Sales提供了广泛的可配置扩展，以增强前端用户体验。在上一章中，我们介绍了一些无代码扩展；然而，有时，客户的要求超出了Dynamics365提供的开箱即用功能。这就是JavaScript的用武之地。JavaScript是目前最流行的web前端脚本语言。它在行业中被广泛使用，因此，开发人员可以很容易地开始使用它。

你找到的大多数在线资源和培训材料通常只涵盖了实现扩展的最低限度。很少有人真正指导您如何使用现代行业标准来构建企业级客户端扩展。多年来，我继承了大量Dynamics CRM实现，但客户端扩展编写得很差，这使得它们很难维护和增强。

本章不仅介绍了一些利用JavaScript扩展功能的简单方法，还重点介绍了代码结构技术和调试功能，以帮助您实现可扩展的JavaScript，同时帮助您提高前端开发效率。

创建您的第一个JavaScript函数

在第一个方法中，我们将设置我们的环境，并编写一个简单的JavaScript方法，当填充另一个字段时，使用上一章中创建的自定义毕业详细信息实体，自动生成具有当前日期的日期字段。确保实体有一个带有“主管”和“研究生开始日期”属性的表格，以便在其上应用我们的自定义。即使我们从第一章开始使用实体，自定义也可以应用于您选择的任何查找和日期字段。

准备

除了通常访问Dynamics 365、正确的安全角色（系统自定义程序或更高版本）以及包含自定义的解决方案外，强烈建议开发人员使用成熟的集成开发环境（IDE）来开发JavaScript。您可以选择使用开箱即用的有限Dynamics 365 web资源编辑器；然而，使用诸如Visual Studio（。甚至免费的等效Visual Studio code）在编写代码时大大提高了您的生产力。这包括调试、单元测试以及将代码与源代码管理集成。

Visual Studio和开发人员工具包

Visual Studio是市场上最成熟的IDE之一。它极大地简化了编写JavaScript代码的任务。此外，Dynamics365团队为Visual Studio实现了开发人员工具包附加组件，以帮助开发人员将Dynamics355与Visual Studio集成。该加载项可帮助您从Dynamics365检索自定义项并将其部署到Dynamics355。这种组合的唯一限制是缺乏Visual Studio内部的发布功能。

开发人员仍然需要转到Dynamics365手动发布他们的更改。有关开发人员工具包的详细信息，请参阅第4章“服务器端扩展”中的“使用Dynamics CRM开发人员工具包模板示例创建解决方案”。

XrmToolBox的Web资源管理器

另一个流行的选择是XrmToolBox。XrmToolBox是一个最初由微软MVP Tanguy Touzard发起的项目。它是一个可扩展的基于插件的Windows应用程序，用于管理、配置和自定义Dynamics365。Web资源管理器插件通过一些快捷方式帮助编写、部署和发布Web资源，以加快工作速度。开发人员很快就养成了按Ctrl+S和Ctrl+U保存、推送和发布自定义内容的习惯。此外，Web资源管理器允许将Web资源持久化到磁盘，使开发人员可以选择使用单独的编辑器（如Sublime或Visual Studio）来进行丰富的开发。

如何实施

导航到“设置”|“解决方案”|“组件”。
单击Web Resources并单击New，输入packt_common.js作为名称，从Type中选择JScript，然后单击Text Editor。

复制以下代码：

var packtNs = packtNs || {}; 
packtNs.common = packtNs.common || {}; 
/** * A method that populates the post graduate start date 
* when the supervisor lookup is populated. * @returns {Void} */
packtNs.common.populateWithTodaysDate = function() 
{ if (Xrm.Page.getAttribute("packt_supervisor").getValue() !== null && Xrm.Page.getAttribute("packt_postgraduatestartdate").getValue() === null) 
{ 
Xrm.Page.getAttribute("packt_postgraduatestartdate"). setValue(new Date()); 
} 
}

回到Dynamics365中的Packt解决方案中，导航到实体| GraduationDetails |窗体，然后双击主窗体。
单击“窗体属性”，然后在“窗体”下，单击添加符号（+）。
从列表中选择在步骤2中创建的JavaScript库（您可以使用搜索功能来过滤值）。单击“添加”，然后单击“确定”。
双击Supervisor字段，然后在字段属性对话框中选择事件选项卡。
在“窗体库”下，单击添加符号（+），从列表中选择您的JavaScript库（您可以再次使用搜索功能来筛选值），然后单击添加。
在事件处理程序下，单击添加符号（+），然后输入populateWithTodaysDate。保持其余部分不变，然后单击“确定”。
在表单编辑中，单击“发布”，然后单击“保存并关闭”：

它是如何工作的

在前三个步骤中，我们创建了JavaScript函数。请注意，我们是如何在文件开头引入名称空间的。在创建企业应用程序时，JavaScript命名空间是一种很好的做法。命名空间将确保具有相同函数名的不同库可以共存，并且您的代码调用正确的方法。此外，我们声明命名空间的方式（如下面的代码行所示）确保了如果命名空间已经在另一个文件中声明，则不会覆盖内容：

var packtNs = packtNs || {}

当您将大型JavaScript库重构为文件集合时，这种做法尤为重要。

请注意传统JsDoc注释：/***/。JsDoc是JavaScript的标准文档样式。当您开始键入/**时，Visual Studio会自动生成注释的骨架。在后续，我们将省略注释，使代码更加简洁。

在步骤5和步骤6中，我们将JavaScript库添加到表单中，以确保在加载表单时加载它。

在步骤7到步骤9中，我们手动将函数连接到毕业生开始日期字段的OnChange事件期间的触发器。

在步骤10中，我们保存并发布了更改。发布步骤对于在实例上反映您的更改非常重要。在按下“发布”按钮之前，您的更改将无法使用。

函数本身会查看硬编码字段Supervisor和Post Graduate Start Date的内容，如果Supervisor字段不为空且Post Graduated Start Date字段为空，则会将Post Graduation Start Date的值设置为今天的日期。

在后台，Dynamics365将您的web资源保存在其数据库中，并在加载表单时加载必要的资源，就好像它们是web应用程序内容的一部分一样。然后，当Supervisor字段的值更改时，它会调用populateWithTodaysDate函数。

作为第一个简单的JavaScript函数，它非常简单；但是，在构建企业应用程序时，尽量避免硬编码的值，并考虑通过使函数通用化来最大限度地重用它们。

参阅

以编程方式连接事件
编写可重复使用的JavaScript函数

以编程方式连接事件

在上一个方法中，我们编写了第一个JavaScript函数，并手动连接它。如果您正在走自定义开发的道路，请始终牢记未来的维护任务。与其通过用户界面手动连接事件，不如考虑以编程方式进行连接。这不仅将减少配置扩展的手动步骤，而且还将为您提供一个查看/维护所有事件连接的位置。

准备

为了以编程方式连接您的事件，您需要一个要连接的候选函数（我们将使用上一个方法中的函数）、一个编写代码的IDE，当然，还需要访问具有系统自定义程序或更高安全角色的Dynamics 365实例。

如何实施

导航到“设置”|“解决方案”|“组件”。
单击Web资源并双击packt_common.js。

单击“文本编辑”并将以下代码行添加到库中：

packtNs.graduateForm = packtNs.graduateForm || {}; 
packtNs.graduateForm.loadEvent = function(){ Xrm.Page.getAttribute("packt_supervisor").addOnChange(populateWithTodaysDate); 
}

单击“确定”，然后单击“发布”，然后关闭对话框。
在解决方案中，导航回“实体”|“Graduation Details ”|“窗体”，然后双击“主窗体”。
双击Supervisor字段，然后在字段属性对话框中选择事件选项卡。
选择带有populateWithTodaysDate函数的行，然后单击Remove。
单击“确定”，然后单击窗体设计器顶部的“窗体属性”按钮。
在事件处理程序下，单击添加符号（+）。
确认已在Library（库）下拉列表中选择packt_common.js，然后在函数字段中输入packtNs.graditeForm.loadEvent。
单击“确定”两次，然后在表单设计器中单击“发布”和“保存并关闭”。

它是如何工作的

在步骤3中，我们扩展了JavaScript，将loadEvent函数作为手动连接表单加载事件的唯一方法。该函数以编程方式连接populateWithTodaysDate函数，以便在Supervisor字段的OnChange事件期间触发。

然后，我们在步骤6到步骤8中删除了现有的手动函数调用（如果我们之前已经连接了它），然后在步骤9和步骤10中引入loadEvent函数作为表单的OnLoad事件期间调用的唯一函数。

正如引言中所提到的，这种模式确保所有必要的设置都在一个位置完成，为您提供了一个查看所有有线事件的地方，以防您需要增强/维护扩展。此外，当您要设置大量事件时，这将简化连接。

参阅

编写可重复使用的JavaScript函数

编写可重复使用的JavaScript函数

每当您看到自己多次复制和粘贴代码时，请考虑将代码重构为可重用的函数。在本章的前两个示例中，我们构建了具有硬编码值的单用途函数。我们可以将代码重构为可重用函数的集合。

在这个方法中，我们将通过参数化我们的两个函数，将它们重构为通用函数。

准备

根据前面的方法，您将需要一个IDE，并访问具有系统自定义程序或更高安全角色的Dynamics 365实例。

如何实施

导航到“设置”|“解决方案”|“组件”。
单击Web资源并双击packt_common.js。

单击“文本编辑”并将populateWithTodaysDate代码更改为以下内容：

packtNs.common.populateWithTodaysDate = function(attributeToMonitor, dateAttributeToChange) { 
if (Xrm.Page.getAttribute(attributeToMonitor).getValue() !== null && Xrm.Page.getAttribute(dateAttributeToChange).getValue() === null) { Xrm.Page.getAttribute(dateAttributeToChange).setValue(new Date()); 
} 
}

添加以下功能：


packtNs.common.wireOnChangeEvents = function(eventAttributeTuples){
     for (var i in eventAttributeTuples) { 
        Xrm.Page.getAttribute(eventAttributeTuples[i].attribute) .addOnChange(eventAttributeTuples[i].function); 
    } 
}

用以下代码替换loadEvent函数

packtNs.graduateForm.loadEvent = function(){ 
    packtNs.common.wireOnChangeEvents([ 
        {attribute: "packt_supervisor", 
        function: packtNs.common.populateWithTodaysDate("packt_supervisor", "packt_postgraduatestartdate") 
        } 
    ]); 
}

单击“确定”，然后单击“发布”，然后关闭对话框。

它是如何工作的

在这个方法中，我们将现有的函数重构为更通用、更可重用的函数。

在步骤3中，我们删除了populateWithTodaysDate函数的硬编码属性名称，并将其替换为该函数的参数。

在步骤4中，我们创建了一个新函数，将参数化属性写入onChange事件并执行参数化函数。请注意函数是如何期望一个元素数组并在其中循环的。该函数还利用数组中每个对象的点表示法来检索属性名称和执行OnChange的函数。

在步骤5中，我们用对步骤4中新创建的函数的调用替换了loadEvent事件，并向它传递了一个JSON（JavaScript Object Notation）对象，该对象实际上构成了函数和要连接的每个元素的属性。

在步骤6中，我们保存并发布了更改。

结果是一组通用函数，丰富了您的公共库。只需插入需要监控和更改的属性的名称，就可以在多个解决方案中重用它们。

使用Web API终结点查询365数据

随着Dynamics平台多年来的发展，引入了新功能，以保持平台的现代化和最新。在旧版本中，以编程方式与DynamicsCRM通信的唯一方式是通过SOAP web服务。在后来的几年里，Microsoft Dynamics产品团队引入了OData端点，极大地简化和现代化了通信机制。

在这个方法中，我们将检索与联系人关联的活动列表，然后在任何活动打开并分配给当前登录用户时显示警告消息。

准备

若要执行自定义，您需要访问Dynamics 365模块以及系统自定义程序或更高角色。还建议您选择IDE或JavaScript编辑器。要测试OData查询，请考虑使用Microsoft MVP Jason Lattimer编写的CRM REST Builder解决方案。另外，考虑一个REST查询工具来快速测试您的查询。Chrome的REST控制台插件是一个不错的插件。

此外，用户将需要对被查询的相关实体进行适当的访问。

如何实施

导航到“设置”|“解决方案”|“组件”。
单击Web Resources并单击New，在名称旁边输入contact.js，从Type中选择Script（JScript），然后单击Text Editor。

复制并插入以下代码，然后单击“确定”：

var packtNs = packtNs || {};
packtNs.contact = packtNs.contact || {}; 
packtNs.contact.checkActiveTasksAssignedToMe = function() {
    var uniqueNotificationId = "OutstandingTasks"; 
    Xrm.Page.ui.clearFormNotification(uniqueNotificationId); 
    var contactId = Xrm.Page.data.entity.getId().replace(/[{}]/g,""); 
    var currentUserId = Xrm.Page.context.getUserId().replace(/[{}]/g,""); 
    var req = new XMLHttpRequest(); 
    var requestUrl = Xrm.Page.context.getClientUrl() + "/api/data/v9.2/tasks?$filter=_regardingobjectid_value eq " + contactId + " and _ownerid_value eq " + currentUserId + " and statecode eq 0"; 
    req.open("GET", requestUrl, true); 
    req.setRequestHeader("OData-MaxVersion", "4.0"); 
    req.setRequestHeader("OData-Version", "4.0"); 
    req.setRequestHeader("Accept", "application/json"); 
    req.setRequestHeader("Prefer", "odata.include- annotations=\"OData.Community.Display.V1.FormattedValue\""); 
    req.onreadystatechange = function () { 
        if (this.readyState === 4) { 
            req.onreadystatechange = null; 
            if (this.status === 200) { 
                var results = JSON.parse(this.response); 
                if(results.value.length > 0){ 
                    Xrm.Page.ui.setFormNotification("You have outstanding tasks assigned to you.", "WARNING", uniqueNotificationId) } 
                }else { 
                    //.. handle error 
                } 
        } 
        
    };
        req.send(); 
}

上面的代码可能会导致500错误，最新的D365 CRM可以使用Xrm.WebApi发出请求

var packtNs = packtNs || {};
packtNs.contact = packtNs.contact || {};
packtNs.contact.checkActiveTasksAssignedToMe = function () {
    var uniqueNotificationId = "OutstandingTasks";
    Xrm.Page.ui.clearFormNotification(uniqueNotificationId);
    var contactId = Xrm.Page.data.entity.getId().replace(/[{}]/g, "");
    var currentUserId = Xrm.Page.context.getUserId().replace(/[{}]/g, "");
    //var requestUrl = Xrm.Page.context.getClientUrl() + "/api/data/v9.2/tasks";
	Xrm.WebApi.retrieveMultipleRecords("task", "?$filter=_regardingobjectid_value eq '" + contactId + "' and _ownerid_value eq '" + currentUserId + "' and statecode eq 0").then(
		function success(results) {
			console.log(results);
			for (var i = 0; i < results.entities.length; i++) {
				var result = results.entities[i];
				// Columns
				var activityid = result["activityid"]; // Guid
			}
		},
		function (error) {
			console.log(error.message);
		}
	);
}

单击“保存”，然后关闭窗口。
回到您的Packt解决方案，导航到实体|联系人|窗体，然后双击主窗体。
单击“窗体属性”，然后在“窗体库”下单击添加符号（+）。
从列表中选择您的JavaScript库packt_contact.js（您可以使用搜索功能来过滤值）。单击“添加”，然后单击“确定”。
在“事件处理程序”下，确认“控件”设置为“窗体”，“事件”设置为OnLoad，然后单击+。
确保在库下拉列表中选择了packt_contact.js，然后在函数字段中输入packtNs.contact.checkActiveTasksAssignedToMe。
单击“保存并关闭”，然后在解决方案窗口中单击“发布所有自定义设置”。

它是如何工作的

为了从我们的函数调用Web API，我们首先准备了查询URL，使用XMLHttpRequest构建并执行我们的请求，然后如果结果符合特定的标准，则显示警告。最后几个步骤按照本章的第一个方法描述了手动连接事件。

设置获取URL

在自定义JavaScript扩展的第3步中，我们构造了requestUrl参数，如下所示：

Xrm.Page.context.getClientUrl() + "/api/data/v8.2/tasks?$filter=_regardingobjectid_value eq " + contactId + " and _ownerid_value eq " + currentUserId + " and statecode eq 0";

getClientUrl（）函数返回Dynamics 365实例的基本URL。然后，我们附加/api/data/v8.2，这是Web api端点的地址，如在“设置”|“自定义项”|“开发人员资源”|“实例Web api”下定义的：

当使用内部部署Dynamics 365实例运行查询时，URL构造将有所不同。强烈建议使用自己的方法重构URL构造。

请注意如何提取currentUserId和contactId作为变量，以便更好地理解流并用于调试目的。

URL看起来用于任务活动，并使用$filter关键字仅检索与当前记录相关的记录，该记录由statecode为0(Open）的当前用户所有。

REST请求

此外，在自定义JavaScript扩展的第3步中，我们使用跨浏览器XMLHttpRequest（一种API，帮助在客户端和服务器之间进行通信）来调用Dynamics365 Web API端点。我们使用以下行打开了连接：

req.open("GET", requestUrl, true);

第一个参数是一个“动词”，定义我们正在执行GET请求，以使用构造的URL检索数据。末尾的布尔值确保异步执行请求。

异步调用是在客户端调用Web API端点以确保页面响应的推荐方法。

回调函数在代码后面的onreadystatechange元素中定义。

在设置请求时，我们确保请求OData v4.0，并接受JSON。

以下几行代码确保我们获得屏幕上显示的格式化值：

req.setRequestHeader("Prefer", "odata.include- annotations=\"OData.Community.Display.V1.FormattedValue\"");

最后，我们通过执行send()函数来发送请求。

通知

在函数开始时，我们清除了与预定义的唯一通知相关联的所有通知。最后，我们检查JSON结果是否包含多个值。如果是，我们将使用唯一键和文本消息设置一个警告通知。

连接

在步骤5到步骤9中，我们将扩展连接到联系人实体的OnLoad事件

参阅

使用跨来源资源共享与CRM在线，在第6章，增强您的代码。

查询365元数据服务

在上一个方法中，我们使用Web API来查询Dynamics 365实例中可用的数据。正如我们前面提到的，Web API几乎与SOAP端点不相上下。这包括查询Dynamics 365元数据；检索元数据是构建由Dynamics365配置驱动的自定义前端的关键。

在这个方法中，我们将介绍如何查询与联系人实体相关的元数据，以查看实体详细信息以及属性详细信息。

准备

除了Dynamics 365访问权限外，您还需要对安全角色中“自定义”选项卡下的实体和字段权限进行“读取”访问。

如何实施

使用Chrome，导航到此URL：

[your organization URL]/api/data/v9.2/EntityDefinitions?$filter=SchemaName eq 'Contact'

在另一个选项卡中，导航到以下URL：

[your organization URL]/api/data/v9.2/EntityDefinitions(608861bc-50a4-4c5f-a02c-21fe1943e2cf)?$select=LogicalName&$expand=Attributes($select=LogicalName;$filter=AttributeType eq Microsoft.Dynamics.CRM.AttributeTypeCode'Picklist')

它是如何工作的

Web API提供了一个RESTful服务，可以使用GET HTTP谓词和URL来查询该服务，以选择和过滤内容。在步骤1中，我们查询实体定义并在联系人时过滤红色。JSON结果包含与联系人实体关联的所有元数据。我们可以扩展URLt以包括更多的OData语句，例如$select关键字，以过滤返回的字段数。

第一个查询返回了一个元素列表，其中包括实体的MetadataId。然后，我们将ID输入到第二个查询中，以检索与联系人实体相关的属性。我们限制了返回到LogicalName的元素数量，如$select语句所示。$expand=Attributes语句类似于SQLjoin语句。它包括所有相关的属性。然后，我们进一步细化内容，使其仅包括每个属性的LogicalName，并过滤expand语句，使其只包括Picklist。

参阅

使用Web API终结点查询365数据

使用AngularJS构建自定义UI

Dynamics CRM 2011引入了Web资源。引入HTML和JavaScript web资源的原因之一是为了摆脱需要部署在Dynamics CRM服务器上的ASPX ISV页面。在云环境中无法执行操作。ISV页面被可嵌入表单iFrame中的自定义HTML用户界面（UI）所取代。

作为一名开发人员，您可以选择构建自己的UI库来检索内容并在自定义用户界面上显示，也可以利用行业标准框架，使用经过验证的设计模式来帮助生成干净、可维护的用户界面扩展。在这个食谱中，我们选择AngularJS作为一个流行的框架来构建一个自定义的web资源，以嵌入iFrame中。我们将重点讨论Angular版本1，因为版本2仍然很受欢迎。

此方法的自定义用户界面将利用上一个示例中讨论的元数据查询来构建一个页面，该页面显示与联系人实体相关联的选择列表的逻辑名称。

准备

若要开发自定义UI，您需要对具有系统自定义程序或更高安全性角色的Dynamics 365实例进行常规访问。强烈建议使用IDE或您选择的现代文本编辑器来促进Angular页面的开发。

您还需要从以下位置下载最新的Angular 1，AngularJS — Superheroic JavaScript MVW Framework

在这个方法中，我们将使用Angular 1.5.0。

如何实施

导航到“设置”|“解决方案”|“组件”。
单击Web资源，然后单击新建。
创建一个名为packt_/js/angular.min.js的JScript，并上传您下载的angular.min..js文件AngularJS — Superheroic JavaScript MVW Framework.
创建一个名为packt_/js/packt.app.js的JScript，内容如下：
```
var app = angular.module("packtApp", []);
```

创建一个名为packt_/js/packt.controller.js的JScript，内容如下：

app.controller('packtController', function ($scope, packtCrmService) {
     $scope.dataLoading = true; 
     packtCrmService.loadAttributesFromCurrentEntity().then( function (result) { 
        if (result.status == 200) { 
            $scope.attributes = result.data; 
        }else{
             alert("Error while loading attributes. " + result.status); 
        } }).finally(function () { $scope.dataLoading = false; }); 
    });

创建一个名为packt_/js/packt.services.js的JScript，内容如下：

app.service('packtCrmService', function ($http, $location) {
    this.loadAttributesFromCurrentEntity = function () { 
        var entityGuid = window.location.href.substring(window.location.href.indexOf("=")+1); 
        var attributesUrl = window.location.origin + '/api/data/v9.2/EntityDefinitions(' + entityGuid + ')?$select=LogicalName&$expand=Attributes( $select=LogicalName;$filter=AttributeType eq Microsoft.Dynamics.CRM.AttributeTypeCode\'Picklist\')'; 
        var attributesRequest = { method: 'GET', url: attributesUrl, headers: { 'Prefer': 'odata.include- annotations="OData.Community.Display.V1.FormattedValue"' } }
        var attributesPromise = $http(attributesRequest).then( function (response) {
             return { "status": response.status, "data": response.data.Attributes }; 
            },function (response) { return { "status": response.status, "data": response.statusText}; } );return attributesPromise; 
        } 
    });

创建一个名为packt_/attributes.htm并包含以下内容的HTML资源：

<html> 
    <head>
    <script type="text/javascript" src="js/angular.min.js"></script> 
    <script type="text/javascript" src="js/packt.app.js"></script> 
    <script type="text/javascript" src="js/packt.controller.js"></script> 
    <script type="text/javascript" src="js/packt.service.js"></script> 
    <meta charset="utf-8"> <title>Attributes V1.14</title> </meta> 
</head> 
<body>
    <div ng-app="packtApp" ng-controller="packtController"> 
        <div ng-if="dataLoading">Loading analysis...</div> 
        <ul ng-repeat="attribute in attributes" ng- if="dataLoading === false"> 
            <li>{{ attribute.LogicalName }}</li> 
        </ul> 
    </div> 
</body> 
</html>

在实体|联系人|窗体下，双击主窗体。
单击插入| Web 资源并输入以下详细信息：
Web资源：resource packt_attributes.htm
名称：WebResources_attributes
标签：Attributes
自定义参数（数据）：
<Contact entity MetadataId in this example: 608861bc-

50a4-4c5f-a02c-21fe1943e2cf>
单击“确定”，然后在“主页”选项卡上，单击“保存并关闭”。
回到解决方案中，单击“发布所有自定义设置”。

它是如何工作的

AngularJS应用程序分为五层：一个带有嵌入式指令的HTML用户界面，一个初始化Angular应用程序的应用程序JavaScript文件，一个检索数据的服务层，一个协调数据访问层和用户界面之间通信的控制器，最后是AngularJS库。

在步骤3中，我们首先添加AngularJS库，以确保浏览器的JavaScript引擎理解指令。

在步骤4中，我们定义了应用程序——一个名为packtApp的简单AngularJS应用程序。

在步骤5中，我们构建了具有一个内置功能的控制器。我们将$scope变量注入到控制器中，这将帮助我们从全局范围访问变量。我们还注入了packtCrmService，这是我们将在下一步中定义的服务层。然后将服务层的结果传递给可从HTMLView访问的$scope.attributes变量。控制器还将$scope.loading变量设置为true和false。这将在稍后的HTML绑定中用于显示和隐藏部分，因为请求是异步执行的。

在步骤6中，我们定义了服务层，该服务层调用上一个示例中的元数据查询并返回属性的LogicalName值。考虑到结果是JSON格式的，JavaScript引擎足够灵活，可以将其视为具有每个记录属性的数组。请注意，我们是如何从windows.location.href中检索值的。此属性在步骤9中定义，我们将实体GUID作为参数传递。我们可以使用Dynamics365元数据服务来查询实体的GUID，并使库完全通用，只需最少的设置。但是，为了减少客户端和服务器之间的聊天次数并提高性能，我们将其作为静态参数值传递。至于检索查询字符串值的方法，我们只是使用indexOf和子字符串函数。AngularJS通过启用HTML5模式提供了更好的替代方案。也就是说，为了简化代码，省略了这一点。

在步骤7中，我们构建了HTML文件。注意用于引用JavaScript库的相对路径，因为我们在web资源的名称中引入了一个使用斜杠（/）的层次结构。

使用分层web资源结构有助于使用web浏览器的开发工具调试代码，或使用其他编辑工具（如XrmToolBox的web资源）调试代码

在HTML文件中，我们使用dataLoading值来显示和隐藏异步调用检索数据时的相关部分。返回结果后，将显示列表<ul>。repeat指令循环遍历所有属性，并创建一个列表项<li>，以显示每个属性的LogicalName值。

最后，在步骤9中，我们将HTMLweb资源插入联系人的表单中，并将实体元数据ID（在联系人实体的上一个示例中检索到）作为参数，以避免两次调用元数据服务。如果您在不同的实体上使用该应用程序，则必须使用上一个示例中的技术为您的实体检索正确的GUID。在查询量和提供量之间总是有一个折衷方案。这是性能和设置开销之间的平衡。

参阅

使用Web API终结点查询CRM数据

使用Edge调试JavaScript

调试是开发人员在构建JavaScript扩展时需要掌握的基本技能之一。此示例涵盖了使用Microsoft Edge调试扩展所需的步骤。

准备

为了做好准备，您需要一个调用自定义JavaScript函数的表单。您可以使用本章第一个方法中的毕业详细信息客户端自定义作为示例。确保可以从“销售”模块访问“毕业详细信息”实体。

您可以通过勾选实体配置常规选项卡中的Sales复选框来完成此操作。您还需要Edge浏览器（在Windows 10及以上版本上默认可用）。如果您更喜欢Internet Explorer，这两种浏览器的调试界面非常相似。

如何实施

导航到一个实体，该实体的表单使用Edge的JavaScript（在我们的示例中，Sales | Graduation Details）。
双击列表中的一条记录打开现有记录，或单击+new选项创建新记录。
按键盘上的F12，或通过单击省略号转到Edge菜单。。。，在浏览器窗口的右上角，然后单击F12开发人员工具。
选择“调试器”选项卡，然后在左侧导航中查找您的JavaScript文件。
或者，您可以简单地开始键入JavaScript文件名的第一部分，它将根据您的输入过滤内容。找到文件后，请将其选中。
单击脚本内容左侧与希望调试器中断的行相对应的行号。
执行将触发JavaScript函数调用的操作：
调试器在断点行中断后，您可以高亮显示要检查的表达式，并将鼠标悬停在它们上面以查看它们的值：
按F10进入下一行。
按F5键继续执行脚本。

它是如何工作的

在步骤4中，我们搜索要调试的JavaScript。如果您正在手动查找自定义脚本，它们通常位于一个包含组织URL的文件夹下，然后是一个在花括号之间有数字的子文件夹，如以下屏幕截图所示：

在步骤5中，我们在希望调试器中断的行设置断点。

在步骤7中，我们检查了一个表达式的值。我们也可以通过单击值下的添加观察链接将其添加到观察列表中。对该表达式的任何更改都将在监视列表中突出显示。

控制台是开发人员最好的朋友。它可以通过实时测试代码来最大限度地提高开发速度，而不是每次更改脚本时都要经历更新/保存/推送/发布/刷新的循环。您还可以随时编辑JavaScript以解决问题，并在不刷新页面的情况下重新测试代码。此功能在edge中是实验性的，可能无法按预期工作。

在OnLoad事件期间执行脚本的情况下，请考虑使用Telerik的Fiddler拦截来自Dynamics 365的调用，用更新的版本替换JavaScript，直到您对结果感到满意，然后再返回常规频道。

最后，在步骤8和步骤9中，我们使用键盘快捷键跨过断点行或继续运行脚本。我们也可以使用F11进入函数，并使用Shift+F11退出函数。

参阅

使用Chrome调试JavaScript

使用Chrome调试JavaScript

考虑到Dynamics365是跨浏览器兼容的，开发人员也可以使用Google Chrome调试他们的客户端代码。这个示例将涵盖与上一个类似的场景，只是调试将使用谷歌Chrome进行。

准备

与前面的示例类似，您需要一个调用自定义JavaScript函数的表单。您可以使用本章中的第一个示例作为示例。当然，你还需要一个谷歌Chrome浏览器。

如何实施

导航到一个实体，该实体有一个使用Google Chrome的JavaScript表单，在我们的示例中，Sales | Graduation Details。
双击列表中的记录打开现有记录，或单击+new选项创建新记录。
按键盘上的F12或Ctrl+Shift+I。或者，转到Chrome菜单并导航到“更多工具”|“开发人员工具”。
选择“源”选项卡，然后在左侧导航“源”列表中查找文件，或按键盘上的Ctrl+P。开始键入文件的部分名称（common）以查找JavaScript文件（在我们的示例中，为packt_common.js）。
单击左侧与要中断调试器的行相对应的行号。
执行将触发JavaScript函数调用的操作，调试器将在断点处中断，如以下屏幕截图所示：
调试器在断点行中断后，您可以高亮显示要检查的表达式，并将鼠标悬停在它们上面以查看它们的值。
按F10进入下一行。
按F8继续执行脚本：

它是如何工作的

在步骤4中，我们搜索要调试的JavaScript，在步骤5中。我们将断点设置在希望调试器中断的行上。

在步骤7中，我们检查了一个表达式的值。我们也可以通过右键单击表达式并选择add to Watch将其添加到“监视”列表中。对该表达式的任何更改都将在“监视”列表中高亮显示。我们还可以将其添加到控制台中，以便在其上运行实时查询。

最后，在步骤8和步骤9中，我们使用键盘快捷键跨过断点行或继续运行脚本。我们也可以使用F11进入函数。

参阅

使用Edge调试JavaScript

单元测试JavaScript

如今，自动化单元测试已经成为大多数项目的常态。单元测试不仅可以确保您的代码得到重复和彻底的测试，而且它还提供了一个安全的工具来防止未来可能破坏代码的更改。此外，单元测试通过构建松散耦合的模块来帮助您提高代码结构质量。

在这个方法中，我们将为Dynamics365JavaScript扩展编写一个VisualStudio单元测试。更具体地说，我们将对本章中构建的第一个JavaScript库进行单元测试。我们将检查条件是否正确，以及设置值是否在postgraduatestartdate属性上调用一次。假设单元测试将使用假Xrm从Visual Studio运行。页面库，我们不需要访问Dynamics 365。

准备

与托管不同。NET代码单元测试，JavaScript单元测试需要一些准备才能启动和运行。您的设置有几个部分：您需要一个工具来将JavaScript单元测试与Visual Studio、JavaScript单元测试断言框架、Xrm.Page 库，还有一个在没有浏览器的情况下运行JavaScript的工具。您还需要Visual Studio 。

与Visual Studio集成

有一些选项可以将JavaScript单元测试集成到Visual Studio中。JetBrains和Chutzpah的ReSharper是最受欢迎的。考虑到ReSharper工具的丰富性，以及它与Visual Studio的无缝集成，我们将在本食谱中使用它。ReSharper不是一个免费的工具，但JetBrains确实为其产品提供了30天的试用期。ReSharper的常规版本应该足以进行此练习。

断言框架

市场上有一些JavaScript断言框架。QUnit和Jasmine是与ReSharper和Chutzpah很好结合的热门歌曲之一。在这里，我们将重点关注QUnit。

Faking Xrm.Page

有一些可用的mocking/stubbing框架，sinon.js(Sinon.JS - Standalone test fakes, spies, stubs and mocks for JavaScript. Works with any unit testing framework.)是他们中的一员。

甚至还有特定于Xrm的，例如Fake Xrm Page https://fakexrmpage.codeplex.com/

为了更好地理解我们是如何与单元测试中幕后发生的事情进行交互的，我们将构建自己的伪Xrm.Page库。

Headless browser

headless browser是可选的，但强烈建议您使用，尤其是在您采用连续集成/连续部署路线时。headless browser允许您在没有浏览器的情况下运行JavaScript。最流行的无头JavaScript执行工具之一是PhantomJS(PhantomJS - Scriptable Headless Browser)。PhantomJS基于Safari和Chrome中使用的WebKit引擎。

默认情况下，ReSharper在默认浏览器中执行JavaScript单元测试。要更改此行为，请导航到ReSharper | Options | JavaScript Tests | Run Tests With，并在Path to phantomjs executable选项中添加下载的phantomjs.exe文件的位置：

如何实施

在Visual Studio中新建一个空的ASP.NET Web应用程序，如下所示：
从下载并添加Quit.js QUnit.

在脚本文件夹下，添加本章第一个示例中创建的common.js库：

var packtNs = packtNs || {}; 
packtNs.common = packtNs.common || {}; 
packtNs.common.populateWithTodaysDate = function() { 
    if (Xrm.Page.getAttribute("packt_supervisor").getValue() !== null && Xrm.Page.getAttribute("packt_postgraduatestartdate"). getValue() === null) { 
        Xrm.Page.getAttribute("packt_postgraduatestartdate"). setValue(new Date()); 
    } 
}

在Xrm.Fake.js文件中添加以下代码：

var Xrm = {}; 
Xrm.Page = {} 
var Attribute = function (attributeName) { 
    this.attributeName = attributeName, this.setValueCounter = 0; 
    this.getValue = function () { 
        if (this.attributeName === ("packt_supervisor")) { 
            return "Sample Value"; 
        }
        return null; 
    },this.setValue = function (value) { 
        this.setValueCounter += 1; 
    },this.getCountFunctionCalls = function () { 
        return this.setValueCounter; 
    } }
    var pageAttributes = {} 
    Xrm.Page.getAttribute = function (attributeName) { 
        if (pageAttributes[attributeName]) {
    return pageAttributes[attributeName]; 
}
pageAttributes[attributeName] = new Attribute(attributeName);
 return pageAttributes[attributeName]; 
}

在common.test.js文件中添加以下代码：

/// <reference path="common.js"/> 
/// <reference path="qunit-2.0.1.js" /> 
/// <reference path="FakeXrmPage.js"/> 
test("Xrm test populateWithTodaysDate", function () { 
    // Act 
    packtNs.common.populateWithTodaysDate(); 
    //Assert 
    equal(Xrm.Page.getAttribute("packt_postgraduatestartdate"). getCountSetValueCalls(), 1, "PostGraduate attribute setValue called exactly once"); 
});

单击测试方法旁边的ReSharper图标运行测试，然后选择Run：

它是如何工作的

在步骤1到步骤3中，我们设置了空白的ASP.NET解决方案。我们添加了JavaScript单元测试断言框架（QUnit.js）和我们正在进行单元测试的JavaScriptWebResource。请注意，如果您的web资源已经有了VisualStudio解决方案，则可以重用它；无需重新创建专门用于单元测试的新解决方案。

在步骤4中，我们创建了伪库。我们首先创建了Xrm和Xrm.Page名称空间，然后为每个getAttribute、setValue和getValue定义了存根。

getAttribute函数创建一个自定义对象，该对象具有setValue；getValue，一个新方法，getCountSetValueCalls；以及一些属性。请注意getAttribute如何将新创建的对象存储在数组中，以确保我们不会在每次调用具有相同属性名称的getAttribute函数时重新创建它。

getValue函数根据属性名称伪造结果，以模拟Dynamics365在特定场景中的实际操作。

setValue函数实际上用作mock，而不是stub。它所做的只是增加方法被调用的次数。

最后，getCountSetValueCalls函数是一个辅助函数，它返回调用setValue的次数。

在步骤5中，我们首先使用///<reference-path=“…”/>表示法引用单元测试所需的所有JavaScript。这样可以确保调用正确的伪库，并在为不同场景创建多个单元测试的情况下正确安排单元测试。

每个测试都从帮助ReSharper识别单元测试的功能测试开始。我们为我们的单元测试命名为Xrm测试populateWithTodaysDate，并向它传递一个回调函数，以便在populatewithTodaysDame测试下执行我们的函数。然后，我们断言setValue函数只被调用一次，并显示一个描述预期结果的文本，PostGraduate属性setValue只被调用了一次。

一旦在步骤6中执行，最终结果将如下所示：

参阅

单元测试你的插件业务逻辑示例第6章，增强你的代码
单元测试你的插件与内存中的上下文示例第6章，增强你的代码
使用Angular构建自定义UI

自定义功能区

减少执行操作的点击次数始终是任何客户的首要任务。实现此功能的一种方法是将按钮添加到Dynamics365功能区。在这里，我们将保持扩展的简单性，并添加一个标记为Packt的按钮来打开一个新的浏览器窗口，导航到Packt网站。

准备

为了自定义Dynamics365功能区，您可以手动编辑XML，也可以使用功能区编辑工具。微软MVP Scott Durow在实现Ribbon Workbench方面做得非常好，以至于我很少使用其他任何东西来编辑Dynamics 365 Ribbon。为了获得Ribbon Workbench，您可以将其作为Microsoft MVP Tanguy Touzard的XrmToolBox的一部分获得，也可以从Develop 1 Ltd | Ribbon Workbench for Dynamics 365 & Dynamics CRM.编辑功能区XML需要系统自定义程序或更高级别的角色。