nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

WAB Customizing for Beginners

BrianBulla

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!

Find more posts tagged with

Accepted answers

All comments

BrianBulla

Thanks Robert!

RobertScheitlin__GISP

Brian,

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

BrianBulla

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??

DerekLaw

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-for-arcgis-webinar

Hope this helps,

BrianBulla

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??

RickeyFight

Look here:

/blogs/myAlaskaGIS/2017/02/15/web-appbuilder-tips-and-links-for-creating-modifying-and-modifying-custom-widgets-2132017

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?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.