How do I remove the print_button after the printing has completed?

ChrisSergent — Wed, 26 Nov 2014 20:20:13 GMT

I have extended my print widget so that I can enter a title, choose the layout and format, by creating a second button to input these values prior to clicking on print. How do I remove the print_button after the printing has completed? I tried writing a printer on complete function, but it did not work.

<!DOCTYPE html>

<html>

<head>

<title>Print a Map</title>

<style>

html, body, #mapDiv

{

padding:0;

margin:0;

height:100%;

width:100%;

position:absolute;

z-index:0;

}

/* Printer CSS Begin */

h3 { margin: 0 0 5px 0;

border-bottom: 1px solid #444;

padding: 0 0 5px 0;

text-align: center;

}

.shadow

{

-moz-box-shadow: 0 0 5px #888;

-webkit-box-shadow: 0 0 5px #888;

box-shadow: 0 0 5px #888;

}

#feedback

{

background: #fff;

border: 2px solid #666;

border-radius: 5px;

bottom: 20px;

color: #666;

font-family: arial;

height: auto;

left: 20px;

margin: 5px;

padding: 10px;

position: absolute;

width: 300px;

z-index: 40;

visibility:hidden;

}

#feedback a

{

border-bottom: 1px solid #888;

color: #666;

text-decoration: none;

}

#feedback a:hover, #feedback a:active, #feedback a:visited {

border: none;

color: #666;

text-decoration: none;

}

#note

{

padding: 0 0 10px 0;

}

#info, #information

{

padding: 10px 0 0 0;

}

/* Printer CSS End */

#showTools

{

height:20px;

width:20px;

position:absolute;

top:200px;

left:20px;

z-index:50;

padding:5px 6px 5px 6px;

background-color:#f9f8f8;

border-radius:5px;

visibility:visible;

}

#hideTools

{

height:20px;

width:20px;

position:absolute;

top:200px;

left:20px;

z-index:50;

padding:5px 6px 5px 6px;

background-color:#f9f8f8;

border-radius:5px;

visibility:hidden;

}

#printer

{

height:20px;

width:20px;

position:absolute;

top:240px;

left:20px;

z-index:50;

padding:5px 6px 5px 6px;

background-color:#f9f8f8;

border-radius:5px;

visibility:hidden;

}

</style>

var app = {};

require(["esri/map", "esri/config",

"esri/dijit/Print",

"esri/geometry/Extent",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/layers/ArcGISTiledMapServiceLayer",

"esri/layers/FeatureLayer",

"esri/tasks/GeometryService",

"esri/tasks/PrintTemplate",

"dojo/_base/array",

"dojo/dom",

"dojo/on",

"dojo/parser",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dojo/domReady!"], function (Map, esriConfig, Print, Extent,

ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer,

FeatureLayer, GeometryService, PrintTemplate, arrayUtils, dom, on, parser

) {

parser.parse();

/* The proxy comes before all references to web services */

/* Files required for security are proxy.config, web.config and proxy.ashx

- set security in Manager to Private, available to selected users and select Allow access to all users who are logged in

(Roles are not required)

The proxy section is defined on the ESRI sample. I have included it as

part of the documentation reads that the measuring will not work.

I thought that might be important.

// Proxy Definition Begin

//identify proxy page to use if the toJson payload to the geometry service is greater than 2000 characters.

//If this null or not available the project and lengths operation will not work.

// Otherwise it will do a http post to the proxy.

esriConfig.defaults.io.proxyUrl = "proxy.ashx";

esriConfig.defaults.io.alwaysUseProxy = false;

// Proxy Definition End

// set custom extent

var initialExtent = new Extent({

"xmin": 777229.03,

"ymin": 1133467.92,

"xmax": 848340.14,

"ymax": 1185634.58,

"spatialReference": {

"wkid": 3435

}

});

// create map and set slider style to small

var map = new Map("mapDiv", {

showAttribution: false,

sliderStyle: "small",

extent: initialExtent

});

// add imagery

var tiled = new ArcGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");

map.addLayer(tiled);

// set operational layers

var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { "opacity": 0.5 });

// add operational layers

map.addLayer(operationalLayer);

// add point feature layer

var pointFeatureLayer = new FeatureLayer("http://maps.decaturil.gov/arcgis/rest/services/Test/FeatureServer/0");

map.addLayer(pointFeatureLayer);

// declare geometry service

esriConfig.defaults.geometryService = new GeometryService("http://maps.decaturil.gov/arcgis/rest/services/Utilities/Geometry/GeometryServer");

// begin print widget

app.printUrl = "http://maps.decaturil.gov/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";

function createPrintDijit(printTitle) {

var layoutTemplate, templateNames, mapOnlyIndex, templates;

// create an array of objects that will be used to create print templates

var layouts = [{

//name: "Letter ANSI A Landscape",

label: "Landscape (PDF)",

//format: "pdf",

options: {

legendLayers: [], // empty array means no legend

scalebarUnit: "Miles",

titleText: printTitle

}

}];

// create print templates

var templates = arrayUtils.map(layouts, function (lo) {

var t = new PrintTemplate();

t.layout = document.getElementById("printLayoutId").value;

t.label = lo.label;

t.format = document.getElementById("printFormatId").value;

t.layoutOptions = lo.options;

return t;

});

app.printer = new Print({

map: map,

templates: templates,

url: app.printUrl

}, dom.byId("print_button"));

}

// end of print widget

// Hides print button

app.printer.on('print-complete', function () {

document.getElementById("print_button").style.visibility = 'hidden';

});

// Activates printer

on(dom.byId("btnPrintReady"), "click", function () {

createPrintDijit(document.getElementById("printTitleId").value);

app.printer.startup();

});

// Hides print widget

on(dom.byId("closePrint"), "click", function () {

document.getElementById("feedback").style.visibility = 'hidden';

});

// Shows tools

on(dom.byId("showTools"), "click", function () {

document.getElementById("showToolsButton").style.visibility = 'hidden';

document.getElementById("hideToolsButton").style.visibility = 'visible';

document.getElementById("printer").style.visibility = 'visible';

});

// Hide tools

on(dom.byId("hideTools"), "click", function () {

document.getElementById("showToolsButton").style.visibility = 'visible';

document.getElementById("hideToolsButton").style.visibility = 'hidden';

document.getElementById("printer").style.visibility = 'hidden';

document.getElementById("feedback").style.visibility = 'hidden';

});

// Show print widget

on(dom.byId("showPrintWidget"), "click", function () {

document.getElementById("feedback").style.visibility = 'visible';

});

}

);

</script>

</head>

</div>

</div>

</div>

<h3>

City of Decatur Print Service

</h3>

Note: Select the format that you would like to print your map from the dropdowns below.

</div>

<label id="lblPrintTitle">Enter a print title</label><br />

<option value="A3 Landscape" selected>A3 Landscape</option>

<option value="A3 Portrait">A3 Portrait</option>

<option value="A4 Landscape">A4 Landscape</option>

<option value="A4 Portrait">A4 Portrait</option>

<option value="Letter ANSI A Landscape">Letter ANSI A Landscape</option>

<option value="Letter ANSI A Portrait">Letter ANSI A Portrait</option>

<option value="Tabloid ANSI B Landscape">Tabloid ANSI B Landscape</option>

<option value="Tabloid ANSI B Portrait">Tabloid ANSI B Portrait</option>

</select>

</select>

<button type="button" id="btnPrintReady">Print Ready</button>

This print service is to be used for City business only.

</div>

</form>

</div>

</body>

</html>

topic Re: How do I hide the print_button after the printing has completed? in ArcGIS JavaScript Maps SDK Questions

How do I remove the print_button after the printing has completed?

Re: How do I hide the print_button after the printing has completed?

Re: How do I hide the print_button after the printing has completed?

Re: How do I hide the print_button after the printing has completed?

Re: How do I remove the print_button after the printing has completed?

Re: How do I remove the print_button after the printing has completed?