Modify the 'Results' format in the Measurement widget?

749
7
Jump to solution
06-15-2017 04:28 PM
RyanKelso
Occasional Contributor III

I'm wondering if it would be possible to modify the format of the results that are displayed in the default measurement widget...  When measuring distance in miles, I would like to have the results displayed with three decimal places instead of just two.  Looking for any ideas.

0 Kudos
1 Solution

Accepted Solutions
TomSellsted
MVP Regular Contributor

Ryan,

You can add some code to override the result with a couple of event handlers.  Here is some sample code to do this:

        measurement.startup();
        measurement.on("measure", function(e) {
          measurement.resultValue.srcNodeRef.innerHTML = e.values.toFixed(3) + " " + e.unitName;
        });
        measurement.on("measure-end", function(e) {
          measurement.resultValue.srcNodeRef.innerHTML = e.values.toFixed(3) + " " + e.unitName;
        });
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I also have a working demo:

Measure Tool 

Regards,

Tom

View solution in original post

7 Replies
RebeccaStrauch__GISP
MVP Esteemed Contributor

Short answer...I would say yes, although others are more qualified to get a quick answer as to how...if you are using the developer edition.  Not sure about if using AGOL.

If using the developer edition, are you using the standard version of https://community.esri.com/docs/DOC-3209-measure-widget-21-for-web-app-builder

0 Kudos
RyanKelso
Occasional Contributor III

Yeah I'm using the 2.4 developer edition, and I'm referring to the standard measurement widget that comes out of the box (not Tom's measure widget that you linked to).

I tried to poke around in the widget's html to see if there was anything to try modifying, but the widget uses the esri Measurement dijit, so there's not really anything in there.  And I don't really understand using dijit or if you can override the value formatting.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Ryan,

   Can you give specifics of what you are wanting to do?

0 Kudos
RyanKelso
Occasional Contributor III

I would like to have the measurement result display three decimal places/thousandths when measuring distance in miles.

We reference a lot of stuff by milepost, using three decimal places, which is the only reason I'm thinking about this.

0 Kudos
TomSellsted
MVP Regular Contributor

Ryan,

You can add some code to override the result with a couple of event handlers.  Here is some sample code to do this:

        measurement.startup();
        measurement.on("measure", function(e) {
          measurement.resultValue.srcNodeRef.innerHTML = e.values.toFixed(3) + " " + e.unitName;
        });
        measurement.on("measure-end", function(e) {
          measurement.resultValue.srcNodeRef.innerHTML = e.values.toFixed(3) + " " + e.unitName;
        });
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I also have a working demo:

Measure Tool 

Regards,

Tom

View solution in original post

RyanKelso
Occasional Contributor III

Aha!  Thank you so much Tom!!  It took me long enough to figure out how to get it to work in the Web Appbuilder code, but it's perfect!  I would not have been able to figure it out without your sample, really, thank you!

0 Kudos
TomSellsted
MVP Regular Contributor

Ryan,

You are welcome!  Glad it was helpful.

Regards,

Tom

0 Kudos