Add a Hyperlink Next to the Zoom In Link in Info Template Window

SarojThapa1 — Sat, 11 Dec 2021 08:44:01 GMT
I am trying to create a Hyperlink next to the Zoom In link in the Pop up Window. The hyperlink should reference to a field called "Comments" in arcsde. What I am trying to achieve here is: When the hyperlink is clicked, I want the "Comments" section to be displayed and be able to edit and save.
How can I create this kind of hyperlink and relate it to the attribute of that field?
Thanks,
<!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></title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">

    <style>
        html, body{
            height: 100%;
            width: 100%;
            margin-top: 10px;
            overflow: hidden;
            padding-bottom: 0;
            margin-bottom: 0;
            margin-left: 0;
            padding-left: 0;
        }

        #map {
            padding-top: 0;
            width: 100%;
            height: 100%;
            padding-bottom: 6px;
            margin-bottom: 0;
            margin-left: 0;
            padding-left: 0;
            margin-top: 0;
        }

        .claro .dijitTooltipContainer {
            background-image: none;
            border:           1px solid #444444;
            background-color: #444444;
            color:            #FFFFFF;
        }

        .claro .dijitTooltipConnector {
            background-image: none;
        }

        .esriPopup .titleButton.maximize {
            display: none;
        }
    </style>

    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
        var map, navToolbar;
        var theme = "Shrooms";

        require([
                "esri/map",
                "esri/dijit/Scalebar",
                "esri/geometry/webMercatorUtils",
                "esri/toolbars/navigation",
                "esri/dijit/Search",
                "esri/layers/FeatureLayer",
                "esri/InfoTemplate",
                "esri/dijit/BasemapGallery",
                "esri/dijit/Legend",
                "esri/layers/ArcGISDynamicMapServiceLayer",
                "esri/layers/ImageParameters",
                "esri/Color",
                "esri/dijit/Popup",
                "esri/dijit/PopupTemplate",
                "esri/dijit/InfoWindow",

                "esri/symbols/SimpleFillSymbol",
                "esri/symbols/SimpleLineSymbol",

                "dojo/on",
                "dojo/dom",
                "dojo/parser",
                "dojo/dom-construct",
                "dojo/dom-class",
                "dojo/query",
                "dojo/number",

                "dijit/registry",
                "dijit/layout/ContentPane",
                "dijit/layout/TabContainer",
                "dojox/charting/Chart2D",
                "dojox/charting/plot2d/Pie",
                "dojox/charting/action2d/Highlight",
                "dojox/charting/action2d/MoveSlice",
                "dojox/charting/action2d/Tooltip",
                "dojox/charting/themes/" + theme,

                "dijit/Toolbar",
                "dijit/form/Button",
                "dijit/TitlePane",
                "dijit/layout/AccordionContainer",
                "dijit/layout/BorderContainer",

                "dojo/domReady!"
            ],
            function (Map, Scalebar, webMercatorUtils, Navigation,Search, FeatureLayer, InfoTemplate, BasemapGallery, Legend, ArcGISDynamicMapServiceLayer,
                      ImageParametrs, Color, Popup, PopupTemplate, InfoWindow, SimpleFillSymbol, SimpleLineSymbol,  on, dom, parser, domConstruct,
                      domClass, query, number, registry, ContentPane, TabContainer, Chart2D, Pie, Highlight, MoveSlice, Tooltip, dojoxTheme) {

                parser.parse();

                // var navToolbar;
                var legendLayers = [];

                /*
                 var sls = new SimpleLineSymbol("solid", new Color("#444444"), 3);
                 var sfs = new SimpleFillSymbol("solid", sls, new Color([68, 68, 68, 0.25]));

                 var popupOptions = {
                 fillSymbol: sfs,
                 marginLeft: "70",
                 marginTop: "100"
                 };
                 //create a popup to replace the map's info window
                 // var popup = new Popup(popupOptions, domConstruct.create("div"));
                 */

                map = new Map("map", {
                    basemap: "topo",
                    center: [-100.405, 37.991],
                    zoom: 5
                    //infoWindow: template
                });

                var scalebar = new Scalebar({
                    map:map,
                    scalebarUnit: "dual"
                });

                map.infoWindow.on("selection-change", function(e){
                    query(".dijitTabContainer", this.domNode).forEach(function(node){
                        var tc = registry.getEnclosingWidget(node);
                        if(tc){
                            tc.selectChild(tc.getChildren()[0]);
                            tc.resize();
                        }
                    });
                });

                var template = new esri.InfoTemplate();
                template.setTitle("<b>${Name}</b>");
                template.setContent(getWindowContent);

                var featureLayer = new FeatureLayer("EndPointsURL/FeatureServer/0", {
                    mode: FeatureLayer.MODE_ONEDEMAND,
                    infoTemplate: template,
                    opacity:0,
                    outFields: ["*"]
                });

                map.addLayer(featureLayer);

                var imageParameters = new ImageParametrs();
                imageParameters.format = "jpeg";

                var dynamicLayer = new ArcGISDynamicMapServiceLayer("EndPointsURL/MapServer", {
                    id: 'Names',
                    "imageParameters": imageParameters,
                    mode: FeatureLayer.MODE_ONEDEMAND,
                    infoTemplate: template,
                    outFields: ["*"]
                });

                map.on('layers-add-result', function () {
                    var legend = new Legend({
                        map: map,
                        layerInfos: legendLayers
                    }, "legendDiv");
                    legend.startup();
                });
                legendLayers.push({ layer: dynamicLayer, title: "Name" });
                map.addLayers([dynamicLayer]);

                function getWindowContent(graphic) {
                    // Make a tab container.
                    var tc = new TabContainer({
                        style: "overflow-y:hidden;",
                        doLayout: false
                    }, domConstruct.create("div"));
                    tc.startup();

                    // Display attribute information.
                    var cp1 = new ContentPane({
                        title: "Collection"
                    });
                    // tc.addChild(cp1);

                    var c1 = domConstruct.create("div",{
                        id: "Collection"
                    }, domConstruct.create("div"));
                    var chart1 = new Chart2D(c1);
                    domClass.add(chart1, "chart1");

                    chart1.setTheme(dojoxTheme);
                    chart1.addPlot("default", {
                        type: "Pie",
                        radius: 70,
                        htmlLabels: true,
                        labelOffset: 31
                    });

                    tc.watch("selectedChildWidget", function(name, oldVal, newVal) {
                        if (newVal.title === "Collection") {
                            chart1.resize(210, 150);
                        }
                    });

                    // Calculate percent complete/ incomplete.
                    var total1 = 100;
                    var complete_collection =  number.round(graphic.attributes.Data_Collection);
                    var incomplete_collection = total1 - complete_collection;
                    chart1.addSeries("% Complete", [{
                        y: incomplete_collection,
                        tooltip: incomplete_collection,
                        text: "% Incomplete"
                        // color: "red"
                    }, {

                        y: complete_collection,
                        tooltip: complete_collection,
                        text: "% Complete"
                        //color: "green"
                    }]);
                    //highlight the chart and display tooltips when you mouse over a slice.
                    new Highlight(chart1, "default");
                    new Tooltip(chart1, "default");
                    new MoveSlice(chart1, "default");

                    cp1.set("content", chart1.node);

                    var cp3 = new ContentPane({
                        title: "Info",
                        content: "<b>Name:</b>" + graphic.attributes.Name +
                        "</br></br><b>Code:</b>" + graphic.attributes.Code +
                        "</br></br><b>Account:</b>" + graphic.attributes.Account +
                        "</br></br><b>Account Sub:</b>" + graphic.attributes.Account_Sub +
                        "</br></br><b>Comments:</b>" + graphic.attributes.Add_Notes
                    });


                    tc.addChild(cp1);
                    tc.addChild(cp3);
                    tc.selectChild(cp1);

                    return tc.domNode;
                }

            });
    </script>
</head>

<body class="claro" >

<div id="content" data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 98%; margin: 0;">

    <div id="rightPane"
         data-dojo-type="dijit/layout/ContentPane"
         data-dojo-props="region:'right'">

        <div data-dojo-type="dijit/layout/AccordionContainer">
            <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
                 data-dojo-props="title:'Legend', selected:true">

                <div id="legendDiv"></div>

            </div>

            <span>Loading...</span>

        </div>
    </div>

    <div id="map"
         data-dojo-type="dijit/layout/ContentPane"
         data-dojo-props="region:'center'"
         style="overflow:hidden;">
        <span id="info" style="position:absolute; right:15px; bottom:50px; color:#000; z-index:50;"></span>
    </div>

</div>




</body>
</html>
Re: Add a Hyperlink Next to the Zoom In Link in Info Template Window

KellyHutchins — Tue, 03 Jan 2017 21:28:07 GMT
The 'Geoprocessing tool link in a popup' sample shows how to add a custom link next to the zoom tool.
Geoprocessing tool link in popup | ArcGIS API for JavaScript 3.19
topic Re: Add a Hyperlink Next to the Zoom In Link in Info Template Window in ArcGIS JavaScript Maps SDK Questions

Add a Hyperlink Next to the Zoom In Link in Info Template Window

Re: Add a Hyperlink Next to the Zoom In Link in Info Template Window
