练习 - 使用客户端脚本隐藏窗体部分

9 分钟

在本练习中，您将使用客户端脚本实现一项业务要求：在项目开始日期未提供或是将来的某个日期时隐藏“状态”部分。

重要提示

使用已预配 Microsoft Dataverse 并已启用示例应用的测试环境。如果没有本环境，您可以注册社区计划。

任务 1 - 使用窗体准备解决方案

在本任务中，您将创建解决方案，将现有表添加到该解决方案，并准备已添加到解决方案的表的主窗体。

导航到 Power Apps Maker Portal 并确保您处于已启用示例应用的正确环境中。
选择解决方案，然后选择 + 新建解决方案。
为显示名称输入 Innovation Challenge Enhancements，为发布者选择 CDS default publisher，然后选择创建。
您创建的创新质询增强应打开。
选择 + 添加现有项，然后选择表。
在搜索文本框中输入团队，选择团队项目，然后选择下一步。

注意

如果您找不到团队项目表，则您的环境中可能没有示例应用。选择另一个环境或创建一个安装了示例应用的新环境。
选择编辑对象按钮。
选择窗体选项卡，为信息窗体选择主要窗体类型，然后选择添加。
再次选择添加。
打开您刚刚添加到解决方案的 Team Project 表。
在数据体验卡片中，选择窗体。
打开其窗体类型为主要的信息窗体。
选择状态部分。
在属性窗格中，将名称更改为 section_status。默认情况下，将 GUID 分配为部分名称。将其更改为一个更有意义的名称，以便在脚本中引用。接下来，选中隐藏复选框。默认情况下，这将隐藏该部分，以减少在加载窗体时显示并随后隐藏的不和谐效果。
转到树视图并选择常规选项卡。
在“属性”窗格中，将名称更改为 tab_general。
选择项目开始列。
转到属性窗格，然后选择表列名称旁边的 (i) 按钮。
复制逻辑名称 (sample_projectstart) 并将其粘贴到记事本中。您将在脚本中使用本名称以引用此列。
选择保存并发布以保存所做更改。等待发布完成。
选择后退按钮。
选择全部。
选择发布所有自定义，然后等待发布完成。

任务 2 - 生成客户端脚本

在本任务中，您将创建一个脚本，以基于项目开始日期显示/隐藏状态部分。

如果项目开始日期为空或是将来的某个日期，您将隐藏状态部分。否则，将显示状态部分。

启动 Visual Studio Code 新实例，或使用您最喜欢的代码编辑器。您可以下载并安装 Visual Studio Code。
选择打开文件夹。
在文档文件夹中创建文件夹并将其命名为 ClientScriptLab。
选择您创建的 ClientScriptLab 文件夹，然后选择文件夹。
将鼠标悬停在 CLIENTSCRIPTLAB 文件夹上，然后选择新建文件。
将文件命名为 FormTeamProject.js。

将下面的函数添加到 FormTeamProject.js。您的函数应具有唯一名称或使用命名空间以确保唯一性。

function LearnLab_handleTeamProjectOnLoad(executionContext) {

}
function LearnLab_handleProjectStatusOnChange(executionContext) {

}
function LearnLab_hideOrShowStatusSection(formContext) {

}

将此脚本添加到代码的 OnLoad 函数中。请注意，此处的项目开始列名称为 sample_projectstart。这是您之前保存的逻辑名称。本代码将注册 onChange 事件处理程序，并调用一个常用函数以显示/隐藏部分。如果项目开始日期输入更改隐藏/显示要求，则需要处理更改。
```
var formContext = executionContext.getFormContext();
formContext.getAttribute('sample_projectstart').addOnChange(LearnLab_handleProjectStatusOnChange);
LearnLab_hideOrShowStatusSection(formContext);
```
将此脚本添加到 OnChange 函数。本代码只需获取 formContext，然后调用常用函数即可隐藏/显示部分。
```
var formContext = executionContext.getFormContext();
LearnLab_hideOrShowStatusSection(formContext);
```

将此脚本添加到 hideOrShowStatusSection 函数。请注意，选项卡名称为 tab_general，部分名称为 section_status，列名称为 sample_projectstart。

var tabGeneral = formContext.ui.tabs.get('tab_general');
var sectionStatus = tabGeneral.sections.get('section_status');
var startDate = formContext.getAttribute('sample_projectstart').getValue();
var CurrentDate = new Date();
if (startDate == null || startDate > CurrentDate) {
  sectionStatus.setVisible(false);
} else {
  sectionStatus.setVisible(true);
}

您的脚本现在应如下图所示。
选择文件、保存。

任务 3 - 上传脚本

在本任务中，您要将创建的脚本加载到您的环境中。

导航到 Power Apps Maker Portal 并确保处于正确的环境中。
选择解决方案，然后打开创新质询增强解决方案。
选择 + 新建，然后选择更多 | Web 资源。
为名称输入 FormTeamProject.js，为显示名称输入 FormTeamProject.js，为类型选择 JavaScript (JS)，然后选择选择文件。
选择您之前创建的 FormTeamProject.js 文件，然后选择打开。
选择保存。
您的解决方案现在应具有团队项目表和 FormTeamsProject.js Web 资源。
请勿导航离开此页面。

任务 4 - 编辑窗体

在本任务中，您要将 JavaScript 库添加到“Team Project”主窗体，并为 On Load 事件添加事件处理程序。

确保您仍在使用创新质询增强解决方案。
展开表，然后展开团队项目表。
选择窗体，并打开信息窗体。
转到属性窗格，然后选择事件选项卡。如果已折叠，则展开 OnLoad，然后选择 + 事件处理程序。在配置事件中，选择 + 添加库。
在搜索文本框中输入团队并按 Enter。选择 FormTeamProject.js，然后选择添加。
在函数下输入 LearnLab_handleTeamProjectOnLoad，选中将执行上下文作为第一个参数传递复选框，然后选择完成。
选择保存并发布，等待您的更改完成保存。
保存并发布更改后，选择后退按钮。
选择全部。
选择发布所有自定义，然后等待发布完成。

任务 5 - 测试

在本任务中，您将测试脚本。

导航到 Power Apps Maker Portal 并确保处于正确的环境中。
选择应用，然后打开 Innovation Challenge 应用程序。
选择 Team Projects，然后打开云计算团队项目。
状态部分应该已隐藏，因为 Project start 列为空。
按项目开始旁边的日历图标并选择今天的日期。
状态部分应该变得可见。
将项目开始更改为未来的日期。
现在，状态部分应该已隐藏。
将项目开始更改为过去的日期。
状态部分应该再次变得可见。

对于无法使用声明性选项（例如业务规则）实现的业务要求，您现在已使用 JavaScript 和客户端 API 实现。

反馈

此页面是否有帮助？