widget

require(["esri/widgets/support/widget"], function(widget) { /* code goes here */ });
Object: esri/widgets/support/widget
Since: ArcGIS API for JavaScript 4.2

This module contains widget helpers which aid in custom widget development.

Method Overview

NameReturn TypeSummaryObject
Function

This convenience decorator is used to help simplify accessibility within the widget keyboard events.

more details
more detailswidget
String

Utility method used for joining CSS classes.

more details
more detailswidget
Function

This convenience decorator marks a property for automatic rendering.

more details
more detailswidget
Object

This convenience method is used to render the JSX in the widget.render() method.

more details
more detailswidget
Function

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

more details
more detailswidget

Method Details

accessibleHandler(){Function}

Since: ArcGIS API for JavaScript 4.2

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:
TypeDescription
FunctionThe property descriptor.
Example:
// .tsx syntax providing accessibility on a widget view model's reset method
@accessibleHandler()
@aliasOf("viewModel.reset")
reset: () => void;

join(classNames){String}

Utility method used for joining CSS classes.

Parameter:
classNames String
repeatable

The class names to join.

Returns:
TypeDescription
StringThe joined class names.
Example:
// .tsx syntax showing how to set CSS classes while rendering the widget
render() {
  const dynamicIconClasses = {
    [CSS.myIcon]: this.showIcon,
    [CSS.greyIcon]: !showIcon
  };

  return (
    bind={this}
    <div classes={dynamicIconClasses}</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:
TypeDescription
FunctionThe 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;

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:
TypeDescription
ObjectThe virtual node.
See also:
Example:
// .tsx syntax importing jsxfactory
import { tsx } from "esri/widgets/support/tsx";

vmEvent(eventNames){Function}

Since: ArcGIS API for JavaScript 4.2

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

Parameter:
eventNames String|String[]

The event names to re-dispatch.

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

API Reference search results

NameTypeModule

There were no match results from your search criteria.