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

ChrisSergent · ‎11-26-2014

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%2...";

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>

RobertScheitlin__GISP · ‎11-26-2014

Chris,

I think this attached code is more along the lines of what you are looking for.

View solution in original post

YungKaiChin · ‎11-26-2014

Have you tried style.display = "none"?

Maybe the event was not fired.

ChrisSergent · ‎11-26-2014

I need to know how to capture the event. The print task works.

RobertScheitlin__GISP · ‎11-26-2014

Chris,

You can not put an "on" on a dijit that is not yet created. Move your app.printer.on 'print-complete' to the inside of the btnPrintReady on function, after the app.printer.startup()

Next you do not want to hide the print_button as that will have the link to the download after the print is generated.

I would be hiding the btnPrintReady right after it is clicked and then figure out how to show it after the "Printout" anchor is clicked.

RobertScheitlin__GISP · ‎11-26-2014

Chris,

I think this attached code is more along the lines of what you are looking for.

ChrisSergent · ‎11-26-2014

Exactly what I was looking for. Thanks again Robert!