在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. sql_server数据库

    问题:如何在SQL SERVER中合并时间和日期? 解决方法1:使用+合并时间日期让我们运行以下命令:SELECT CAST(字段名 AS DATETIME) + CAST(字段名 AS DATETI ...

  2. vscode 设置默认模板

    1.左下方管理按钮 2.用户代码片段 3.搜索html.json 4.{ "Print to vue": {//print to 后面的vue是模板的命名  "prefi ...

  3. fabric学习笔记9

    fabric学习笔记9 20201303张奕博 2023.1.20 Python Web3 与智能合约的交互 开发合约,或者开源合约,都会有一份该合约的ABI JSON文件 ABI文件包括了智能合约的 ...

  4. 【剑指Offer】【栈】栈的压入、弹出序列

    题目:输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压栈序 ...

  5. canvas实现屏幕截图

    1.引入html2canvas.js 2.调用 2.1 <script src="html2canvas.js"></script> 2.2 定义一个div ...

  6. Day12 面向对象

    面向对象 前提须知:Java中想要创建对象,必须要有类的存在 类和对象的关系: 依赖关系:需要根据类,创建对象 数量关系:根据一个类,可以创建出多个对象 创建Student类的对象进行使用 创建对象的 ...

  7. centos安装Jenkins报错

    [SKIPPED] jenkins-2.249.3-1.1.noarch.rpm: Already downloaded warning: /var/cache/dnf/jenkins-0919f06 ...

  8. 设置view的圆角和阴影

    1.设置view圆角 self.backView.clipsToBounds = YES; self.backView.layer.cornerRadius = 6.f; 2.设置view阴影 sel ...

  9. vue.js----之前端路由（二）

    上一篇我们已经把vue框架搭好了,接下来我们进行路由模块 在src目录下新建router.js 添加如下代码 1 /** 2 * Created by sioxa on 2016/10/29 0029 ...

  10. C# 设置桌面为父窗口

    #region 设置桌面为父窗口 IntPtr hDesktop; public const int GW_CHILD = 5; public IntPtr GetDesktopHandle(Desk ...