Any recommendations for customized web application?

Question

I would like to create some customized web map application like the following:

https://maps.simcoe.ca/public/

I have explored all the ESRI AppBuilder Builder (Developer Edition) sites. But I still have no clue where to start. I am at intermediate level of JavaScript and ESRI JS API; Beginning level of CSS, HTML, and Dojo.

Is there any tutorial/reference books that can teach these skills as a whole system, like step by step?  For example, I could not find any dojo AMD tutorials online; the dojo official website provides very hard-understanding articles. Thanks!

ChristinaMcCullough · Answer

I would highly recommend using Tim McGee‌'s cmv-wab-widgets template.  It is very modular like the Flex Viewer.  I am able to use CMV and WAB widgets.  I have several Flex favorites from @rcheitlin and many more from the CMV community.  There is a learning curve coming from Flex to JS, but it is a lot less painful than starting from scratch.

GitHub - tmcgee/cmv-wab-widgets: Examples of using widgets from the ESRI WebApp Builder in CMV

Configurable Map Viewer · GitHub

Enjoy!

LindaM · Answer

Thank you all for your great information! Very helpful!

Drew · Answer

Linda,

Some tips I can provide are:

* Really understand how to find and read the online documentation for the ESRI JSAPI and Dojo.* This helps you not reinvent the wheel when coding

* Start small, and create a few widgets for the base WAB. Our maps.simcoe.ca site(s) have over 1 year of work into it. Its not a small task as there is a lot of back end systems and programs to make it happen.  The front end is JS but there is just ask much work done in the back end to make things happen.
* Learn how to create on screen widgets* All of the UI you see on maps.simcoe are essentially on screen widgets plugged into a WAB theme

* Think 'reusable' JS code - We write other helper classes to help widgets get the job done. * This can all be done in dojo

* Think 'reusable' CSS* To keep the look and feel the same we have a base css classes all our widgets can utilize.

* Only use AMD* no more dojo.foreach or dojo.byid

* Understand the entire config.json file for the WAB
* Use the out of the box widgets as a learning tool. All the code is there for you to see how things are done.
* To Start....* Download the WAB
* Create a bank App using the UI* Maybe add a few widgets

* Find that app under 'arcgis-web-appbuilder-2.0\server\apps\' {some number}* I re-name the number to 'dev'

* Open 'dev' into Visual Studio or your favorite editor and browse the folders and files...* Start to understand the structure

Drew