WAB Attribute widget: thousand separator for numeric fields

[XabierVelasco_Echeverría]

Hi,

I understand there is a bug that prevents WAB attribute widget to use the configuration of the popup window in the Web Map, while the popup is disabled. Thus, while this is corrected by WAB development team, I need code to show the thousand separator for numeric fields in the attribute widget. Any suggestions from experts in Web AppBuilder Developer Edition? Thanks in advanced!

PS: although I understand HTML/CSS/JS and might be able to perform minor modifications, this is clearly above my skills.

[XanderBakker]

If you don't have too many fields, you may consider using ArcGIS Arcade | ArcGIS for Developers to create a "virtual" field in the web map. Switch off the original field and just show the new one. 

You can find an example of using Arcade here: https://community.esri.com/message/731796-re-display-numeric-value-as-currency?commentID=731796#comm... 

[XabierVelasco_Echeverría]

Hi Xander,

The problem remains the same, the popup windows in my Web Map must be disabled, so the WAB Attribute Widget does not honour the configuration in the Web Map due to a bug already recognized by ESRI.

I guess CSS is the way, any other ideas? 

[XanderBakker]

I see what you mean, when you "switch of" the pop-up you actually eliminate all the settings you made previously. To switch to the developer edition just for the thousands separator is pretty extreme and would mean maintaining versions and a whole lot of other things. 

I will CC Kelly Gerrow‌ to see if she has an ETA for the bug fix (or enhancement) for this problem.

[RobertScheitlin__GISP]

Xabier,

   Here is some code to add to the AT widgets utils.js:

  exports.generateColumnsFromFields = function(pInfos, fields, typeIdField, types,
    supportsOrder, supportsStatistics) {
    function getFormatInfo(fieldName) {
      //do a field name check and if it is the one you want add the formatter you want
      if(fieldName === 'your field'){
        return {
          digitSeparator: true,
          places: 2
        };
      }
...‍‍‍‍‍‍‍‍‍‍‍

[XabierVelasco_Echeverría]

Thanks Robert, worked like a charm!

[XabierVelasco_Echeverría]

Hi,

Looks like thare have been severe improvements to the attribute table widget at WAB 2.9.

As a result, after I updated my app to this version, I found out the wonderful solution you proposed to formatt numeric fields is not working anymore. Although there is a new block in utils.js to manage this, it does not implement the thousand separator.

} else if (isNumber) {
columns[techFieldName].formatter = lang.hitch(
exports, exports.numberFormatter, getFormatInfo(_field.name));

Any insights on how to implement  digitSeparator: true ??

Thanks!

[RobertScheitlin__GISP · Accepted solution]

Xabier,

   The code change in WAB 2.9 is identical.

In the AT widget utils.js find the exports.generateColumnsFromFields = function(...

and add lines 4 -10.

  exports.generateColumnsFromFields = function(gridColumns, pInfos, fields, typeIdField, types,
    supportsOrder, supportsStatistics) {
    function getFormatInfo(fieldName) {
      //do a field name check and if it is the one you want add the formatter you want
      if(fieldName === 'your field'){
        return {
          digitSeparator: true,
          places: 2
        };
      }
      if (pInfos && esriLang.isDefined(pInfos.fieldInfos)) {
        for (var i = 0, len = pInfos.fieldInfos.length; i < len; i++) {
          var f = pInfos.fieldInfos[i];
          if (f.fieldName === fieldName) {
            return f.format;
          }
        }
      }

      return null;
    ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Also don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

[XabierVelasco_Echeverría]

Thanks again!