Populate span control on popup

dubya

Hi, I have been trying to populate a span control with a field from the popup.  This span control is located outside of the popup template and map view ... any pointers on how to do this? Best

dubya

i am trying to pass a field from popup to the span or asp control ... hopefully posted code will help? thanks

<%@ Page Language="C#" MasterPageFile="~/Main.master" AutoEventWireup="true" CodeFile="InstreamMap.aspx.cs" Inherits="ModelData_InstreamFlows_InstreamMap" %>

<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">

<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
<link rel="stylesheet" type="text/css" href="../../Content/MapPages.css" />
<script src="https://js.arcgis.com/4.18/"></script>

<script>
require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/layers/support/LabelClass",
"esri/layers/FeatureLayer",
"esri/widgets/BasemapToggle"
], function (esriConfig, Map, MapView, infloLabel, FeatureLayer, BasemapToggle ) {

//Set api key
esriConfig.apiKey = "keyhere";

//Create map
const map = new Map({
basemap: "arcgis-topographic" // Basemap layer (eg. arcgis-topographic, hybrid)
});

//Create view
const view = new MapView({
map: map,
center: [-120.478851, 38.575764],
zoom: 7,
container: "mapDiv",
constraints: {
snapToZoom: false
}
});

//Create label
const inflowLabel = { // autocasts as new LabelClass()
symbol: {
type: "text", // autocasts as new TextSymbol()
color: "#00008B",
font: { // autocast as new Font()
family: "Segoe UI",
size: 10,
}
},

labelPlacement: "above-right",
labelExpressionInfo: {
expression: "$feature.PointName"
},

maxScale: 0,
minScale: 25000000
};

//Create popup template
const inflowPopup = {
// autocasts as new PopupTemplate()
title: "{PointName}",
content: [
{
// It is also possible to set the fieldInfos outside of the content
// directly in the popupTemplate. If no fieldInfos is specifically set
// in the content, it defaults to whatever may be set within the popupTemplate.
type: "fields",
fieldInfos: [
{
fieldName: "PointID",
label: "ID:"
},

{
fieldName: "DataSource",
label: "Data Source:",
format: {
digitSeparator: true,
places: 0
}
},

{
fieldName: "DataType",
label: "Data Type:",
format: {
digitSeparator: true,
places: 0
}
},

{
fieldName: "RefDate",
label: "Reference Date:",
format: {
digitSeparator: true,
places: 0
}
},

{
fieldName: "EditedDate",
label: "Edited Date:",
format: {
digitSeparator: true,
places: 0
}
}
]
}
]
};

//Create/add basemap toggle
//const toggle = new BasemapToggle({
// view: view, // view that provides access to the map's 'arcgis-topographic' basemap
// nextBasemap: "hybrid" // allows for toggling to the 'hybrid' basemap
//});
//view.ui.add(toggle, "top-right");

const inflowRenderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
size: 6,
color: [230, 149, 0],
outline: null
}
};

//Create feature layer
var featureLayer = new FeatureLayer({
url:
"https://gis.water.ca.gov/arcgis/rest/services/InlandWaters/i12_CalSimII_InflowData/FeatureServer?f=pjson",
renderer: inflowRenderer,
popupTemplate: inflowPopup,
labelingInfo: [inflowLabel]
})
map.add(featureLayer);
});
</script>

<dx:ASPxCallbackPanel ID="ChartCallbackPanel" ClientInstanceName="CallbackPanel"
OnInit="CallbackPanel_Init"
runat="server">
<SettingsLoadingPanel Enabled="true" />
<PanelCollection>
<dx:PanelContent>
<dx:ASPxPanel id="panel1" runat="server" >
<PanelCollection>
<dx:PanelContent runat="server">

<div>
<div class="left-map-div">
<div id="mapDiv" class="map-view"></div>
</div>

<div class="right-charts-div">

/////////// Pass field Point ID from popup to span or asp server control ///////////////
<span id="pointID"></span>
<asp:Label ID="pointID" runat="server"></asp:Label>
////////////////////////////////////////////////////////////////////////////////////////

</div>

<div style="clear:both"></div>
</div>

</dx:PanelContent>
</PanelCollection>
</dx:ASPxPanel>
</dx:PanelContent>
</PanelCollection>
</dx:ASPxCallbackPanel>

</asp:Content>