topic Re: Modify the 'Results' format in the Measurement widget? in Web AppBuilder Custom Widgets Questions

Modify the 'Results' format in the Measurement widget?

RyanKelso — Thu, 15 Jun 2017 23:28:38 GMT

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.

Re: Modify the 'Results' format in the Measurement widget?

RebeccaStrauch__GISP — Thu, 15 Jun 2017 23:42:46 GMT

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

Re: Modify the 'Results' format in the Measurement widget?

RyanKelso — Fri, 16 Jun 2017 15:18:29 GMT

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.

Re: Modify the 'Results' format in the Measurement widget?

RobertScheitlin__GISP — Fri, 16 Jun 2017 15:27:14 GMT

Ryan,

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

Re: Modify the 'Results' format in the Measurement widget?

RyanKelso — Fri, 16 Jun 2017 15:52:12 GMT

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.

Re: Modify the 'Results' format in the Measurement widget?

TomSellsted — Sun, 12 Dec 2021 10:07:02 GMT

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

Re: Modify the 'Results' format in the Measurement widget?

RyanKelso — Fri, 16 Jun 2017 22:04:00 GMT

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!

Re: Modify the 'Results' format in the Measurement widget?

TomSellsted — Fri, 16 Jun 2017 22:06:05 GMT

Ryan,

You are welcome! Glad it was helpful.

Regards,

Tom