From 17998c9e3d6231ad938a7b0f4eebd6d870c03035 Mon Sep 17 00:00:00 2001
From: Reza <reza.niroomand@hotmail.com>
Date: Tue, 3 Jan 2023 18:51:05 +0100
Subject: [PATCH] Support Lookup field for binding and bug fixing

---
 DynamicDropdown/ControlManifest.Input.xml     |  8 ++-
 DynamicDropdown/index.ts                      | 50 +++++++++++++++----
 .../strings/DynamicDropdown.1033.resx         |  2 +-
 solutions/src/Other/Solution.xml              |  6 +--
 4 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/DynamicDropdown/ControlManifest.Input.xml b/DynamicDropdown/ControlManifest.Input.xml
index db88c86..fa5b43e 100644
--- a/DynamicDropdown/ControlManifest.Input.xml
+++ b/DynamicDropdown/ControlManifest.Input.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <manifest>
-  <control namespace="be" constructor="DynamicDropdown" version="0.0.1" display-name-key="DynamicDropdown_Display" description-key="DynamicDropDown_Desc" control-type="standard" >
+  <control namespace="rn" constructor="DynamicDropdown" version="0.0.1" display-name-key="DynamicDropdown_Display" description-key="DynamicDropDown_Desc" control-type="standard" >
     <!--external-service-usage node declares whether this 3rd party PCF control is using external service or not, if yes, this control will be considered as premium and please also add the external domain it is using.
     If it is not using any external service, please set the enabled="false" and DO NOT add any domain below. The "enabled" will be false by default.
     Example1:
@@ -18,7 +18,7 @@
       -->
     </external-service-usage>
     <!-- property node identifies a specific, configurable piece of data that the control expects from CDS -->
-    <property name="value" display-name-key="Value_Display" description-key="Value_Desc" of-type="SingleLine.Text" usage="bound" required="true"/>
+    <property name="value" display-name-key="Value_Display" description-key="Value_Desc" of-type-group="ValueType" usage="bound" required="true"/>
     <property name="entityType" display-name-key="EntityType_Display" description-key="EntityType_Desc" of-type="SingleLine.Text" usage="input" required="true" />
     <property name="query" display-name-key="Query_Display" description-key="Query_Desc" of-type="SingleLine.Text" usage="input" required="true" />
     <property name="textField" display-name-key="TextField_Display" description-key="TextField_Desc" of-type="SingleLine.Text" usage="input" required="true" />
@@ -39,6 +39,10 @@
       </type-group>
       <property name="sampleProperty" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type-group="numbers" usage="bound" required="true" />
     -->
+    <type-group name="ValueType">
+      <type>SingleLine.Text</type>
+      <type>Lookup.Simple</type>
+    </type-group>
     <type-group name="QueryValueType">
       <type>SingleLine.Text</type>
       <type>Lookup.Simple</type>
diff --git a/DynamicDropdown/index.ts b/DynamicDropdown/index.ts
index 692bf75..1e3bf08 100644
--- a/DynamicDropdown/index.ts
+++ b/DynamicDropdown/index.ts
@@ -6,7 +6,7 @@ import { DynamicComboBox } from './DynamicComboBox';
 export class DynamicDropdown implements ComponentFramework.StandardControl<IInputs, IOutputs> {
     private notifyOutputChanged: () => void;
     rootContainer: HTMLDivElement;
-    selectedValue: string | number;
+    selectedValue: string | number | ComponentFramework.LookupValue[] | null;
     context: ComponentFramework.Context<IInputs>;
 
     /**
@@ -54,35 +54,46 @@ export class DynamicDropdown implements ComponentFramework.StandardControl<IInpu
         type possibleQueryValueNames = 'queryValue1' | 'queryValue2' | 'queryValue3' | 'queryValue4' | 'queryValue5';
 
         const getQueryValue = (_: string, index: any) => {
-            const queryValue = queryValues['queryValue' + index as possibleQueryValueNames]; 
+            const queryValue = queryValues['queryValue' + index as possibleQueryValueNames];
             if (queryValue.type == 'Lookup.Simple') {
                 const value = (queryValue as ComponentFramework.PropertyTypes.LookupProperty).raw
-                return value ? value[0].id : null;
+                return value && value.length > 0 ? value[0].id : '00000000-0000-0000-0000-000000000000';
             }
             return queryValue.raw;
         }
         
         if (value && value.attributes && query && entityType.raw && query.raw) {
             const q = queryValues ? query.raw.replace(/\${(\d+)}/gm, getQueryValue) : query.raw;
-            let p = context.webAPI.retrieveMultipleRecords(entityType.raw, q).then(
-                (value) => { options = value.entities; },
+            const p = context.webAPI.retrieveMultipleRecords(entityType.raw, q).then(
+                (val) => { 
+                    options = val.entities;
+                    // const valueToMatch = this.tryGetLookupId(value) ?? value.raw;
+                    // const isValueFound = valueToMatch == null || valueField !== null && valueField.raw !== null && val.entities.some((entity) => entity[valueField.raw ?? ''] == valueToMatch);
+                    // if (!isValueFound) {
+                    //     this.selectedValue = null;
+                    //     this.notifyOutputChanged();
+                    // }
+                },
                 (error) => { errorMessage = error.message; }
             );
 
+            const getAttributeValue = (entity: ComponentFramework.WebApi.Entity, attribute: string): string => entity[attribute];
+            const getAttributeValueRegEx = (entity: ComponentFramework.WebApi.Entity, attribute: string): string => attribute.replace(/\${([\w_]+)}/gm, (_,m)=> entity[m]);        
+
             p.then(() => {
                 ReactDOM.render(
                     React.createElement(DynamicComboBox, {
-                        //label: value.attributes.DisplayName,
                         label : '',
-                        value: value.raw,
-                        /* fetch list from webApi / fetchXml, then map and return it. */
+                        value: this.tryGetLookupId(value) ?? value.raw,
                         options: options,
                         optionKeyField: valueField.raw,
                         optionTextField: textField.raw,
                         disabled: disabled,
                         masked: masked,
                         errorMessage: errorMessage,                    
-                        onChange: this.onChange,
+                        onChange: value.type == 'Lookup.Simple' ? this.onChangeLookup : this.onChange,
+                        getKeyValue: valueField.raw && valueField.raw.indexOf('$') > -1 ? getAttributeValueRegEx : getAttributeValue,
+                        getTextValue: textField.raw && textField.raw.indexOf('$') > -1 ? getAttributeValueRegEx : getAttributeValue
                     }),
                     this.rootContainer,
                 );
@@ -90,9 +101,14 @@ export class DynamicDropdown implements ComponentFramework.StandardControl<IInpu
         }
     }
 
+    tryGetLookupId = (value : ComponentFramework.PropertyTypes.Property) => {
+        if (value == null || value.type !== 'Lookup.Simple' || value.raw == null) { return null; } 
+        const lookupValue = value as ComponentFramework.PropertyTypes.LookupProperty;
+        return (lookupValue.raw.length == 0) ? null : lookupValue.raw[0].id;
+    }
+
     retrieveOption = async (entityType: string, query: string, webAPI: ComponentFramework.WebApi): Promise<any> => {
         if (!entityType || !query) { return; }
-        
         try {
             const t = await webAPI.retrieveMultipleRecords(entityType, query);
             return { options: t.entities }
@@ -101,11 +117,23 @@ export class DynamicDropdown implements ComponentFramework.StandardControl<IInpu
         }
     }
 
-    onChange = (newValue: string | number): void => {
+    onChange = (newValue: string | number | null, newText: string | null): void => {
         this.selectedValue = newValue;
         this.notifyOutputChanged();
     };
 
+    onChangeLookup = (newValue: string | number | null, newText: string | null): void => {
+        this.selectedValue = (newValue == null) ? [{} as ComponentFramework.LookupValue]  :
+            [
+                {
+                    id: newValue, 
+                    name: newText, 
+                    entityType: (this.context.parameters.value as ComponentFramework.PropertyTypes.LookupProperty).getTargetEntityType()
+                } as ComponentFramework.LookupValue
+            ];
+        this.notifyOutputChanged();
+    }
+
     /**
      * It is called by the framework prior to a control receiving new data.
      * @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”
diff --git a/DynamicDropdown/strings/DynamicDropdown.1033.resx b/DynamicDropdown/strings/DynamicDropdown.1033.resx
index 9a7684e..9de4cc7 100644
--- a/DynamicDropdown/strings/DynamicDropdown.1033.resx
+++ b/DynamicDropdown/strings/DynamicDropdown.1033.resx
@@ -121,7 +121,7 @@
     <value>Dynamic Dropdown</value>
     <comment/>
   </data>
-  <data name="DynamicDropdown_Desc" xml:space="preserve">
+  <data name="DynamicDropDown_Desc" xml:space="preserve">
     <value>Displays a drop-down control with a list that can be filled based on a query that can depend on the value of other fields.</value>
     <comment/>
   </data>
diff --git a/solutions/src/Other/Solution.xml b/solutions/src/Other/Solution.xml
index ae179e3..45ce4cc 100644
--- a/solutions/src/Other/Solution.xml
+++ b/solutions/src/Other/Solution.xml
@@ -5,15 +5,15 @@
     <UniqueName>DynamicDropDown</UniqueName>
     <LocalizedNames>
       <!-- Localized Solution Name in language code -->
-      <LocalizedName description="Dynamic Dropdown for Power Platform" languagecode="1033" />
+      <LocalizedName description="Dynamic Dropdown" languagecode="1033" />
     </LocalizedNames>
     <Descriptions />
-    <Version>1.0</Version>
+    <Version>1.1.24</Version>
     <!-- Solution Package Type: Unmanaged(0)/Managed(1)/Both(2)-->
     <Managed>2</Managed>
     <Publisher>
       <!-- Unique Publisher Name of Cds Solution -->
-      <UniqueName>Reza Niroomand</UniqueName>
+      <UniqueName>RezaNiroomand</UniqueName>
       <LocalizedNames>
         <!-- Localized Cds Publisher Name in language code-->
         <LocalizedName description="Reza Niroomand" languagecode="1033" />