List ArcGIS Server folders with ESRI request

AlexGole · ‎10-12-2015

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

AlexGole · ‎10-15-2015

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?

AlexGole · ‎10-15-2015

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

RobertScheitlin__GISP · ‎10-15-2015

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>

AlexGole · ‎10-16-2015

That was it thank you Robert!It works great!