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

巴特西

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

最新文章

热门文章

巴特西

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

最新文章

热门文章

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