outputField.cmp now shows picklist translations instead of the raw value

This works for picklists & multi-select picklists

Author: jongpie

src/aura/outputField/outputField.cmp

@@ -12,6 +12,7 @@ See LICENSE file or go to https://github.com/jongpie/LightningComponents for ful
 
     <!-- Private Attributes -->
     <aura:attribute name="fieldValue" type="Object" access="private" />
+    <aura:attribute name="fieldPicklistLabels" type="String" access="private" description="Used to display translated picklist values" />
     <aura:attribute name="relationshipNameField" type="String" access="private" />
     <aura:attribute name="parentRecordName" type="String" access="private" />
 
@@ -87,7 +88,7 @@ See LICENSE file or go to https://github.com/jongpie/LightningComponents for ful
 
                 <!-- MULTIPICKLIST or PICKLIST -->
                 <aura:if isTrue="{!or(v.displayType == 'MULTIPICKLIST', v.displayType == 'PICKLIST')}">
-                    <ui:outputText aura:id="outputField" value="{!v.fieldValue}" />
+                    <ui:outputText aura:id="outputField" value="{!v.fieldPicklistLabels}" />
                 </aura:if>
 
                 <!-- PERCENT -->

src/aura/outputField/outputFieldController.js

@@ -1,17 +1,21 @@
 ({
     doInit : function(component, event, helper) {
         helper.handleFieldValueChanged(component, event);
+        helper.getPicklistLabels(component, event);
     },
     handleFieldMetadataChanged : function(component, event, helper) {
         helper.setFieldMetadataAttributes(component, event);
+        helper.getPicklistLabels(component, event);
     },
     handleRecordChanged : function(component, event, helper) {
         var record       = component.get('v.record');
         var fieldApiName = component.get('v.fieldApiName');
 
         component.set('v.fieldValue', record[fieldApiName]);
+        helper.getPicklistLabels(component, event);
     },
     handleFieldValueChanged : function(component, event, helper) {
         helper.handleFieldValueChanged(component, event);
+        helper.getPicklistLabels(component, event);
     }
 })

src/aura/outputField/outputFieldHelper.js

@@ -29,5 +29,29 @@
         if(record.hasOwnProperty(fieldApiName)) {
             component.set('v.fieldValue', record[fieldApiName]);
         }
+    },
+    getPicklistLabels : function(component, event) {
+        var fieldMetadata = component.get('v.fieldMetadata');
+        var fieldApiName  = component.get('v.fieldApiName');
+        var record        = component.get('v.record');
+
+        if(fieldMetadata === null) return;
+        if(fieldMetadata.displayType !== 'MULTIPICKLIST' && fieldMetadata.displayType !== 'PICKLIST') return;
+        if(!record.hasOwnProperty(fieldApiName)) return;
+
+        var picklistValues = record[fieldApiName].split(';');
+        var picklistLabels = [];
+        for(var i = 0; i < picklistValues.length; i++) {
+            var picklistValue = picklistValues[i];
+
+            for(var j = 0; j < fieldMetadata.picklistOptions.length; j++) {
+                var picklistOption = fieldMetadata.picklistOptions[j];
+
+                if(picklistOption.value !== picklistValue) continue;
+
+                picklistLabels.push(picklistOption.label);
+            }
+        }
+        component.set('v.fieldPicklistLabels', picklistLabels.join(';'));
     }
 })