tabs inside a popup using v4.12 ?

GISTeam2 — Thu, 29 Aug 2019 13:28:09 GMT

Hello,

Does anyone know of a java script v4.12 sample, or created something similar themselves, which is the v4.12 equivalent of the 3.x https://developers.arcgis.com/javascript/3/samples/find_drilldown/ ?

The sample above displays tabs inside a 3.x info window, making use of the dojo claro theme.

I have managed to create something similar using the v4.12 javascript api, but only by using the claro theme styling from v3.x, which i'm sure is not a good idea. What I have done works fine until I go a little beyond the above sample and try to change the title of one of the content panes inside the tab container programmatically. When I do this , the tabs disappear (when I press F12 to check for errors, the tabs reappear!). As I say, if I don't try to change the content pane title, it works fine, in the same way as the above example.

From what I have read I realise I probably shouldn't be using a claro theme to implement tabs with v4.12 (they seem to have disappeared), but this version is still based on dojo and claro is a dojo theme? The v4.12 documentation seems to suggest using third party libraries to implement tabs.

Thanks

Re: tabs inside a popup using v4.12 ?

GISTeam2 — Thu, 29 Aug 2019 14:11:52 GMT

PS sorry I should have been clearer:

(they seem to have disappeared) - I meant that dojo themes (claro, tundra etc) seem to have disappeared in v4.12 ?

Also, I should have added that I am able to change the content panes content programmatically, it's just when I try to change the content panes title that the tabs disappear.

What I'm really asking is an example of how the tabbed info window content 3.x sample should be implemented in v4.12 without using v3.x themes.?

Re: tabs inside a popup using v4.12 ?

RobertScheitlin__GISP — Fri, 10 Dec 2021 20:28:48 GMT

GIS Team,

Here is that 3.x sample converted to 4.12:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Identify Sample</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.12/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css">
  <style>
    html,
    body {
      height: 98%;
      width: 98%;
      margin: 0;
      padding: 5px;
    }
  </style>

  <script src="https://js.arcgis.com/4.12/"></script>
  <script>
    var view, bldgResults, parcelResults, symbol;

    require([
        "esri/config",
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/MapImageLayer",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/tasks/IdentifyTask",
        "esri/tasks/support/IdentifyParameters",
        "dojo/on",
        "dojo/parser",
        "esri/Color",
        "dijit/registry",
        "dijit/form/Button",
        "dijit/layout/ContentPane",
        "dijit/layout/TabContainer",
        "dojo/domReady!"
      ],
      function (
        esriConfig, Map, MapView, MapImageLayer, SimpleFillSymbol, SimpleLineSymbol,
        IdentifyTask, IdentifyParameters, on, parser, Color, registry
      ) {
        esriConfig.request.proxyUrl = "proxy/proxy.ashx";
        parser.parse();

        var identifyTask, identifyParams;

        map = new Map({
          basemap: "streets"
        });

        view = new MapView({
          container: "mapDiv",
          map: map,
          center: [-83.275, 42.573],
          zoom: 18,
        });
        view.when(initFunctionality);

        var landBaseLayer = new MapImageLayer({
          url: "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer", 
          opacity: 0.2
        });

        view.popup.watch("visible", function (evt) {
          if(evt){
            registry.byId("tabs").resize();
          }
        });
        map.add(landBaseLayer);

        function initFunctionality() {
          view.on("click", doIdentify);

          identifyTask = new IdentifyTask({
            url: "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer"
          });

          identifyParams = new IdentifyParameters();
          identifyParams.tolerance = 3;
          identifyParams.returnGeometry = true;
          identifyParams.layerIds = [0, 2];
          identifyParams.layerOption = "all";
          identifyParams.width = view.width;
          identifyParams.height = view.height;

          //view.popup.resize(415, 200);
          view.popup.content = registry.byId("tabs").domNode;
          view.popup.title ="Identify Results";

          symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
              new Color([255, 0, 0]), 2),
            new Color([255, 255, 0, 0.25]));
        }

        function doIdentify(event) {
          var tabs = document.getElementById("tabs");
          tabs.style.top = "";
          tabs.style.left = "";
          tabs.style.position = "";
          view.graphics.removeAll();
          identifyParams.geometry = event.mapPoint;
          identifyParams.mapExtent = view.extent;
          identifyTask.execute(identifyParams).then(function (idResults) {
            addToMap(idResults, event);
          });
        }

        function addToMap(idResults, event) {
          bldgResults = {
            displayFieldName: null,
            features: []
          };
          parcelResults = {
            displayFieldName: null,
            features: []
          };

          for (var i = 0, il = idResults.results.length; i < il; i++) {
            var idResult = idResults.results[i];
            if (idResult.layerId === 0) {
              if (!bldgResults.displayFieldName) {
                bldgResults.displayFieldName = idResult.displayFieldName;
              }
              bldgResults.features.push(idResult.feature);
            } else if (idResult.layerId === 2) {
              if (!parcelResults.displayFieldName) {
                parcelResults.displayFieldName = idResult.displayFieldName;
              }
              parcelResults.features.push(idResult.feature);
            }
          }
          registry.byId("bldgTab").set("content", buildingResultTabContent(bldgResults));
          registry.byId("parcelTab").set("content", parcelResultTabContent(parcelResults));

          view.popup.open({
            location: event.mapPoint
          });
        }

        function buildingResultTabContent(results) {
          var template = "";
          var features = results.features;

          template += "<i>Total features returned: " + features.length + "</i>";
          template += "<table border='1'>";
          template += "<tr><th>ID</th><th>Address</th></tr>";

          var parcelId;
          var fullSiteAddress;
          for (var i = 0, il = features.length; i < il; i++) {
            parcelId = features[i].attributes['PARCELID'];
            fullSiteAddress = features[i].attributes['Full Site Address'];

            template += "<tr>";
            template += "<td>" + parcelId + " <a href='#' onclick='showFeature(bldgResults.features[" + i +
              "]); return false;'>(show)</a></td>";
            template += "<td>" + fullSiteAddress + "</td>";
            template += "</tr>";
          }

          template += "</table>";

          return template;
        }

        function parcelResultTabContent(results) {
          var template = "";
          var features = results.features;

          template = "<i>Total features returned: " + features.length + "</i>";
          template += "<table border='1'>";
          template += "<tr><th>ID</th><th>Year Built</th><th>School District</th><th>Description</th></tr>";

          var parcelIdNumber;
          var residentialYearBuilt;
          var schoolDistrictDescription;
          var propertyDescription;
          for (var i = 0, il = features.length; i < il; i++) {
            parcelIdNumber = features[i].attributes['Parcel Identification Number'];
            residentialYearBuilt = features[i].attributes['Residential Year Built'];
            schoolDistrictDescription = features[i].attributes['School District Description'];
            propertyDescription = features[i].attributes['Property Description'];

            template += "<tr>";
            template += "<td>" + parcelIdNumber + " <a href='#' onclick='showFeature(parcelResults.features[" + i +
              "]); return false;'>(show)</a></td>";
            template += "<td>" + residentialYearBuilt + "</td>";
            template += "<td>" + schoolDistrictDescription + "</td>";
            template += "<td>" + propertyDescription + "</td>";
            template += "</tr>";
          }

          template += "</table>";

          return template;
        }
      });

    function showFeature(feature) {
      view.graphics.removeAll();
      feature.symbol = symbol;
      view.graphics.add(feature);
    }
  </script>
</head>

<body class="claro">
  Click the map to identify building and tax information.
  <div id="mapDiv" style="width:800px; height:600px; border:1px solid #000;">
    <div id="tabs" dojoType="dijit/layout/TabContainer" style="width:385px; height:150px; position: absolute; top:-1000px; left:-1000px;">
      <div id="bldgTab" dojoType="dijit/layout/ContentPane" title="Buildings"></div>
      <div id="parcelTab" dojoType="dijit/layout/ContentPane" title="Tax Parcels"></div>
    </div>
  </div>

  
</body>

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

Re: tabs inside a popup using v4.12 ?

GISTeam2 — Fri, 30 Aug 2019 16:16:44 GMT

Thank you Robert, I hadn't realised that v4.12 does include it's own claro style sheet.

topic Re: tabs inside a popup using v4.12 ? in ArcGIS JavaScript Maps SDK Questions

tabs inside a popup using v4.12 ?

Re: tabs inside a popup using v4.12 ?

Re: tabs inside a popup using v4.12 ?

Re: tabs inside a popup using v4.12 ?