如何使用 jQuery 在 Dynamics CRM 中操作 DOM答案

【问题标题】：How to manipulate DOM in Dynamics CRM using jQuery如何使用 jQuery 在 Dynamics CRM 中操作 DOM
【发布时间】：2016-11-14 13:00:41
【问题描述】：

尝试通过使用 jQuery 的 append 方法更新字段值来操作 DOM。

发现DOM manipulation is not allowed in Dynamics CRM using normal javascript or jQuery

因此尝试在其源选项卡中添加带有脚本的 HTML Web 资源：

该函数已添加到项目表单中，并配置为在OnLoad 事件中调用。但是，它会在表单加载之前被调用。

该函数在console中执行时效果很好，但是当被系统调用时，它就不起作用了。

  setTimeout(ShowProjectAge, 3000);

  function ShowProjectAge() {

    var createdOn = Xrm.Page.getAttribute("createdon");
    var createdOnDt = new Date(createdOn.$2_2.$2T_2);
    var today = new Date();
    var DiffDays = GetDiffDays(createdOnDt, today);

    //var projectAge = $('#processDuration').html();
    //$('#HeaderTilesWrapperLayoutElement').html(projectAge);
    //$('#HeaderTilesWrapperLayoutElement').css('color','black');

    console.log('The Project Age is ' + DiffDays);
    var div = $('#HeaderTilesWrapperLayoutElement');
    div.text('The Project Age is ' + DiffDays + ' days');
    div.css('color', 'black');
    div.css('font-weight', 'bold');
  }

  function GetDiffDays(date1, date2) {
    var timeDiff = Math.abs(date2.getTime() - date1.getTime());
    return Math.round(timeDiff / (1000 * 3600 * 24));
  }

在完全加载的 DOM 上，ShowProjectAge 运行良好。但是，当从系统调用时，它不会被加载。

已经尝试使用document.ready

【问题讨论】：

标签： javascript jquery dom xrm dynamics-crm-365

【解决方案1】：

首先，切勿在 CRM 中进行任何 DOM 操作。这不值得努力。永远。

其次，这可以用零代码开箱即用：

创建自定义计算字段
使用这个公式：DiffInDays(createdon, Now())
将该字段放在表单上您想要的任何位置

第三，这是完全错误的：

var createdOn = Xrm.Page.getAttribute("createdon");
var createdOnDt = new Date(createdOn.$2_2.$2T_2);

你可以这样得到日期：

var createdOnDt = Xrm.Page.getAttribute("createdon").getValue();

【讨论】：

我接受我的方法是错误的。因为，@aniljain 的帖子更贴切地回答了我的问题，我接受它作为答案。许多 +1 来纠正我 :)
遵循 CRM 中的最佳实践非常重要。您不能将其视为自定义 Web 应用程序并期望一切都能正常工作。每当您觉得需要在 CRM 中执行 DOM 操作时，请停下来，因为您可能采用了完全错误的方法。如果找不到正确的方法，请发布更一般的问题

【解决方案2】：

根据我对 Dynamics CRM DOM 的理解，所有 javascript 都在一个单独的空 iframe 中。

表单元素位于另一个空 iframe 中。

请注意，它们都在同一个窗口中，因此更改以下行：

var div = $('#HeaderTilesWrapperLayoutElement');

到这里：

var div = $('#HeaderTilesWrapperLayoutElement', window.parent.document);

【讨论】：

【解决方案3】：

你有两个选择，首先你可以打开“遗留表单渲染”turn on legacy rendering，或者你必须重构你的代码并使用支持的方法link to documentation

但我在想，你不能在使用 Xrm.Page 的 css 中进行更改

【讨论】：