Help from Niels for ng-options & to help display description from Hubspot for field

Author: Warren Buckley

src/Umbraco.Forms.Extensions.Crm.Hubspot/App_Plugins/UmbracoFormsExtensions/Hubspot/hubspotfields.html

@@ -13,30 +13,36 @@
             <div class="umb-forms-mapping-remove -no-margin-right"></div>
         </div>
 
-        <div class="umb-forms-mapping" ng-repeat="mapping in mappings">
-
-            <div class="umb-forms-mapping-field">
-                <select class="-full-width"
-                        ng-options="field.id as field.value for field in fields"
-                        ng-model="mapping.formField"
-                        ng-change="stringifyValue()">
-                    <option value="">Map form field</option>
-                </select>
+        <div ng-repeat="mapping in mappings">
+
+            <div class="umb-forms-mapping">
+                <div class="umb-forms-mapping-field">
+                    <select class="-full-width"
+                            ng-options="field.id as field.value for field in fields"
+                            ng-model="mapping.formField"
+                            ng-change="stringifyValue()">
+                        <option value="">Map form field</option>
+                    </select>
+                </div>
+
+                <div class="umb-forms-mapping-field">
+                    <select class="-full-width"
+                            ng-options="field.value as field.name for field in hubspotFields track by field.value"
+                            ng-model="mapping.hubspotField"
+                            ng-change="stringifyValue()">
+                        <option value="">Map hubspot field</option>
+                    </select>
+                </div>
+
+                <div class="umb-forms-mapping-remove -no-margin-right">
+                    <a href="" ng-click="deleteMapping($index)"><i class="icon-trash"></i></a>
+                </div>
             </div>
 
-            <div class="umb-forms-mapping-field">
-                <select class="-full-width"
-                        ng-options="field.name as field.label for field in hubspotFields"
-                        ng-model="mapping.hubspotField"
-                        ng-change="stringifyValue()">
-                    <option value="">Map hubspot field</option>
-                </select>
+            <div ng-if="mapping.hubspotField" style="margin-bottom:15px;">
+                <strong>Description:</strong><br/>
+                {{ getHubspotFieldDescription(mapping.hubspotField) }}
             </div>
-
-            <div class="umb-forms-mapping-remove -no-margin-right">
-                <a href="" ng-click="deleteMapping($index)"><i class="icon-trash"></i></a>
-            </div>
-
         </div>
     </div>
 

src/Umbraco.Forms.Extensions.Crm.Hubspot/App_Plugins/UmbracoFormsExtensions/Hubspot/hubspotfields.js

@@ -22,11 +22,29 @@
             // Need to get API key from other field
             // May need to do parent.parent scope traversal - YUK :S
             hubspotResource.getAllProperties('6a488b25-b7e7-489d-ad45-2da52a878ff9').then(function (response) {
-                $scope.hubspotFields = response;
+                $scope.hubspotFields = response.map(x =>{
+                    return {
+                        value: x.name,
+                        name: x.label,
+                        description: x.description
+                    }
+                });
             });
         }
     }
 
+    $scope.getHubspotFieldDescription = function(value) {
+        var item = $scope.hubspotFields.find(x => {
+            return x.value === value;
+        });
+
+        if(item){
+            return item.description;
+        }
+        
+        return '';
+    }
+
     $scope.addMapping = function () {
         // Add new empty object into array
         $scope.mappings.push({