Web App Builder - How to change Print Advanced Setting Defaults?

2200
6
Jump to solution
10-04-2017 06:57 AM
IanPeebles
Occasional Contributor III

Hello.  Does anyone know how to over-ride the print widget Advanced Settings that are set by default?  I figured out how to add in the following code in the print.js file located at: <appName>\Widgets\Print\Print.js to change the print height and width, but the default settings still show up.

My Custom Code:

Print.js - Custom settings to change default print settings

ESRI Default Code:

ESRI WAB Default Advanced Print Settings

The default settings are not much bigger than post card settings.

Any help is appreciated

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Ian,

  In the templates folder open the Print.html and make changes to the width, height and dpi inputs:

i.e. data-dojo-props="name:'dpi',required:true,value:96,style:'width:100px;'"

                <div data-dojo-type="dijit/form/Form" data-dojo-attach-point="mapOnlyFormDijit">
                    <table cellspacing="5">
                        <tr>
                            <td>
                                ${nls.width}:
                            </td>
                            <td>
                                <input type="text" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props="name:'width',required:true,value:670,style:'width:100px;'"
                                />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                ${nls.height}:
                            </td>
                            <td>
                                <input type="text" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props="name:'height',required:true,value:500,style:'width:100px;'"
                                />
                            </td>
                        </tr>
                    </table>
                </div>
                <div style="font-weight:bold;">
                    ${nls.printQualityOptions}:
                </div>
                <div data-dojo-type="dijit/form/Form" data-dojo-attach-point="mapQualityFormDijit">
                    <table cellspacing="5">
                        <tr>
                            <td>
                                ${nls.dpi}:
                            </td>
                            <td>
                                <input type="text" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props="name:'dpi',required:true,value:200,style:'width:100px;'"
                                />
                            </td>
                        </tr>
                    </table>
                </div>

View solution in original post

6 Replies
RobertScheitlin__GISP
MVP Emeritus

Ian,

  In the templates folder open the Print.html and make changes to the width, height and dpi inputs:

i.e. data-dojo-props="name:'dpi',required:true,value:96,style:'width:100px;'"

                <div data-dojo-type="dijit/form/Form" data-dojo-attach-point="mapOnlyFormDijit">
                    <table cellspacing="5">
                        <tr>
                            <td>
                                ${nls.width}:
                            </td>
                            <td>
                                <input type="text" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props="name:'width',required:true,value:670,style:'width:100px;'"
                                />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                ${nls.height}:
                            </td>
                            <td>
                                <input type="text" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props="name:'height',required:true,value:500,style:'width:100px;'"
                                />
                            </td>
                        </tr>
                    </table>
                </div>
                <div style="font-weight:bold;">
                    ${nls.printQualityOptions}:
                </div>
                <div data-dojo-type="dijit/form/Form" data-dojo-attach-point="mapQualityFormDijit">
                    <table cellspacing="5">
                        <tr>
                            <td>
                                ${nls.dpi}:
                            </td>
                            <td>
                                <input type="text" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props="name:'dpi',required:true,value:200,style:'width:100px;'"
                                />
                            </td>
                        </tr>
                    </table>
                </div>
IanPeebles
Occasional Contributor III

Robert,

Perfect!  This helped tremendously.  I did remove my hard coded  line that I posted above since that does override the settings in the Advanced settings.  Thank you again for your help! 

0 Kudos
JürgenAchilles
Occasional Contributor

Hi Ian

where did you find the Print.html ?

Regards

Jürgen

0 Kudos
JürgenAchilles
Occasional Contributor

Hi Robert

where did you find the Print.html ?

regards

Jürgen

0 Kudos
IanPeebles
Occasional Contributor III

Jurgen,

In the Web App Builder code, follow these steps:

  1. Open the application directory (from inetpub\wwwroot\<appName>).
  2. Open the Widgets folder.
  3. Open the Print folder.
  4. Open the templates folder.
  5. Open the Print.html file.

Refer to the code highlighted in red.  This is where you can change the height and width properties.  Other parts of the file contain other settings you can change.

Find the following code:

                <div data-dojo-type="dijit/form/Form" data-dojo-attach-point="mapOnlyFormDijit">
                    <table cellspacing="5">
                        <tr>
                            <td>
                                ${nls.width}:
                            </td>
                            <td>
                                <input type="text" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props="name:'width',required:true,value:1615,style:'width:100px;'"
                                />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                ${nls.height}:
                            </td>
                            <td>
                                <input type="text" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props="name:'height',required:true,value:1245,style:'width:100px;'"
                                />
                            </td>
                        </tr>
                    </table>
                </div>

Hope this helps.

KubaSzostak1
New Contributor III

In ArcGIS Portal 10.5 you have to modify also Widget.js and Print.js file located in one of folders:

  • C:\Program Files\ArcGIS\Portal\apps\webappbuilder\stemapp\widgets\Print\Print.js
  • C:\Program Files\ArcGIS\Portal\apps\webappviewer\widgets\Print\Print.js

Search for 'dpi' and find something like in picture below:

Regards,

Kuba

0 Kudos