Rajni,
Look at a sample like this as a starting point to get a side panel.
https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-featur...
Change it, something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>
<title>Side panel - 4.14</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.14/"></script>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#viewDiv {
float: left;
padding: 0;
margin: 0;
height: 100%;
width: 70%;
}
#side-node {
float: left;
width: 30%;
height: 100%;
padding: 1em;
}
</style>
<script>
require([
"esri/WebMap",
"esri/layers/FeatureLayer",
"esri/views/MapView"
], function(WebMap, FeatureLayer, MapView) {
const fLayer = new FeatureLayer({
portalItem: {
id: "f430d25bf03744edbb1579e18c4bf6b8"
},
layerId: 2,
outFields: ["*"]
});
const map = new WebMap({
portalItem: {
id: "372b7caa8fe340b0a6300df93ef18a7e"
},
layers: [fLayer]
});
const Btn1 = document.getElementById("btn1");
const Btn2 = document.getElementById("btn2");
const view = new MapView({
container: "viewDiv",
map: map,
center: [-74, 41.5],
zoom: 11,
popup: {
autoOpenEnabled: false
}
});
view.when().then(function() {
Btn1.addEventListener("click", function() {
alert("Button 1 clicked")
});
Btn2.addEventListener("click", function() {
alert("Button 2 clicked")
});
});
});
</script>
</head>
<body>
<div id="side-node" class="esri-widget">
<button id="btn1" class="esri-button">Button 1</button><br />
<button id="btn2" class="esri-button">Button 2</button>
</div>
<div id="viewDiv"></div>
</body>
</html>
