Where does WAB look for custom widgets?

[DrewPhillips2]

I learned in another thread that you can edit a custom widget in WAB/server/apps/myAppName/widgets rather than editing the custom widget code in client/stemapp/widgets. This allows me to refresh the instance of WAB to see how my code changed the custom widget. Makes sense.

But it seems like you MUST have a folder with your custom widget name in client/stemapp/widgets for this method to work. If not, I was unable to add my custom widget in WAB's interface. Once I added a copy of my custom widget folder to client/stemapp/widgets I was able to edit the code in /server/apps/myAppName/widgets and see changes on-screen.

My question is: does WAB look for a folder in client/stemapp/widgets first, then look in /server/apps/myAppName/widgets for the folder with the same name? I'm not sure how else to explain my results.

[RobertScheitlin__GISP · Accepted solution]

Drew,

   To understand that you need to understand the principle behind the WAB design. The WAB app has a client and server folder. In the client folder there is a stemapp folder. The concept for WAB is based on a cloning process the stemapp (stem cell) is the master (blueprint) for all the clones (i.e. the apps you create). When you create a new app it clones the stemapp (with contains the stemapp/widgets folder). So when you add a custom widget you add it to the stemapp/widgets folder but you do not see that widget until you create a new app or refresh your WAB by refershing your browser. When the new app is created the clone now has the custom widget and the clone resides in the server/apps/[app#] folder now if you make changes to the client/stemapp/widget/customwidget/folder then you will Not see these changes in your server/apps/[app#] because it is a clone of client/stemapp/widget/customwidget/folder at the point in time when you created that app. So my workflow is to create an app for each custom widget development and make all my widget file edits inside that app when I am happy with my development efforts, I then copy the server/apps/[app#]widget/customwidget/folder back to the client/stemapp/widget/customwidget/folder. This is just my recommended workflow. There is an alternate workflow that allows you to do all your development in the stemapp widgets folder as covered here Get started—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers 

I hope this answers your question.

[RVG296]

Robert Scheitlin, GISP‌

Thank you, Robert, for your crystal clear explanation and cloning.

Is there a specific reason why they had two folders "Client and Server". So does the server provide the final apps we create using Web App Builder in the apps folder?

I even wondered about not finding my widget changes if we change in the stemapp folder during my early stages of using a web app builder developer edition.

 Web AppBuilder for ArcGIS: Customizing and Extending - YouTube 

Then I have watched the above video (14:00 onwards) and got to know how to use them in Dev Environment.

I think the other approach is to copy the config file from Sample-configs and paste it in the Config folder.

Then we pass in the config in the query parameters to reflect the real-time changes.

Think its well explained in the video

[RobertScheitlin__GISP]

Is there a specific reason why they had two folders "Client and Server". So does the server provide the final apps we create using Web App Builder in the apps folder?

Yes the server apps folder has all your apps you created in WAB and see in your WAB apps page (i.e final apps). Client is a folder that contains the stemapp and the  webappbuilder site that can be used for testing in the link I provided in my last post.

[DrewPhillips2]

That is an excellent explanation, thanks!

I'm hearing that myApp inherits (instantiates?) from the stemapp directory. So when I added my custom widget to client/stemapp/widgets and created a new app, I was able to further customize the widget code in server/apps/myApp.

Once the widget looks good (if I ever stop tinkering with it) I'll copy its folder to client/stemapp/widgets to make it available to future apps.

I suppose, if I wanted to create a widget from scratch, I could copy the "Simple" widget folder with the bare minimum of code to stemapp, create a new app, and customize its code in server/apps/myApp.

[RobertScheitlin__GISP]

I suppose, if I wanted to create a widget from scratch, I could copy the "Simple" widget folder with the bare minimum of code to stemapp, create a new app, and customize its code in server/apps/myApp.

I tend to use samplewidgets/CustomWidgetTemplate, but yes.

[DrewPhillips3]

Here's a related question. I downloaded an app (as a .zip) that has a custom widget and a fair amount of custom code. Everything looks good with one exception. We customized the Splash screen to center the "OK" button by changing the code in server > (app number) > widgets > Splash > css > style.css. However, I had to add the code that centers the button to style.css (in the same relative location) on my local machine/instance of WAB.

I'm at a loss to explain this. My only idea is that WAB cloned the stemapp and used its default files for some things (like the Splash css). In this case, WAB copied the Splash content from stemapp but not the customization. Plausible? Any help is greatly appreciated.

[RobertScheitlin__GISP]

That should not have happened. All the data in the exported apps zip should be coming from the server/apps/app# folder.

Strange.

[DrewPhillips3]

Robert, you know more about WAB than anyone else I've ever met, so I'll call this "an error that exists between chair and keyboard" unless I find out otherwise. Thanks!