AnsweredAssumed Answered

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

Question asked by csergent08 Champion on Nov 26, 2014
Latest reply on Nov 26, 2014 by csergent08

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>

        <meta http-equiv="content-type" content="text/html; charset=utf-8">

        <meta name="viewport" content="initial-scale=1,maximum-scale=1, user-scalable=no">

        <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/soria/soria.css">

        <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">

        <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>

        <script src="http://js.arcgis.com/3.11/"></script>

        <script>

            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>

    <body class="soria">

        <!-- Map Div Begin -->

        <div id="mapDiv">

      

        <div id="showTools">

            <input type="image" id="showToolsButton" src="images/hammer.png" alt="Show Tools" title="Show Tools" />

        </div>

      

        <div id="hideTools">

            <input type="image" id="hideToolsButton" src="images/close.ico" alt="Hide Tools" title="Hide Tools" />

        </div>

      

        <div id="printer">

            <input type="image" id="showPrintWidget" src="images/print.ico" alt="Print" title="Print" />

        </div>

            <form id="frmPrint" action="" onsubmit="return false;">

                <div id="feedback">

                <h3>

                    City of Decatur Print Service

                </h3>

          <div id="information">

            <div id="note">

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

            </div>

          

          

                <!-- used for the print dijit -->

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

                <input type="text" id="printTitleId" name="printTitle" value="Street Light Inventory" />

                <br /><br />

                <select name="printLayout" id="printLayoutId">

                    <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 name="printFormat" id="printFormatId">

                    <option value="pdf" selected>PDF</option>

                    <option value="png32">PNG32</option>

                    <option value="png8">PNG8</option>

                    <option value="jpg">JPG</option>

                    <option value="gif">GIF</option>

                    <option value="eps">EPS</option>

                    <option value="svg">SVG</option>

                    <option value="svgz">SVGZ</option>

                </select>

            <br /><br />

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

            <div id="print_button"></div>

 

 

            <div id="info">

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

 

 

            

              <input type="image" id="closePrint" src="images/close.ico" alt="Close" title="Close" />

            </div>

          

          </div>

        </div>

            </form>

        </div>

        <!-- Map Div End -->

    </body>

</html>

Outcomes