Parse popup action to TableDIV

Henryobaseki · ‎08-14-2017

Hi All,

Struggling trying to parse selected attribute to a table DIV . Tried to create tabledivas seen below. Sample code is from this link https://developers.arcgis.com/javascript/latest/sample-code/popup-custom-action/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Custom popup actions per feature attribute - 4.4</title>

  <style>
    body {
      font-family: sans-serif;
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    #viewDiv {
      position: absolute;
      right: 0;
      left: 0;
      top: 0;
      bottom: 0;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
  <script src="https://js.arcgis.com/4.4/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "dojo/domReady!"
    ], function(
      Map, MapView, FeatureLayer
    ) {

      var map = new Map({
        basemap: "streets-navigation-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [0.46564130, 51.736810] ,
        zoom: 17
      });

      /********************
       * Add feature layer
       ********************/
      // sampling of breweries
      var featureLayer = new FeatureLayer({
        url: "https://services7.arcgis.com/uE69mPI6U3rpSmCT/arcgis/rest/services/AddressA_csv/FeatureServer/0",
        outFields: ["*"],
        //definitionExpression: "country = 'United States'",

        // add a custom action
        popupTemplate: {
          title: "{Postcode}",
          content: [{
            type: "fields",
            fieldInfos: [{
              fieldName: "Postcode"
            
            }]
          }],
          actions: [{
            id: "find-brewery",
            image: "beer.png",
            title: "Brewery Info"
          }]
        }
      });

      map.add(featureLayer);

        
    function showResults(response) {
         var tbl = document.getElementById("tableDiv");
          var tblBody = document.createElement("tbody");

          var header = tbl.createTHead();
          var headerRow = header.insertRow(0);
          var headerCell = document.createElement("th");
          headerCell.innerHTML = "Name";
          headerRow.appendChild(headerCell);
          var headerCell2 = document.createElement("th");
          headerCell2.innerHTML = "Alias";
          headerRow.appendChild(headerCell2);

          var attributes = popup.viewModel.selectedFeature.attributes;
            // Get the "website" field attribute
            var info = attributes.Postcode;

        info.parse(response).fields.forEach(function(field){
            var row = document.createElement("tr");
            var cell = document.createElement("td");
            var cell2 = document.createElement("td");
            cell.innerHTML = field.name;
            cell2.innerHTML = field.alias;
            row.appendChild(cell);
            row.appendChild(cell2);
            tblBody.appendChild(row);
          });
          
          tbl.appendChild(tblBody);
        }   
      }
      
      
       console.info(response);

       };

      view.then(function() {
        var popup = view.popup;
        popup.viewModel.on("trigger-action", function(event) {
          if (event.action.id === "find-brewery") {
            var attributes = popup.viewModel.selectedFeature.attributes;
            // Get the "website" field attribute
            var info = attributes.Postcode;
            // Make sure the "website" attribute value is not null
            if (info !== null) {
              // Open up a new browser using the URL value in the 'website' field
             // window.open(info.trim());
                showResults(info.trim());
              // If the "website" value is null, open a new window and Google search the name of the brewery
            } 
            //else {
              //window.open("https://www.google.com/search?q=" +
               // attributes.Postcode);
           // }
          }
        });
      });
    });
  </script>

</head>

<body class="light">
  <div id="viewDiv" style="float: left; width: 80%; height: 95%;">
     <table id="tbl" style="float: right; width: 10%; height: 16%;">></table>
      <table id="tableDiv" style="float: right; width: 200%; height: 20%;">></table>
  </div>
</body>

</html>

RobertScheitlin__GISP · ‎08-14-2017

Henry,

See if this works for what you are after:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Custom popup actions per feature attribute - 4.4</title>

  <style>
    body {
      font-family: sans-serif;
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    #viewDiv {
      position: absolute;
      right: 300px;
      left: 0;
      top: 0;
      bottom: 0;
    }
    #tblDiv {
      position: absolute;
      right: 0px;
      top: 0;
      bottom: 0;
      width: 300px;
      overflow: auto;
      border-collapse: collapse;
    }
    #tblDiv thead tr {
      background-color: #4CAF50;
      color: white;
    }
    #tblDiv tr:nth-child(even) {
      background-color: #f2f2f2;
    }
    #tblDiv th, td {
      border: 1px solid #ddd;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
  <script src="https://js.arcgis.com/4.4/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "dojo/domReady!"
    ], function(
      Map, MapView, FeatureLayer
    ) {

      var map = new Map({
        basemap: "streets-navigation-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [0.46564130, 51.736810],
        zoom: 17
      });

      /********************
       * Add feature layer
       ********************/
      // sampling of breweries
      var featureLayer = new FeatureLayer({
        url: "https://services7.arcgis.com/uE69mPI6U3rpSmCT/arcgis/rest/services/AddressA_csv/FeatureServer/0",
        outFields: ["*"],
        //definitionExpression: "country = 'United States'",

        // add a custom action
        popupTemplate: {
          title: "{Postcode}",
          content: [{
            type: "fields",
            fieldInfos: [{
              fieldName: "Postcode"

            }]
          }],
          actions: [{
            id: "find-brewery",
            image: "beer.png",
            title: "Brewery Info"
          }]
        }
      });

      map.add(featureLayer);


      function showResults(response) {
        var tbl = document.getElementById("tblDiv");
        //clear the table
        tbl.innerHTML = "";
        var header = tbl.createTHead();
        var headerRow = header.insertRow(0);

        var headerCell = headerRow.insertCell(0);
        headerCell.innerHTML = "Name";

        var headerCell2 = headerRow.insertCell(1);
        headerCell2.innerHTML = "Value";

        var tblBody = document.createElement('tbody');
        tbl.appendChild(tblBody);

        var tableRef = tbl.getElementsByTagName('tbody')[0];

        var popup = view.popup;
        var atts = popup.viewModel.selectedFeature.attributes;
        var row, cell, cell2;
        for (var key in atts) {
          if (atts.hasOwnProperty(key)) {
            row = tableRef.insertRow(0);
            cell = row.insertCell(0);
            cell2 = row.insertCell(1);
            cell.innerHTML = key;
            cell2.innerHTML = atts[key];
          }
        }
      }

      view.then(function() {
        var popup = view.popup;
        popup.viewModel.on("trigger-action", function(event) {
          if (event.action.id === "find-brewery") {
            showResults();
          }
        });
      });
    });
  </script>

</head>

<body class="light">
  <div id="viewDiv"></div>
  <table id="tblDiv"></table>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎08-14-2017

Henry,

See if this works for what you are after:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Custom popup actions per feature attribute - 4.4</title>

  <style>
    body {
      font-family: sans-serif;
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    #viewDiv {
      position: absolute;
      right: 300px;
      left: 0;
      top: 0;
      bottom: 0;
    }
    #tblDiv {
      position: absolute;
      right: 0px;
      top: 0;
      bottom: 0;
      width: 300px;
      overflow: auto;
      border-collapse: collapse;
    }
    #tblDiv thead tr {
      background-color: #4CAF50;
      color: white;
    }
    #tblDiv tr:nth-child(even) {
      background-color: #f2f2f2;
    }
    #tblDiv th, td {
      border: 1px solid #ddd;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
  <script src="https://js.arcgis.com/4.4/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "dojo/domReady!"
    ], function(
      Map, MapView, FeatureLayer
    ) {

      var map = new Map({
        basemap: "streets-navigation-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [0.46564130, 51.736810],
        zoom: 17
      });

      /********************
       * Add feature layer
       ********************/
      // sampling of breweries
      var featureLayer = new FeatureLayer({
        url: "https://services7.arcgis.com/uE69mPI6U3rpSmCT/arcgis/rest/services/AddressA_csv/FeatureServer/0",
        outFields: ["*"],
        //definitionExpression: "country = 'United States'",

        // add a custom action
        popupTemplate: {
          title: "{Postcode}",
          content: [{
            type: "fields",
            fieldInfos: [{
              fieldName: "Postcode"

            }]
          }],
          actions: [{
            id: "find-brewery",
            image: "beer.png",
            title: "Brewery Info"
          }]
        }
      });

      map.add(featureLayer);


      function showResults(response) {
        var tbl = document.getElementById("tblDiv");
        //clear the table
        tbl.innerHTML = "";
        var header = tbl.createTHead();
        var headerRow = header.insertRow(0);

        var headerCell = headerRow.insertCell(0);
        headerCell.innerHTML = "Name";

        var headerCell2 = headerRow.insertCell(1);
        headerCell2.innerHTML = "Value";

        var tblBody = document.createElement('tbody');
        tbl.appendChild(tblBody);

        var tableRef = tbl.getElementsByTagName('tbody')[0];

        var popup = view.popup;
        var atts = popup.viewModel.selectedFeature.attributes;
        var row, cell, cell2;
        for (var key in atts) {
          if (atts.hasOwnProperty(key)) {
            row = tableRef.insertRow(0);
            cell = row.insertCell(0);
            cell2 = row.insertCell(1);
            cell.innerHTML = key;
            cell2.innerHTML = atts[key];
          }
        }
      }

      view.then(function() {
        var popup = view.popup;
        popup.viewModel.on("trigger-action", function(event) {
          if (event.action.id === "find-brewery") {
            showResults();
          }
        });
      });
    });
  </script>

</head>

<body class="light">
  <div id="viewDiv"></div>
  <table id="tblDiv"></table>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Henryobaseki · ‎08-15-2017

Thanks Robert Sche. it works. Thank you!