widget | API Reference | ArcGIS Maps SDK for JavaScript 4.32

See also

Method Overview

Return Type	Summary	Object
Function	This convenience decorator is used to help simplify accessibility within the widget keyboard events.	widget
Function	Utility method used for creating CSS animation/transition functions.	widget
Boolean	Utility method used to determine if a pressed key should activate button behavior.	widget
Boolean	Utility method used to determine if the directionality of the text of the document is right-to-left.	widget
Function	This convenience decorator is used to help simplify localization of the widget.	widget
	This convenience method is used to assign an HTMLElement DOM node reference to a variable.	widget
Object	This convenience method is used to render the JSX in the widget.render() method.	widget
Function	This convenience decorator helps dispatch view model events on the widget instance.	widget

Method Details

accessibleHandler Method 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 method
@accessibleHandler()
reset: () => void;

cssTransition Method cssTransition(type, className){Function} Since: ArcGIS Maps SDK for JavaScript 4.7 widget since 4.2, cssTransition added at 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>
  );
}

isActivationKey Method isActivationKey(key){Boolean} Since: ArcGIS Maps SDK for JavaScript 4.19 widget since 4.2, isActivationKey added at 4.19.

Utility method used to determine if a pressed key should activate button behavior. If the returned KeyboardEvent.key is either Enter or a space (" "), it returns true.

Parameter

key String

The KeyboardEvent.key

Returns

Type	Description
Boolean	Indicates whether the pressed keyboard key is either `Enter` or a space (`" "`).

See also

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

isRTL Method isRTL(){Boolean} Since: ArcGIS Maps SDK for JavaScript 4.9 widget since 4.2, isRTL added at 4.9.

Utility method used to determine if the directionality of the text of the document is right-to-left.

Returns

Type	Description
Boolean	`true` if the directionality of the text of the document is right-to-left.

messageBundle Method messageBundle(bundleId){Function} Since: ArcGIS Maps SDK for JavaScript 4.18 widget since 4.2, messageBundle added at 4.18.

This convenience decorator is used to help simplify localization of the widget. It is useful to decorate a property that will be automatically populated with the localized message bundled specified by the identifier bundleId. The property can then be used in the render() function to display the localized content.

When a widget is instantiated, all of the message bundles are loaded and assigned to their corresponding properties. The widget's postInitialize method is called, followed by the first call to render.

When the locale changes, all of the message bundles for all of the active widgets are reloaded and reassigned. The widgets then render simultaneously.

If functions are working with translated strings outside of a widget, use intl.fetchMessageBundle instead.

Note that the first call to render() only occurs after all the properties decorated with @messageBundle have been populated with their corresponding bundle.

Parameter

bundleId String

optional

The bundle identifier passed to intl.fetchMessageBundle().

Returns

Type	Description
Function	The property decorator.

See also

Example

// .tsx syntax to define a message bundle property
@property()
@messageBundle("my-application/MyBundle")
messages: { [key: string]: any };

render() {
  return (
    <div>{this.messages.myMessage}</div>
  );
}

storeNode Method storeNode(node) Since: ArcGIS Maps SDK for JavaScript 4.6 widget since 4.2, storeNode added at 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.

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 Method tsx(selector, properties, children){Object} Since: ArcGIS Maps SDK for JavaScript 4.4 widget since 4.2, tsx added at 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|Function

The element to create.

properties Object|null|undefined

The element's properties.

children Object

optional repeatable

The element's children.

Returns

Type	Description
Object	The virtual node.

Example

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

vmEvent Method 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 Type Definition GoToOverride(view, goToParameters)

The following properties define a goTo override function.

Parameters

view MapView|SceneView

A reference to the MapView or SceneView where the navigation takes place.

goToParameters GoToParameters

The overriding target and optional parameters to pass to the MapView's goTo() or SceneView's goTo() method.

GoToParameters Type Definition GoToParameters

The parameters for the MapView's goTo() method and the SceneView's goTo() method.

Properties: target GoToTarget2D|GoToTarget3D

The target location/viewpoint/extent to animate to.

options GoToOptions2D|GoToOptions3D

optional
Options defining the animation and duration of the navigation.