AnsweredAssumed Answered

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

Question asked by majetivaraprasad on Mar 24, 2016
Latest reply on Mar 30, 2016 by majetivaraprasad



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: 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.