1

I'm beginning to learn widget creating in Esri's Web Appbuilder for ArcGIS, but I'm having some problems getting the code to display when I make changes.

Coming from a Visual Studio-based web/Windows development background, I'm used to being able to make a few minor changes and then hit the debug button to see the changes in action. With the widget development, I'll make changes to my code (widget.js or widget.html) but then I'm unable to view the changes in the Web App (it always shows the last visible version).

Simply refreshing the page does not work, nor does clearing the cache or other web data. I've even tried restarting the node server and Web Appbuilder itself, but no go. The only thing that has worked so far is to delete the app I put the widget into, then create a new app and load the widget into that one. This seems to work most times, but it is tedious and time consuming. I got the idea from https://geonet.esri.com/thread/120241, but that is from the beta of Web Appbuilder nearly 2 years ago. Is there a better method for regularly refreshing a widget during development?

Improve this question
2
  • I haven't had a problem with saving the changes I've made in Visual Studios, then refreshing the browser. Have you been following this workflow in setting up a directory for widget development?
    – kenbuja
    Jul 7, 2017 at 15:52
  • @kenbuja I had not seen that workflow. Seems a backwards way to do it (edit the server code after "deploying" it) but it does appear to work for me. If you want to add that as an answer I will accept it.
    – techturtle
    Jul 14, 2017 at 14:57

2 Answers 2

Reset to default
2

Robert Scheitlin, one of the most knowledgeable contributors for Web AppBuilder development on GeoNet, uses this workflow for developing new widgets:

When developing new custom widgets the widget/theme development work flow I use for all my work is this.

  1. Copy the [install dir]\client\stemapp\widgets\samplewidgets\CustomWidgetTemplate folder to the stemapp widget folder and rename it to your custom widgets name.
  2. Open the manifest.json and change the name property to the exact name of the widget folder from step one.
  3. I now work on changing the icon and some basics of the widget.
  4. Now I create a new app (normally the app will be named the same as my custom widgets name) and will see that my new custom widget is a choice in the widget choices.
  5. Add my custom widget to the new app.
  6. Now I do ALL my development in the [install dir]\server\apps[app #]\widgets\my custom widget name folder.
  7. Once I am done will my development I copy the widget folder back into the stemapp widgets folder so that new apps will use the completed widget code.
Improve this answer
0

I eventually found a better way, though it is still not to the level of simplicity provided by the "debug" button in Visual Studio. Instead of having to recreate the whole app after saving changes to your widget, you can do this instead:

  1. Delete the widget from the app.
  2. Save changes to the app.
  3. Refresh the browser page with Web Appbuilder in it.
  4. Re-add the widget to the app.
  5. Test the changes.
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.