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:
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.
Find the source code file responsible for making the html UI element interactive:
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.
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).
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:
turn windows features on or off
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:
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
only valid for one chrome instance.
To bypass cors policy permanently:
Web AppBuilder Custom Widgets
The specified item was not found.