topic Re: How to instantiate a custom widget in Web AppBuilder in javascript ? in ArcGIS Web AppBuilder Questions

How to instantiate a custom widget in Web AppBuilder in javascript ?

Vara_PrasadM_S — Thu, 24 Mar 2016 11:04:07 GMT

Hi,

I am using JS Web AppBuilder V 1.3 developer edition. I have created 2 custom widgets, by copying it from the sample widgets, and modified as per my needs. Updated the template, settings, css, manifest, js file, strings. First widget I have configured in config-demo.json. This widget is being rendered correctly.

I want to show the second widget as content in tool tip dialog bound to some html element in first widget. I could able to bind Tool tip dialog to the html element of first widget and it is being shown correctly. However, the content is blank.

Steps followed to instantiate second widget in first widget

1. Added path of the widget in list of resources in 'define' of the first widget.

2. Added an Alias name

3. Created and object for this using below line

var selToolWidgetObj = new SelectionToolsWidget();

4. The object has been created successfully

5. debugger came to 'postCreate' event of second widget (SelectionToolsWidget)

6. Written below code to set this second widget as content of dijit ToolTipDialog

this._toolTipDialog.set('content', selToolWidgetObj.domNode);

popup.open({

popup: this._toolTipDialog,

around: this.selectDiv

});

7. Tried setting object of the widget directly to 'content' property

8. Tried setting object of domNode of widget object as shown in step 6, no contents of second widget is rendered in UI

9. When I checked selToolWidgetObj.domNode in 'watch', found blank value ("") for innerHTML and also null for firstChild and firstElementChild properties.

10. Also, attachPoints property of the object of the second widget is an empty array.

Could someone please help me how to instantiate a custom widget from another custom widget in JS Web AppBuilder.

Thanks & Regards,

Vara Prasad.

Re: How to instantiate a custom widget in Web AppBuilder in javascript ?

RobertScheitlin__GISP — Sun, 12 Dec 2021 00:27:45 GMT

Vara,

Here is how esri does it in their widgets:

var ttdContent = html.create("div");
this.tooltipDialog = new TooltipDialog({
  style: "cursor:pointer",
  content: ttdContent
});
this.yourObj = new yourObj();
this.yourObj.placeAt(ttdContent);

dojoPopup.close(this.tooltipDialog);
dojoPopup.open({
  popup: this.tooltipDialog,
  around: this.selectDiv
});

Re: How to instantiate a custom widget in Web AppBuilder in javascript ?

Vara_PrasadM_S — Mon, 28 Mar 2016 05:26:02 GMT

Hi Robert,

Thanks for the suggestion.

I tried it. However, the widget is not populated, the template from the template html is not populated and also, the attach points are not recognized.

So, for the custom widgets, if they are templated widgets, do we need to load template html, nls and css using dojo/text!, dojo/i18n! and xstyle!, in widget javascript file ??

Thanks & Regards,

Vara Prasad.

Re: How to instantiate a custom widget in Web AppBuilder in javascript ?

RobertScheitlin__GISP — Mon, 28 Mar 2016 12:54:52 GMT

Vara,

Yes if the widget has a template then you need to reference the template using dojo/text! and you also need _WidgetBase, _TemplatedMixin in your widgets declare.

Re: How to instantiate a custom widget in Web AppBuilder in javascript ?

Vara_PrasadM_S — Tue, 29 Mar 2016 04:46:01 GMT

Thanks a lot Robert! It helped. After I have used those dojo loaders, the html is rendered on browser.

I am using 'jimu/BaseWidget' hence, i think no need to mention "_WidgetBase, _TemplatedMixin" again in my custom widget.

However, when I instantiate this custom widget using the method you specified above, I am unable to leverage the advantages given by 'jimu/BaseWidget' and 'jimu's - WidgetManager' of JS Web AppBuilder (though my custom widget is extending 'jimu/BaseWidget' and just because the instance is not given by WidgetManager and our custom code).. such as..

1. this.map is not available

2. Events mentioned in "Communication to app container" help document (Communication to app container—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers )

Could you please help me if there is any way which I can follow to get these functionalities for my custom widget also either with above approach of instantiating or by using WigetManager's functions. I tried identifying how Widget Manager is creating instances for widgets. But, I could not understand where the 'settings' object is being generated for the widget to which instance has to be generated.

Finally, what I am looking for is, a way to instantiate custom widget, which gives all the Web AppBuilder widgets functionalities mentioned above and ability to mention to which domNode the widget should be bound.

Please let me know if I am not clear anywhere.

Really I thank you very much for your kind help. Highly appreciated.

With Regards,

Vara Prasad.

Re: How to instantiate a custom widget in Web AppBuilder in javascript ?

RobertScheitlin__GISP — Tue, 29 Mar 2016 14:05:33 GMT

Vara,

I have never developed a full WAB widget that is to be used and added inside another WAB widget. When I am building complex widget that need a support dijit (as I see in your case) then I create a dojo templated dijit (just like the WAB team does with the jimu dijits). If your support dijit need access to the map and communication to the app container then I just pass a instance of the parent widget that called the support dijit to get access to those objects (i.e. parentWidget.map).

Re: How to instantiate a custom widget in Web AppBuilder in javascript ?

Vara_PrasadM_S — Wed, 30 Mar 2016 10:50:40 GMT

Ok.. Thanks Robert!