Method Overview

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:

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;

join(classNames){String}

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 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:

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;

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/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:

Type	Description
Function	The property decorator.

Example:

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