Passing Custom Elements to Print service

Tarunvisvanadula1994 · ‎03-28-2022

Hi,

i got struck while sending custom text to print service, i have passed custom text elements(InputType-string) to customTextElements array. 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.

Please find below code:

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

});

//

//i cant paste my print service url due to security

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

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>

Noah-Sager · ‎03-28-2022

Hi @Tarunvisvanadula1994, I think the code you posted looks right, but are you sure that the custom text elements you write in the app exactly match those that were published with your custom print service? Do you see them getting sent properly in the print requests in the network traffic?