Select to view content in your preferred language

Passing Custom Elements to Print service

476
1
03-28-2022 03:07 AM
Tarunvisvanadula1994
Emerging Contributor

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>
    <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>
    <link rel="stylesheet" href="https://js.arcgis.com/3.39/esri/css/esri.css">
    <style>
      htmlbody#map {
        height100%;
        margin0;
        padding0;
      }
      #demobox {
  background-color:#DFDFDF ;
  box-sizingborder-box;
  padding10px ;
  color:#323232;
  line-height1.3em;
  border1px solid black ;
  position:absolute;
  z-index999 !important;
  right10px;
    margin-top10px;
    width300px;
    min-height100px;
    max-height200px;
    overflow-yauto;
    displayflex;
    font-family"Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.header{
    font-size16px;
    font-weight600;
    /* padding: 0 0 12px;
    margin: 0 auto 0 0 */
}
.title_bar{
    background#78caf4;
    height25px;
    width100%;
    cursorpointer;
   
}
#widnow{
    width300px;
    positionabsolute;
    z-index9999;
    right7px;
    top5px;
    border:solid 1px;
    max-height350px;
    overflow-yauto;
}
.box{
    height273px;
    background#fff;
}
.esri-input {
    background-color#fff;
    border1px solid rgba(110,110,110,.3);
    color#323232;
    font-family"Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size14px;
    width100%;
    margin-top7px;
    height26px;
}

.Cust_Select{
    cursorpointer;
    displayblock;
    font-familyinherit;
    font-size.85em;
    width190px !important;
    position:absolute;
    height32px;
    color#323232;
    border1px solid rgba(110,110,110,.3);
    margin0;
    -webkit-appearancenone;
    -moz-appearancenone;
    border-radius0;
    padding0 0.5em;
    backgroundurl("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-itemscenter;
    background-color#0079c1;
    border1px solid #0079c1;
    color#fff;
    cursorpointer;
    displayflex;
    font-familyinherit;
    font-size14px;
    min-height32px;
    justify-contentcenter;
    word-breaknormal;
    white-spacenormal;
    overflowhidden;
    padding6px 7px;
    width200px !important;
    transition: background-color 125ms ease-in-out,border 125ms ease-in-out;
}


    </style>
    <script src="https://js.arcgis.com/3.39/"></script>
    <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", {
          basemap: "streets",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
          center: [-122.4537.8], // longitude, latitude
          zoom: 9
        });
     //
 
//i cant paste my print  service url due to security
        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.parametersfunction(paramidx) {
            return param.name === "Layout_Template";
          });

          var templates = layoutTemplate[0].choiceList

          for (var i = 0i < templates.lengthi++) {
            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 = 0i < templateList.lengthi++) {
              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(paramsfunction(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>
0 Kudos
1 Reply
Noah-Sager
Esri Regular Contributor

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?

 

0 Kudos