Custom Print code for 3.x

Tarunvisvanadula1994 — Wed, 23 Feb 2022 15:50:08 GMT

Hi,

Instead of using existing esri/dijit/print widget from Javascript API 3.x.Do we have any custom code that suites same as default Print Widget.I believe we cant send dynamic attributes using Print widget.Can you pls suggest alternative way of approach for sending Dynamic attributes as inputs to Print service

Thanks in Advance

Note: Not related to WAB Widgets

Re: Custom Print code for 3.x

Tarunvisvanadula1994 — Wed, 23 Feb 2022 18:55:00 GMT

Hi Noah

Thanks for the response, the additional elements are associated with customer print, which will contain logined user information and few other details.

I have my application running over 3x, so I'm planning to have similar print interface what 4x has should be done in 3x.

Can you provide your inputs/suggestions for Achieving 4x print in 3x. That would be great.

Thanks in advance

Re: Custom Print code for 3.x

Noah-Sager — Thu, 24 Feb 2022 16:08:53 GMT

Actually, you might be able to use PrintTemplate.layoutOptions.customTextElements

https://developers.arcgis.com/javascript/3/jsapi/printtemplate-amd.html#layoutoptions

I also found this post which looks relevant for your use case:

https://gis.stackexchange.com/questions/72554/additional-parameters-for-printtask

Re: Custom Print code for 3.x

Tarunvisvanadula1994 — Tue, 01 Mar 2022 09:47:01 GMT

Hi Noah ,

Thanks for providing info. based on information provided by you im able to create print with following code. But i got struck while sending custom text to print service, i have passed custom text elements(InputType-string) to customTextElements. But in output data is blank. Can you pls check following and let me know if sent anything wrong.

In print service, i have update text format like this <dyn type="text" property="user"/> since im sending string as input. pls correct me if i was wrong

<!DOCTYPE html>

<html>

<head>

<title>Custom print</title>

<style>

html, body, #map {

height: 100%;

margin: 0;

padding: 0;

}

#demobox {

background-color:#DFDFDF ;

box-sizing: border-box;

padding: 10px ;

color:#323232;

line-height: 1.3em;

border: 1px solid black ;

position:absolute;

z-index: 999 !important;

right: 10px;

margin-top: 10px;

width: 300px;

min-height: 100px;

max-height: 200px;

overflow-y: auto;

display: flex;

font-family: "Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;

}

.header{

font-size: 16px;

font-weight: 600;

/* padding: 0 0 12px;

margin: 0 auto 0 0 */

}

.title_bar{

background: #78caf4;

height: 25px;

width: 100%;

cursor: pointer;

}

#widnow{

width: 300px;

position: absolute;

z-index: 9999;

right: 7px;

top: 5px;

border:solid 1px;

max-height: 350px;

overflow-y: auto;

}

.box{

height: 273px;

background: #fff;

}

.esri-input {

background-color: #fff;

border: 1px solid rgba(110,110,110,.3);

color: #323232;

font-family: "Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;

font-size: 14px;

width: 100%;

margin-top: 7px;

height: 26px;

}

.Cust_Select{

cursor: pointer;

display: block;

font-family: inherit;

font-size: .85em;

width: 190px !important;

position:absolute;

height: 32px;

color: #323232;

border: 1px solid rgba(110,110,110,.3);

margin: 0;

-webkit-appearance: none;

-moz-appearance: none;

border-radius: 0;

padding: 0 0.5em;

background: url("data&colon;image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 32 32' width='32' height='32'%3E%3Cpath d='M8 11.207l-4-4V5.793l4 4 4-4v1.414z' fill='%236e6e6e' fillrule='nonzero'/%3E%3C/svg%3E") no-repeat right center #fff;

}

.Export-button {

align-items: center;

background-color: #0079c1;

border: 1px solid #0079c1;

color: #fff;

cursor: pointer;

display: flex;

font-family: inherit;

font-size: 14px;

min-height: 32px;

justify-content: center;

word-break: normal;

white-space: normal;

overflow: hidden;

padding: 6px 7px;

width: 200px !important;

transition: background-color 125ms ease-in-out,border 125ms ease-in-out;

}

</style>

var map;

var templateList=[];

//$(".box").slideToggle();

require(["esri/map","esri/tasks/PrintTask","esri/tasks/PrintParameters",

"esri/request","esri/tasks/PrintTemplate","dojo/_base/array",

"dojo/domReady!"],

function(Map,PrintTask,PrintParameters,esriRequest,PrintTemplate,arrayUtils) {

map = new Map("map", {

basemap: "streets", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd

center: [-122.45, 37.8], // longitude, latitude

zoom: 9

});

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

var printTask = new PrintTask(PrintService,{

async:true

});

//fetch layout informations from print service

var printInfo = esriRequest({

"url": PrintService,

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

});

$("#layoutDrp").change(function() {

$(".ExportPanel").empty();

});

printInfo.then(function(response){

console.log(response)

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

return param.name === "Layout_Template";

});

var templates = layoutTemplate[0].choiceList

for (var i = 0; i < templates.length; i++) {

var option = document.createElement("OPTION");

option.setAttribute("value", templates[i]);

var text = document.createTextNode(templates[i]);

option.appendChild(text);

document.getElementById("layoutDrp").appendChild(option);

var P_template = new PrintTemplate();

P_template.exportOptions = {

width: 500,

height: 400,

dpi: 96

};

P_template.layoutOptions={

titleText:'', //"Hello World",

scalebarUnit:"Miles",

legendLayers: []

}

P_template.format = "PDF";

P_template.layout =templates[i]; //"MAP_ONLY";

P_template.preserveScale = false;

var obj ={"Temp":P_template,"Name":templates[i]}

templateList.push(obj);

}

console.log(templateList);

}, function(err){

console.log(err);

});

$("#ExportBtn").click(function(e){

//alert("hi");

if($("#layoutDrp").val()==""){

alert("Please Select layout");

return;

}

$("#ExportBtn").prop('disabled', true);

$(".ExportPanel").empty();

$(".ExportPanel").append("<p>Export is Generating.....</p>")

var Titlename = $("#printTitle").val();

var selectelayout = $("#layoutDrp").val();

var params = new PrintParameters();

var Layout;

params.map = map;

params.outSpatialReference = map.spatialReference;

for (var i = 0; i < templateList.length; i++) {

if(templateList[i].Name == selectelayout){

Layout = templateList[i].Temp;

break;

//templates[i].layoutOptions.titleText =Titlename;

}

Layout.layoutOptions.titleText =Titlename;

Layout.layoutOptions.customTextElements= [ //Need to define custom attributes

{ "user": UserName }

];

params.template = Layout;

printTask.execute(params, function(response){

console.log(response);

$(".ExportPanel").empty();

var OutputUrl = response.url;

var link = $("<a>");

link.attr("href", OutputUrl);

link.attr("title", $("#printTitle").val()+".pdf");

link.text($("#printTitle").val()+".pdf");

link.attr("target","_blank");

link.addClass("link");

// var LiElement = document.createElement("li");

//LiElement.append(link);

$(".ExportPanel").append(link);

$("#ExportBtn").prop('disabled', false);

},function(error){

console.log(error);

});

})

function printResult(Result){

console.log(Result)

}

function ErrCallback(err){

console.log(err)

}

$(".title_bar").click(function(){

$(".box").slideToggle();

});

</script>

</head>

<body>

<header class="header-title">Export Information</header>

</div>

<label>Title</label>

</div>

<label>Layout</label>

<option value="">Choose layout</option>

</select>

</div>

<button id="ExportBtn" class="Export-button">Export</button>

</div>

<h6 style="margin-top: 0px;">Exported Files will Appear Below</h6>

</div>

</body>

</html>

topic Custom Print code for 3.x in ArcGIS JavaScript Maps SDK Questions

Custom Print code for 3.x

Re: Custom Print code for 3.x

Re: Custom Print code for 3.x

Re: Custom Print code for 3.x

Re: Custom Print code for 3.x