Custom Text Elements in API 4.13 vs. WAB

JasonDavenport

I have Custom Text Elements in my print template that works great when using WAB. The Custom fields show up when you click the print widget and gives you a chance to fill them out and it prints out correctly. When I click the print widget using JavaScript 4.13 it doesn't show the text boxes to fill out. Should it? If not, how do I go about making this happen? Is there an an example that I could use? Thanks!

JavaScript snapshot:

WAB snapshot:

Here is my code that I'm using for the print widget:

var print = new Print({
container: document.createElement("div"),
view: view,
printServiceUrl: "https://gisportal.abc.com/server/rest/services/PrintService/GPServer/Export Web Map",
templateOptions: {
title: "Corporation",
author: "Joe",
format:"pdf",
layout: "1. 8.5x11 Portrait",
copyright: "",
legendEnabled: true,
dpi: 300,
customTextElements: [
{"Text1": ""},
{"Text2": ""},
{"Text3": ""},
{"Text4": ""},
{"Text5": ""},
{"Text6": ""},
{"Text7": ""},
{"Text8": ""}
]
}

})

rscheitlin

Jason,

   Here is the update to fix those issues. Don't forget to mark this as the correct answer.

<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>meta charset<SPAN class="operator token">=</SPAN><SPAN class="string token">"utf-8"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>meta name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"initial-scale=1, maximum-scale=1,user-scalable=no"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Print widget <SPAN class="operator token">-</SPAN> <SPAN class="number token">4.13</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/4.13/esri/themes/light/main.css"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>

  <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN>
    html<SPAN class="punctuation token">,</SPAN>
    body<SPAN class="punctuation token">,</SPAN>
    #viewDiv <SPAN class="punctuation token">{</SPAN>
      padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
      margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
      height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
      width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
      overflow<SPAN class="punctuation token">:</SPAN> hidden<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN>

  <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/4.13/"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
    <SPAN class="keyword token">var</SPAN> print<SPAN class="punctuation token">,</SPAN> templateInfos<SPAN class="punctuation token">,</SPAN> layoutOptions<SPAN class="punctuation token">;</SPAN>
    <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
      <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/widgets/Print"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/WebMap"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"dojo/aspect"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/request"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"dojo/Deferred"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"dojo/_base/lang"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"dojo/dom-construct"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"dojo/query"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"dojo/_base/array"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"dojo/on"</SPAN>
    <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>MapView<SPAN class="punctuation token">,</SPAN> Print<SPAN class="punctuation token">,</SPAN> WebMap<SPAN class="punctuation token">,</SPAN> aspect<SPAN class="punctuation token">,</SPAN> esriRequest<SPAN class="punctuation token">,</SPAN> Deferred<SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">,</SPAN> domConstruct<SPAN class="punctuation token">,</SPAN> query<SPAN class="punctuation token">,</SPAN> array<SPAN class="punctuation token">,</SPAN> on<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="keyword token">var</SPAN> webmap <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">WebMap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="comment token">// autocasts as new PortalItem()</SPAN>
          id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"d6d830a7184f4971b8a2f42cd774d9a7"</SPAN>
        <SPAN class="punctuation token">}</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
        map<SPAN class="punctuation token">:</SPAN> webmap
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        print <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Print</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
          <SPAN class="comment token">// specify your own print service</SPAN>
          printServiceUrl<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://gis.calhouncounty.org/arcgis3/rest/services/ExportWebMap/GPServer/Export_Web_Map"</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        print<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'state'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>s<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>s <SPAN class="operator token">===</SPAN> <SPAN class="string token">'ready'</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="token function">setTimeout</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
              <SPAN class="keyword token">var</SPAN> layoutTab <SPAN class="operator token">=</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.esri-print__layout-tab'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
              <SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>layoutTab<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'click'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="token function">_bindEvents</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
              <SPAN class="token function">_bindEvents</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">200</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="token function">_getLayoutTemplatesInfo</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>result<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
              <SPAN class="keyword token">var</SPAN> templatesInfo <SPAN class="operator token">=</SPAN> result<SPAN class="punctuation token">.</SPAN>data<SPAN class="punctuation token">;</SPAN>
              <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>templatesInfo <SPAN class="operator token">&&</SPAN> <SPAN class="operator token">!</SPAN>templatesInfo<SPAN class="punctuation token">.</SPAN>error<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">var</SPAN> parameters <SPAN class="operator token">=</SPAN> templatesInfo <SPAN class="operator token">&&</SPAN> templatesInfo<SPAN class="punctuation token">.</SPAN>results<SPAN class="punctuation token">;</SPAN>
                <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>parameters <SPAN class="operator token">&&</SPAN> parameters<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                  array<SPAN class="punctuation token">.</SPAN><SPAN class="token function">some</SPAN><SPAN class="punctuation token">(</SPAN>parameters<SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>p<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">return</SPAN> p <SPAN class="operator token">&&</SPAN> p<SPAN class="punctuation token">.</SPAN>paramName <SPAN class="operator token">===</SPAN> <SPAN class="string token">'Output_JSON'</SPAN> <SPAN class="operator token">?</SPAN>
                      templateInfos <SPAN class="operator token">=</SPAN> p<SPAN class="punctuation token">.</SPAN>value <SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN>
                  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN>
              <SPAN class="punctuation token">}</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">otherwise</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>err<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
              console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">info</SPAN><SPAN class="punctuation token">(</SPAN>err<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="comment token">// Add widget to the top right corner of the view</SPAN>
        view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>print<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-right"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        aspect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">around</SPAN><SPAN class="punctuation token">(</SPAN>print<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"print"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>originalPrint<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>pt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="comment token">//get the ce values.</SPAN>
            <SPAN class="keyword token">var</SPAN> ceInputs <SPAN class="operator token">=</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.esri-print__input-text[data-input-name^=\"ce-\"]'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> ceArr <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
            ceInputs<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>cei<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
              <SPAN class="keyword token">var</SPAN> ceProp <SPAN class="operator token">=</SPAN> cei<SPAN class="punctuation token">.</SPAN>dataset<SPAN class="punctuation token">.</SPAN>inputName<SPAN class="punctuation token">.</SPAN><SPAN class="token function">replace</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'ce-'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">''</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
              <SPAN class="keyword token">var</SPAN> ceVal <SPAN class="operator token">=</SPAN> cei<SPAN class="punctuation token">.</SPAN>value<SPAN class="punctuation token">;</SPAN>
              <SPAN class="keyword token">var</SPAN> ceObj <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
              ceObj<SPAN class="punctuation token">[</SPAN>ceProp<SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">=</SPAN> ceVal<SPAN class="punctuation token">;</SPAN>
              ceArr<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN>ceObj<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            pt<SPAN class="punctuation token">.</SPAN>layoutOptions<SPAN class="punctuation token">.</SPAN>customTextElements <SPAN class="operator token">=</SPAN> ceArr<SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> deferred <SPAN class="operator token">=</SPAN> <SPAN class="token function">originalPrint</SPAN><SPAN class="punctuation token">(</SPAN>pt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">return</SPAN> deferred<SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">function</SPAN> <SPAN class="token function">_addCustomEelements</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>templateInfos<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.esri-print__input-text[data-input-name^=\"ce-\"]'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>cei<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">destroy</SPAN><SPAN class="punctuation token">(</SPAN>cei<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="token function">setTimeout</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">var</SPAN> layout <SPAN class="operator token">=</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'[data-target-property=\"layout\"]'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> templateInfo <SPAN class="operator token">=</SPAN> templateInfos<SPAN class="punctuation token">[</SPAN>layout<SPAN class="punctuation token">.</SPAN>selectedIndex<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> customTextElements <SPAN class="operator token">=</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getObject</SPAN><SPAN class="punctuation token">(</SPAN>
              <SPAN class="string token">"layoutOptions.customTextElements"</SPAN><SPAN class="punctuation token">,</SPAN>
              <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN> templateInfo<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>customTextElements <SPAN class="operator token">&&</SPAN> customTextElements<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
              <SPAN class="keyword token">var</SPAN> textNames <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
              array<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>customTextElements<SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>cte<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">var</SPAN> p <SPAN class="keyword token">in</SPAN> cte<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                  <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>textNames<SPAN class="punctuation token">.</SPAN><SPAN class="token function">indexOf</SPAN><SPAN class="punctuation token">(</SPAN>p<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token"><</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">var</SPAN> advCont <SPAN class="operator token">=</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN>
                      <SPAN class="string token">'.esri-print__advanced-options-container'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="keyword token">var</SPAN> copyright <SPAN class="operator token">=</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN>
                      <SPAN class="string token">'.esri-print__copyright-info-container'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="keyword token">var</SPAN> ce <SPAN class="operator token">=</SPAN> domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toDom</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'<div class="esri-print__ce-'</SPAN> <SPAN class="operator token">+</SPAN>
                      p <SPAN class="operator token">+</SPAN>
                      <SPAN class="string token">'-info-container esri-print__form-section-container"><label>'</SPAN> <SPAN class="operator token">+</SPAN>
                      p <SPAN class="operator token">+</SPAN>
                      <SPAN class="string token">'<input type="text" class="esri-print__input-text esri-input" tabindex="0" data-input-name="ce-'</SPAN> <SPAN class="operator token">+</SPAN>
                      p <SPAN class="operator token">+</SPAN> <SPAN class="string token">'"></label></div>'</SPAN><SPAN class="punctuation token">)</SPAN>
                    <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>copyright<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                      domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">place</SPAN><SPAN class="punctuation token">(</SPAN>ce<SPAN class="punctuation token">,</SPAN> copyright<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'after'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN>
                    textNames<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN>p<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                  <SPAN class="punctuation token">}</SPAN>
                <SPAN class="punctuation token">}</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">200</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>
      <SPAN class="punctuation token">}</SPAN>

      <SPAN class="keyword token">function</SPAN> <SPAN class="token function">_bindEvents</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="token function">setTimeout</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">var</SPAN> advBtn <SPAN class="operator token">=</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.esri-print__advanced-options-button'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>advBtn<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'click'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="token function">_addCustomEelements</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.esri-print__advanced-options-container'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
            <SPAN class="token function">_addCustomEelements</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
          <SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">200</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>

      <SPAN class="keyword token">function</SPAN> <SPAN class="token function">_getLayoutTemplatesInfo</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">var</SPAN> def <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Deferred</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">var</SPAN> parts <SPAN class="operator token">=</SPAN> print<SPAN class="punctuation token">.</SPAN>printServiceUrl<SPAN class="punctuation token">.</SPAN><SPAN class="token function">split</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'/'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">var</SPAN> pos <SPAN class="operator token">=</SPAN> parts<SPAN class="punctuation token">.</SPAN><SPAN class="token function">indexOf</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'GPServer'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>pos <SPAN class="operator token">></SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">var</SPAN> url <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="regex token">/Utilities\/PrintingTools\/GPServer/</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">test</SPAN><SPAN class="punctuation token">(</SPAN>print<SPAN class="punctuation token">.</SPAN>printServiceUrl<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            url <SPAN class="operator token">=</SPAN> parts<SPAN class="punctuation token">.</SPAN><SPAN class="token function">slice</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> pos <SPAN class="operator token">+</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">join</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'/'</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">'/'</SPAN> <SPAN class="operator token">+</SPAN>
              <SPAN class="token function">encodeURIComponent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'Get Layout Templates Info Task'</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">'/execute'</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
            url <SPAN class="operator token">=</SPAN> parts<SPAN class="punctuation token">.</SPAN><SPAN class="token function">slice</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> pos <SPAN class="operator token">+</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">join</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'/'</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">'/'</SPAN> <SPAN class="operator token">+</SPAN>
              <SPAN class="token function">encodeURIComponent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'Get Layout Templates Info'</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">'/execute'</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN>
          <SPAN class="token function">esriRequest</SPAN><SPAN class="punctuation token">(</SPAN>url<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
            query<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
              f<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"json"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            responseType<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"json"</SPAN><SPAN class="punctuation token">,</SPAN>
            timeout<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">60000</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>info<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            def<SPAN class="punctuation token">.</SPAN><SPAN class="token function">resolve</SPAN><SPAN class="punctuation token">(</SPAN>info<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>err<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            def<SPAN class="punctuation token">.</SPAN><SPAN class="token function">resolve</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
              error<SPAN class="punctuation token">:</SPAN> err
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
          def<SPAN class="punctuation token">.</SPAN><SPAN class="token function">resolve</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>
        <SPAN class="keyword token">return</SPAN> def<SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN>body <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite"</SPAN><SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewDiv"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator token">></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>