What's the recommended way to modify 4.x Widget UI after creation?

RichardHughes2 · ‎10-09-2018

Hello,

I'm learning the new 4.x API and have been pretty successful implementing the Accessor based ViewModel per the recommendations on the available resources online.

When needing to modify the Widget UI after initial rendering, is there a recommended approach? Currently I am comfortable using domConstruct as was the typical technique in the 3.x api. Is there a typescript 4.x equivalent to using the dojo dom tools?

When developing in 3.x I typically prefer creating dom nodes in javascript rather than the html widget template. In the 4.x api, when rendering jsx, is there a recommended way to reference domNodes (ie. this.myDomNode using dojo-data-attach-point) so that the UI can be modified?

The references for jsx available online haven't completely sunk in with me yet so I am hoping the geoNet community has some insight or direction for me to look in.

Thanks!!

MattDriscoll · ‎10-11-2018

Hey Richard,

Modifying the widget after initial rendering is used by @renderable properties and calling `scheduleRender()` on the widget. Since it is JSX, it renders just the things that need to or have been changed. The 4x widgets don't use DOM nodes, they use Virtual DOM nodes but you can get an attachment of the node by setting functions to the "afterUpdate" and "afterCreate" properties on the VDOM.

I would recommend doing some research on JSX and going through some tutorials or video screencasts. Hopefully it will click!

Here is the widget dev documentation: Widget development | ArcGIS API for JavaScript 4.9

-Matt

RichardHughes2 · ‎10-13-2018

Thanks for the insight Matt... I will look at those methods on the VDOM and find some tutorials for JSX. With the new 4.9 api something changed that is throwing errors with the ui placement I believe. Switching back to 4.8 and the errors go away. It may be a change to one of the esri/widgets, or a change to the implementation of the widget I am creating. When I gather more info I will create a new post with that error message.