topic Re: List ArcGIS Server folders with ESRI request in ArcGIS JavaScript Maps SDK Questions

List ArcGIS Server folders with ESRI request

AlexGole — Sat, 11 Dec 2021 08:25:49 GMT

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

Re: List ArcGIS Server folders with ESRI request

RobertScheitlin__GISP — Mon, 12 Oct 2015 19:32:17 GMT

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.

Re: List ArcGIS Server folders with ESRI request

AlexGole — Mon, 12 Oct 2015 19:43:17 GMT

You can find my code here: https://jsbin.com/sizufoxero/edit?html,output

Re: List ArcGIS Server folders with ESRI request

RobertScheitlin__GISP — Sat, 11 Dec 2021 08:25:52 GMT

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>

Re: List ArcGIS Server folders with ESRI request

AlexGole — Thu, 15 Oct 2015 21:03:49 GMT

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

Re: List ArcGIS Server folders with ESRI request

RobertScheitlin__GISP — Thu, 15 Oct 2015 22:29:36 GMT

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?

Re: List ArcGIS Server folders with ESRI request

AlexGole — Thu, 15 Oct 2015 22:37:02 GMT

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.

Re: List ArcGIS Server folders with ESRI request

RobertScheitlin__GISP — Sat, 11 Dec 2021 08:25:56 GMT

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>

Re: List ArcGIS Server folders with ESRI request

AlexGole — Thu, 15 Oct 2015 23:13:44 GMT

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

Re: List ArcGIS Server folders with ESRI request

RobertScheitlin__GISP — Thu, 15 Oct 2015 23:22:45 GMT

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.

Re: List ArcGIS Server folders with ESRI request

AlexGole — Thu, 15 Oct 2015 23:32:45 GMT

I am actually running it from my localhost on my IIS7.5 (in domain registered computer). And using my own Server's URL. Any idea?

Re: List ArcGIS Server folders with ESRI request

AlexGole — Fri, 16 Oct 2015 01:30:43 GMT

As you can see on JSbin, I am experiencing about the same problem: https://jsbin.com/zomerizeme/edit?html,output

Re: List ArcGIS Server folders with ESRI request

RobertScheitlin__GISP — Sat, 11 Dec 2021 08:25:59 GMT

Alex,

The problem is the lack of a specified callback on the first esriRequest.

The mixture of https and http urls does not help either (line 10 and 35 was https) line 35 did not specify a protocol at all. Line 51 and 52 added.

<!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="http://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="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://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://sampleserver1.arcgisonline.com/ArcGIS/rest/services";
        esriRequest({
          url: baseUrl + "/",
          content: {
            "f": "json"
          },
          handleAs: "json",
          callbackParamName: "callback"
        }).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"
            },
            handleAs: "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>

Re: List ArcGIS Server folders with ESRI request

AlexGole — Fri, 16 Oct 2015 16:00:41 GMT

That was it thank you Robert!It works great!