Dynamics CRM - 前端调用CRM Web Api创建Web资源在表单中嵌入自定义页面

最新推荐文章于 2022-11-09 18:58:27 发布

猴麦麦

最新推荐文章于 2022-11-09 18:58:27 发布

阅读量1.5k

点赞数

分类专栏： JavaScript/JQuery Dynamics CRM 文章标签： javascript jquery html ajax bootstrap

本文链接：https://blog.csdn.net/houoy/article/details/109671331

版权

Dynamics CRM 同时被 2 个专栏收录

19 篇文章 7 订阅

订阅专栏

JavaScript/JQuery

9 篇文章 1 订阅

订阅专栏

Dynamics CRM - 前端调用CRM Web API创建Web资源在表单中嵌入自定义页面

在Dynamics 365中我们如何嵌入自己定义的HTML页面呢？
通过调用CRM Web API对实体进行查询，显示到HTML中，再将网页引入Web资源，将Web资源嵌入到窗体中。

调用CRM Web API创建Web资源

- Dynamics CRM - 前端调用CRM Web API创建Web资源在表单中嵌入自定义页面
- - 先来看一下最终的效果

先来看一下最终的效果

在这里插入图片描述

1、首先我们先来写一个HTML网页

我引入了bootstrap样式，大家可以忽略哈

我定义了一个js方法可以点击跳转当前记录的窗体Trclick()，大家省略也可以哈

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>等级关系</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="JSgrade_relation"></script>
    <script>
        test();
    </script>
</head>
<body style="overflow-wrap: break-word;">
    <style>
        *{
            padding:0px;
            margin:0px;
        }
    </style>
    <div>
        <table class="table table-hover">
            <thead>
                <tr class="table-primary" style="margin-left:50px">
                    <th scope="col" style="display:none">编号</th>
                    <th scope="col">原等级</th>
                    <th scope="col">操作</th>
                    <th scope="col">现等级</th>
                    <th scope="col">创建时间</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <!--点击实例跳转等级关系窗体-->
    <script>
        function Trclick(wath) {
            //获取ID
            var uid = $(wath).children().eq(0).text();
            //打开新的或现有的实体记录的实体窗体
            window.parent.Xrm.Utility.openEntityForm("hy_grade_relation", uid);
        }
    </script>
</body>
</html>

2、调用CRM Web API进行数据查询

2.1、点击自定义图标进行配置

点击图标进行配置。我们发现，可以进行增删改查以及调用自定义action的一些操作可供配置，

2.2、生成方式XMLHTTP及JQuery

而且生成方式可以是基于crm sdk(Xrm.WebApi)的方式，也可以是基于http request的两种方式（XMLHTTP及JQuery）。

2.2、配置完成，点击Create Request按钮生成查询语句。

在这里插入图片描述

3、将生成好的AJAX放到我们的JS中封装text()方法进行调用

因为我们在CRM中获取到的是UTC国际标准时间格式，所以我封装了一个方法formatUTC转换为我们的正常时间格式。

function test() {
    var relationid = window.parent.Xrm.Page.data.entity.getId().replace("{", "").replace("}", "");
    $.ajax({
        type: "GET",
        contentType: "application/json; charset=utf-8",
        datatype: "json",
        url: window.parent.Xrm.Page.context.getClientUrl() + "/api/data/v9.0/hy_grade_relations?$select=createdon,hy_grade_relationid,hy_now,hy_operate,hy_past&$filter=_hy_information_id_value eq " + relationid,
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("OData-MaxVersion", "4.0");
            XMLHttpRequest.setRequestHeader("OData-Version", "4.0");
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
            XMLHttpRequest.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");
        },
        async: true,
        success: function (data, textStatus, xhr) {
            var results = data;
            for (var i = 0; i < results.value.length; i++) {
                var createdon = results.value[i]["createdon"];
                var newcreatedon = formatUTC(createdon);
                var hy_grade_relationid = results.value[i]["hy_grade_relationid"];
                var hy_now = results.value[i]["hy_now"];
                var hy_operate = results.value[i]["hy_operate"];
                var hy_operate_formatted = results.value[i]["hy_operate@OData.Community.Display.V1.FormattedValue"];
                var hy_past = results.value[i]["hy_past"];
                var tbtr = "<tr οnclick='Trclick(this)'><td style='display: none'>" + hy_grade_relationid + "</td><td>" + hy_past + "</td><td>" + hy_operate_formatted + "</td><td>" + hy_now + "</td><td>" + newcreatedon + "</td></tr>";
                $("tbody").append(tbtr);
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            window.parent.Xrm.Utility.alertDialog(textStatus + " " + errorThrown);
        }
    });
};

function formatUTC(utc_datetime) {
    // 转为正常的时间格式 年-月-日 时:分:秒
    var T_pos = utc_datetime.indexOf('T');
    var Z_pos = utc_datetime.indexOf('Z');
    var year_month_day = utc_datetime.substr(0, T_pos);
    var hour_minute_second = utc_datetime.substr(T_pos + 1, Z_pos - T_pos - 1);
    var new_datetime = year_month_day + " " + hour_minute_second; // 2017-03-31 08:02:06

    // 处理成为时间戳
    timestamp = new Date(Date.parse(new_datetime));
    timestamp = timestamp.getTime();
    timestamp = timestamp / 1000;

    // 增加8个小时，北京时间比utc时间多八个时区
    var timestamp = timestamp + 8 * 60 * 60;

    // 时间戳转为时间
    var beijing_datetime = new Date(parseInt(timestamp) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
    return beijing_datetime;
}