Modular extension of capabilities

src/aura/AddressValidation/AddressValidation.cmp

@@ -29,6 +29,9 @@
     <aura:attribute name="showAddressFields" type="Boolean" access="global" default="true" required="true" />
     <aura:attribute name="showCountyField" type="Boolean" access="global" default="false" />
     <aura:attribute name="showMap" type="Boolean" access="global" default="true" required="true" />
+    <aura:attribute name="showGeolocation" type="Boolean" access="global" default="false" required="true" />
+    <aura:attribute name="addressLabel" type="String" access="global" default="" />
+
 
     <!-- Address Input/Output Attributes -->
     <aura:attribute name="placeId" type="String" access="global" />
@@ -50,6 +53,8 @@
 
     <!-- Handlers -->
     <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
+    <aura:handler name="change" value="{!v.currentLatitude}" action="{!c.latitudeChange}"/>
+    <aura:handler name="change" value="{!v.currentLongitude}" action="{!c.longitudeChange}"/>
 
     <lightning:flexipageRegionInfo width="{!v.width}"/>
 
@@ -126,6 +131,7 @@
             <!-- Size is 12 if region is small or undetermined, or if region is medium/large and map is off, otherwise it's 6 -->
             <lightning:layoutItem padding="horizontal-medium" size="{!or(or(v.width == 'SMALL', v.width == null), and(or(v.width == 'MEDIUM', v.width == 'LARGE'), v.showMap == false)) ? 12 : 6}">
                 <lightning:inputAddress aura:id="fullAddress"
+                                        addressLabel="{!v.addressLabel}"
                                         streetLabel="{!$Label.c.Street}"
                                         cityLabel="{!$Label.c.City}"
                                         countryLabel="{!$Label.c.Country}"
@@ -140,6 +146,10 @@
                 <aura:if isTrue="{!v.showCountyField == true}">
                     <lightning:input aura:id="countyInput" type="text" label="{!$Label.c.County}" placeholder="County" value="{!v.administrative_area_level_2}" class="slds-p-bottom_small" />
                 </aura:if>
+                <aura:if isTrue="{!v.showGeolocation == true}">
+                    <lightning:input aura:id="latitudeInput" type="text" label="{!$Label.c.Latitude}" placeholder="Latitude" value="{!v.currentLatitude}" class="slds-p-bottom_small" /> 
+                    <lightning:input aura:id="longitudeInput" type="text" label="{!$Label.c.Longitude}" placeholder="Longitude" value="{!v.currentLongitude}" class="slds-p-bottom_small" />
+                </aura:if>
             </lightning:layoutItem>
         </aura:if>
         <aura:if isTrue="{! and(v.markerAvailable == true, v.showMap == true)}">

src/aura/AddressValidation/AddressValidation.design

@@ -1,4 +1,7 @@
 <design:component label="Address Picker Autocomplete for Flow">
+    <design:attribute name="addressLabel" label="Address Details Section Label"
+                        description="Label shown between above address details section (i.e., below the search field).
+                                    Recommended if you enable 'Detailed Address Fields Required' to avoid an empty line with red asterisk." />
     <design:attribute name="title" label="Title (DO NOT USE. LEAVE EMPTY)"
                         description="To update the title text of the component use the 'Component Title Label' field instead. 
                                     This is kept for retrospective purposes of older versions prior to v1.8" />
@@ -12,8 +15,12 @@
                         description="Show the editable county field" />
     <design:attribute name="showMap" label="Show Map" 
                         description="Show the map component for current location and chosen location" />
+    <design:attribute name="showGeolocation" label="Show Geolocation (latitude and longitude)" 
+                        description="Show the latitude and longitude fields" />
     <design:attribute name="isRequired" label="Search Required" description="If true, the user will need to search and select a value before being able to proceed" />
-    <design:attribute name="fieldsRequired" label="Detailed Address Fields Required" description="If true, the user will need to have all the address fields populated to proceed" />
+    <design:attribute name="fieldsRequired" label="Detailed Address Fields Required"
+                        description="If true, the user will need to have all the address fields populated to proceed.
+                                    If true, it's recommended to set a 'Address Details Section Label' to avoid an empty line with red asteriks." />
 
     <design:attribute name="placeId" label="Place ID" 
                         description="The Google API Place Id. This will take precedence over Longitude and Latitude Settings" />

src/aura/AddressValidation/AddressValidationController.js

@@ -27,6 +27,10 @@
                             - Cleaned up init methods into helper classes
 
     18/10/19    DV          - Split 'Required' into 'Search Required' and 'Detailed Address Fields Required'
+
+    15/03/22    KK          - Added dynamically making address details/county fields required (=red asteriks shows) if option is set in Flow
+
+    19/03/22    KK          - Added ability to change latitude/longitude by manually entering into these fields. This also triggers a map update
 
    TODO:
     1. Input for country restrictions(?)
@@ -38,6 +42,25 @@
         helper.checkValidFilter(cmp);
         helper.setValidation(cmp);
         helper.initialiseMapData(cmp, helper);
+
+
+        // set address fields as required if configured as such in Flow
+        let fieldsRequired = cmp.get("v.fieldsRequired"); // Flow attribute "Detailed Address Fields Required"
+
+        if(fieldsRequired) {
+
+            // if the address fields are shown while all fields are required, they're mandatory as well
+            if(cmp.get("v.showAddressFields")) {
+                let divFullAddress = cmp.find('fullAddress');
+                divFullAddress.set('v.required', true);
+            }
+
+            // if county field is shown while all fields are required, it's mandatory as well
+            if(cmp.get("v.showCountyField")) {
+                let divCounty = cmp.find('countyInput');
+                divCounty.set('v.required', true);
+            }
+        }
     },
     /* When typing the search text in input field */
     onAddressInput : function(cmp, event, helper) {
@@ -83,4 +106,14 @@
 
         helper.getPlaceDetails(cmp, placeid);
     },
+
+    latitudeChange : function(cmp, event, helper) {
+         /* Manages changes to the latitude.*/
+        helper.geolocationChange(cmp);
+    },
+
+    longitudeChange : function(cmp, event, helper) {
+        /* Manages changes to the longitude.*/
+        helper.geolocationChange(cmp);
+    }
 })

src/aura/AddressValidation/AddressValidationHelper.js

@@ -5,8 +5,11 @@
    Date/Time:      5/21/2019, 1:35:56 PM
 
    History:
-   When        Who          What
-
+    When        Who         What
+    15/03/22    KK          - Added setting currentLatitude/Longitude when search is successful to display them if showGeolocation is enabled
+
+    15/03/22    KK          - Added updating the map when geolocation is changed by editing the latitude/longitude fields
+
    TODO:
 
  */
@@ -289,6 +292,10 @@
                     cmp.set("v.fullStreetAddress", fullStreetAddress);
                     cmp.set("v.latitude", lat);
                     cmp.set("v.longitude", lng);
+
+                    //set current values to display the correct Lat/Lng if these fields are shown
+                    cmp.set("v.currentLatitude", lat);
+                    cmp.set("v.currentLongitude", lng);
 
                     this.showMap(cmp, lat, lng, labels.SELECTED_ADDRESS, formattedAddress);
                     cmp.set("v.locationSelected", true);
@@ -348,5 +355,25 @@
             d = Math.floor(d / 16);
             return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
         });
+    },
+
+    geolocationChange : function(cmp) {
+         /* Updates the pin on the map after a geolocation change.*/
+        let labels = {
+            SELECTED_ADDRESS : $A.get("$Label.c.Selected_Address"),
+            DEFAULT_ADDRESS : $A.get("$Label.c.Default_Address")
+        }
+
+        let lat = cmp.get("v.currentLatitude");
+        let lng = cmp.get("v.currentLongitude");
+        let formattedAddress = cmp.get("v.formattedAddress");
+
+        if(formattedAddress) {
+            this.showMap(cmp, lat, lng, labels.SELECTED_ADDRESS, formattedAddress);
+        }
+        else {
+            this.showMap(cmp, lat, lng, labels.DEFAULT_ADDRESS);
+        }
     }
+
 })

src/labels/CustomLabels.labels

@@ -56,6 +56,22 @@
         <shortDescription>Current Location</shortDescription>
         <value>Current Location</value>
     </labels>
+    <labels>
+        <fullName>Latitude</fullName>
+        <categories>Address,Picker,Address Picker</categories>
+        <language>en_US</language>
+        <protected>true</protected>
+        <shortDescription>Latitude</shortDescription>
+        <value>Latitude</value>
+    </labels>
+    <labels>
+        <fullName>Longitude</fullName>
+        <categories>Address,Picker,Address Picker</categories>
+        <language>en_US</language>
+        <protected>true</protected>
+        <shortDescription>Longitude</shortDescription>
+        <value>Longitude</value>
+    </labels>
     <labels>
         <fullName>Default_Address</fullName>
         <categories>Address,Picker,Address Picker</categories>