利用 Dynamics 365 的 navigateTo 弹出遮罩窗口并在关闭时执行代码

拾忆4377

于 2024-07-31 15:09:22 发布

阅读量419

点赞数 7

分类专栏： dynamic 365 文章标签： javascript html dynamics365

本文链接：https://blog.csdn.net/qq_40998698/article/details/140823268

版权

dynamic 365 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

在 Dynamics 365 中，通过弹出遮罩窗口（modal window）来显示重要信息或收集用户输入是一个常见需求。利用 navigateTo 方法，我们可以轻松地创建这种遮罩窗口并在其关闭时执行特定的代码。本文将详细介绍如何实现这一功能。

什么是 navigateTo？

navigateTo 是 Dynamics 365 中用于导航到特定页面或 URL 的方法。它可以打开一个全屏或遮罩窗口，并允许在窗口关闭时执行回调函数。这种功能特别适用于显示详细信息表单、配置页面或其他需要用户交互的内容。

实现步骤

以下是利用 navigateTo 弹出遮罩窗口并在关闭时执行代码的具体步骤：

1. 准备工作

首先，确保您有权访问 Dynamics 365 环境并具备必要的自定义权限。还需要在您的解决方案中创建一个新的 HTML 页面，该页面将在遮罩窗口中显示。

2. 编写 HTML 页面

编写一个简单的 HTML 页面，作为遮罩窗口的内容。这一页面可以包含任何您需要的表单、按钮或信息展示。例如：

<!DOCTYPE html>
<html>
<head>
    <title>Modal Window</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .container { padding: 20px; }
    </style>
</head>
<body>
    <div class="container">
        <h2>这是一个遮罩窗口</h2>
        <p>请填写以下信息：</p>
        <form id="modalForm">
            <label for="name">姓名：</label>
            <input type="text" id="name" name="name"><br><br>
            <label for="email">电子邮件：</label>
            <input type="email" id="email" name="email"><br><br>
            <button type="button" onclick="submitForm()">提交</button>
        </form>
    </div>
    <script>
        function submitForm() {
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            if (name && email) {
                window.parent.postMessage({ name, email }, '*');
                Xrm.Navigation.close();
                window.returnValue = {name: name,email:email };
                window.close();
            } else {
                alert('请填写所有字段');
            }
        }
    </script>
</body>
</html>

3. 使用 navigateTo 打开遮罩窗口

在您的 Dynamics 365 表单或脚本中，使用 navigateTo 方法打开上述 HTML 页面作为遮罩窗口。并且，您可以定义在窗口关闭时执行的回调函数。例如：

function openModalWindow() {
    const pageInput = {
        pageType: "webresource",
        webresourceName: "new_modalwindow.html",  // 请确保使用正确的 web resource 名称
        data:null //传递的数据
    };

    const navigationOptions = {
        target: 2, // 2 表示打开遮罩窗口
        width: 800,
        height: 400,
        position: 1, // 1 表示居中
        title: '自定义标题',
    };

    Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
        function () {
            console.log("窗口已关闭");
            executeOnClose();
        },
        function (error) {
            console.log(error.message);
        }
    );
}

function executeOnClose() {
    console.log("执行关闭窗口时的代码");
    //返回值
    let returnValue = returnValueData.returnValue;
	if (returnValue) {
		// 您可以在此处添加任何需要在关闭窗口时执行的逻辑
    	alert("窗口已关闭，执行回调函数");
	}
    
}