Print Map Templates hidden behind other controls

[Anonymous User]

Original User: hbostic

Hello

//to accomondate the fact the bootstrap controls fall in front of the dojo menu options, I followed the post below
//http://forums.arcgis.com/threads/104357-Measurement-Window-Units-Dropdown-ZIndex?highlight=dijitMenu...

Code here

aspect.after(printMapTool._printButton, "openDropDown", function() {
                   $('.dijitPopup.dijitMenuPopup').each(function() {
                       $('#' + this.id).css('z-index', 2000);
                    });

               
                });

This works for the print widget as well but with one important difference

When the print is successful, it changes the widget to a link to the newly created doc and upon clicking that link creates a new print widget, which means I can no long connect to the _printButton as there is no way to get access to it anymore

in print-complete, the _printButton has not yet changed to the link yet, so there is not way for me to connect to the link's click event to try and connect back to the _printButton 'openDropDown' event

Attached is the sequence of actions.  I call my code to put the templates in front, all is good, I have a successful print and click the link, once the link turns back into the print button, I have no way of wiring things back up again so the template table falls behind my other controls.

1, am I going about this wrong
2. is there a way for me to capture the link url, but prevent the print out link from showing that way I don't lose my connect and can display the result somewhere else on the UI

[RaymondGoins]

I place my print widget in it's own div so that I can control how it is viewed.
[HTML]    <div id="printform" class="esriPopup PopUpForm" style="display:none;width:350px;margin:50px auto 0 400px;">
      <div class="titlePane">
        <div class="title">Print Map</div>
        <div class="titleButton close"></div>
      </div>
      <div class="contentPane PopUpContent" style="min-height: 163px;">
        <table style="width:80%;">
          <tr>
            <td colspan="2"><label for="pagetitle">Map Title:</label></td>
          </tr>
          <tr>
            <td colspan="2"><div id="pagetitle" data-dojo-type="dijit/form/TextBox" class="clearresults" style="width:86%;"></div></td>
          </tr>
          <tr>
            <td colspan="2" style="height:10px;"></td>
          </tr>
          <tr>
            <td style="width:50%;"><label for="pagesize">Page Size:</label></td>
            <td style="width:50%;"><label for="orientation">Orientation:</label></td>
          </tr>
          <tr>
            <td style="width:50%">
              <select id="pagesize" data-dojo-type="dijit/form/Select" class="pagechange">
                <option value="Letter">8.5 x 11</option>
                <option value="Tabloid" selected="selected">11 x 17</option>
                <option value="ARCH_C">18 x 24</option>
                <option value="ARCH_D">24 x 36</option>
              </select>
            </td>
            <td style="width:50%">
              <select id="pageor" data-dojo-type="dijit/form/Select" class="pagechange">
                <option value="Landscape">Landscape</option>
                <option value="Portrait">Portrait</option>
              </select>
            </td>
          </tr>
        </table>
        <br>
        <div id="printMap"></div>
      </div>
    </div>[/HTML]

I know I have customized this a little more than your question but hope this helps you with a solution.

Ray

[Anonymous User]

Original User: cspurlock

Craygo,
If it's not too much trouble, could you post your Javascript code.  I would like to see how you use the selections made from the drop down lists.

[RaymondGoins]

Here is the code.

      /**************************** Start Print Functions *****************************/
      registry.byId("nav_print").on("click", function ()
        {
          $("#printform").show();
        }
      );


      function createPrintDijit(printTitle, pageSize, pageOr) {

        var printURL = "http://192.168.20.14:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";

        // create an array of objects that will be used to create print templates
        var layouts = [
          {
            "name": pageSize +" "+ pageOr,
            "label": "Landscape (PDF)",
            "format": "pdf",
            "options": {
              "legendLayers": [], // empty array means no legend
              //"scalebarUnit": "Feet",
              "titleText": printTitle
            }
          }
        ];

        // create the print templates, could also use dojo.map
        var templates = [];
        dojo.forEach(layouts, function(lo) {
          var t = new PrintTemplate();
          t.layout = lo.name;
          t.label = lo.label;
          t.format = lo.format;
          t.layoutOptions = lo.options
          templates.push(t);
        });

        printer = new Print({
          "map": map,
          "templates": templates,
          url: printURL,
        }, dojo.byId("printMap"));
        printer.startup();
      }
      // Create default print widget
      createPrintDijit("PWSB Emap", "Tabloid", "Landscape");
      // Re-Create the print button when any of the form fields change
      registry.byId("pagetitle").on("change", function ()
        {
          pageSize = registry.byId("pagesize").get("value");
          pageOrient = registry.byId("pageor").get("value");
          pageTitle = registry.byId("pagetitle").get("value");
          printer.destroy();
          console.log(pageTitle+" "+pageSize+" "+pageOrient);
          createPrintDijit(pageTitle, pageSize, pageOrient);
        }
      );
      
      registry.byId("pagesize").on("change", function ()
        {
          pageSize = registry.byId("pagesize").get("value");
          pageOrient = registry.byId("pageor").get("value");
          pageTitle = registry.byId("pagetitle").get("value");
          printer.destroy();
          console.log(pageTitle+" "+pageSize+" "+pageOrient);
          createPrintDijit(pageTitle, pageSize, pageOrient);
        }
      );
      registry.byId("pageor").on("change", function ()
        {
        pageSize = registry.byId("pagesize").get("value");
        pageOrient = registry.byId("pageor").get("value");
        pageTitle = registry.byId("pagetitle").get("value");
        printer.destroy();
        //createPrintDijit(pageTitle, pageSize, pageOrient);
        }
      );

      /***************************** End Print Functions ******************************/

I have also made several print templates on the server and named them to what I need.
located <arcgisserverdirectory>/Templates/ExportWebMapTemplates

ARCH_C Landscape
ARCH_C Portrait
ARCH_D Landscape
ARCH_D Portrait
Letter Landscape
Letter Portrait
Tabloid Landscape
Tabloid Portrait

Ray