Question about creating custom in-panel widget.

[SophieYe]

Hi All,

I started to play with WAB recently. I am following the steps from ESRI's website: Create a custom in-panel widget—Web AppBuilder fo... . Now I can see the custom widget in the widget pool. But after I added the widget to my app and clicked on it to test, it poped up a message saying "Create Widget Error". When I tested it through http://[your host name:3344]/webapp/?config=sample-configs/config-demo.json, I got the same error. (I have downloaded the missing sample-configs folder from GeoNet.). Then I started the steps for creating a custom widget all over again and tested step by step. And it worked fine until Step 8 "Access a map". After I followed the instructions to access a map, I got the Create Widget Error message. I am wondering if anyone has some ideas about how to solve this problem.

Thank you very much!

[SophieYe]

Any ideas about this? Thanks!

[RobertScheitlin__GISP]

Sophie,

   Open your browsers developer tools and see what the console says

[SophieYe]

Hi Robert,

Thanks for your reply. Here is the information from the console:

• GET http://[machine name]/webappbuilder/apps/12/widgets/MyWidget/setting/Setting.js 404 (Not Found) init.js:41
• Error: scriptError {src: "dojoLoader", info: Array[2], stack: (...), message: "scriptError"}   init.js:41
• src: dojoLoader   init.js:41
• info: ["/webappbuilder/apps/12/widgets/MyWidget/setting/Setting.js", Event]    init.js:42
• Uncaught SyntaxError: Unexpected identifier                  Widget.js:20
• create [widgets/MyWidget/Widget] error:TypeError: number is not a function      WidgetManager.js:97
• TypeError: number is not a function {stack: (...), message: "number is not a function"}
  • message: "number is not a function"
  • stack: (...)
  • get stack: function () { [native code] }
  • set stack: function () { [native code] }
  • __proto__: Error

       "TypeError: number is not a function

Any ideas from here? Thanks a lot!

Sophie

[RobertScheitlin__GISP · Accepted solution]

Sophie,

   Sure in the manifest.json make sure your properties look like this:

"properties": {

        "inPanel":true,

        "hasLocale": true,

        "hasStyle":true,

        "hasConfig":true,

        "hasUIFile":true,

        "hasSettingPage":false,

        "hasSettingUIFile":false,

        "hasSettingLocale":false,

        "hasSettingStyle":false,

        "IsController":false

  }

[SophieYe]

Hi Robert,

Thanks. Now the "cannot get setting file" error is gone. But I still get the following errors:

• Uncaught SyntaxError: Unexpected identifier                  Widget.js:20
• create [widgets/MyWidget/Widget] error:TypeError: number is not a function      WidgetManager.js:97
• TypeError: number is not a function {stack: (...), message: "number is not a function"}
  • message: "number is not a function"
  • stack: (...)
  • get stack: function () { [native code] }
  • set stack: function () { [native code] }
  • __proto__: Error

       "TypeError: number is not a function

Could you please help me with that? Thank you.

Sophie

[TimWitt2]

Sophie,

this error is usually caused by unbalanced ( { [ within your widget.js

Tim

[SophieYe]

Hi Robert and Tim,

Thank you both so much for helping me solve this problem. After I balanced all "(, [, {", I still got the error. But it worked fine after I restarted the Web AppBuilder.

Thank you very much. I really appreciated your help.

Sophie