在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 onl oad="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 onl oad() { 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去美化下
标签:Xrm,navigateTo,selectControl,自定义,function,params,var,窗体,options From: https://www.cnblogs.com/tcli/p/16873111.html