在CRM中经常需要打开自定义的HTML界面，而且打开这个界面的时候需要模态窗体，阻止用户填写除了弹窗之外的东西，只能先填写窗体的内容；

这个时候很多人喜欢选择第三方的library去实现模态窗体，但是个人不建议使用第三方library的，毕竟，一旦系统升级，很可能功能就失效了，而且样式跟系统不一定匹配；特别是Online版本，一旦更新，功能失效可就麻烦大了！

现在已经可以使用官方支持的做法来实现

使用简短的几行代码即可，以下示例还包括了向窗体传递参数以及如何接收返回参数，觉得有用就点赞吧

var options = primaryControl.getAttribute("new_selectattribute").getOptions();
var params = JSON.stringify({ 'type': 'Reason', 'options': options });
var pageInput = { pageType: "webresource", webresourceName: "new_custom.html", data: params };
var navigationOptions = {
    target: 2, // 窗体实现模式，1表示内联窗体，完全遮挡当前页面. 2表示模态窗体，在当前页面之上弹出窗体
    width: 400, // value specified in pixel
    height: 400, // value specified in pixel
    position: 1, // 窗体位置，1表示中间位置，2表示侧边栏显示
    title: primaryControl.getControl('new_attribute').getLabel() // 获取窗体上的字段标签
};
Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
    function success(result) {
        // Run code on success  
        // 接收返回值
        if (result != null && result.returnValue != null) {
            console.log(result.returnValue));  
        }
    },
    function error() {
        // Handle errors while failed to open web resource
        console.log('error')
    }
);

　　

中间弹窗效果

侧边栏显示效果

自定义WebResource代码示例

<!DOCTYPE html>

<html>

<!--

    文件说明：

    创建人：

    创建时间：

-->

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body onload="onLoad()">

    <select id="selectOptions"></select>

    <button id='btnConfirm' onclick="onClose()"></button>

    <script type="text/javascript">

        // 获取查询参数

        function getUrlParameters() {

            var queryString = location.search.substring(1);

            var params = {};

            var queryStringParts = queryString.split("&");

            for (var i = 0; i < queryStringParts.length; i++) {

                var pieces = queryStringParts[i].split("=");

                params[pieces[0].toLowerCase()] = pieces.length === 1 ? null : decodeURIComponent(pieces[1]);

            }

            return params;

        }

        // 获取DOM

        function getEl(id) {

            return document.getElementById(id);

        }

        // 确认按钮事件

        function onClose() {

            var selectControl = document.getElementById("selectOptions");

            var selectedValue = selectControl.options[selectControl.selectedIndex].value;

            window.returnValue = selectedValue;

            window.close();

        }

        // 页面加载

        function onLoad() {

            console.log('select reason page on load...');
            // 获取传递过来的参数

            var params = getUrlParameters();

            if (params != null) {

                var parameters = JSON.parse(params.data);

                appendOptions(parameters.options);

                // 确认按钮翻译，sys是自己写的库

                sys.getLocalizedMsg('confirm').then(function (res) {

                    getEl('btnConfirm').innerHTML = res;

                });

            }

        }

        // 为下拉框增加选项

        function appendOptions(options) {

            var selectControl = document.getElementById("selectOptions");

            options.forEach(element => {

                var option = document.createElement('option')

                option.value = element.value;

                option.innerHTML = element.text;

                selectControl.appendChild(option);

            });

        }

    </script>

</body>

</html>

　　

关于样式，你可以使用第三方库，如bootstrap去美化下

Dynamics 365 CRM 弹窗 打开自定义页面 Xrm.Navigation.navigateTo Open Web Resource的更多相关文章

  1. Dynamics 365 CRM 开发架构简介

    Dynamics 365 CRM提供了多种编程模型,你可以灵活地按需选用最佳模式. 本文是对Dynamics 365 CRM编程模型的综述. 概览 下图表明了Dynamics 365 CRM的主要可编 ...

  2. Dynamics 365 CRM Free up storage 清理Dynamics 365 CRM的空间

    Dynamics 365 CRM 的空间是要买的. 但是很多情况下用户可以去清理CRM从而达到给空间减重的方法 两大使用DB空间大的功能 1. Audit log 审计记录 审计记录是用来记录各个fi ...

  3. Dynamics 365 CRM 添加自定义按钮

    在添加自定义按钮之前,我们需要下载这个工具 RibbonWorkbench, 它是专门针对自定义命令栏和Ribbon区域. 下载之后是一个zip压缩包. 怎样安装RibbonWorkbench: Se ...

  4. Dynamics 365 CRM large instance copy

    使用CRM 大家想必都做过copy. 从一个instance 复制到另外一个instance. 如果你是Dynamics 365 CRM 用户, 并且你的instance超过500GB,甚至1TB+的 ...

  5. 为Dynamics 365 USD设置打开调试面板的自定义快捷键

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  6. Dynamics 365 CRM 部署 Connected Field Service

    微软 Connected Field Service 是一个提供Azure IoT 和 Dynamics 365 连接的这样一个框架 有两种方式部署CFS, 一种是用IoT Hub PaaS, 一种是 ...

  7. 创建一个dynamics 365 CRM online plugin (九) - Context.Depth

    让我们来看看官方文档是怎么讲的 https://docs.microsoft.com/en-us/previous-versions/dynamicscrm-2016/developers-guide ...

  8. Dynamics 365 CRM On premise Unable to Load plug-in assembly

    背景介绍: 本地部署Microsoft Dynamics CRM 9.0正常可用,后打补丁到9.0.16.7,打开系统quote报 “ Unable to Load plug-in assembly” ...

  9. 创建一个dynamics 365 CRM online plugin (七) - plugin当中的Impersonation角色

    我们之前创建的plugin都是使用default的 run in User's Context. 理解就是使用正在登陆的security context用户信息 那有个问题,如果当前用户的securi ...

  10. Dynamics 365 CRM 在 Connected Field Service 中部署 IoT Central （一）- 配置 IoT Central和IoT alert

    今天这个系列给大家带来怎样在connected field service中部署IoT Central 并且做连接. 首先, 这里提供微软官方的tutorial的链接https://docs.micr ...

随机推荐

  1. xml简单操作

    1.创建简单的XML 1 XmlDocument XmlDoc = new XmlDocument(); 2 //XML声明 3 var xmlDeclaration = XmlDoc.CreateX ...

  2. 设备树编译链接报错arch/arm/boot/dts/imx50.dtsi:16:42: fatal error: dt-bindings/

    1.vim scripts/Makefile.lib, add 3 lines into dtc_cpp_flags dtc_cpp_flags  = -Wp,-MD,$(depfile).pre.t ...

  3. [Python灰帽子-黑客与逆向工程师的Python编程之道]书籍

    [Python灰帽子-黑客与逆向工程师的Python编程之道]PDF高清版免费下载地址 提取码:76aw 内容简介  · · · · · · <Python灰帽子>是由知名安全机构Immu ...

  4. LP1-5:流程与沟通

    口头沟通,整理归档,落到文档或JIRA任务中 JIRA上的需求有对应任务,开发任务对应需求任务号,测试任务号对应开发任务,上线任务对应测试及开发任务. 需求说明 :每个版本有什么功能. 控制需求三要素 ...

  5. FlyMcu烧录提示写入出错在初始化：连接，耗时3437延秒

    取消勾选RamIsp的选项就可以了

  6. apollo兼容mysql的时候报错Table 'apolloportaldb.hibernate_sequence' doesn't exist

    解决方案: 配置文件里加: spring.jpa.properties.hibernate.hbm2ddl.auto=update

  7. C# 变量和表达式

    变量的命名: 第一个字符必须是字母.下划线或@: 其后的字符可以是字母.下划线或数字. 注意:区分大小写. 变量的类型: 数值类型 1.整数类型 byte.short.int.long sbyte.u ...

  8. 初学银河麒麟linux笔记 第九章 QEMU安装arm虚拟机

    arm虚拟机无法用vm进行安装,因此需要安装QEMU虚拟机 参考: WIndows下使用Qemu安装Arm版Kylin系统_h1007886499的博客-CSDN博客_windows qemu arm ...

  9. WPF datagrid双击一整行而不是选中单元格

    WPF开发一个工具 需要双击datagrid的某一行显示详细数据并编辑,之前双击行(DatagridRow)每次都跳转到单元格上(DatagridCell) 经验证,需要修改datagrid样式的某几 ...

  10. 第五章：用Python分析商品退单数据并找出异常商品

    文章目录 项目背景 获取数据 数据计算 统计次数 异常商品 源码地址 本文可以学习到以下内容: 使用 pandas 中的 read_sql 读取 sqlite 中的数据 获取指定的日期的周一和周日 使 ...