How to add Clear Prints button in Print widget 4.13

235
2
Jump to solution
11-16-2019 10:50 PM
ImtiyazPasha
New Contributor III

I am trying to add "Clear or delete" button beside every print item and also one "Clear Prints" button at the end to clear all prints in Print widget 4.13 of below sample code, please help me.

Print widget | ArcGIS API for JavaScript 4.13 

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Imtiyaz,

   Here is a sample for that:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>
<title>Print widget - 4.13</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.13/esri/themes/light/main.css"
/>

<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
</style>

<script src="https://js.arcgis.com/4.13/"></script>
<script>
require([
"esri/views/MapView",
"esri/widgets/Print",
"esri/WebMap"
], function(MapView, Print, WebMap) {
var webmap = new WebMap({
portalItem: {
// autocasts as new PortalItem()
id: "d6d830a7184f4971b8a2f42cd774d9a7"
}
});

var view = new MapView({
container: "viewDiv",
map: webmap
});

view.when(function() {
var print = new Print({
view: view,
// specify your own print service
printServiceUrl:
"https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
});

// Add widget to the top right corner of the view
view.ui.add(print, "top-right");

print.viewModel.watch('state', function(state){
if(state === 'ready'){
setTimeout(() => {
var button = document.createElement('button');
button.setAttribute('ID', 'btnClearPrints');
button.innerText = 'Clear Prints...';
button.className = 'esri-button';
button.addEventListener('click', clearPrints);
var pc = document.getElementsByClassName('esri-print__container')[0]
pc.appendChild(button);
}, 500);
}
});

function clearPrints(){
var prints = document.getElementsByClassName('esri-print__exported-file')
while (prints.length > 0) prints[0].remove();
}
});
});
</script>
</head>

<body class="calcite">
<div id="viewDiv"></div>
</body>
</html>

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Imtiyaz,

   Here is a sample for that:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>
<title>Print widget - 4.13</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.13/esri/themes/light/main.css"
/>

<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
</style>

<script src="https://js.arcgis.com/4.13/"></script>
<script>
require([
"esri/views/MapView",
"esri/widgets/Print",
"esri/WebMap"
], function(MapView, Print, WebMap) {
var webmap = new WebMap({
portalItem: {
// autocasts as new PortalItem()
id: "d6d830a7184f4971b8a2f42cd774d9a7"
}
});

var view = new MapView({
container: "viewDiv",
map: webmap
});

view.when(function() {
var print = new Print({
view: view,
// specify your own print service
printServiceUrl:
"https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
});

// Add widget to the top right corner of the view
view.ui.add(print, "top-right");

print.viewModel.watch('state', function(state){
if(state === 'ready'){
setTimeout(() => {
var button = document.createElement('button');
button.setAttribute('ID', 'btnClearPrints');
button.innerText = 'Clear Prints...';
button.className = 'esri-button';
button.addEventListener('click', clearPrints);
var pc = document.getElementsByClassName('esri-print__container')[0]
pc.appendChild(button);
}, 500);
}
});

function clearPrints(){
var prints = document.getElementsByClassName('esri-print__exported-file')
while (prints.length > 0) prints[0].remove();
}
});
});
</script>
</head>

<body class="calcite">
<div id="viewDiv"></div>
</body>
</html>

View solution in original post

ImtiyazPasha
New Contributor III

Thanks a lot.

0 Kudos