WAB Customizing for Beginners

BrianBulla · ‎02-23-2018

Hi,

I want to take a Web App that I create using WAB 2.7 and customize it. What I want to do is create a custom form that opens up when a user clicks on a feature in the map (ie. a Manhole) and then collect information on the form which would then be stored in a related table to the feature.

Yes, I know there is already a Collector app, but we do not want to use that.

I do some ArcPro tool development in Visual Studio, so I was hoping I could use that to help with this, but I literally have zero knowledge of web development, so I'm not really sure of where to start with this.

Any assistance is appreciated.

Thanks!

RickeyFight · ‎02-23-2018

Look here:

/blogs/myAlaskaGIS/2017/02/15/web-appbuilder-tips-and-links-for-creating-modifying-and-modifying-cus...

and here:

/blogs/myAlaskaGIS/2016/04/04/web-appbuilder-developer-edition-help-and-training-links

You might be able to use a widget that is available:

/blogs/myAlaskaGIS/2017/03/04/web-appbuilder-the-custom-widgets-list-332017

Did you create the app on AGOL or on WAB developer?

BrianBulla · ‎02-23-2018

Hi Rickey,

Thanks for those links. I will definitely look through those.

I did manage to pull the site I created in WAB 2.7 into Visual Studio. It seems like using the 'Download' as apposed to just copy/paste all the folders/files works more efficiently.

When I run the site in debug mode in VS2012, I can get the site to show up in Chrome. What I notice though is that once I add the JS reference to the index.html (ie. I add

 <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
 <script src="https://js.arcgis.com/3.23/"></script>

between the <head> tags, then my site stalls when loading (see image below) and just sits with the default 'loading' bars flashing on the screen. I've been going through this document as a guide (step #2):

Build your first application | Guide | ArcGIS API for JavaScript 3.23

Any ideas as to what I am doing wrong??

DerekLaw · ‎02-23-2018

Hi Brian,

FYI, this recent webinar video might also be a good place to start

https://community.esri.com/people/GRehkemper-esristaff/blog/2018/02/23/extending-the-web-appbuilder-...

Hope this helps,

BrianBulla · ‎02-23-2018

Hi Derek,

Thanks for responding. I'm realizing that I definitely know nothing about web programming, but I think I figured out my problem to the above question is that the index.html file is really just controlling the loading page for the map.

I guess what I need to figure out is what one (of the hundreds) of files in the WebApp contains the code for adjusting say the 'click' event of a layer.

For now, all I want to do is show an alert("Hello World"); message when a certain layer gets clicked.

Can you give any guidance on where this is happening within the file structure the WAB creates??

RobertScheitlin__GISP · ‎02-23-2018

Brian,

The MapManager.js file in the jimu.js folder is where to start.

BrianBulla · ‎02-23-2018

Thanks Robert!

DerekLaw · ‎02-23-2018

FYI Brian, when it comes to WAB development and customization, Robert Scheitlin, GISP is "THE" man.

Thanks for your contributions Robert!

BrianBulla · ‎02-23-2018

Nice....yes, Robert seems to be the one to answer questions on here and has helped me in the past. Thanks Robert!!

On that note rscheitlin , will you be at the Dev Conference in March?? I might need to track you down to pick your brain on some ArcPad apps I want to convert into a WebApp.

RobertScheitlin__GISP · ‎02-23-2018

Yes I will be. See you there.