topic popup action parse selected attribution as Jsonor Table Div in ArcGIS JavaScript Maps SDK Questions

popup action parse selected attribution as Jsonor Table Div

Henryobaseki — Sun, 13 Aug 2017 23:46:24 GMT

Hi All

Got the sample code from the link below

https://developers.arcgis.com/javascript/latest/sample-code/popup-custom-action/index.html

I have modified the attribute table to fit to my attribute table.

so from the sample if you click on the bewrey info, instead of linking to a website.

I want to Location attribute to be return as a table or json.

see the code below. I have set var info to get the LOCATION. How do I parse it so it shows as as a json format or table?

<!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://services1.arcgis.com/BZNs0xaSHDSi4V6G/arcgis/rest/services/Esri_carparks/FeatureServer/0",
        outFields: ["*"],
       // definitionExpression: "country = 'United States'",

        // add a custom action
        popupTemplate: {
          title: "{name}",
          content: [{
            type: "fields",
            fieldInfos: [{
              fieldName: "LOCATION"
            }, {
              fieldName: "address1",
              label: "address"
            }, {
              fieldName: "city"
            }, {
            fieldName: "state"
            }, {
              fieldName: "phone"
            }, {
              fieldName: "website"
            }]
          }],
          actions: [{
            id: "find-ADDRESS",
            image: "beer.png",
            title: "Brewery Info"
          }]
        }
      });

      map.add(featureLayer);

    
 var resultsTable = dom.byId("tbl");

        function showResults(response) {

          var results = response.results;

  // Clear the cells and rows of the table to make room for new results
        resultsTable.innerHTML = "";
        if (results.length === 0) {
          resultsTable.innerHTML = "<i>No results found</i>";
          loadingImg.style.visibility = "hidden";
          return;
        }
      }
      view.then(function() {
        var popup = view.popup;
        popup.viewModel.on("trigger-action", function(event) {
          if (event.action.id === "find-ADDRESS") {
            var attributes = popup.viewModel.selectedFeature.attributes;
            // Get the "website" field attribute
            var info = attributes.LOCATION;
            // 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
              //CELL.open(info.trim());
                showResults();
              // If the "website" value is null, open a new window and Google search the name of the brewery
            }
          }
        });
      });
    });
  </script>

</head>

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

</html>

Re: popup action parse selected attribution as Jsonor Table Div

RobertScheitlin__GISP — Sun, 12 Dec 2021 00:08:04 GMT

Henry,

Here is your code returning the location attribute to the console and some comments:

<!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/dom",
      "dojo/domReady!"
    ], function(
      Map, MapView, FeatureLayer, dom
    ) {

      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://services1.arcgis.com/BZNs0xaSHDSi4V6G/arcgis/rest/services/Esri_carparks/FeatureServer/0",
        outFields: ["*"],
        // definitionExpression: "country = 'United States'",

        // add a custom action
        popupTemplate: {
          title: "{name}",
          content: [{
            type: "fields",
            fieldInfos: [{
              fieldName: "LOCATION",
              label: "Location"
            }, {
              fieldName: "NO_SPACES",
              label: "No Spaces"
            }, {
              fieldName: "SATURDAY",
              label: "Saturday"
            }, {
              fieldName: "WHO_OWNS",
              label: "Owner"
            }, {
              fieldName: "USE_TIME",
              label: "Use Time"
            }, {
              fieldName: "USE_TYPE",
              label: "Use Type"
            }]
          }],
          actions: [{
            id: "find-ADDRESS",
            title: "Parking Info"
          }]
        }
      });

      map.add(featureLayer);
//you do not have a html element with id of tbl.
      // var resultsTable = dom.byId("tbl");

      function showResults(response) {

        // var results = response.results;

        // Clear the cells and rows of the table to make room for new results
        // resultsTable.innerHTML = "";
        // if (results.length === 0) {
        //   resultsTable.innerHTML = "<i>No results found</i>";
        //   loadingImg.style.visibility = "hidden";
        //   return;
        // }
        console.info(response);
      }

      view.then(function() {
        var popup = view.popup;
        popup.viewModel.on("trigger-action", function(event) {
          if (event.action.id === "find-ADDRESS") {
            var attributes = popup.viewModel.selectedFeature.attributes;
            // Get the "website" field attribute
            var info = attributes.LOCATION;
            // 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
              //CELL.open(info.trim());
              showResults(info.trim());
              // If the "website" value is null, open a new window and Google search the name of the brewery
            }
          }
        });
      });
    });
  </script>

</head>

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

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

Re: popup action parse selected attribution as Jsonor Table Div

Henryobaseki — Mon, 14 Aug 2017 16:21:38 GMT

Thanks Robert Scheitlin. Will the console get the attribution as html table or a text string?

Re: popup action parse selected attribution as Jsonor Table Div

RobertScheitlin__GISP — Mon, 14 Aug 2017 19:06:30 GMT

Henry,

Just a text string.

Re: popup action parse selected attribution as Jsonor Table Div

Henryobaseki — Mon, 14 Aug 2017 19:12:59 GMT

I want to be able to see this text string in a table next to the mapview, how do I do this. I thought the tablediv will be useful

Re: popup action parse selected attribution as Jsonor Table Div

Henryobaseki — Mon, 14 Aug 2017 19:26:08 GMT

how do will the text string be played as a html or table div

Re: popup action parse selected attribution as Jsonor Table Div

RobertScheitlin__GISP — Mon, 14 Aug 2017 19:39:48 GMT

Henry,

You will have to have a table in your layout and then use domConstruct to dynamically add rows to that table. You can't just say return me an html table.

Re: popup action parse selected attribution as Jsonor Table Div

Henryobaseki — Mon, 14 Aug 2017 20:02:23 GMT

Alright thank you

Re: popup action parse selected attribution as Jsonor Table Div

RobertScheitlin__GISP — Mon, 14 Aug 2017 20:08:42 GMT

Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.