nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

customize print button of print dijit

KellyEmmons1

I am using the sample code to create a print dijit. I needed to change the word 'Print' on the button to a printer icon, which I have done using jquery. But once the button is clicked, the word 'Printing' still appears and then it undoes my printer icon and goes back to the word 'Print'. How can I customize this button during and after the printing process in addition to beforehand? Below is the jquery I added to the createPrintDijit function.

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",
"format": "pdf",
"options": {
   "legendLayers": [], // empty array means no legend
   "scalebarUnit": "Miles",
   "titleText": "The Title"
   }
    }
];

   // create the print templates, could also use dojo.map
    var templates = [];
    dojo.forEach(layouts, function(lo) {
     var t = new esri.tasks.PrintTemplate();
      t.layout = lo.name;
       t.label = lo.label;
       t.format = lo.format;
       t.layoutOptions = lo.options
       templates.push(t);
   });

app.printer = new esri.dijit.Print({
     "map": map,
"templates": templates,
url: app.printUrl,
        }, dojo.byId("printButton"));

app.printer.startup();

// fix the print button
$('#dijit_form_Button_0').css('display', 'inline-block');
$('#dijit_form_Button_0').css('width', '24');
$('#dijit_form_Button_0').css('height', '24');

var img = $('<img class="inline" src="/images/printer_icon.png" height="24" width="24" />');
$("#dijit_form_Button_0").prepend(img);
$("#dijit_form_Button_0_label").text('');
}

Najděte více příspěvků označených jako

Accepted answers

All comments

evtguy

Random suggestion but how about adding your button "fix" code into a dojo.connect for your print button's onClick event?

KellyEmmons1

Well, I don't really have a click event or dojo. connect. All I have in addition to the function I posted is this div in my HTML. (I just used the example on the javascript API site).

<div id="printButton" style="z-index:998; position:absolute; right:5px; top:5px;"></div>

??

KellyEmmons1

Below is the code we used to customize the print button with an icon, rather than the word print. The dojo.connect idea was the right direction:

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",
"format": "pdf",
"options": {
   "legendLayers": [], // empty array means no legend
   "scalebarUnit": "Miles",
   "titleText": "Broadband"
   }
    }

];

   // create the print templates, could also use dojo.map
    var templates = [];
    dojo.forEach(layouts, function(lo) {
     var t = new esri.tasks.PrintTemplate();
      t.layout = lo.name;
       t.label = lo.label;
       t.format = lo.format;
       t.layoutOptions = lo.options
       templates.push(t);
   });

app.printer = new esri.dijit.Print({
     "map": map,
"templates": templates,
url: app.printUrl,
        }, dojo.byId("printButton"));

app.printer.startup();

// the code we added to the ESRI example

app.printer._printText = '';
app.printer._printingText = '';
app.printer._printoutText = '';

$(".esriPrintButton").css('display', 'inline-block');
$(".esriPrintButton").css('width', '24');
$(".esriPrintButton").css('height', '24');

var img = $('<img class="inline" src="../images/printer_icon.png" height="24" width="24" />');
$(".esriPrintButton").children(".dijitButtonNode").children(".dijitButtonContents").prepend(img);
$(".esriPrintButton").children(".dijitButtonNode").children(".dijitButtonContents").children(".dijitButtonText").text('');

dojo.connect(app.printer,'_createPrintButton',function(value)
{
$(".esriPrintButton").css('display', 'inline-block');
$(".esriPrintButton").css('width', '24');
$(".esriPrintButton").css('height', '24');

var img = $('<img class="inline" src="../images/printer_icon.png" height="24" width="24" />');
$(".esriPrintButton").children(".dijitButtonNode").children(".dijitButtonContents").prepend(img);
$(".esriPrintButton").children(".dijitButtonNode").children(".dijitButtonContents").children(".dijitButtonText").text('');
$(".esriPrintButton").children(".dijitButtonNode").children(".dijitButtonContents").children(".dijitButtonText").hide();

});

}

The HTML is just:
<div id="printButton" style="z-index:998; position:absolute; right:5px; top:5px;"></div>

KevinMacLeod1

Hi Kelly,

This does not work in my application. Is it possible class names or something else changed since 2013?

I'm using API v. 3.10. I don't follow the app.object pattern I just named my object "printer" for the new Printer constructor. I updated your example appropriately in that case, and to use my own png icon. I even added the z-index as you have in html just to be consistent. What happens is this: First, the Print button appears just as it always did. The word Print is there. My png icon is not. When I click the Print button, for a moment it shrinks to ~10px wide, there is no text. Nothing. So it's very skinny. (This is when it would normally say "printing"). Then when it's done, it just disappears. The "Printout" link text never shows up. Thoughts? I'll keep working on this. Conceptually I see what your example is doing. In theory it should be fine, unless something in the API changed. And we have jQuery object scoped into our main JS file with the map object. We are also using bootstrap 3 and storing the tools in the navbar although I don't think that should cause the issue. Basically I'm just wondering if anyone has done this, this year with a recent version of the API. I'll keep working on it, looking at it with the F12 dev tools etc. If I figure it out I'll post back.

Thanks.

update: so far I tried this on ESRI sandbox and JSFiddle. I borrowed ESRI's sample for referencing jquery, grabbed a 48x48 px printer png icon on the Internet and put it on this JS Fiddle. Still not working, it exhibits the behavior described above in Sandbox, and button doesn't even show up at first on Fiddle. Happens with API versions going back to 3.1. I am beginning to think it's a code issue and not a matter of API version.

Edit fiddle - JSFiddle‌

khutchins

Looks like you need to set a valid proxy url. To do this you'll need to setup the Esri/resource-proxy · GitHub‌ then specify the location of your proxy at approximately line 75 in your app code.

KevinMacLeod1

Perhaps on Fiddle. But, left that in for esri Sandbox which I guess allows you to use ESRI's proxy... I just put it into Fiddle for convenience. But on the ESRI sandbox, the same thing happens: print button has "Print" text, you click it, then nothing in it, then it disappears. Same for my local code, which I had already set up a proxy for, so print could work. (IIS / .Net Proxy) I'll keep testing..

khutchins

So I read the original post more closely and it looks like you want to change the print text on the widget. The best way to do this is to modify the strings used by the api. Details on how to access the current strings are here:

Default API Strings | Guide | ArcGIS API for JavaScript‌

And here are the strings associated with the print widget. After requiring the jsapi resources in your app you can modify them as follows.

esriBundle.widgets.print.NLS_print = "My Print";

esriBundle.widgets.print.NLS_printing = "MY Printing";

esriBundle.widgets.print.NLS_printout= "My Printout";

khutchins

And here's the javascript:

<!doctype html>

<html>

<head>

<style>

html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

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;

}

#map{ margin: 0; padding: 0; }

#feedback {

background: #fff;

color: #000;

position: absolute;

font-family: arial;

height: auto;

right: 20px;

margin: 5px;

padding: 10px;

top: 20px;

width: 300px;

z-index: 40;

}

#feedback a {

border-bottom: 1px solid #888;

color: #444;

text-decoration: none;

}

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

border: none;

color: #444;

text-decoration: none;

}

#note { font-size: 80%; font-weight: 700; padding: 0 0 10px 0; }

#info { padding: 10px 0 0 0; }

</style>

var app = {};

require([

"esri/map", "esri/layers/FeatureLayer",

"esri/dijit/Print", "esri/tasks/PrintTemplate",

"esri/request", "esri/config", "dojo/i18n!esri/nls/jsapi",

"dojo/_base/array", "dojo/dom", "dojo/parser",

"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"

], function(

Map, FeatureLayer,

Print, PrintTemplate,

esriRequest, esriConfig,esriBundle,

arrayUtils, dom, parser

) {

parser.parse();

dojo.connect(map, "onLoad", function() {

console.log("Map onLoad event");

$(document).ready(jQueryReady);

});

app.printUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";

esriConfig.defaults.io.proxyUrl = "http://localhost/~kell3008/resource_proxy/proxy.php";

esriBundle.widgets.print.NLS_print = "My Print";

esriBundle.widgets.print.NLS_printing = "MY Printing";

esriBundle.widgets.print.NLS_printout= "My Printout";

app.map = new esri.Map("map", {

basemap: "hybrid",

center: [-117.447, 33.906],

zoom: 17,

slider: false

});

// add graphics for pools with permits

var permitUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/PoolPermits/MapServer/1";

var poolFeatureLayer = new FeatureLayer(permitUrl, {

"mode": FeatureLayer.MODE_SNAPSHOT

});

app.map.addLayer(poolFeatureLayer);

// get print templates from the export web map task

var printInfo = esriRequest({

"url": app.printUrl,

"content": { "f": "json" }

});

printInfo.then(handlePrintInfo, handleError);

function handlePrintInfo(resp) {

var layoutTemplate, templateNames, mapOnlyIndex, templates;

layoutTemplate = arrayUtils.filter(resp.parameters, function(param, idx) {

return param.name === "Layout_Template";

});

if ( layoutTemplate.length == 0 ) {

console.log("print service parameters name for templates must be \"Layout_Template\"");

return;

}

templateNames = layoutTemplate[0].choiceList;

// remove the MAP_ONLY template then add it to the end of the list of templates

mapOnlyIndex = arrayUtils.indexOf(templateNames, "MAP_ONLY");

if ( mapOnlyIndex > -1 ) {

var mapOnly = templateNames.splice(mapOnlyIndex, mapOnlyIndex + 1)[0];

templateNames.push(mapOnly);

}

// create a print template for each choice

templates = arrayUtils.map(templateNames, function(ch) {

var plate = new PrintTemplate();

plate.layout = plate.label = ch;

plate.format = "PDF";

plate.layoutOptions = {

"authorText": "Made by: Esri's JS API Team",

"copyrightText": "<copyright info here>",

"legendLayers": [],

"titleText": "Pool Permits",

"scalebarUnit": "Miles"

};

return plate;

});

// create the print dijit

app.printer = new Print({

"map": app.map,

"templates": templates,

url: app.printUrl

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

app.printer.startup();

}

function handleError(err) {

console.log("Something broke: ", err);

}

});

</script>

</head>

<div data-dojo-type="dijit/layout/BorderContainer"

data-dojo-props="design:'headline',gutters:false"

style="width: 100%; height: 100%; margin: 0;">

<div id="map"

data-dojo-type="dijit/layout/ContentPane"

data-dojo-props="region:'center'">

<h3>

Print Templates Created from Info Returned by the Print Service using

<a href="https://developers.arcgis.com/javascript/jsapi/esri.request-amd.html">esri.request</a>

</h3>

Note: This sample uses an ArcGIS Server version 10.1 export web map task.

</div>

<a href="https://developers.arcgis.com/javascript/jsapi/printtemplate.html">Print templates</a> are generated

from the Export Web Map Task's <a href="http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task">Layout_Template parameter</a>. This info is retrieved from the service

using <a href="https://developers.arcgis.com/javascript/jsapi/esri.request-amd.html">esri.request</a>.

</div>

</body>

</html>

khutchins

Attached is a sample that shows how to make the print button show up in your fiddle and also how to add a print icon.Here are details on the fixes:

Missing print button: to solve this we can add sampleserver6 to the list of cors enabled servers using esriConfig.defaults.io.corsEnabledServers (see approximately line 93 of print.html). This works because sampleserver6 supports cors. If both the browser and server support cors then you don't need the proxy to make cross domain requests. You can test your server for cors support using this site. To determine if the browser supports CORS check Can I use.
Print icon: You can add a print icon to the widget using css. In the attached example we created a css class and specified the path to the print image along with a few other properties. See the .esriPrint class at approximately line 45 of print.html.

Archive.zip

khutchins

And in the sample I attached to my previous email if you don't want the text to display set lines 78-90 equal to an empty string. The problem with setting the printout to an empty string is that you won't have anything to click on when the print is complete because there won't be any text to display for the printout hyperlink.

 esriBundle.widgets.print.NLS_print = "";
        esriBundle.widgets.print.NLS_printing = "";
        esriBundle.widgets.print.NLS_printout= "";

KevinMacLeod1

Just wanted to drop back and say thanks again, your solutions worked perfectly! Thanks Kelly and to the rest of the great folks here.

OttoArturo

Hello Kelly

I implemented your example code in my app. I am using the proxy provided by ESRI on GitHub in my app because I use secured layers. The problem I have is that Print widget does not work when I using the proxy. Without the proxy I only can load the basemap but the Print Widget works. Can you help me please,

Thank you

Otto

Připojte se ke konverzaci

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.