I've been primarily looking at this sample for guidance:
Feature widget in a side panel | ArcGIS API for JavaScript 4.16
I'd like to add the {Description} field from this feature layer as the new graphic in the feature widget. But, instead of putting it in the side panel as the sample shows, I have it in the "sidebar" div. How do I put the {Description} field into the "sidebar", and keep the following fields from my popup template in the popup?
//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
}
]
}
]
};
This is as far as I got in the sample sandbox:
<!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 {
padding: 0;
margin: 0;
height: 100%;
width: 60%;
}
#sidebar {
z-index: 99;
position: absolute;
top: 0;
right: 0;
height: 100%;
background: rgba(0, 0, 0, 0.5);
width: 380px;
}
</style>
<script>
require([
"esri/WebMap",
"esri/layers/FeatureLayer",
"esri/views/MapView",
"esri/widgets/Feature"
], function (WebMap, FeatureLayer, MapView, Feature) {
const fLayer = new FeatureLayer({
portalItem: {
id: "b5665da3feab4b6091914cbfe4ab028f"
},
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 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>
Solved! Go to Solution.
The solution I went with was:
//1.) use template for flayer,
const fLayer = new FeatureLayer({
portalItem: {
id: "b5665da3feab4b6091914cbfe4ab028f"
},
popupTemplate: template, // <- template for popup
layerId: 0,
outFields: ["*"]
});
//2.) Once the feature is selected and you obtain it, set it template2,
if (result) {
feature.graphic = result.graphic.clone(); // <- clone it to avoid mutation
feature.graphic.popupTemplate = template2; // <- template2 for feature widget
highlight = layerView.highlight(result.graphic);
} else {
feature.graphic = graphic;
}
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>
The solution I went with was:
//1.) use template for flayer,
const fLayer = new FeatureLayer({
portalItem: {
id: "b5665da3feab4b6091914cbfe4ab028f"
},
popupTemplate: template, // <- template for popup
layerId: 0,
outFields: ["*"]
});
//2.) Once the feature is selected and you obtain it, set it template2,
if (result) {
feature.graphic = result.graphic.clone(); // <- clone it to avoid mutation
feature.graphic.popupTemplate = template2; // <- template2 for feature widget
highlight = layerView.highlight(result.graphic);
} else {
feature.graphic = graphic;
}