Printing from Web AppBuilder - can you set the scale to display in feet instead of miles?

5585
12
Jump to solution
08-05-2015 08:32 AM
KaylaFlamm
New Contributor III

I have created an app with Web AppBuilder for ArcGIS but have run into an issue. When you go to print a map using the print widget, it spits out a map with a scalebar in miles.... but for our purposes, we really need that scalebar in feet, as we work on a very fine scale. I have not been able to find way to change this yet. Is there a way to do this? Without the scalebar in feet, the map is really not that useful to our staff.

Thanks!

Also, pic below for reference:

webappbuilder_capture.PNG

1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Kayla,

  It looks like from the code that they (the WAB Dev Team) started to add a option in the widget for this but decided not to or just never completed it.

If you are using Web AppBuilder Dev version than you can make a small change to a js file and get your scale bar in feet. If you are using AGOL then you are out of luck unless you decide to get WAB Dev and host the app yourself.

The change needs to occur in the Print.js file found in the [install Dir]\server\apps\[App number]\widgets\Print folder.

Current code:

        template.layoutOptions = {
          authorText: form.author,
          copyrightText: form.copyright,
          legendLayers: (this.layoutForm.legend.length > 0 && this.layoutForm.legend[0]) ?
            null : [],
          titleText: form.title //,
            //scalebarUnit: this.layoutForm.scalebarUnit
        };

Needs to be:

        template.layoutOptions = {
          authorText: form.author,
          copyrightText: form.copyright,
          legendLayers: (this.layoutForm.legend.length > 0 && this.layoutForm.legend[0]) ?
            null : [],
          titleText: form.title,
          scalebarUnit: "Feet"
        };

Lines 6 and 7 are the changes.

View solution in original post

12 Replies
RobertScheitlin__GISP
MVP Emeritus

Kayla,

  It looks like from the code that they (the WAB Dev Team) started to add a option in the widget for this but decided not to or just never completed it.

If you are using Web AppBuilder Dev version than you can make a small change to a js file and get your scale bar in feet. If you are using AGOL then you are out of luck unless you decide to get WAB Dev and host the app yourself.

The change needs to occur in the Print.js file found in the [install Dir]\server\apps\[App number]\widgets\Print folder.

Current code:

        template.layoutOptions = {
          authorText: form.author,
          copyrightText: form.copyright,
          legendLayers: (this.layoutForm.legend.length > 0 && this.layoutForm.legend[0]) ?
            null : [],
          titleText: form.title //,
            //scalebarUnit: this.layoutForm.scalebarUnit
        };

Needs to be:

        template.layoutOptions = {
          authorText: form.author,
          copyrightText: form.copyright,
          legendLayers: (this.layoutForm.legend.length > 0 && this.layoutForm.legend[0]) ?
            null : [],
          titleText: form.title,
          scalebarUnit: "Feet"
        };

Lines 6 and 7 are the changes.

KaylaFlamm
New Contributor III

Thanks for the quick response! I will give that a try... I've never worked with the Web AppBuilder Dev version, so it should be interesting.

0 Kudos
MattReeves
New Contributor III

Was this a 1.3 solution only? My code looks slightly different in this area of the code, and I am on WAB v2.0:

        template.layoutOptions = {

          authorText: hasAuthorText ? form.author : "",

          copyrightText: hasCopyrightText ? (form.copyright || this._getMapAttribution()) : "",

          legendLayers: (hasLegend &&

            this.layoutForm.legend.length > 0 && this.layoutForm.legend[0]) ?

            null : [],

          titleText: hasTitleText ? form.title : "",

          customTextElements: cteArray

        };

I also have this question.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Matt,

So in 2.0 just add the scalebarUnit property:

template.layoutOptions = {
          authorText: hasAuthorText ? form.author : "",
          copyrightText: hasCopyrightText ? (form.copyright || this._getMapAttribution()) : "",
          legendLayers: (hasLegend &&
            this.layoutForm.legend.length > 0 && this.layoutForm.legend[0]) ?
            null : [],
          titleText: hasTitleText ? form.title : "",
          customTextElements: cteArray,
          scalebarUnit: "Feet"
        };
MattReeves
New Contributor III

Thanks Robert,

I appreciate your response. I will have to play with it some more. When I add the scalebarUnit: "Feet" to the code, the print widget no longer works, when clicked on, it very briefly flashes the processing circle, and then comes back with a blank print widget. Then when I remove the scalebarUnit: "Feet", and refresh, it once again returns the Print options in the widget.

Also, are you running 2.1? If so, is there additional functionality with setting the scale bar units? Or is it still a code change? Might be worth upgrading if there is functionality to be gained.

Thanks,

-Matt

RobertScheitlin__GISP
MVP Emeritus

Matt,

  Did you forget the comma on line 8? I just tested in WAB 2.1 and 2.0 and it worked fine.

No WAB 2.1 did not introduce any ability to configure this so the code change is still necessary.

Junshan Liu

MattReeves
New Contributor III

Thank you Robert,

That was indeed the issue.

I appreciate your help on this. Our users will be pleased. They are creating maps at the Parcel level, and getting scale bars of 0.02 miles.

-Matt

ShannonHealy1
New Contributor II

Hi Robert, I attempted to change the scalebar units to "Nautical Miles" by the way you describe: "scalebarUnit: "Nautical Miles" and also by adding in "<option value="NauticalMiles">${nls.nauticalMiles}</option>" into the print.html file but both of these changes disable the widget - is there a proper way to reference nautical miles that I am missing or is the print widget not capable of this?

RobertScheitlin__GISP
MVP Emeritus

Shannon,

   Did you also add the nauticalMiles property to the widgets nls/strings.js file? You said you added this:

<option value="NauticalMiles">${nls.nauticalMiles}</option>

Which references nls.nauticalMiles  from the widgets strings.js