Method Overview

Method Details

accessibleHandler(){Function}

This convenience decorator is used to help simplify accessibility within the widget keyboard events. For example, it can be used to execute a method when the space or enter keys are pressed.

Returns:

Type	Description
Function	The property descriptor.

Example:

// .tsx syntax providing accessibility on a widget view model's reset method
@accessibleHandler()
@aliasOf("viewModel.reset")
reset: () => void;

cssTransition(type, className){Function}

Since: ArcGIS API for JavaScript 4.7

Utility method used for creating CSS animation/transition functions.

Parameters:

type String The animation/transition type. Possible Values: enter | exit

className String The animation/transition class name.

Returns:

Type	Description
Function	The animation/transition function.

Example:

// .tsx syntax showing how to set up node enter/exit animations
render() {
  const content = this.visible ? (
    <div enterAnimation={cssTransition("enter", CSS.fadeIn)}
         exitAnimation={cssTransition("exit", CSS.fadeOut)}>
      I fade in and out.
    </div>
  ) : null;

  return (
    <div class={CSS.base}>{content}</div>
  );
}

join(classNames){String}

Deprecated

• Deprecated at 4.7. Now use classes.

Utility method used for joining CSS classes.

Parameter:

classNames String repeatable The class names to join.

Returns:

Type	Description
String	The joined class names.

Example:

// .tsx syntax showing how to join multiple static CSS classes while rendering the widget
render() {
  return (
    <div class={join(CSS.base, CSS.mixin)}</div>
  );
}

renderable(propertyName){Function}

This convenience decorator marks a property for automatic rendering. It is useful when you want rendering to be scheduled whenever the decorated property changes. Many times this decorator is used in conjunction with the @property decorator. Rendering on deep properties is also supported by providing a path to a property deeper in the instance.

Parameter:

propertyName String|String[] optional Names of nested renderable properties.

Returns:

Type	Description
Function	The property decorator.

Examples:

// .tsx syntax setting a renderable property
@property()
@renderable()
name: string = "name";

// .tsx syntax setting a renderable nested property.
@property()
@renderable("viewModel.name.first")
viewModel: PersonViewModel;

storeNode(node)

Since: ArcGIS API for JavaScript 4.6

This convenience method is used to assign an HTMLElement DOM node reference to a variable. It does this by taking a HTMLElement passed from either the afterUpdate or afterCreate callbacks. In order to use this, the element must have a set data-node-ref attribute. In addition, it must also be bound to the widget instance, e.g. bind={this}.

Parameter:

node HTMLElement The referenced DOM node.

See also:

• Custom widget rendering guide topic.

Example:

// The storeNode function is called after the node is
// added to the DOM. Bind the node to the widget and
// pass in the node's root element name.
render() {
  return (
    <div afterCreate={storeNode} bind={this} data-node-ref="rootNode" />
  );
}

tsx(selector, properties, children){Object}

Since: ArcGIS API for JavaScript 4.4

This convenience method is used to render the JSX in the widget.render() method. It is required to import tsx even though it is not explicitly called.

Parameters:

selector String The element to create.

properties Object optional The element's properties.

children Object optional The element's children.

Returns:

Type	Description
Object	The virtual node.

See also:

• Sample - Create Custom Widget

• Sample - Recenter Widget

Example:

// .tsx syntax importing jsxfactory
import { tsx } from "esri/widgets/support/widget";

vmEvent(eventNames){Function}

This convenience decorator helps dispatch view model events on the widget instance.

Parameter:

eventNames String|String[] The event names to re-dispatch.

Returns:

Type	Description
Function	The property decorator.

Example:

// .tsx syntax dispatching view model events
@property()
@vmEvent("search, search-clear, suggest")
viewModel: SearchViewModel;

Type Definitions

GoToOverride(view, goToParameters)

The following properties define a goTo override function.

Parameters:

view MapView|SceneView A reference to the MapView or SceneView.

goToParameters GoToParameters The target and optional parameters for either the MapView's goTo() or SceneView's goTo() function.

GoToParameters

The following parameters passed to either the MapView's goTo() or SceneView's goTo() functions. For additional information on what can be passed to its target or options, please refer to documentation for either the MapView's goTo() or SceneView's goTo() functions.

Properties:

target Object The target location/viewpoint to animate to.

options Object optional Animation options.