This is the general methodology I used to add custom logic to an application, when there is not much documentation on the app's core codebase:
1
Inspect the desired element on the web browser to determine CSS class responsible for the element.
You can get access to the DOM elements underneath this CSS class using the appropriate JS DOM method, such as document.getElementsByClassName("").
Be aware that an app may use different CSS classes for the UI element for desktop vs mobile deployments.
Once you narrow down the desired DOM node, you can apply a custom JavaScript logic to it to make it do something.
2
Find the source code file responsible for making the html UI element interactive:
If there are many source JavaScript files in the app, try starting with the JavaScript file named as 'common sense' would have it.
For example, since we were trying to modify popup behavior, we start by looking at a file with a similar name, such as popupManager.js.
Add breakpoints to all the methods in this file, to use with the Chrome Dev tools.
This helps understand code.
Observe the app's UI for changes.
Using Chrome's debugger:
Using step over, Identify the specific method responsible for making the html UI element interactive.
Sometimes you might notice that several functions are responsible for making the html UI element interactive.
To narrow down which of the is most relevant to the UI element, see which function is called 100% of the time.
The other functions might not always be called, thus risking skipping the custom code.
Once you identify the appropriate method, step into that function to see what other logic it contains, either from the same js file, or another js file in the app, aside from what is written on-screen in the file.
This will reveal other possible files in the application that have functions that are called for the desired html UI element.
Remove the breakpoints for the functions that didn't do anything pertinent to what we want to do.
3
Determine the best place to insert the custom logic within the JavaScript files identified in step 2.
You must find a way to wire up/connect your custom logic between the application's logic and presentation files (i.e. js and html files, respectively).
Takeaways:
Chrome Dev tools:
Resume script execution let's you go from breakpoint to breakpoint.
Step over takes you one step at a time through each line of code.
Step into allows you to go inside the function to see what other logic it contains, either from the same js file, or another js file in the app, aside from what is written on-screen in the file.
Note that even if your custom logic works via one way of interacting with the app's UI, you still need to consider other ways the users would access the same UI functionality by interacting with the app a different way.
If that's the case, also insert your custom logic in the appropriate files that affect the UI functionality.
In other words, the app might have different ways of accomplishing the same task for the user.
You need to address all possible ways the user might interact with that task for your custom logic to work flawlessly under many scenarios.
A '.' specifies css class.
To deploy an app locally for testing:
control panel....
turn windows features on or off
enable IIS.......
enable ftp server
enable ftp extensibility
get admin permission to create files in C:\inetpub\wwwroot
Move desired deploy apps to this folder.
to access url, replace localhost with directory up to the app folder.
index.html seems to not load because of CORS policy when run app locally:
To handle CORS policy error:
To bypass CORS policy temporarily for development:
from windows+r
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
only valid for one chrome instance.
or
To bypass cors policy permanently:
google web.config
https://enable-cors.org/server_iis7.html
Developer Communities
Web AppBuilder for ArcGIS
Web AppBuilder Custom Widgets
GP dev group
GIS Developers
Geo Developers
ArcGIS API for JavaScript
Bootstrap
HTML5, CSS, JavaScript, and JavaScript Frameworks
.NET and the Esri JavaScript API
Esri Leaflet
AngularJS
ArcGIS Server with JavaScript API
