topic Technique for using a Widget as a property of another Widget in ArcGIS JavaScript Maps SDK Questions

Technique for using a Widget as a property of another Widget

RichardHughes2 — Thu, 18 Oct 2018 14:02:03 GMT

Hello Geonet,

I've been learning the proper techniques for using the ViewModel and View with the render method to build custom widget using 4.x api. My question is, "What is the proper technique for using a widget (ie. Coordinate Conversion) within the View of my custom widget?" The Coordinate Conversion Widget has its own render method and View. I would like to instantiate it within my View Mode to access its properties as the user interacts.

It seems like this would be a common practice but I have not found any guides on using widgets within a widget. My goal is to be able to access to the properties of the Coordinate Conversion ViewModel in my custom widget.

The jsx online resources are very basic and the render method is used to basically render html strings right? How does another widget then get rendered. Do I need to pass the container html string to the render method?

Thanks and sorry for the confusing question.

Re: Technique for using a Widget as a property of another Widget

RichardHughes2 — Sun, 12 Dec 2021 06:37:07 GMT

<div class="obstruction-inputs">
    <div id="ccNode" afterCreate={this._placeCCWidget} bind={this}></div>
<div>‍‍‍

_placeCCWidget() {
  const ccWidget = new CoordinateConversion({
    view: this.view,
    container: "ccNode"
  });
  this.ccViewModel = ccWidget.viewModel;
}‍‍‍‍‍‍‍

So the above code works, but I was thinking that that storeNode convenience method would offer a more robust solution. However, when implementing the afterCreate={storeNode}, the method was not found on the Widget. Does the storeNode convenience method really exist on the Widget? or does it need to be created manually?

Thanks!

Re: Technique for using a Widget as a property of another Widget

ReneRubalcava — Sun, 12 Dec 2021 06:37:10 GMT

Hi Richard, I'm not familiar with the storeNode method, but this is the way I usually do this.

render() {
  return (
    <div>
      My custom widget stuff goes here
      <div bind={this} afterCreate={this.initCoordWidget}></div>
    </div>
  );

  private coordWidget(element: HTMLDivElement) {
    this.coordinateConversion = new CoordinateConversion({
      view: this.view,
      container: element
    });
  }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Technique for using a Widget as a property of another Widget

RichardHughes2 — Thu, 18 Oct 2018 15:05:49 GMT

Hi Rene,

Thank you so much.. I am going to pull the trigger on getting your 4.x development book this weekend. I think that will help me a lot.

Thanks!

Re: Technique for using a Widget as a property of another Widget

RyanSutcliffe — Wed, 22 May 2019 18:45:00 GMT

Above pattern works but would be nice to figure out how to use storeNode since this seems to be what is recommended in the API. Had same question with how to use and method not being found on widget.