Hi all, I am trying to build this application that lists all web services within each ArcGIS Server folders. I am trying to programmatically feed a drop down list with ArcGIS Server folder's names so the user just has to select the folder of his choice and it returns all services in a table. The following code works great but I had to manually enter each folder:
<!DOCTYPE html> <html> <head> <title>Service Info</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css"> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css"> <style> html, body, #details { padding: 0; margin: 0; height: 100%; } .dgrid-cell-padding { padding: 10px !important; } .dgrid { height: 100% !important; } .dgrid-cell{ border:1px solid black !important; } </style> <script src="http://js.arcgis.com/3.14/"></script> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script> <script> require([ "esri/request", "dojo/_base/array", "dojo/dom", "dojo/domReady!" ], function (esriRequest, array, dom, Grid) { $(document).ready(function () { var baseUrl = "http://webgisdevint1/arcgis/rest/services"; $('.selectpicker').on('change', function(){ var baseFolder = $(this).find("option:selected").val(); esriRequest({ url: baseUrl + "/" + baseFolder, content: { "f": "json" }, callbackParamName: "callback" }).then(function (response) { var data = array.map(response.services, function (service, index) { return { "url": "<a target='_blank' href='" + baseUrl + "/" + service.name + "/" + service.type + "'>" + baseUrl + "/" + service.name + "/" + service.type + "</a><br>", "name": service.name, "type": service.type, "id": index } }); $('#example').DataTable({ destroy: true, data: data, columns: [ { title:"URL", data: "url" }, { title: "Name", data: "name" }, { title: "Type", data: "type" } ] }); }); }); }); }); </script> </head> <body class="claro"> <select class="selectpicker"> <option>Search web GIS Folders:</option> <option>Alex_Try</option> <option>CalMAPPER</option> <option>davin</option> <option>ForestPractice</option> <option>FRAP</option> <option>Pipeline</option> <option>PPFIS</option> <option>ResourceMgmt</option> <option>System</option> <option>testing</option> <option>Utilities</option> <option>WatershedMapper</option> </select> <table id="example" class="display" width="100%"></table> </body> </html>
Any idea is more than welcome,
Thanks,
Alex
Solved! Go to Solution.
Alex,
See if this is what you were after ( I select the first option in the selectby default):
<!DOCTYPE html> <html> <head> <title>Service Info</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css"> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css"> <style> html, body, #details { padding: 0; margin: 0; height: 100%; } .dgrid-cell-padding { padding: 10px !important; } .dgrid { height: 100% !important; } .dgrid-cell { border: 1px solid black !important; } </style> <script src="http://js.arcgis.com/3.14/"></script> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script> <script> require([ "esri/request", "dojo/_base/array", "dojo/dom", "dojo/domReady!" ], function (esriRequest, array, dom) { $(document).ready(function () { var baseUrl = "http://gislap183/arcgis/rest/services"; esriRequest({ url: baseUrl + "/", content: { "f": "json" } }).then(function( response ){ $.each(response.folders, function (index, value) { $('.selectpicker').append($('<option>', { value: value, text: value })); }); $(".selectpicker").val($(".selectpicker option:first").val()).change(); }); $('.selectpicker').on('change', function () { var baseFolder = $(this).find("option:selected").val(); esriRequest({ url: baseUrl + "/" + baseFolder, content: { "f": "json" }, callbackParamName: "callback" }).then(function (response) { var data = array.map(response.services, function (layer, index) { return { "url": "<a target='_blank' href='" + baseUrl + "/" + baseFolder + "/" + layer.name + "'>" + baseUrl + "/" + baseFolder + "/" + layer.name + "/</a><br>", "name": layer.name, "id": index } }); $('#example').DataTable({ destroy: true, data: data, columns: [ { title: "URL", data: "url" }, { title: "Name", data: "name" } ] }); }); }); }); }); </script> </head> <body class="claro"> <select class="selectpicker" prompt="Search web GIS Folders:"> </select> <table id="example" class="display" width="100%"></table> <table id="layers" class="display" width="100%"></table> </body> </html>
Alex,
What does your code look like for getting the ArcGIS Server folder names and adding them to the drop down list? For adding code in a thread click on the Use advanced editor link in the upper right hand corner of a reply (you will not see it if you are looking at the thread in your inbox), then choose the >> button from the toolbar.
You can find my code here: https://jsbin.com/sizufoxero/edit?html,output
Alex,
I am not real sure the direction you were going here but I have fixed the code to dynamically populate the select. I made the select change event populate a new table listing the layers for that service.
<!DOCTYPE html> <html> <head> <title>Service Info</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css"> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css"> <style> html, body, #details { padding: 0; margin: 0; height: 100%; } .dgrid-cell-padding { padding: 10px !important; } .dgrid { height: 100% !important; } .dgrid-cell { border: 1px solid black !important; } </style> <script src="http://js.arcgis.com/3.14/"></script> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script> <script> require([ "esri/request", "dojo/_base/array", "dojo/dom", "dojo/domReady!" ], function (esriRequest, array, dom) { $(document).ready(function () { var baseUrl = "http://webgisdevint1/arcgis/rest/services"; esriRequest({ url: baseUrl + "/", content: { "f": "json" } }).then(function( response ){ $.each(response.services, function (index, value) { $('.selectpicker').append($('<option>', { value: value.name + "/" + value.type, text: value.name })); var data = array.map(response.services, function (service, index) { return { "url": "<a target='_blank' href='" + baseUrl + "/" + service.name + "/" + service.type + "'>" + baseUrl + "/" + service.name + "/" + service.type + "</a><br>", "name": service.name, "type": service.type, "id": index } }); $('#example').DataTable({ destroy: true, data: data, columns: [ { title: "URL", data: "url" }, { title: "Name", data: "name" }, { title: "Type", data: "type" } ] }); }); }); $('.selectpicker').on('change', function () { var baseFolder = $(this).find("option:selected").val(); esriRequest({ url: baseUrl + "/" + baseFolder, content: { "f": "json" }, callbackParamName: "callback" }).then(function (response) { var data = array.map(response.layers, function (layer, index) { return { "url": "<a target='_blank' href='" + baseUrl + "/" + baseFolder + "/" + layer.name + "'>" + baseUrl + "/" + baseFolder + "/" + layer.name + "/</a><br>", "name": layer.name, "id": index } }); $('#layers').DataTable({ destroy: true, data: data, columns: [ { title: "URL", data: "url" }, { title: "Name", data: "name" } ] }); }); }); }); }); </script> </head> <body class="claro"> <select class="selectpicker" prompt="Search web GIS Folders:"> </select> <table id="example" class="display" width="100%"></table> <table id="layers" class="display" width="100%"></table> </body> </html>
Thanks Robert ! That looks like a great script but I was trying to populate the select picker with the REST endpoint folders so the user can select the folder of his choice and populate a table with all the services from the folder of chosen by the user (dropdown). Layers might be an addition I would consider in the future though. Also, when I run your script, I get that I need a proxy... Not too sure why as our data is all unlocked (not secured) as it is behind the firewall. Thanks, Alex
Alex,
so let me get this straight. You want to have the select populate with only "Folders" (not map services) and then when the user chooses a folder then the map services will populate the datagrid?
That is exactly what I want. Dropdown menu with "folders" name. Once folder is selected then the select event returns all services within the selected folder.
Alex,
See if this is what you were after ( I select the first option in the selectby default):
<!DOCTYPE html> <html> <head> <title>Service Info</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css"> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css"> <style> html, body, #details { padding: 0; margin: 0; height: 100%; } .dgrid-cell-padding { padding: 10px !important; } .dgrid { height: 100% !important; } .dgrid-cell { border: 1px solid black !important; } </style> <script src="http://js.arcgis.com/3.14/"></script> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script> <script> require([ "esri/request", "dojo/_base/array", "dojo/dom", "dojo/domReady!" ], function (esriRequest, array, dom) { $(document).ready(function () { var baseUrl = "http://gislap183/arcgis/rest/services"; esriRequest({ url: baseUrl + "/", content: { "f": "json" } }).then(function( response ){ $.each(response.folders, function (index, value) { $('.selectpicker').append($('<option>', { value: value, text: value })); }); $(".selectpicker").val($(".selectpicker option:first").val()).change(); }); $('.selectpicker').on('change', function () { var baseFolder = $(this).find("option:selected").val(); esriRequest({ url: baseUrl + "/" + baseFolder, content: { "f": "json" }, callbackParamName: "callback" }).then(function (response) { var data = array.map(response.services, function (layer, index) { return { "url": "<a target='_blank' href='" + baseUrl + "/" + baseFolder + "/" + layer.name + "'>" + baseUrl + "/" + baseFolder + "/" + layer.name + "/</a><br>", "name": layer.name, "id": index } }); $('#example').DataTable({ destroy: true, data: data, columns: [ { title: "URL", data: "url" }, { title: "Name", data: "name" } ] }); }); }); }); }); </script> </head> <body class="claro"> <select class="selectpicker" prompt="Search web GIS Folders:"> </select> <table id="example" class="display" width="100%"></table> <table id="layers" class="display" width="100%"></table> </body> </html>
Looking at your script seems like that is exactly what I am after. (Pretty impressed by your JQuery skills by the way - i am trying to learn some) .The only thing I don't understand here is that I get a blank page just like your previous script. Is there a reason I would need a proxy? I do not have any locked services.
Thanks, Alex
Alex,
I am actually NOT a jQuery fan. Why use a third part library when there is nothing that you can do in jQuery that I have not been able to do using dojo which is already part of the JS API.
The reason you get that behavior is because you are running from the file system and not an actual URL if I use my code just type my machines url "http://gislap183/js/ServerFolder.html vs. file:///C:/JS_Workspace/ServerFolder.html then it works fine.
Don't forget to mark this thread as answered.