在 AngularJS 中配置参与者选取器
目标
参与者选取器使您能够使用各种搜索条件来搜索参与者，并选取选定参与者。此自定义旨在将 AngularJS 参与者选取器添加到 AngularJS 页面中。
背景
此基于 AngularJS 的参与者选取器公用组件可用于从展开的参与者 (其中包括用户、组、组织、角色和操作者) 列表中选择内容。该组件可提供用于缩小搜索范围的各种搜索范围条件，还可用于将 LDAP 配置为可选择的选项。
 |
本主题将介绍如何自定义基于 AngularJS 的参与者选取器，以在基于 AngularJS、HTML 或 Javascript 的独立、单页应用程序中对其进行使用。已在 Windchill 11.0 中引入基于 AngularJS 的参与者选取器。PTC 建议将其用于独立的单页应用程序。要自定义要在 JCA 页面中使用的参与者选取器，请参阅基于 JCA 的参与者选取器主题在 JCA 中配置参与者选取器。
|
范围/适用性/假设
要在 Windchill 客户端体系结构表格中使用 AngularJS 参与者选取器应用程序，应定义 Windchill 客户端体系结构操作，并使该操作指向包含参与者选取器标记的 JSP 页面。在所需的 Windchill 客户端体系结构表格中添加创建的 Windchill 客户端体系结构操作。 单击操作时，将启动参与者选取器向导。选择所需的参与者，然后单击“确定”。选取器会将选定参与者传送给其支持的应用程序。
预期结果
选定参与者将填充到元素 (例如表格、文本字段或列表) 中。
解决方案
使用参与者选取器搜索参与者，并将结果填充到您选取的表格、文本字段、列表或其他元素中。
必备知识
要实现此目标，需要了解以下内容：
• 如何添加 Windchill 客户端体系结构操作。
• 如何创作 JavaScript 选取器回调函数。
• 如何在 AngularJS 1.2 中配置独立应用程序页面。有关详细信息，请参阅 AngularJS Developer Guide。
解决方案元素
|
元素
|
类型
|
说明
|
|---|---|---|
|
auto-suggest
|
布尔型
|
将此元素设置为 "true" 可使选取器作为自动提示搜索运行。
|
|
auto-suggest-display-limit
|
整数
|
要返回到自动提示的结果的限制。此值将覆盖从服务器返回的典型值，但是，仅当此值小于针对特性 com.ptc.netmarkets.userSearch.maxCount 设置的最大计数时，才会执行覆盖操作。
|
|
auto-suggest-placeholder
|
字符串
|
要在自动提示输入字段中显示的文本。默认情况下，该值为 Enter participant name。
|
|
auto-suggest-user-search-field
|
字符串
|
在自动提示中指定针对用户类型搜索哪个属性。仅当用户是选取器中唯一定义的参与者类型时，该元素才起作用。选项为 name 或 userName。默认值为 name。
|
|
default-columns-display
|
对象
|
指定哪些列应在结果表格中使用，并且这些列在默认情况下是否处于隐藏状态。隐藏某列后，该列仍可通过结果表格的列切换支持显示。将配置分配给特定参与者类型。
|
|
default-directory-service
|
字符串
|
应为默认选择的服务列表中的目录服务。如果未提供值，则默认值将为特性 wt.federation.org.defaultAdapter 指定的值。如果未在特性中指定任何值，或者值与目录服务列表中的目录服务不匹配，则在存在多个目录服务的情况下，All 为默认选择。
|
|
default-participant-type
|
字符串
|
指定哪些参与者类型应为选定的默认类型。如果存在多个类型，则默认值为 All，这表示将在搜索中使用参与者类型提供的所有类型。
|
|
display-directory-service
|
布尔型
|
确定是否应显示目录服务选择。默认值为 "false"。
|
|
display-field
|
字符串
|
指定在自动提示中进行选择后，应显示选定参与者类型的哪个属性。默认属性为 name。
|
|
directory-services
|
数组
|
要在搜索中使用的目录服务。如果未指定服务，则将使用系统默认值。
|
|
embedded
|
布尔型
|
将此元素设置为 "true" 可将选取器嵌入到 Web 页面中，而不是将其显示为弹窗。
|
|
help-link
|
字符串
|
用于介绍选取器使用情况的帮助主题的值。如果未提供值，则默认值为 LclSrchParticipantPick。
|
|
internal-group-search
|
布尔型
|
设置为 true 以在搜索结果中包括内部组。默认值为 "false"。
|
|
ldap-attributes
|
对象
|
该方法可指定要在结果表格中显示的 LDAP 属性，以及这些属性是否默认处于隐藏状态。将配置分配给特定参与者类型。
|
|
multi-select-mode
|
布尔型
|
确定参与者选取器采用多选形式还是单项形式。默认值为 "true"。
|
|
participant-picker
|
指令
|
启动参与者选取器所需的指令。可用作元素或属性。
|
|
participant-types
|
数组
|
选取器在启动时支持的参与者类型。可用值有：User、Group、Organization、Role。默认值为 [User, Group, Organization]
|
|
window-title
|
字符串
|
用于参与者选取器弹出窗口的标题值。如果未提供任何值，则 Find Participants 为默认值。
|
过程 - 包含“在上下文内搜索”的参与者选取器
您想要将搜索范围缩小到不同的上下文。您需要为参与者选取器标记提供标记元素 contextMap 和 defaultContext。上下文可以是“组织”、“站点”、“产品”、“项目”和“存储库”。
过程 - 在其他 LDAP 中搜索参与者
您想要在其他 LDAP 中搜索参与者。您需要提供标记元素 directory-services。
配置 Windchill 以支持多个 LDAP 服务器。每个 LDAP 服务器均由名称标识。必须以键的形式提供 LDAP 服务器的名称，而以值的形式提供本地化的显示标签。当您提供 directory-services 标记元素并将 display-directory-services 设置为 true 时，您会在参与者选取器中看到下拉列表，其中包含 "Service" 标签。参与者选取器会将选定键作为服务参数发送给 Info*Engine 任务。
过程 - 单选参与者选取器
您一次只希望选择一个参与者。需要提供此标记元素，如下所示：multi-select-mode="false"。这将在结果表格中提供单选按钮列表。
过程 - 限制为单一参与者类型搜索
您想要将搜索的参与者类型数量限制为一个。需要提供此标记元素，如下所示：singleParticipantType="true"。
过程 - 添加自定义 LDAP 属性
您希望在“搜索结果”表格中显示自定义 LDAP 属性。以下是添加此函数的示例代码。
<form id="participantPickerForm">
<input id="participantPickerFindButton" type="submit" value="Find"
participant-picker window-title="'MySimpleTitle'" help-link="'app'"
picker-data="data1" ldap-attributes="{'users':[
{'name':'Phone Number', 'field':'telephoneNumber', 'hidden':false},
{'name':'Address', 'field':'postalAddress', 'hidden':false},
{'name':'Custom CN', 'field':'cn', 'hidden':true},
]}"
default-columns-display="{'users':[
{'name':'Organization', 'hidden': true},
{'name':'status', 'hidden': false}
]}"/>
</form>
<input id="participantPickerFindButton" type="submit" value="Find"
participant-picker window-title="'MySimpleTitle'" help-link="'app'"
picker-data="data1" ldap-attributes="{'users':[
{'name':'Phone Number', 'field':'telephoneNumber', 'hidden':false},
{'name':'Address', 'field':'postalAddress', 'hidden':false},
{'name':'Custom CN', 'field':'cn', 'hidden':true},
]}"
default-columns-display="{'users':[
{'name':'Organization', 'hidden': true},
{'name':'status', 'hidden': false}
]}"/>
</form>
过程 - 在 AngularJS 窗口中嵌入自动提示字段
您希望将参与者选取器作为自动完成字段嵌入到 AngularJS 窗口中，而不是启动参与者选取器应用程序。需要提供此标记元素，如下所示：participant-picker auto-suggest="true"。
示例代码
包含参与者选取器标记的示例 JSP
为操作填写条目以启动参与者选取器后，编写名称与操作标记中操作的名称相同的 JSP (例如，participantPickerSample.jsp)。
<base href="<%=pageContext.getServletContext().getContextPath()%>/">
<jca:enableCorePlatform theme="Windchill" version="2.0" applications="participantPicker"
fullPage="true" />
<link rel="stylesheet"
href="/Windchill/apps/participantPicker/resources/css/participantPicker.css">
<form id="participantPickerForm"> <input id="participantPickerInputField"
disabled="true" type="text" /> <input id="participantPickerFindButton"
type="submit" value="Find" participant-picker
participant-picker-callback="pickerCallback" multi-select-mode="false" /> </form>
<jca:enableCorePlatform theme="Windchill" version="2.0" applications="participantPicker"
fullPage="true" />
<link rel="stylesheet"
href="/Windchill/apps/participantPicker/resources/css/participantPicker.css">
<form id="participantPickerForm"> <input id="participantPickerInputField"
disabled="true" type="text" /> <input id="participantPickerFindButton"
type="submit" value="Find" participant-picker
participant-picker-callback="pickerCallback" multi-select-mode="false" /> </form>
这将呈现基本参与者选取器，如下所示。
Windchill 代码中的使用示例
• 日历应用程序：Windchill\codebase\src_web\apps\calendar\index.jsp
• 此选取器的示例配置包括在 > 中