FeatureForm

FeatureForm 微件显示要素的属性。此微件根据要素的属性以及字段是否允许编辑来渲染输入字段。您可以配置字段分组以帮助显示和组织表单数据。表单上设置的所有属性和字段配置都通过其 template 进行处理。

将此微件与 FeatureLayer.applyEdits 结合使用，使最终用户能够更新指定可编辑要素图层上的要素属性。

在表单的模板元素中通过 FieldElement(s) 或 GroupElement(s) 设置字段配置。

featureForm

已知限制

目前不支持编辑附件或相关的要素属性。不过，可以使用 Editor 微件编辑附件。

另请参阅

示例

const featureForm = new FeatureForm({
  view: view, // Required if using Arcade expressions use global $map variable
  container: "formDiv",
  feature: graphic,
  formTemplate: template
});

构造函数

new FeatureForm(properties)

参数

properties Object

optional

有关可能传递给构造函数的所有属性的列表，请参见属性。

示例

// Typical usage
const featureForm = new FeatureForm({
  container: "formDiv", // HTML div
  feature: graphic, // Pass in feature
  // Specify the form's template for how it is configured
  formTemplate: template
});

属性概述

可以设置、检索或侦听任何属性。请参阅使用属性主题。

显示继承属性

隐藏继承属性

类型	描述	类
String\|HTMLElement	包含微件的 DOM 元素的 ID 或节点。更多详情	Widget
String	类的名称。更多详情	Accessor
Boolean	如果为 `true`，则将微件设置为禁用状态，以便用户无法与其交互。更多详情	FeatureForm
Graphic	包含可编辑属性的关联要素。更多详情	FeatureForm
FormTemplate	用于表单的关联 template。更多详情	FeatureForm
String	定义如何向用户显示组。更多详情	FeatureForm
Number	指示用于表单标题的标题级别。更多详情	FeatureForm
String	创建微件时分配给微件的唯一 ID。更多详情	Widget
String	微件的默认的标注。更多详情	FeatureForm
FeatureLayer	包含可编辑要素属性的图层。更多详情	FeatureForm
MapView\|SceneView	对 MapView 或 SceneView 的引用。更多详情	FeatureForm
FeatureFormViewModel	此微件的视图模型。更多详情	FeatureForm
Boolean	指示微件是否可见。更多详情	Widget

属性详细信息

container String|HTMLElement inherited

包含微件的 DOM 元素的 ID 或节点。此属性只能设置一次。以下示例都是使用微件时的有效用例。

示例

// Create the HTML div element programmatically at runtime and set to the widget's container
const basemapGallery = new BasemapGallery({
  view: view,
  container: document.createElement("div")
});

// Add the widget to the top-right corner of the view
view.ui.add(basemapGallery, {
  position: "top-right"
});

// Specify an already-defined HTML div element in the widget's container

const basemapGallery = new BasemapGallery({
  view: view,
  container: basemapGalleryDiv
});

// Add the widget to the top-right corner of the view
view.ui.add(basemapGallery, {
  position: "top-right"
});

// HTML markup
<body>
  <div id="viewDiv"></div>
  <div id="basemapGalleryDiv"></div>
</body>

// Specify the widget while adding to the view's UI
const basemapGallery = new BasemapGallery({
  view: view
});

// Add the widget to the top-right corner of the view
view.ui.add(basemapGallery, {
  position: "top-right"
});

declaredClass Stringreadonly inherited

类的名称。声明的类名称格式化为 geoscene.folder.className。

disabled Boolean 起始版本：GeoScene Maps SDK for JavaScript 4.25

如果为 true，则将微件设置为禁用状态，以便用户无法与其交互。

默认值：false

feature Graphic

包含可编辑属性的关联要素。访问它的常用方法是通过 MapView 或 SceneView 的 hitTest() 方法。

示例

// Check if a user clicked on an incident feature.
view.on("click", function(event) {
  view.hitTest(event).then(function(response) {
    // Display the attributes of selected incident feature in the form
    if (response.results[0].graphic && response.results[0].graphic.layer.id == "incidentsLayer") {
       formVM.feature = result.results[0].graphic
    }
  });
});

formTemplate FormTemplateautocast 起始版本：GeoScene Maps SDK for JavaScript 4.16

用于表单的关联 template。

在 formTemplate 中，您可以配置表单的显示方式，并设置表单的任何关联属性，例如标题、说明、字段元素等。

示例

// Create the Form template and pass in elements
const formTemplate = new FormTemplate({
  title: "Inspector report",
  description: "Enter all relevant information below",
  elements: [groupElement] // Add all elements to the template
});

// Add a new feature form with grouped fields
const form = new FeatureForm({
  container: "form",
  groupDisplay: "sequential", // only display one group at a time
  formTemplate: formTemplate // set it to template created above
});

groupDisplay String 起始版本：GeoScene Maps SDK for JavaScript 4.10

定义如何向用户显示组。

可能值

值	描述
all	所有组都将展开。
sequential	一次将展开一个组。

可能值："all"|"sequential"

headingLevel Number 起始版本：GeoScene Maps SDK for JavaScript 4.20

指示用于表单标题的标题级别。默认情况下，标题呈现为 2 级标题 (例如，<h2>Form title</h2>)。此外，组元素标注默认为 3 级标题 (例如，<h3>Group element label</h3>)。根据微件在应用程序中的位置，您可能需要调整此标题以获得正确的语义。这对于满足可访问性标准很重要。

默认值：2

另请参阅

标题元素

示例

// form title will render as an <h3>
// group element labels will render as an <h4>
featureForm.headingLevel = 3;

id String inherited

创建微件时分配给微件的唯一 ID。如果不是由开发人员设置的，它将默认为容器 Id，或者如果没有容器 ID，则将自动生成。

label String

微件的默认的标注。

layer FeatureLayer

包含可编辑要素属性的图层。如果未指定此图层，则它与图形图层相同。

示例

const form = new FeatureForm({
  container: "formDiv", // HTML div
  layer: featureLayer // Feature layer
});

view MapView|SceneView 起始版本：GeoScene Maps SDK for JavaScript 4.25

对 MapView 或 SceneView 的引用。

如果在 FeatureForm 中使用了 $map 全局变量的 Arcade 表达式，则需要此属性。

viewModel FeatureFormViewModelautocast

此微件的视图模型。此类包含控制此微件行为的所有逻辑。请参阅 FeatureFormViewModel 类来访问微件上的所有属性和方法。

visible Boolean inherited

指示微件是否可见。

如果为 false，微件将不再呈现在 web 文档中。这可能会影响文档中其他元素或微件的布局。例如，如果此微件是与视图 UI 右上角关联的三个微件中的第一个，则当此微件不可见时，其他微件将重新定位。有关更多信息，请参阅 CSS display 值 "none"。

默认值：true

示例

// Hides the widget in the view
widget.visible = false;

方法概述

显示继承的方法

隐藏继承的方法

返回值类值	描述	类
	添加一个或多个与对象的生命周期相关联的句柄。更多详情	Accessor
String	用于为微件的 `class` 属性构建值的实用方法。更多详情	Widget
	销毁微件实例。更多详情	Widget
Object	返回所有字段值，无论它们是否已更新。更多详情	FeatureForm
Boolean	如果存在指定的句柄组，则返回 true。更多详情	Accessor
Boolean	`isFulfilled()` 可用于验证创建类的实例是否已完成 (已解决或已拒绝)。更多详情	Widget
Boolean	`isRejected()` 可用于验证创建类的实例是否被拒绝。更多详情	Widget
Boolean	`isResolved()` 可用于验证创建类的实例是否已解决。更多详情	Widget
Object	在实例上注册事件处理程序。更多详情	Widget
	添加一个或多个与微件的生命周期相关联的句柄。更多详情	Widget
	此方法主要由开发人员在实现自定义微件时使用。更多详情	Widget
	移除对象拥有的句柄组。更多详情	Accessor
Object	此方法主要由开发人员在实现自定义微件时使用。更多详情	Widget
	立即将微件渲染到 DOM。更多详情	Widget
	此方法主要由开发人员在实现自定义微件时使用。更多详情	Widget
	触发 submit 事件。更多详情	FeatureForm
Promise	一旦创建了类的实例，就可以使用`when()` 。更多详情	Widget

方法详细说明

addHandles(handleOrHandles, groupKey)inherited 起始版本：GeoScene Maps SDK for JavaScript 4.25

添加一个或多个与对象的生命周期相关联的句柄。当对象被销毁时，将移除句柄。

// Manually manage handles
const handle = reactiveUtils.when(
  () => !view.updating,
  () => {
    wkidSelect.disabled = false;
  },
  { once: true }
);

// Handle gets removed when the object is destroyed.
this.addHandles(handle);

参数

handleOrHandles WatchHandle|WatchHandle []

对象销毁后，标记为要移除的句柄。

groupKey *

optional

标识句柄应添加到的组的键。组中的所有句柄稍后都可使用 Accessor.removeHandles() 进行删除。如果未提供键，则句柄将被添加到默认组。

classes(classNames){String}inherited

用于为微件的 class 属性构建值的实用方法。这有助于简化 CSS 类设置。

参数

classNames String|String []|Object

repeatable

类名称。

类型	描述
String	计算的类名。

另请参阅

指南 - 微件开发 (渲染器)

示例

// .tsx syntax showing how to set CSS classes while rendering the widget

render() {
  const dynamicIconClasses = {
    [CSS.myIcon]: this.showIcon,
    [CSS.greyIcon]: !this.showIcon
  };

  return (
    <div class={classes(CSS.root, CSS.mixin, dynamicIconClasses)} />
  );
}

destroy()inherited

销毁微件实例。

getValues(){Object}

返回所有字段值，无论它们是否已更新。

类型	描述
Object	字段名称及其值的键值对的对象。

另请参阅

submit 事件
submit() 方法

示例

function updateFeature() {
  // Get the updated field values
  const attributes = form.getValues();
  // Call applyEdits on the featurelayer
  layer.applyEdits({
    // Pass in the updated field values
    updateFeatures: [{ attributes }]
  });
}

hasHandles(groupKey){Boolean}inherited 起始版本：GeoScene Maps SDK for JavaScript 4.25

如果存在指定的句柄组，则返回 true。

参数

groupKey *

optional

组键。

类型	描述
Boolean	如果存在指定的句柄组，则返回 `true`。

示例

// Remove a named group of handles if they exist.
if (obj.hasHandles("watch-view-updates")) {
  obj.removeHandles("watch-view-updates");
}

isFulfilled(){Boolean}inherited 起始版本：GeoScene Maps SDK for JavaScript 4.19

isFulfilled() 可用于验证创建类的实例是否已完成 (已解决或已拒绝)。如果满足，则返回 true。

类型	描述
Boolean	指示创建类的实例是否已完成 (已解决或已拒绝)。

isRejected(){Boolean}inherited 起始版本：GeoScene Maps SDK for JavaScript 4.19

isRejected() 可用于验证创建类的实例是否被拒绝。如果被拒绝，则返回 true。

类型	描述
Boolean	指示创建类的实例是否已被拒绝。

isResolved(){Boolean}inherited 起始版本：GeoScene Maps SDK for JavaScript 4.19

isResolved() 可用于验证创建类的实例是否已解决。如果已解决，则返回 true。

类型	描述
Boolean	指示创建类的实例是否已解决。

on(type, listener){Object}inherited

在实例上注册事件处理程序。调用此方法将事件与监听器挂钩。

参数

type String|String []

要侦听的事件或者事件数组。

listener Function

事件触发时要调用的函数。

类型描述

Object

返回具有 remove() 方法的事件处理程序，可调用该方法来停止侦听事件。

属性	类型	描述
remove	Function	调用时，从事件中移除侦听器。

示例

view.on("click", function(event){
  // event is the event handle returned after the event fires.
  console.log(event.mapPoint);
});

own(handleOrHandles)inherited 起始版本：GeoScene Maps SDK for JavaScript 4.24

添加一个或多个与微件的生命周期相关联的句柄。当微件被销毁时，将移除句柄。

const handle = reactiveUtils.when(
  () => !view.updating,
  () => {
    wkidSelect.disabled = false;
  },
  { once: true}
);

this.own(handle); // Handle gets removed when the widget is destroyed.

参数

handleOrHandles WatchHandle|WatchHandle []

微件销毁后，标记为要移除的句柄。

postInitialize()inherited

此方法主要由开发人员在实现自定义微件时使用。在微件准备好渲染后执行。

removeHandles(groupKey)inherited 起始版本：GeoScene Maps SDK for JavaScript 4.25

移除对象拥有的句柄组。

参数

groupKey *

optional

要移除的组键或组键的数组或集合。

示例

obj.removeHandles(); // removes handles from default group

obj.removeHandles("handle-group");
obj.removeHandles("other-handle-group");

render(){Object}inherited

此方法主要由开发人员在实现自定义微件时使用。它必须由子类实现以进行渲染。

类型	描述
Object	渲染的虚拟节点。

renderNow()inherited

立即将微件渲染到 DOM。

scheduleRender()inherited

此方法主要由开发人员在实现自定义微件时使用。计划微件渲染。此方法对于影响 UI 的更改非常有用。

submit()

触发 submit 事件。

示例

// Listen for when 'submit' is called on the FeatureForm.
// Once it is fired, update the feature.
form.on("submit", updateFeature);
// When the DOM's button (btnUpdate) is clicked,
// execute the 'submit()' method.
on(dom.byId("btnUpdate"), "click", form.submit());

when(callback, errback){Promise}inherited 起始版本：GeoScene Maps SDK for JavaScript 4.19

一旦创建了类的实例，就可以使用when() 。此方法接受两个输入参数：callback 函数和 errback 函数。callback 在类的实例加载时执行。errback 在类的实例无法加载时执行。

参数

callback Function

optional

当 promise 解决时调用的函数。

errback Function

optional

当 promise 失败时执行的函数。

类型	描述
Promise	为 `callback` 结果返回一个新的 promise。

示例

// Although this example uses the BasemapGallery widget, any class instance that is a promise may use when() in the same way
let bmGallery = new BasemapGallery();
bmGallery.when(function(){
  // This function will execute once the promise is resolved
}, function(error){
  // This function will execute if the promise is rejected due to an error
});

事件概述

名称	类型	描述	类
	{valid: String [],invalid: String [],values: Object}	当调用 submit() 方法时触发。更多详情	FeatureForm
	{layer: FeatureLayer,feature: Graphic,fieldName: String,value: Number,String,null,valid: Boolean}	在更新字段值时触发。更多详情	FeatureForm

事件详细说明

submit

当调用 submit() 方法时触发。调用 FeatureLayer.applyEdits() 方法来更新要素的属性。

属性

valid String []

有效的字段名称。

invalid String []

无效的字段名称。

values Object

字段名称的键值对对象及其所有值，无论它们是否已更新。

另请参阅

submit()
getValues()

示例

// Listen to the feature form's submit event.
featureForm.on("submit", function(){
  if (editFeature) {
    // Grab updated attributes from the form.
    const updated = featureForm.getValues();

    // Loop through updated attributes and assign
    // the updated values to feature attributes.
    Object.keys(updated).forEach(function(name) {
      editFeature.attributes[name] = updated[name];
    });

    // Setup the applyEdits parameter with updates.
    const edits = {
      updateFeatures: [editFeature]
    };
    applyEdits(edits);
  }
});

value-change

在更新字段值时触发。

属性

layer FeatureLayer

关联的要素图层。

feature Graphic

关联的要素

fieldName String

更新的字段。

value Number|String|null

更新的字段值。

valid Boolean

如果为 true，则该值符合字段的定义。

GeoScene Maps SDK for JavaScript参考手册

构造函数

属性概述

属性详细信息

方法概述

方法详细说明

事件概述

事件详细说明