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

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网页
        • 2、调用CRM Web API进行数据查询
          • 2.1、点击自定义图标进行配置
          • 2.2、生成方式XMLHTTP及JQuery
          • 2.2、配置完成,点击Create Request按钮生成查询语句。
        • 3、将生成好的AJAX放到我们的JS中封装text()方法进行调用
        • 4、将写好的html页面,上传到窗体的web资源中

先来看一下最终的效果

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

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

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>等级关系</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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、点击自定义图标进行配置

Dynamics CRM - 前端 调用CRM Web Api创建Web资源在表单中嵌入自定义页面_第2张图片
点击图标进行配置。我们发现,可以进行增删改查以及调用自定义action的一些操作可供配置,

2.2、生成方式XMLHTTP及JQuery

而且生成方式可以是基于crm sdk(Xrm.WebApi)的方式,也可以是基于http request的两种方式(XMLHTTP及JQuery)。
Dynamics CRM - 前端 调用CRM Web Api创建Web资源在表单中嵌入自定义页面_第3张图片

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

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

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]["[email protected]"];
                var hy_past = results.value[i]["hy_past"];
                var tbtr = "" + hy_grade_relationid + "" + hy_past + "" + hy_operate_formatted + "" + hy_now + "" + newcreatedon + "";
                $("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;
}
4、将写好的html页面,上传到窗体的web资源中

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

到此就结束啦,快去练习一下吧!欢迎大佬和小Monkey沟通。
在这里插入图片描述

感谢大佬指正 小Monkey
如果你觉得有用的话,就留个赞吧!蟹蟹

你可能感兴趣的:(Dynamics,CRM,javascript,jquery,html,ajax,bootstrap)