Can someone confirm that afterCreate acts different in 4.16?

362
2
09-16-2020 05:22 AM
FreddyBroring
New Contributor III

Hi all,

I am in the process of migrating from 4.15 to 4.16 API and face a lot of problems.

It looks like when you instantiate a widget in the afterCreate function within the renderer, the created widget doesn't get initialised properly. The postInitialize of the (custom) widget executes in a later phase, not right after the new CustomWidget statement.


This is a huge difference with 4.15 and makes a lot of our code become useless.

Can someone from Esri confirm this difference or give me a clue how to do it correct?

Thanks in advance!

Example:

render() {
   return <div>
      <div afterCreate={this.createWidget} bind={this}></div>
   </div>
}

private createWidget(node: HTMLDivElement) {
   const w = new CustomWidget({
      container: node,
      view: this.view
   });

   // At this point the widget postInitialize is not executed, in 4.15 it was.
}
2 Replies
FreddyBroring
New Contributor III

See attachemnents for two little demo projects (taken from the jsapi-resources typescript demo).

In 4.15 this is what is executed:

08:58:32.523 Widget1.tsx:34 Widget1.render
08:58:32.523 Widget1.tsx:43 start createWidget
08:58:32.523 Widget2ViewModel.ts:17 Widget2ViewModel.constructor
08:58:32.523 Widget2.tsx:30 Widget2.constructor
08:58:32.524 Widget2.tsx:34 Widget2.postInitialize

08:58:32.524 Widget2ViewModel.ts:21 Widget2ViewModel.init
08:58:32.525 Widget2.tsx:39 Widget2.render
08:58:32.525 Widget1.tsx:49 widget2.myProp1 415Prop1
08:58:32.525 Widget1.tsx:50 widget2.myProp1 415Prop2
08:58:32.526 Widget1.tsx:51 end createWidget
08:58:32.544 Widget2.tsx:39 Widget2.render

In 4.16 this is what is executed:

08:54:52.222 Widget1.tsx:31 Widget1.render
08:54:52.222 Widget1.tsx:40 start createWidget
08:54:52.224 Widget2ViewModel.ts:17 Widget2ViewModel.constructor
08:54:52.224 Widget2.tsx:25 Widget2.constructor
08:54:52.225 Widget1.tsx:46 widget2.myProp1 undefined
08:54:52.225 Widget1.tsx:47 widget2.myProp1 undefined
08:54:52.225 Widget1.tsx:48 end createWidget
08:54:52.225 Widget2.tsx:29 Widget2.postInitialize
08:54:52.225 Widget2ViewModel.ts:21 Widget2ViewModel.init
08:54:52.226 Widget2.tsx:34 Widget2.render
08:54:52.227 Widget1.tsx:31 Widget1.render

You cannot rely on postInitialize run right after the constructor any more. This has huge impact on our code.
See the demo code for details. 

Hope someone from Esri is reading this and give me a clue how to resolve this.

0 Kudos
FreddyBroring
New Contributor III

I finally got an answer from Esri. You can wait on the Widgets initialization within the afterCreate method by using view.when().

render() {
   return <div>
      <div afterCreate={this.createWidget} bind={this}></div>
   </div>
}

private async createWidget(node: HTMLDivElement): Promise<void> {
   const w = new CustomWidget({
      container: node,
      view: this.view
   });

   await this.view.when();
}
0 Kudos