require(["esri/widgets/support/widget"], (widget) => { /* code goes here */ });
import * as widget from "@arcgis/core/widgets/support/widget.js";
esri/widgets/support/widget
This module contains widget helpers which aid in custom widget development.
Method Overview
| Name | 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
MethodaccessibleHandler(){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
spaceorenterkeys are pressed.ReturnsType Description Function The property descriptor. Example// .tsx syntax providing accessibility on a widget method @accessibleHandler() reset: () => void;
-
cssTransition
MethodcssTransition(type, className){Function}Since: ArcGIS Maps SDK for JavaScript 4.7widget since 4.2, cssTransition added at 4.7. -
Utility method used for creating CSS animation/transition functions.
Parameterstype StringThe animation/transition type.
Possible Values:"enter"|"exit"
className StringThe animation/transition class name.
ReturnsType 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
MethodisActivationKey(key){Boolean}Since: ArcGIS Maps SDK for JavaScript 4.19widget 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
Enteror a space (" "), it returnstrue.Parameterkey StringReturnsType Description Boolean Indicates whether the pressed keyboard key is either Enteror a space (" ").
-
isRTL
MethodisRTL(){Boolean}Since: ArcGIS Maps SDK for JavaScript 4.9widget 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.
ReturnsType Description Boolean trueif the directionality of the text of the document is right-to-left.
-
messageBundle
MethodmessageBundle(bundleId){Function}Since: ArcGIS Maps SDK for JavaScript 4.18widget 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 therender()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@messageBundlehave been populated with their corresponding bundle.ParameterbundleId StringoptionalThe bundle identifier passed to intl.fetchMessageBundle().
ReturnsType Description Function The property decorator. 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> ); }
-
Since: ArcGIS Maps SDK for JavaScript 4.6widget 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}.Parameternode HTMLElementThe 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
Methodtsx(selector, properties, children){Object}Since: ArcGIS Maps SDK for JavaScript 4.4widget 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
tsxeven though it is not explicitly called.Parametersselector StringThe element to create.
properties ObjectoptionalThe element's properties.
children ObjectoptionalThe element's children.
ReturnsType Description Object The virtual node. - See also
Example// .tsx syntax importing jsxfactory import { tsx } from "esri/widgets/support/widget";
-
vmEvent
MethodvmEvent(eventNames){Function} -
This convenience decorator helps dispatch view model events on the widget instance.
ReturnsType Description Function The property decorator. Example// .tsx syntax dispatching view model events @property() @vmEvent("search, search-clear, suggest") viewModel: SearchViewModel;
Type Definitions
-
The following properties define a
goTooverride function.ParametersSpecificationA reference to the MapView or SceneView where the navigation takes place.
goToParameters ObjectThe overriding target and optional parameters to pass to the IMapView's goTo() or SceneView's goTo() method.
Specificationtarget GoToTarget2D|GoToTarget3DThe target location/viewpoint/extent to animate to.
options GoToOptions2D|GoToOptions3DoptionalOptions defining the animation, duration, and easing of the navigation.