Dynamics 365 CRM 弹窗 打开自定义页面 Xrm.Navigation.navigateTo Open Web Resource

在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去美化下

posted on 2022-11-09 11:44  Tencent/Tim  阅读(518)  评论(0)  编辑  收藏  举报

导航