Add the ability to add custom field formatters

viewer/js/config/identify.js

@@ -1,7 +1,15 @@
 define([
-    'dojo/i18n!./nls/main'
-], function (i18n) {
+    'dojo/i18n!./nls/main',
+    'dojo/_base/lang'
+], function (i18n, lang) {
 
+    var linkTemplate = '<a href="{url}" target="_blank">{text}</a>';
+    function directionsFormatter (noValue, attributes) {
+        return lang.replace(linkTemplate, {
+            url: 'https://www.google.com/maps/dir/' + attributes.Address + ' Louisville, KY',
+            text: 'Get Directions'
+        });
+    }
     return {
         map: true,
         mapClickMode: true,
@@ -30,6 +38,13 @@ define([
                 2: {
                     title: i18n.identify.louisvillePubSafety.policeStation,
                     fieldInfos: [{
+                      // example of adding a 'calculated' or formatted field
+                      // click on a louisville kentucky police station to see
+                      // the result
+                        fieldName: 'Directions',
+                        visible: true,
+                        formatter: directionsFormatter
+                    }, {
                         fieldName: 'Name',
                         visible: true
                     }, {
@@ -62,4 +77,4 @@ define([
             }
         }
     };
-});
+});

viewer/js/gis/dijit/Identify.js

@@ -20,11 +20,12 @@ define([
     'esri/TimeExtent',
     'dojo/text!./Identify/templates/Identify.html',
     'dojo/i18n!./Identify/nls/resource',
+    './Identify/Formatters',
 
     'dijit/form/Form',
     'dijit/form/FilteringSelect',
     'xstyle/css!./Identify/css/Identify.css'
-], function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, MenuItem, lang, array, all, topic, query, domStyle, domClass, Moveable, Memory, IdentifyTask, IdentifyParameters, PopupTemplate, FeatureLayer, TimeExtent, IdentifyTemplate, i18n) {
+], function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, MenuItem, lang, array, all, topic, query, domStyle, domClass, Moveable, Memory, IdentifyTask, IdentifyParameters, PopupTemplate, FeatureLayer, TimeExtent, IdentifyTemplate, i18n, Formatters) {
 
     return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
         widgetsInTemplate: true,
@@ -47,6 +48,19 @@ define([
             'shape_len', 'shape.stlength()',
             'shape.area', 'shape_area', 'shape.starea()'
         ],
+        /**
+         * field type mappings to their default formatter functions
+         * overriding this object will globally replace the default
+         * formatter function for the field type
+         * @type {Object<Function>}
+         */
+        defaultFormatters: {
+            'esriFieldTypeSmallInteger': Formatters.formatInt,
+            'esriFieldTypeInteger': Formatters.formatInt,
+            'esriFieldTypeSingle': Formatters.formatFloat,
+            'esriFieldTypeDouble': Formatters.formatFloat,
+            'esriFieldTypeDate': Formatters.formatDate
+        },
 
         postCreate: function () {
             this.inherited(arguments);
@@ -313,11 +327,21 @@ define([
                             return;
                         }
                     }
-                    fSet.push(result.feature);
+                    var feature = this.getFormattedFeature(result.feature);
+                    // console.log(feature);
+                    fSet.push(feature);
                 }, this);
             }, this);
             this.map.infoWindow.setFeatures(fSet);
         },
+        getFormattedFeature: function (feature) {
+            array.forEach(feature.infoTemplate.info.fieldInfos, function (info) {
+                if (typeof info.formatter === 'function') {
+                    feature.attributes[info.fieldName] = info.formatter(feature.attributes[info.fieldName], feature.attributes);
+                }
+            });
+            return feature;
+        },
         identifyError: function (err) {
             this.map.infoWindow.hide();
             topic.publish('viewer/handleError', {
@@ -409,19 +433,20 @@ define([
                         this.addDefaultFieldInfo(fieldInfos, {
                             fieldName: foundField[0].name,
                             label: foundField[0].alias,
-                            visible: true
+                            visible: true,
+                            formatter: typeof this.defaultFormatters[foundField[0].type] !== 'undefined' ? this.defaultFormatters[foundField[0].type] : undefined
                         });
                     }
                 }));
 
             // from the fields layer
             } else if (layer.fields) {
-
                 array.forEach(layer.fields, lang.hitch(this, function (field) {
                     this.addDefaultFieldInfo(fieldInfos, {
                         fieldName: field.name,
                         label: field.alias,
-                        visible: true
+                        visible: true,
+                        formatter: typeof this.defaultFormatters[field.type] !== 'undefined' ? this.defaultFormatters[field.type] : undefined
                     });
                 }));
             }

viewer/js/gis/dijit/Identify/Formatters.js

@@ -0,0 +1,21 @@
+define([
+    'dojo/number',
+    'dojo/date/locale'
+], function (number, locale) {
+    return {
+        formatInt: function (value) {
+            return number.format(value);
+        },
+        formatFloat: function (value) {
+            return number.format(value, {
+                places: 3
+            });
+        },
+        formatDate: function (value) {
+            var date = new Date(value);
+            return locale.format(date, {
+                formatLength: 'short'
+            });
+        }
+    };
+});