AnsweredAssumed Answered

Parse popup action to TableDIV

Question asked by Henseki on Aug 14, 2017
Latest reply on Aug 15, 2017 by Henseki

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({
        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>

Outcomes