基本自定义 > 用户界面自定义 > 在 JSP 客户端合并选取器 > 在 AngularJS 中配置参与者选取器
  
在 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
字符串
在自动提示中指定针对用户类型搜索哪个属性。仅当用户是选取器中唯一定义的参与者类型时,该元素才起作用。选项为 nameuserName。默认值为 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
数组
选取器在启动时支持的参与者类型。可用值有:UserGroupOrganizationRole。默认值为 [User, Group, Organization]
window-title
字符串
用于参与者选取器弹出窗口的标题值。如果未提供任何值,则 Find Participants 为默认值。
过程 - 包含“在上下文内搜索”的参与者选取器
您想要将搜索范围缩小到不同的上下文。您需要为参与者选取器标记提供标记元素 contextMapdefaultContext。上下文可以是“组织”、“站点”、“产品”、“项目”和“存储库”。
过程 - 在其他 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>
过程 - 在 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>
这将呈现基本参与者选取器,如下所示。
Windchill 代码中的使用示例
日历应用程序:Windchill\codebase\src_web\apps\calendar\index.jsp
此选取器的示例配置包括在“自定义” > “组件目录”