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>
