Put text element from popup template into feature widget?
1 Solution
Accepted Solutions
UPDATE:
I was able to include my popup template in the sample. But, how do I get the Description text element (green text) to appear in the "sidebar" only? In other words, I want the table in the popup and the Description in the "sidebar".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>
<title>
Feature widget in a side panel | Sample | ArcGIS API for JavaScript 4.16
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.16/"></script>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#viewDiv {
float: left;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#sidebar {
z-index: 99;
position: absolute;
top: 0;
right: 0;
height: 100%;
background: rgba(0, 0, 0, 0.5);
width: 380px;
}
.esri-widget {
color: white;
font-size: 14px;
font-family: "Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 1.3em;
}
</style>
<script>
require([
"esri/WebMap",
"esri/layers/FeatureLayer",
"esri/views/MapView",
"esri/widgets/Feature"
], function (WebMap, FeatureLayer, MapView, Feature) {
//popup template
var template = {
//autocasts the new template
title: "<font size='2.75px'><b>{USER_Name}</b>",
content: [
{
// You can also set a descriptive text element
type: "text", // TextContentElement
text: "<font color='#1c9c52'><b>{Description}</b>"
},
{
//set content elements in the order to display
type: "fields",
fieldInfos: [
{
fieldName: "USER_Addre",
label: "Address",
visible: true
},
{
fieldName: "USER_City",
label: "City",
visible: true
},
{
fieldName: "USER_Zip",
label: "Zip Code",
visible: true
},
{
fieldName: "USER_Phone",
label: " Phone",
visible: true
},
{
fieldName: "USER_Link",
label: "Website",
visible: true
},
{
fieldName: "USER_Notes",
label: "Extra Notes",
visible: true
}
]
}
]
};
const fLayer = new FeatureLayer({
portalItem: {
id: "b5665da3feab4b6091914cbfe4ab028f"
},
popupTemplate: template,
layerId: 0,
outFields: ["*"]
});
const map = new WebMap({
basemap: "dark-gray",
layers: [fLayer]
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-88.7, 41.8],
zoom: 8.7,
popup: {
autoOpenEnabled: true
}
});
view.when().then(function () {
// Create a default graphic for when the application starts
const graphic = {
popupTemplate: {
content: "To change search from Item to Category, make sure Search by Item dropdown is set to 'Select One'. Businesses should note that they will find more appropriate listings if they check Business under the search box."
}
};
// Provide a graphic to a new instance of a Feature widget
const feature = new Feature({
container: "sidebar",
graphic: graphic,
map: view.map,
spatialReference: view.spatialReference
});
view.whenLayerView(fLayer).then(function (layerView) {
let highlight;
// listen for the pointer-move event on the View
view.on("click", function (event) {
// Perform a hitTest on the View
view.hitTest(event).then(function (event) {
// Make sure graphic has a popupTemplate
let results = event.results.filter(function (result) {
return result.graphic.layer.popupTemplate;
});
let result = results[0];
highlight && highlight.remove();
// Update the graphic of the Feature widget
// on pointer-move with the result
if (result) {
feature.graphic = result.graphic;
highlight = layerView.highlight(result.graphic);
} else {
feature.graphic = graphic;
}
});
});
});
});
});
</script>
</head>
<body>
<div id="sidebar" class="esri-widget"></div>
<div id="viewDiv"></div>
</body>
</html>
