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.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<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: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>
<script>
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", {
center: [-122.45, 37.8], // longitude, latitude
zoom: 9
});
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>
<div id="map">
<div id="widnow">
<div class=" title_bar" title="click to toggle">
<header class="header-title">Export Information</header>
</div>
<div class="box" style="display: none;">
<div class="" style="margin-top: 20px;margin-left: 10px;position:absolute;">
<label>Title</label>
<input type="text" id="printTitle" class="esri-input" placeholder="Enter Print title" />
</div>
<div class="" style="margin-top: 95px;margin-left: 10px;position:absolute;">
<label>Layout</label>
<select id="layoutDrp" class="Cust_Select">
<option value="">Choose layout</option>
</select>
</div>
<div style="margin-top: 155px;margin-left: 50px;position:absolute;">
<button id="ExportBtn" class="Export-button">Export</button>
</div>
<div class="print content" style="margin-top: 188px;margin-left: 10px;position:absolute;">
<hr style="width: 270px !important"/>
<h6 style="margin-top: 0px;">Exported Files will Appear Below</h6>
<div class="ExportPanel"></div>
</div>
</div>
</div>
</div>
</body>
</html>
