在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. uniapp 提示 打包时未添加 push模块

    最近打包上架的  ios项目  启动项目提示打包时未添加  push模块 在uniapp  manifest中可以配置消息推送,可以我们项目没有用到这个功能,真是日狗了,排除半天仔细检查了使用Push ...

  2. virtualenv指定使用本地某个版本python

    virtualenv -p D:\env\py37_1\Scripts\python3.exe time01 红色的地方是 你本地python解释器的安装路径,后面黄色部分是创建的虚拟环境的名称. 另 ...

  3. eslint规范在项目中的实现——vue项目举例

    先附上参考链接: https://juejin.cn/post/7068573328914513928 https://juejin.cn/post/6857135010882387981 https ...

  4. react项目打包后点击index.html页面出现空白

    当本地打包后的文件,直接通过文件路径访问,出现空白或者,提示打包后的build内的js,css文件路径错误,有以下两种方式 方式一(无网络限制的情况下使用): 1.全局安装serve启动本地服务: n ...

  5. tomcat不生成日志文件

    1.不生成 catalina.out 将 /bin/catalina.sh 文件中的: if [ -z "$CATALINA_OUT" ] ; then CATALINA_OUT= ...

  6. mysql8改密码

    登录后执行语句 ALTER USER 'test'@'localhost' IDENTIFIED WITH MYSQL_NATIVE_PASSWORD BY '新密码'; 修改Host范围 updat ...

  7. 一套.NET Core +WebAPI+Vue前后端分离权限框架

    今天给大家推荐一个基于.Net Core开发的企业级的前后端分离权限框架. 项目简介 这是基于.NetCore开发的.构建的简单.跨平台.前后端分离的框架.此项目代码清晰.层级分明.有着完善的权限功能 ...

  8. 用tkinter编写一个获取图片资源的GUI工具

    目录 效果展示 导入tkinter库 窗口属性 按钮和输入框 文本输入框Text 运行 打包成exe文件 源码地址 本文可以学习到以下内容: 使用tkinter的Entry功能获取本地文件夹 使用tk ...

  9. gradle的配置

    第一次接触公司的JAVA项目,使用了gradle,于是乎到网上搜索一番,终于弄明白了是个什么东东,由于之前也没有接触过maven和ant,所以对这个东西还是很陌生.好了,废话不多说,开始我的环境搭建. ...

  10. 自我介绍&学习心得

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzzcxy/2023learning/join?id=CfDJ8GXQNXLgcs5PrnWvMs4xAGN4cH ...