|
POST
|
In the past when that hasn't worked for me, I used the 'import' option available when you right click on the desired destination geodatabase. This option has worked for me.
... View more
08-01-2019
12:40 PM
|
0
|
0
|
640
|
|
POST
|
Hi Robert, What made you choose MapManager.js? Is there documentation on the core js files that make up wab dev edition? Once you find the file you want to insert code into, what methodology should one use to determine where in that file is ideal to execute that code? I wrote a blog with my ideas: https://community.esri.com/people/andrescastillo08/blog/2019/07/24/how-to-customize-an-app-using-javascript-the-dom-chrome-devtools-and-chromes-debugger But I'd like to see how you go about doing this. Thank you.
... View more
08-01-2019
11:50 AM
|
1
|
2
|
2454
|
|
POST
|
Although I see you have the dojo class "request/xhr" property of sync set to a boolean value of true, then object still has a .then method promise. Can you help me understand how this is synchronous please?
... View more
08-01-2019
08:24 AM
|
0
|
4
|
4682
|
|
BLOG
|
wow Leslie Fountain! Great blog. I can't believe it! Out of all those people at Balboa, and my wife and I appear in a picture of your blog! (underneath "Good times were had by all, including GeoNet MVP Andres Castillo and family!") I wish my daughter made it in too. EDIT: Thank you Leslie, for adding that second photo of my family. This was certainly a pleasant surprise to see. Thank you Leslie. Great pic. Did you take it? I didn't even know soneone was taking pictures. It really was a memorable party. My daughter danced the night away with us.
... View more
07-25-2019
04:24 PM
|
2
|
0
|
1048
|
|
BLOG
|
Here is a blog I wrote that is along the same lines of teaching techniques on how to approach web development: How to customize a web app using JavaScript, the DOM, Chrome DevTools, and Chrome's debugger Blog Post created by Andres Castillo on Jul 24, 2019 https://community.esri.com/people/andrescastillo08/blog/2019/07/24/how-to-customize-an-app-using-javascript-the-dom-chrome-devtools-and-chromes-debugger
... View more
07-24-2019
02:42 PM
|
1
|
0
|
4224
|
|
BLOG
|
Here is a blog I wrote that is along the same lines of teaching techniques on how to approach web development: How to customize a web app using JavaScript, the DOM, Chrome DevTools, and Chrome's debugger Blog Post created by Andres Castillo on Jul 24, 2019 https://community.esri.com/people/andrescastillo08/blog/2019/07/24/how-to-customize-an-app-using-javascript-the-dom-chrome-devtools-and-chromes-debugger
... View more
07-24-2019
02:40 PM
|
0
|
0
|
4664
|
|
BLOG
|
Noah Sager It was amazing meeting you at the UC! You are even cooler than your blogs already make you look. I hope you don't mind.......I want to share a blog I wrote since it is along the same lines of teaching techniques on how to approach web development. How to customize a web app using JavaScript, the DOM, Chrome DevTools, and Chrome's debugger Blog Post created by Andres Castillo on Jul 24, 2019 https://community.esri.com/people/andrescastillo08/blog/2019/07/24/how-to-customize-an-app-using-javascript-the-dom-chrome-devtools-and-chromes-debugger
... View more
07-24-2019
02:37 PM
|
0
|
0
|
1507
|
|
BLOG
|
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
... View more
07-24-2019
11:04 AM
|
2
|
0
|
2338
|
|
BLOG
|
I received a request to provide all videos and other files available for an area of interest on the map. Using ArcGIS Pro, I digitized a polygon to enclose the desired area. Used this polygon to select all pipe line features that intersect this area. Export the selected pipes to an excel. Copy only the user-defined unique id field onto a local text file, as list1.txt Ensure no extra newlines/whitespace at the beginning nor end of the file. move list1.txt to a new directory labeled 'stagingFiles'. Using the command line, write the contents of the directory that contains the desired files to a local text file, as list2.txt: dir /b > list2.txt remove the value of 'list2.txt' from the text file, as well as the names of any subdirectories. If subdirectories exist, create another text file within the subdirectory, as list2_1.txt, then move it to 'stagingFiles' directory, and repeat for other subdirectories. remove the value of 'list2_1.txt' from the text file, as well as the names of any subdirectories, and repeat for other subdirectories. Use this python script, and follow the remainder instructions within it: import re
with open(r'\\cityhall\data\GIS_MAPS\AndresCastillo\toDo\stormCCTVReportsVideos3336NFlaglerOutfallImprovementsTicket40365\stagingFiles\list1.txt', 'r') as f:
generatorOfFileLines = [line.strip()for line in f]
a = generatorOfFileLines
for i in range(len(a)):
pattern = re.compile(r'(.*)' + str(re.escape(a[i])) + r'(.*)')
with open(r'\\cityhall\data\GIS_MAPS\AndresCastillo\toDo\stormCCTVReportsVideos3336NFlaglerOutfallImprovementsTicket40365\stagingFiles\list2.txt', 'r') as g:
contents = g.read()
matches = pattern.finditer(contents)
for match in matches:
results = match.group(0)
print results
i +=1
print "Copy and paste the results of the Regular Expression (above this printed statement) to a text file, as list3.txt, save it, and close it."
resultsFile = raw_input("paste path to text file here: ")
# \\cityhall\data\GIS_MAPS\AndresCastillo\toDo\stormCCTVReportsVideos3336NFlaglerOutfallImprovementsTicket40365\stagingFiles\list3.txt
with open(r'{}'.format(resultsFile), 'r') as h:
b = [line.strip()for line in h]
c = list(set(b))
for i in range(len(c)):
print c[i]
print 'Now take the results above, and paste to the list4.txt file (move the text file to the intended directory to search for files)'
print 'This file is used in conjuction with the command line argument FOR /F "delims=" %N in (list4.txt) do COPY "%N" "C:\\targetFolder" to copy and paste files to an intended directory'
print 'If subdirectories exist, make a new list3.txt from the list2_# (by changing the file name in the path above), and perform the instructions in this script again.'
print 'find out what to do when a filename collides with another, like.........command overwrite yes no all.....'
print 'Separate the cmd line results to single out the files that did not copy successfully'
print 'If feasible, change the filename to its current name, and append "_1" to it.'
print 'once done, remove the list4.txt, and target folder (if applicable) from the intended directory.'
print "______________________________________________Operation is Complete"
# Try the findall() method without groups, and it should work.
# Another use case for regex would be for validating user input in client apps to ensure what they input meets a criteria.
# Didn't work
# subbedContents = pattern.sub(r'\0', contents)
# print subbedContents
# i +=1
# for dirpath, dirnames, filenames in os.walk(r'\\cityhall\data\GIS_MAPS\AndresCastillo\toDo\stormCCTVReportsVideos3336NFlaglerOutfallImprovementsTicket40365\test'):
# \\GIS-WEBAPP\Hyperlinks\StormCCTV
# for file in filenames:
# matches = pattern.finditer(re.escape(file))
# print matches
# for match in matches:
# print match
# Didn't work for list4.txt:
# trimmedResultsFile = r'\\cityhall\data\GIS_MAPS\AndresCastillo\toDo\stormCCTVReportsVideos3336NFlaglerOutfallImprovementsTicket40365\stagingFiles\list4.txt'
# with open('{}.format(trimmedResultsFile)', 'w') as j:
# j.write(str(c))
# fnmatch and os modules did not work
# To get the filenames of the resources in a directory:
# Hold the "Shift" key, right-click the folder and select "Open Command Window Here."
# This only works with folders, not libraries.
# Type "dir /b > dirlist.txt" without quotes and press "Enter."
# This creates a list containing file names only.
# Open Microsoft Excel and press "Ctrl-O" to bring up the Open dialog window.
# Open Txt file in Excel Sent the client the requested files. Resources: Google: How Do I select multiple files in a folder from a list of file names Select multiple files in same folder with variations of filenames python Select multiple files in same folder with variations of filenames python regular expression write contents of directory to text file. Select variations of many file names at once python regex regular expression tester https://pymotw.com/2/glob/ https://docs.python.org/2/library/fnmatch.html https://www.tenforums.com/general-support/110415-how-do-i-select-multiple-files-folder-list-file-names.html How Do I select multiple files in a folder from a list of file names 16 May 2018 #4 Welcome to TenForums @SGTOOL The simplest way to use a text file with a filename on each line (such as list.txt) to copy the files to a folder such as C:\Destination is by using this single command in a command prompt: FOR /F "delims=" %N in (list.txt) do COPY "%N" "C:\targetFolder" 'for' loops through all the filenames in list.txt "delims=" says use the whole of each line as the parameter %N the quotes around %N in 'copy "%N"' allows for any filenames that contain spaces C:\Destination specifies the folder you want to copy to (it must already exist, create it first if necessary) If the text file contains just the file names, then the command has to be run in the folder that contains the files to be copied. To go to that folder, first use the 'change directory' command: CD <full path to the folder> eg: CD C:\Source_folder If the text file contains the full path and filename on each line, eg: C:\Users\Me\Pictures\SourceFiles\Filename.jpg ...then the CD step is not needed. If the text file is in a different folder, give the full path to it in the FOR command, eg: (C:\Temp\list.txt) https://answers.microsoft.com/en-us/windows/forum/windows_vista-files/select-multiple-files-in-same-folder-from-a-list/d6bba385-f87d-448a-ada8-76cec34d5a63?page=1 Select multiple files in same folder from a list of file names Tiffany McLeod Replied on April 25, 2009 You can use a Excel Spreadsheet to automatically format the code and then copy and paste it into a text document which you would save as a *.bat file. I have a Spreadsheet I've created for this, and I'll share with you, you can download it by clicking on the following link (hopefully). Download Excel Spreadsheet How to Use: Open the Spreadsheet. At the bottom of the screen, you will see that there are two worksheets in this file. If your list of names includes the the full file path (example: c:\weddings\sally\img1.jpg), choose the worksheet labeled "Full Path". If your list only has the filenames (example: myimage.jpg), choose the worksheet labeled "Filename Only". I'll explain the Filename Only worksheet: Image You will NOT enter any Data into the first three columns: that's the output. In column E (Current Folder Path) Type the full folder path where the pictures are currently located. Make sure that you include the final "\", as shown above. You will only need to type this once. The next Column (F) is the File Name Column. Paste your list of file names here, one name per cell (the list you paste from should have only one name per line). My spreadsheet allows for well over 200 filenames before the formulas stop working (for more files, simply extend the formulas). Type the full path of the folder you want to move the pictures to into column G, as shown. Now, we'll look back to the First three columns, A,B, and C. Find the spot where the output in column B no longer has a filename after the folder path. Select all the output in the three columns, above the ending line. For example, in the sheet above, the ending line is Line 7 (we don't want to include that line), so the selected range would be A2:C6. For two hundred files, the range would be A2:C202. Copy. Open notepad. Paste. Save as a .bat file. (Choose save. Slect the folder you wish to save it in. Type move.bat into the name line. Make sure that "All files" is selected from the file type drop down list.) This .bat file is reusable. Simply right-click and choose edit to reuse instead of making a new one each time. Once the .bat file is saved, double-click on it to run it. Check your destination folder, and make sure the files moved as desired. If you want to copy the files instead of move them, simply type COPY into cell A2. Use the Full Path worksheet in the same manner, except you don't need to enter the current folder path into cell E2. Now for the Disclaimer: Follow these instructions at your own risk. I take no responsibility for any damage caused to your data or system as a consquence of using my spreadsheet or following these instructions. Back up your data before using the .bat file. You should test this process to make sure that you understand it, before using it for important files. I freely admit that this is probably a bit clunky and inelegant, but it works and it is very versatile for generating large batches of DOS commands. Best Wishes, Tiffany McLeod aka BookwormDragon https://realpython.com/working-with-files-in-python/#simple-filename-pattern-matching-using-fnmatch Working With Files in Python by Vuyisile Ndlovu Jan 21, 2019 https://thispointer.com/5-different-ways-to-read-a-file-line-by-line-in-python/ 5 Different ways to read a file line by line in Python https://www.sevenforums.com/general-discussion/201734-select-search-multiple-files-copy-paste-new-folder.html select/search multiple files, copy and paste to a new folder Python python snippets Developer Communities GP dev group GIS Developers Geo Developers Developer Communities GIS Developers
... View more
07-24-2019
10:23 AM
|
1
|
0
|
9678
|
|
POST
|
Yes, esri has it going on! Their UC party was spectacular for the family. esri knows how to throw a great party.
... View more
07-19-2019
02:08 PM
|
2
|
0
|
4275
|
|
POST
|
Listening to it. I love the song too! Thank you for asking for the playlist, and telling us which one it was you were looking for!
... View more
07-19-2019
10:37 AM
|
0
|
2
|
4275
|
|
POST
|
Web Developers Web AppBuilder for ArcGIS Web AppBuilder Custom Widgets Web AppBuilder Custom Themes Using the Web AppBuilder Problem: Currently, the popups are configured with a URL that accesses the webapp server virtual directory, to connect to a video and/or pdf report of gravity main pipe inspections. As it currently stands, the webapp server does not have a video/pdf for every gravity main asset. This causes the users to see and click on many links in the popup that lead to a majority of repetitive 404 errors. Solution: This solution was a tag-team effort between myself and a prior ESRI technical support rep: function UrlExists(url)
{
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
return http.status!=404;
// doesn't have http.onreadystatechange, because we do not have _andresFunction() execute depending on changes to the readyState property.
// Instead,_andresFunction() uses the boolean return value of the UrlExists(url) function on demand in a conditional statement that hides the hyperlink if the status = 404.
// The onreadystatechange property specifies a function to be executed every time the status of the XMLHttpRequest object changes:
// From MDN:
// Calling the open method for an already active request (one for which open() has already been called) is the equivalent of calling abort().
// Since the code loops and attempts to open two url's, is it trying to abort?
// Nothing noticed when debugging code, regarding abort.
// This is probably not aborting because the open method is being called on two different dom nodes.
}
function _andresFunction(){
var andyNodeMobile = query(".esriPopupMobile")
if(andyNodeMobile.length == 0){
var andyNode = query(".esriPopupWrapper");
if(andyNode[0].childNodes[1].childNodes[0].childNodes[0] != undefined){
console.log("This is a desktop popup")
// Narrow it down just the gravity mains popup if multiple feature popups are part of the map click result.
if(andyNode[0].childNodes[1].childNodes[0].childNodes[0].childNodes[1].childNodes[0].innerHTML.split(":")[0]=="Sewer Gravity Mains"){
if((andyNode.length)!==0){
if(andyNode[0].childNodes[1].childNodes[0].childNodes.length!== 0){
// Are the two if statements above needed, since we already ensure it is not undefined above?
// This is done to always narrow get the right popup node.....to check if all the childnodes exist.
var countNodes= andyNode[0].childNodes[1].childNodes[0].childNodes[0].childNodes[1].childNodes[2].childNodes.length;
for (i=0; i<countNodes;i++){
if (andyNode[0].childNodes[1].childNodes[0].childNodes[0].childNodes[1].childNodes[2].childNodes[i].href!=undefined){
console.log(andyNode[0].childNodes[1].childNodes[0].childNodes[0].childNodes[1].childNodes[2].childNodes[i])
var checkURL = UrlExists(andyNode[0].childNodes[1].childNodes[0].childNodes[0].childNodes[1].childNodes[2].childNodes[i].href);
if (checkURL) {
console.log("Resource Does exist in the Web Server Virtual Directory. The hyperlink works.");
}
else{
console.log("Resource Does not exist in the Web Server Virtual Directory");
andyNode[0].childNodes[1].childNodes[0].childNodes[0].childNodes[1].childNodes[2].childNodes[i].style.display="none";
}
}
}
}
}
}
}//new
}
// If there is no mobile popup css class, run desktop logic, else run mobile logic.
// innerText: "This element contains an inner span." :point_left: Just the text, trimmed and space-collapsed.
// innerHtml: " This element contains <span>an inner span</span>. " :point_left: All spacing and inner element tags.
// textContent: " This element contains an inner span. " :point_left: Spacing, but no tags.
else{
var andyNode = query(".esriPopupMobile");
if(andyNode[0].childNodes[0].childNodes[0].childNodes[4] != undefined){
console.log("This is a mobile popup")
// Narrow it down just the gravity mains popup if multiple feature popups are part of the map click result.
if (document.getElementsByClassName("esriViewPopup")[0].childNodes[1].childNodes[0].innerText.split(":")[0] =="Sewer Gravity Mains")
{
countNodes = document.getElementsByClassName("esriViewPopup")[0].childNodes[1].childNodes[2].childNodes.length;
for (i=0; i<countNodes;i++){
if (document.getElementsByClassName("esriViewPopup")[0].childNodes[1].childNodes[2].childNodes[i].href!=undefined){
console.log(document.getElementsByClassName("esriViewPopup")[0].childNodes[1].childNodes[2].childNodes[i])
var checkURL = UrlExists(document.getElementsByClassName("esriViewPopup")[0].childNodes[1].childNodes[2].childNodes[i].href);
if (checkURL) {
console.log("Resource Does exist in the Web Server Virtual Directory. The hyperlink works.");
}
else{
console.log("Resource Does not exist in the Web Server Virtual Directory");
document.getElementsByClassName("esriViewPopup")[0].childNodes[1].childNodes[2].childNodes[i].style.display="none";
}
}
}
}
// Add click event on the dom element of the .esriPopupmobile popup arrow that runs the logic within the .esriViewPopup.
on(andyNode[0].childNodes[0].childNodes[0].childNodes[4],"click", function(event){
console.log(".titleButton arrow CSS class node was clicked on the .esriPopupmobile")
// Do I need to check for "Sewer Gravity Mains" here?
countNodes = document.getElementsByClassName("esriViewPopup")[0].childNodes[1].childNodes[2].childNodes.length;
for (i=0; i<countNodes;i++){
if (document.getElementsByClassName("esriViewPopup")[0].childNodes[1].childNodes[2].childNodes[i].href!=undefined){
console.log(document.getElementsByClassName("esriViewPopup")[0].childNodes[1].childNodes[2].childNodes[i])
var checkURL = UrlExists(document.getElementsByClassName("esriViewPopup")[0].childNodes[1].childNodes[2].childNodes[i].href);
if (checkURL) {
console.log("Resource Does exist in the Web Server Virtual Directory. The hyperlink works.");
}
else{
console.log("Resource Does not exist in the Web Server Virtual Directory");
document.getElementsByClassName("esriViewPopup")[0].childNodes[1].childNodes[2].childNodes[i].style.display="none";
}
}
}
});
// var andyNodeContent = query(".esriViewPopup") as an alternative to document.getElementsByClassName("")
// Initial code checked the URL using the index where the hyperlinks layed on the DOM tree.
// Somehow, the code worked for some url's, but not for others.
// Maybe it was because the index might have changed for some features in the feature class.
// This assumption may be wrong, because supposedly, every feature in the fc will have the same number of fields and same popup configuration.
// To make the code more foolproof, the code was made index-dependent.
// The ArcGIS API for JavaScript was not used for this piece of custom code.
// Instead, vanilla JavaScript and Dojo Framework modules.
}
}
}
//for the browser which doesn't fire load event
//safari update documents.stylesheets when style is loaded.
var ti = setInterval(function() {
if(window.andresCustomPopupFlag == true){
_andresFunction();
window.andresCustomPopupFlag = false;
}
var loadedSheet;
if (array.some(document.styleSheets, function(styleSheet) {
if (styleSheet.href && styleSheet.href.substr(styleSheet.href.indexOf(href),
styleSheet.href.length) === href) {
loadedSheet = styleSheet;
return true;
}
})) {
try{
if (!def.isFulfilled() && (loadedSheet.cssRules && loadedSheet.cssRules.length ||
loadedSheet.rules && loadedSheet.rules.length)) {
def.resolve('load');
}
clearInterval(ti);
}catch(err){
//In FF, we can't access .cssRules before style sheet is loaded,
//but FF will emit load event. So, we catch this error and do nothing,
//just wait for FF to emit load event and go on.
}
}
}, 50);
return def;
} General methodology used to add custom logic: 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. Once you narrow down the desired dom node, you can apply a custom JS 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 JS files, try starting with the JS file named as 'common sense' would have it. For example, since we were trying to modify popup behavior, we started looking at the popupManager.js file. Add breakpoints to all the methods in this file, to use with the Chrome Dev tools. This helps understand code. Observe ui for changes. Using Chrome's debugger, 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 the function to see what other logic it contains, 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. 3 Determine the best place to insert the custom logic. Detailed methodology used to add custom logic: WAB includes different CSS classes for the popups in its' code for desktop vs mobile deployments. For desktop: Inspect element on a web browser to determine css class responsible for popup. .esriPopupWrapper. For mobile: Inspect element on a web browser the size of a mobile device to determine css class responsible for popup. .esriPopupmobile this is the smaller initial popup .esriViewPopup this is the bigger popup with all the popup contents. What prompted modification of these files? 1 popupManager.js by common sense, bc filename made sense. added breakpoint to all the methods in this file This helped understand code. Observe ui for changes. Using Chrome's debugger step over, saw the method in the file that was responsible for showing the popup, initpopupmenu. Using Chrome's debugger step into the initpopupmenu method, opened up many js files, until it revealed the utils.js file. Skip over and remove the breakpoints for the functions that didn't do anything pertinent to what we want to do. added one line of code (lines 125 to 155....custom code on line 127) (the variable set to a boolean value of true (window.andresCustomPopupFlag = true;), which will be referenced in utils.js conditional statement within the var ti function). 2 utils.js Added breakpoints to all the methods in this file var ti = setInterval(function() {}, 50); is fired repeatedly whenever the popup is called. var ti seems to wait for a load event to happen, catch an error, and do nothing, and just go on. This runs repeatedly. This was evident by resuming script execution, which kept running this ti function throughout the application's runtime. Since window.andresCustomPopupFlag is set to equal true in popupManager.js and search Widget.js when the functions get called (at the time when the user either clicks on the map or searches a feature, respectively), that allows us to set a conditional within the var ti function that allows us to call _andresFunction(); once, then set the variable's boolean value to false, so the custom function won't continue to be called in the continuous/repeatedly fired setInterval function. _andresFunction(); contains the logic that allows the app to remove these hyperlinks from the popup, so that the user doesn't have a chance to click on them if they do not exist in the webapp server virtual directory. If they do exist, the hyperlinks will appear for the user. _andresFunction(); Uses 'dojo/query' and 'dojo/on' AMD modules. 'dojo/query' allows us to get dom access to the appropriate dom node for items styled by a css class. This is an alternative to document.getElementsByClassName("") 'dojo/on' allows us to get a handle on a click event. Insert the custom logic right above var ti = setInterval(function() {}, 50);: 3 search Widget.js Although the code worked 100% of the time when clicking directly on a feature in the map, the code failed in the popup that appears when searching an ID from the search widget. Adding breakpoints at the line after each of the many functions in the search widget.js file revealed roughly 10 functions that were called when the popup was generated. To narrow down which of the 10ish functions to place custom code in, we have to see which function is called 100% of the time when generating the popup. _loadInfoTemplateAndShowPopup was the only method called to generate popup from the search widget 100% of the time. added one line of code (lines 746 to 766....custom code on line 747) (the variable set to a boolean value of true (window.andresCustomPopupFlag = true;), which will be referenced in utils.js conditional statement within the var ti function). The other functions that did get called to generate the popup might not always be called, thus risking skipping the custom code. Lessons learned: In 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, aside from what is written on-screen in the file. A '.' specifies css class. Can't use angular/jquery with WAB DE 2D apps, because the 3.x ArcGIS API for JavaScript is heavily dependent on the Dojo framework, and does not play nice with other frameworks/libraries. Instead, WAB DE 3D apps, use the 4.x ArcGIS API for JavaScript, which is less dependent on the Dojo framework, tends to play nicer with other frameworks/libraries. WAB DE is not a JavaScript framework, but does have its' own opinionated file structure that helps make UI components. It might be more appropriate to call it a solution, rather than a framework. What is Dojo? A JavaScript framework that helps build UI components, such as tabs, buttons, sliders and so on. Also dojo has inbuilt functions which has more options than standard JavaScript dom functions. For example, we can access a dom element using document.getElementById(), however, dojo.dom's dom.byId() will do to same thing with more options. jimu.js: jimu means 'building blocks' of something, such as an app. I suppose this is why there are so many js files make up the core logic for WAB DE. jimu.js also contains all the dojo modules and dijits esri wrote specifically for WAB. How can I deploy this 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 bc of cors policy when rup 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 Other benefits and follow up: 1 We now have the ability to configure all types of variations of URLs (In the event of variations in filenames) in the web map popup without forcing the user to click them, just to find a 404 error page. This is helpful in the cases where the filename has multiple naming conventions of pipe videos/pdf's for the same asset id. For example, in the url: https://gis.wpb.org/{id}.mp4 We can now replace 'id' with variations, such as id_1.mp4 id_2.mp4 Is it possible to do a like% or * in the web map popup html? Is it possible to do a regular expression in html? 2 This code works when a pipe asset is clicked on the map, as well as when the asset is searched from the search widget. This solves the issue for the most part, because this is the way most of our users access the pipe popup. This code has not yet been written to work with the query Widget.js file. 3 There's a chance to improve the code using newer JavaScript Standards. Specifically, right now the code is called synchronously (by specifying false in the .open method of the XMLHttpRequest() object), but new standards suggest to call the code asynchronously with a 'promise' This helps with better application performance. From MDN: async Optional An optional Boolean parameter, defaulting to true, indicating whether or not to perform the operation asynchronously. If this value is false, the send() method does not return until the response is received. If true, notification of a completed transaction is provided using event listeners. This must be true if the multipart attribute is true, or an exception will be thrown. Note: Synchronous requests on the main thread can be easily disruptive to the user experience and should be avoided; in fact, many browsers have deprecated synchronous XHR support on the main thread entirely. Synchronous requests are permitted in Workers. How to get the results of an async operation to appear for the popup result? Maybe event listeners? Found similar guidance: https://stackoverflow.com/questions/333634/http-head-request-in-javascript-ajax https://stackoverflow.com/questions/3922989/how-to-check-if-page-exists-using-javascript https://stackoverflow.com/questions/247483/http-get-request-in-javascript https://medium.freecodecamp.org/here-is-the-most-popular-ways-to-make-an-http-request-in-javascript-954ce8c95aaa https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5 https://eloquentjavascript.net/11_async.html https://medium.com/@tkssharma/writing-neat-asynchronous-node-js-code-with-promises-async-await-fa8d8b0bcd7c https://www.valentinog.com/blog/http-requests-node-js-async-await/ https://stackoverflow.com/questions/41470296/how-to-await-and-return-the-result-of-a-http-request-so-that-multiple-request google search: javascript asynchronous http request promise 4 There's a chance to improve the code by using the browser's native fetch API, rather than calling the XMLHttpRequest() object. Other Resources: https://community.esri.com/community/gis/web-gis/arcgisonline/blog/2017/07/18/conditional-field-display-with-arcade-in-pop-ups?commentID=49747#comment-49747 https://www.esri.com/arcgis-blog/products/arcgis-online/uncategorized/whats-new-in-arcade-june-2017/?rmedium=redirect&rsource=/esri/arcgis/2017/06/28/whats-new-in-arcade-june-2017 https://community.esri.com/thread/202841-create-html-for-popup-with-arcade https://community.esri.com/community/education/blog/2017/01/06/using-custom-expressions-in-arcgis-online https://community.esri.com/thread/197406-insert-html-with-arcade Adapt image to showing url if the file is present in an attribute. Would have to add a report present and video present attribute field to the schema. https://community.esri.com/people/agup-esristaff/blog/2015/08/05/arcgis-javascript-promises-and-web-mobile
... View more
07-16-2019
12:21 PM
|
2
|
0
|
4606
|
| Title | Kudos | Posted |
|---|---|---|
| 1 | 10-04-2024 10:22 AM | |
| 1 | 12-11-2024 08:12 PM | |
| 1 | 10-03-2024 07:58 AM | |
| 1 | 01-13-2025 10:30 AM | |
| 1 | 04-18-2025 04:53 PM |
| Online Status |
Offline
|
| Date Last Visited |
3 weeks ago
|