Building Your Own Widget with ArcGIS API for JavaScriptBen RamsethSoftware Engineer - Esri

Topics covered

• What is a widget?• Typescript• Setting up the Developer Environment• Creating a basic web mapping app with typescript• Implementing Accessor• Widget framework• Building a widget• @arcgis/cli• Summary

About Widgets

• What?- Encapsulated UI components- Cohesive (integrated, unified)- Single-purpose pieces of functionality

• Why?- Reusable- Interchangeable

• How?- Extend esri/Widgets/Widget

Let’s take a look at a few…What are widgets

Widgets can also be views that make up an app

JS API + TypeScriptDeveloper environment

Typescript - https://www.typescriptlang.org/

Typed JavaScriptinterface Person

name: string; age: number;

const person: Person = name: "Franco", age: 33 ;

person.age = "24"; // TS2322: Type '"24"' is not assignable to type 'number' person.height = 5.11; // TS2339: property 'height' does not exist on type 'Person'

JS of the future,now// let and const

let canChange = 5;const cannotChange = 5;

// fat arrow functionsconst logName = (person) => console.log(person.name);

// template stringsconst greeting = `Hello, my name is $person.name and

I am $person.age years old

// destructuringconst name, age = person;

// property shorthandconst shorthand = person ;

IDE SupportVisual Studio WebStorm Sublime Text and more!

JSAPI API – Typescript - VSCode

Setting up the Dev Environment

https://developers.arcgis.com/javascript/latest/guide/implementing-accessor/index.html

Implementing Accessor

How we built it.Widget Framework

Pieces needed for the Widget Framework

• Typescript• JSX• esri/core/Accessor

Widget life cycle

• constructor (params)- widget is initially created- access to getting, setting, and watching properties

• postInitialize()- Runs after creation and before render

• render()- only required method- renders the UI

• destroy()- release widget instance

TypeScript decorators

• Allows us to define and modify common behavior in existing properties, methods, and constructors at design time

- @subclass (used in conjunction with declared)- underlying glue that is used to create 4.x classes

- @property()- used to define an Accessor property

- @renderable()- schedules the render whenever a property is modified- @property() and @renderable() often used together

- @aliasOf()- keep code clean so as to not duplicate existing properties- links to properties in the ViewModel

Widget implementation

• Extend the widget• Implement properties and methods• Render the widget• Export module

Extend the widget

• extending from the base Widget class

Implement properties and methods

Render the widget

• render is the only required method

Widget rendering

• classes: use the classes helper method • styles: Allows styles to be changed dynamically• afterCreate: executes after the node is added to the DOM• afterUpdate: executes every time the node is updated• bind: set the value for event handlers• key: uniquely identify a DOM node. Needed if sibling elements with the same selector and

the elements are added/removed dynamically

Export module

• end of the code page

Walk before runningHello World Widget

Beyond the basics…Building a Widget

Building a Map Widget

Custom RecenterWidget

ArchitectureSeparation of concerns

Views + ViewModels UI replacement Easier integration

Views• Extend esri/widgets/Widget

• Rely on ViewModel Focus on UI

ViewModelsExtend esri/core/Accessor Provide APIs to support View Focus on business logic

View + ViewModel inactionView renders the state of the VM

Looks at properties on VM and renders accordingly User interacts with View (property/method)

Causes a change on VM or View View updates

Renders again due to changes on VM

The easy way…Helpful blog post

@arcgis/cli

Summary

Additional ResourcesImplementing Accessor Setting up TypeScript Widget DevelopmentJavaScript API SDKStylingWidget Patterns

Let’s have some questions…

Please Take Our Survey on the AppDownload the Esri Events app and find your event

Select the session you attended

Scroll down to find the feedback section

Complete answersand select “Submit”

Presentation TitlePresenter Names

Sample Name Here

Click HereFor DEMO

Please Take Our Survey on the AppDownload the Esri Events app and find your event

Select the session you attended

Scroll down to find the feedback section

Complete answersand select “Submit”