WAB Attribute widget: thousand separator for numeric fields

648
8
Jump to solution
01-18-2018 11:16 PM
XabierVelasco_Echeverría
Occasional Contributor

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.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

View solution in original post

0 Kudos
8 Replies
XanderBakker
Esri Esteemed Contributor

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... 

0 Kudos
XabierVelasco_Echeverría
Occasional Contributor

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? 

0 Kudos
XanderBakker
Esri Esteemed Contributor

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.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
Occasional Contributor

Thanks Robert, worked like a charm!

0 Kudos
XabierVelasco_Echeverría
Occasional Contributor

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!

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
XabierVelasco_Echeverría
Occasional Contributor

Thanks again!

0 Kudos