From 864572b0bfb1323388f388fb4de9adcef837cea0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20OLIVIER?= <clement.olivier@javista.com>
Date: Mon, 17 Aug 2020 14:43:16 +0200
Subject: [PATCH 01/10] adding support of decimal + double field types

---
 QuickEditForm/QuickEditForm/index.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/QuickEditForm/QuickEditForm/index.ts b/QuickEditForm/QuickEditForm/index.ts
index fe4c134..c59df92 100644
--- a/QuickEditForm/QuickEditForm/index.ts
+++ b/QuickEditForm/QuickEditForm/index.ts
@@ -709,6 +709,8 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 				ReactDOM.render(React.createElement(FilteredOptionsetControl, ddOptions), item);
 				break;
 			case 'money':
+			case 'decimal':
+			case 'double':
 					let moneyOptions = {
 						width : this._context.mode.allocatedWidth,
 						label : label,
@@ -721,7 +723,7 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 							fieldValue : this._parentRecordDetails.Attributes[techFieldName] ?? ""
 						},
 						disabled : isReadOnly,
-						icon : "Money",
+						icon : type == "money" ? "Money" : "",
 						onClickResult : (fieldDefinition?: DataFieldDefinition) => {
 							if(dataFieldDefinitionsDetails != undefined && fieldDefinition != undefined){
 								dataFieldDefinitionsDetails.isDirty = true;
@@ -733,7 +735,6 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 							}							
 						}
 					};
-
 					dataFieldDefinitionsDetails = this.completeDataDefinition(dataFieldDefinitionsDetails, moneyOptions.fieldDefinition);
 
 					ReactDOM.render(React.createElement(TextFieldControl, moneyOptions), item);

From 91509016d7527ebf5e3befc0cf3d810060c8c75f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20OLIVIER?= <clement.olivier@javista.com>
Date: Mon, 17 Aug 2020 18:25:21 +0200
Subject: [PATCH 02/10] grab readonly field from qvf for the rendering

---
 .../QuickEditForm/components/TextFieldControl.tsx     |  2 +-
 QuickEditForm/QuickEditForm/index.ts                  | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/QuickEditForm/QuickEditForm/components/TextFieldControl.tsx b/QuickEditForm/QuickEditForm/components/TextFieldControl.tsx
index 66b733a..b19b3a9 100644
--- a/QuickEditForm/QuickEditForm/components/TextFieldControl.tsx
+++ b/QuickEditForm/QuickEditForm/components/TextFieldControl.tsx
@@ -33,7 +33,7 @@ export default class TextFieldControl extends React.Component<ITextFieldControlP
         super(props);
         this.state = {
             fieldDefinition: this.props.fieldDefinition,
-            type: props.icon === "Money" ? "number": "text",
+            type: props.icon === "" ? "text": "number",
         };
     }
 
diff --git a/QuickEditForm/QuickEditForm/index.ts b/QuickEditForm/QuickEditForm/index.ts
index c59df92..e027f6b 100644
--- a/QuickEditForm/QuickEditForm/index.ts
+++ b/QuickEditForm/QuickEditForm/index.ts
@@ -568,6 +568,8 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 
 				// @ts-ignore
 				var rowTechName =  $.parseXML(row).getElementsByTagName("control")[0].attributes.datafieldname.value;
+				// @ts-ignore
+				let isReadOnly =  $.parseXML(row).getElementsByTagName("control")[0].attributes.disabled.value === "true";
 
 				// Checking if in the attributes metadata we find the current field
 				let fieldDetail = attributesDetail.filter(function(a: any){
@@ -580,7 +582,7 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 				}
 
 				// Generating the fields rendering
-				this.retrieveFieldOptions(fieldDetail);	
+				this.retrieveFieldOptions(fieldDetail, isReadOnly);	
 			}
 		}
 	}
@@ -589,7 +591,7 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 	 * Render the fields based on the metatada
 	 * @param fieldDetail field metadata
 	 */
-	private retrieveFieldOptions(fieldDetail: any){
+	private retrieveFieldOptions(fieldDetail: any, fieldReadOnly : boolean){
 		let _this = this;
 		let item = document.createElement("div");
 		var techFieldName = fieldDetail.attributeDescriptor.LogicalName;
@@ -597,7 +599,7 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 		var type = fieldDetail.attributeDescriptor.Type;
 		var label = fieldDetail.DisplayName;
 
-		let isReadOnly = !fieldDetail.attributeDescriptor.IsValidForUpdate || this._isRecordReadOnly;
+		let isReadOnly = !fieldDetail.attributeDescriptor.IsValidForUpdate || this._isRecordReadOnly || fieldReadOnly;
 		let isRequired = fieldDetail.attributeDescriptor.RequiredLevel == 1 || fieldDetail.attributeDescriptor.RequiredLevel == 2;
 
 		// Grabing the proper datafieldDefinition
@@ -711,6 +713,7 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 			case 'money':
 			case 'decimal':
 			case 'double':
+			case 'integer':
 					let moneyOptions = {
 						width : this._context.mode.allocatedWidth,
 						label : label,
@@ -723,7 +726,7 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 							fieldValue : this._parentRecordDetails.Attributes[techFieldName] ?? ""
 						},
 						disabled : isReadOnly,
-						icon : type == "money" ? "Money" : "",
+						icon : type === "money" ? "Money" : "NumberField",
 						onClickResult : (fieldDefinition?: DataFieldDefinition) => {
 							if(dataFieldDefinitionsDetails != undefined && fieldDefinition != undefined){
 								dataFieldDefinitionsDetails.isDirty = true;

From fdc2d36f11797b149a0ee9b311912171154c52d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20OLIVIER?= <clement.olivier@javista.com>
Date: Tue, 25 Aug 2020 12:55:41 +0200
Subject: [PATCH 03/10] adding button to open quick create - to be completed

---
 .../components/MessageBarControl.tsx          |  7 ++++++
 QuickEditForm/QuickEditForm/index.ts          | 22 ++++++++++++++-----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/QuickEditForm/QuickEditForm/components/MessageBarControl.tsx b/QuickEditForm/QuickEditForm/components/MessageBarControl.tsx
index 251a6f3..ac96e00 100644
--- a/QuickEditForm/QuickEditForm/components/MessageBarControl.tsx
+++ b/QuickEditForm/QuickEditForm/components/MessageBarControl.tsx
@@ -1,11 +1,13 @@
 import * as React from 'react';
 import {MessageBar, MessageBarType } from '@fluentui/react/lib/MessageBar';
+import { MessageBarButton } from '@fluentui/react/lib/Button';
 
 
 export interface IMessageProps {
     messageType? : MessageBarType;
     messageText? : string;
     showMessageBar : boolean;
+    onClickQuickCreate: () => void;
   }
 
 export interface IMessageState {
@@ -34,6 +36,11 @@ export default class MessageBarControl extends React.Component<IMessageProps, IM
             <div style={{marginTop: "5px"}}>
                 {this.state.showMessageBar && 
                 <MessageBar 
+                    actions={this.state.messageType == MessageBarType.info ? <div>
+                        <MessageBarButton
+                        onClick={this.props.onClickQuickCreate}                >Open Quick Create Form
+                        </MessageBarButton>
+                  </div> : undefined}
                     messageBarType={this.state.messageType} 
                     isMultiline={false} 
                     dismissButtonAriaLabel="Close" 
diff --git a/QuickEditForm/QuickEditForm/index.ts b/QuickEditForm/QuickEditForm/index.ts
index e027f6b..5b9208d 100644
--- a/QuickEditForm/QuickEditForm/index.ts
+++ b/QuickEditForm/QuickEditForm/index.ts
@@ -87,10 +87,10 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 	public async updateView(context: ComponentFramework.Context<IInputs>)
 	{
 		// Add code to update control view
-		ReactDOM.unmountComponentAtNode(this._container); 
+		/*if(this._context.updatedProperties.length === 1 && this._context.updatedProperties[0] === "layout"){
+			return;
+		}*/
 		if(this._context.updatedProperties.includes("FieldToAttachControl")){
-			//if(this._forceRecordId == context.parameters.FieldToAttachControl.raw! || !this._useTextFieldAsLookup)
-			//	return;
 			if(this._useTextFieldAsLookup)
 				this._forceRecordId = context.parameters.FieldToAttachControl.raw!;
 		}
@@ -334,7 +334,19 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 		let options = {
 			messageText : message,
 			messageType : type,
-			showMessageBar: true
+			showMessageBar: true,
+			onClickQuickCreate : () => {
+				this._context.navigation.openForm({
+					entityName : "contact",
+					useQuickCreateForm: true,
+					createFromEntity : {
+						// @ts-ignore
+						id : this._parentRecordDetails.Id,
+						name : this._parentRecordDetails.Name,
+						entityType : this._parentRecordDetails.EntityName
+					}
+				});
+			}
 		};
 
 		if(this._messageComponent != undefined || this._messageComponent != null){
@@ -489,7 +501,7 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 		catch (e){
 			this._renderingInProgress = false;
 			this.showLoading(false);
-			this.displayMessage(MessageBarType.error, `An error occured ${e.mesage}`);
+			this.displayMessage(MessageBarType.error, `An error occured : ${e}`);
 		}
 		
 	}

From 6fbeabb597f8d9fb47791ba964a0b8845e309b5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20OLIVIER?= <clement.olivier@javista.com>
Date: Tue, 25 Aug 2020 23:07:57 +0200
Subject: [PATCH 04/10] fully functional !

---
 .../QuickEditForm/EntitiesDefinition.ts       |  2 +
 .../components/MessageBarControl.tsx          |  4 +-
 .../components/TextFieldControl.tsx           | 13 ++--
 QuickEditForm/QuickEditForm/index.ts          | 66 +++++++++++++++----
 4 files changed, 68 insertions(+), 17 deletions(-)

diff --git a/QuickEditForm/QuickEditForm/EntitiesDefinition.ts b/QuickEditForm/QuickEditForm/EntitiesDefinition.ts
index ccb0cf1..18b6d16 100644
--- a/QuickEditForm/QuickEditForm/EntitiesDefinition.ts
+++ b/QuickEditForm/QuickEditForm/EntitiesDefinition.ts
@@ -3,6 +3,8 @@ export class EntityReferenceInfo{
 	public Id:string;
 	public Name:string;
 	public Attributes?: any;
+	public SchemaName?: string;
+	public QuickCreateEnabled?: boolean;
 }
 
 export class EntityReferenceIdName{
diff --git a/QuickEditForm/QuickEditForm/components/MessageBarControl.tsx b/QuickEditForm/QuickEditForm/components/MessageBarControl.tsx
index ac96e00..593846a 100644
--- a/QuickEditForm/QuickEditForm/components/MessageBarControl.tsx
+++ b/QuickEditForm/QuickEditForm/components/MessageBarControl.tsx
@@ -2,12 +2,12 @@ import * as React from 'react';
 import {MessageBar, MessageBarType } from '@fluentui/react/lib/MessageBar';
 import { MessageBarButton } from '@fluentui/react/lib/Button';
 
-
 export interface IMessageProps {
     messageType? : MessageBarType;
     messageText? : string;
     showMessageBar : boolean;
     onClickQuickCreate: () => void;
+    showQuickCreateButton?: boolean;
   }
 
 export interface IMessageState {
@@ -36,7 +36,7 @@ export default class MessageBarControl extends React.Component<IMessageProps, IM
             <div style={{marginTop: "5px"}}>
                 {this.state.showMessageBar && 
                 <MessageBar 
-                    actions={this.state.messageType == MessageBarType.info ? <div>
+                    actions={this.state.messageType == MessageBarType.info && this.props.showQuickCreateButton ? <div>
                         <MessageBarButton
                         onClick={this.props.onClickQuickCreate}                >Open Quick Create Form
                         </MessageBarButton>
diff --git a/QuickEditForm/QuickEditForm/components/TextFieldControl.tsx b/QuickEditForm/QuickEditForm/components/TextFieldControl.tsx
index b19b3a9..51fdbb9 100644
--- a/QuickEditForm/QuickEditForm/components/TextFieldControl.tsx
+++ b/QuickEditForm/QuickEditForm/components/TextFieldControl.tsx
@@ -33,7 +33,7 @@ export default class TextFieldControl extends React.Component<ITextFieldControlP
         super(props);
         this.state = {
             fieldDefinition: this.props.fieldDefinition,
-            type: props.icon === "" ? "text": "number",
+            type: props.icon === "NumberField" || props.icon === "Money" ? "number": "text",
         };
     }
 
@@ -69,10 +69,15 @@ export default class TextFieldControl extends React.Component<ITextFieldControlP
     }
 
     private grabValueFromFieldDefinition = (fieldDef : DataFieldDefinition | undefined) : string => {
-        if(this.state.fieldDefinition?.fieldValue?.Name !== undefined)
-            return this.state.fieldDefinition?.fieldValue?.Name;
+        let result = "";
+        if(this.state.fieldDefinition?.fieldValue?.Name != undefined) {
+            result = this.state.fieldDefinition?.fieldValue?.Name;
+        }
+        else {
+            result =  this.state.fieldDefinition?.fieldValue;
+        }
 
-        return this.state.fieldDefinition?.fieldValue;
+        return result;
     }
 
     private onDoubleClick = (event: React.MouseEvent<HTMLInputElement | HTMLTextAreaElement, MouseEvent>) : void => {
diff --git a/QuickEditForm/QuickEditForm/index.ts b/QuickEditForm/QuickEditForm/index.ts
index 5b9208d..8837dd0 100644
--- a/QuickEditForm/QuickEditForm/index.ts
+++ b/QuickEditForm/QuickEditForm/index.ts
@@ -13,6 +13,7 @@ import { IDropdownOption } from "@fluentui/react/lib/Dropdown";
 import { MessageBarType } from "@fluentui/react/lib/MessageBar";
 
 import { EntityReferenceInfo, DataFieldDefinition} from "./EntitiesDefinition";
+import { unwatchFile } from "fs";
 
 
 export class QuickEditForm implements ComponentFramework.StandardControl<IInputs, IOutputs> {
@@ -87,9 +88,10 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 	public async updateView(context: ComponentFramework.Context<IInputs>)
 	{
 		// Add code to update control view
-		/*if(this._context.updatedProperties.length === 1 && this._context.updatedProperties[0] === "layout"){
+		if(this._context.updatedProperties.length === 1 && this._context.updatedProperties[0] === "layout"){
 			return;
-		}*/
+		}
+
 		if(this._context.updatedProperties.includes("FieldToAttachControl")){
 			if(this._useTextFieldAsLookup)
 				this._forceRecordId = context.parameters.FieldToAttachControl.raw!;
@@ -330,14 +332,15 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 	 */
 	private displayMessage(type : MessageBarType, message : string){
 	//	this._messageDiv.innerHTML = "";
-
+		let _this = this;
 		let options = {
 			messageText : message,
 			messageType : type,
 			showMessageBar: true,
+			showQuickCreateButton : _this._recordToUpdate.QuickCreateEnabled,
 			onClickQuickCreate : () => {
 				this._context.navigation.openForm({
-					entityName : "contact",
+					entityName : _this._recordToUpdate.EntityName,
 					useQuickCreateForm: true,
 					createFromEntity : {
 						// @ts-ignore
@@ -345,6 +348,30 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 						name : this._parentRecordDetails.Name,
 						entityType : this._parentRecordDetails.EntityName
 					}
+				}).then(function success(data: any){
+					if(data.savedEntityReference.length === 0 || data.savedEntityReference.length > 1){
+						return;
+					}
+
+					let savedRecord = data.savedEntityReference[0];
+					let dataToUpdate : any = {};
+					dataToUpdate[_this._recordToUpdate.SchemaName!+"@odata.bind"] =  `/${_this.getEntityPluralName(savedRecord.entityType)}(${savedRecord.id.slice(1,-1)})`;
+					_this._context.webAPI.updateRecord(_this._parentRecordDetails.EntityName, _this._parentRecordDetails.Id, dataToUpdate).then(
+						function success(result){
+							console.log(result);
+							_this.displayMessage(MessageBarType.success, "Record successfully created, please refresh in order to see the newly created record.");
+						},
+						function (error){
+							// Error.code for privilege
+							if(error.code != undefined && error.code == 2147746336){
+								_this.displayMessage(MessageBarType.blocked, `${_this._context.resources.getString("UpdateErrorMessage")}\n\r${_this._context.resources.getString("MissingPrivilegeOnRecordMessage")}.\n\r${error.message}`);
+							} else{
+								_this.displayMessage(MessageBarType.blocked, `${_this._context.resources.getString("UpdateErrorMessage")}\n\r${error.message}`);
+							}
+							
+							_this._updateError = true;
+						}
+					);
 				});
 			}
 		};
@@ -358,7 +385,6 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 		}
 		else {
 			this._messageComponent = ReactDOM.render(React.createElement(MessageBarControl, options), this._messageDiv);
-			//console.log("displayMessage : Rendering message ");
 		}
 	}
 
@@ -380,11 +406,13 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 
 		this._lookupFieldDetails = lookupDetails;
 
+		// Creating the new instance here
+		_this._recordToUpdate = new EntityReferenceInfo();
+
 		if(lookup != undefined ){
 			let id = this._lookupFieldDetails[_this._lookupMapped] ?? "";
 			let entity = this._lookupFieldDetails[_this._lookupMapped+"@Microsoft.Dynamics.CRM.lookuplogicalname"] ?? "";
 
-			_this._recordToUpdate = new EntityReferenceInfo();
 			_this._recordToUpdate.EntityName = entity;
 			_this._recordToUpdate.Id = (_this._useTextFieldAsLookup &&  _this._forceRecordId != undefined && _this._forceRecordId != null) ?  _this._forceRecordId : id;
 			_this._recordToUpdate.Name = "lookup name here";
@@ -393,12 +421,28 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 			let attr = await _this._context.webAPI.retrieveRecord(_this._recordToUpdate.EntityName, _this._recordToUpdate.Id);
 			_this.isRecordReadOnly(attr["statecode"]);
 			_this._parentRecordDetails.Attributes = attr;
-			//console.log("[getLookupDetails] _this._parentRecordDetails.Attributes : record values retrieved ");
 		}
+		// We display a message and get property for potential quick create button
 		else {
-			this.displayMessage(MessageBarType.info, _this._context.resources.getString("LookupFieldHasNoValue").replace("{0}", this._context.parameters.LookupFieldMapped.raw!));
-			this._renderingInProgress = false;
-			this.showLoading(false);
+			// Grabbing necessary info for quick create possibility
+			let lookupCleaned = this._lookupMapped.replace("_value","").replace("_","");
+			let lookupField : string[] = [];
+			lookupField.push(lookupCleaned);
+			this._context.utils.getEntityMetadata(this._parentRecordDetails.EntityName, lookupField ).then(em => {
+				let relationships = em.ManyToOneRelationships.getAll();
+				let relationshipDetails = relationships.filter(function(relation : any){
+					return relation._referencingAttribute === lookupCleaned;
+				})[0];
+
+				this._recordToUpdate.SchemaName = relationshipDetails?.ReferencingEntityNavigationPropertyName;
+				this._recordToUpdate.EntityName = relationshipDetails?.ReferencedEntity;
+				this._recordToUpdate.QuickCreateEnabled = em.IsQuickCreateEnabled as boolean;	
+				
+				// displaying message to warn user that lookup is empty
+				this.displayMessage(MessageBarType.info, _this._context.resources.getString("LookupFieldHasNoValue").replace("{0}", this._context.parameters.LookupFieldMapped.raw!));
+				this._renderingInProgress = false;
+				this.showLoading(false);
+			});
 		}
 	}
 
@@ -633,7 +677,7 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 						width : this._context.mode.allocatedWidth,
 						label : label,
 						fieldDefinition : {
-							fieldSchemaName: schemaName.length == 1 ? schemaName[0]._referencingEntityNavigationPropertyName : null,
+							fieldSchemaName: schemaName.length == 1 ? schemaName[0].ReferencingEntityNavigationPropertyName : null,
 							isRequired : isRequired,
 							isDirty : false,
 							fieldName : techFieldName,

From 9bff70623acd8ae72d4d8eb1e0aa7d2f332bc9a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20OLIVIER?= <clement.olivier@javista.com>
Date: Wed, 26 Aug 2020 22:55:48 +0200
Subject: [PATCH 05/10] handling multi columns

---
 .../QuickEditForm/ControlManifest.Input.xml   |  1 +
 QuickEditForm/QuickEditForm/index.ts          | 76 ++++++++++++-------
 2 files changed, 51 insertions(+), 26 deletions(-)

diff --git a/QuickEditForm/QuickEditForm/ControlManifest.Input.xml b/QuickEditForm/QuickEditForm/ControlManifest.Input.xml
index 3e80fab..0965929 100644
--- a/QuickEditForm/QuickEditForm/ControlManifest.Input.xml
+++ b/QuickEditForm/QuickEditForm/ControlManifest.Input.xml
@@ -9,6 +9,7 @@
       <value name="true" display-name-key="True" description-key="true">true</value>
       <value name="false" display-name-key="False" description-key="false">false</value>
     </property>
+    <property name="NumberOfColumn" display-name-key="Number of columns" description-key="Ability to split the fields in several columns" of-type="Whole.None" usage="input" required="false" default-value="1"/>
     <!-- 
       Property node's of-type attribute can be of-type-group attribute. 
       Example:
diff --git a/QuickEditForm/QuickEditForm/index.ts b/QuickEditForm/QuickEditForm/index.ts
index 8837dd0..afe8160 100644
--- a/QuickEditForm/QuickEditForm/index.ts
+++ b/QuickEditForm/QuickEditForm/index.ts
@@ -38,6 +38,7 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 	private _useTextFieldAsLookup : boolean;
 	private _forceRecordId : string;
 	private _relationShips : any;
+	private _columnNumber : number;
 
 	private notifyOutputChanged: () => void;
 
@@ -463,6 +464,9 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 
 		this._lookupMapped = this._context.parameters.LookupFieldMapped.raw!;
 
+		// Since it's a new parameter, it can be undefined.
+		this._columnNumber = this._context.parameters.NumberOfColumn === undefined ? 1 : this._context.parameters.NumberOfColumn?.raw!;
+
 		this._useTextFieldAsLookup = (this._context.parameters.UseTextFieldAsLookup && this._context.parameters.UseTextFieldAsLookup.raw && this._context.parameters.UseTextFieldAsLookup.raw.toLowerCase() === "true") ? true : false;
 
 		this._clientUrl = (<any>this._context).page.getClientUrl();
@@ -587,7 +591,7 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 		//console.log("[processFormXmlData] : processing fields from formxml ");
 		// Building the result details
 		var sections = $.parseXML(formxml).getElementsByTagName("section");
-		var i, j;
+		var i, j, k;
 		for(i = 0; i < sections.length; i++){
 			var section = sections[i].outerHTML;
 			
@@ -597,6 +601,7 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 				continue;
 			}
 
+			// We prepare the section block
 			// @ts-ignore
 			if($.parseXML(section).getElementsByTagName("section")[0].attributes.showlabel.value == "true"){
 				// @ts-ignore
@@ -611,34 +616,53 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 				
 				this._formDiv.appendChild(sectionh1);
 			}
+			
+			const divWidth = Math.ceil(100 / this._columnNumber); 
 
-			// a row = a field
-			var rows = $.parseXML(section).getElementsByTagName("row");
-			for(j = 0; j < rows.length; j++)
-			{
-				let row = rows[j].outerHTML;
-				// @ts-ignore
-				if($.parseXML(row).getElementsByTagName("control").length == 0 || $.parseXML(row).getElementsByTagName("label").length == 0 || $.parseXML(row).getElementsByTagName("control")[0].attributes.datafieldname == undefined || $.parseXML(row).getElementsByTagName("label")[0].attributes.description == undefined){
-					continue;
-				}
-
-				// @ts-ignore
-				var rowTechName =  $.parseXML(row).getElementsByTagName("control")[0].attributes.datafieldname.value;
-				// @ts-ignore
-				let isReadOnly =  $.parseXML(row).getElementsByTagName("control")[0].attributes.disabled.value === "true";
+			// Creating the parent div handling column management
+			var divflex = document.createElement("div");
+			divflex.style.display = "flex";
+			this._formDiv.appendChild(divflex);
 
-				// Checking if in the attributes metadata we find the current field
-				let fieldDetail = attributesDetail.filter(function(a: any){
-					return a._logicalName == rowTechName}
-				);
+			for(k = 0; k < this._columnNumber; k++){
 				
-				if(fieldDetail.length == 1)
+				var subColumnDiv = document.createElement("div");
+				subColumnDiv.style.width = divWidth+"%";
+				subColumnDiv.style.marginRight = "5px";
+				divflex.appendChild(subColumnDiv);
+
+				// a row = a field
+				var rows = $.parseXML(section).getElementsByTagName("row");
+				let numberOfRowPerColumn = Math.ceil(rows.length / this._columnNumber);
+				let nextColumnCount = numberOfRowPerColumn * (k+1) > rows.length ? rows.length : numberOfRowPerColumn * (k+1);
+
+				for(j = numberOfRowPerColumn * k; j < nextColumnCount; j++)
 				{
-					fieldDetail = fieldDetail[0];
-				}
+					console.log("K : "+k+" - J:"+j);
+					let row = rows[j].outerHTML;
+					// @ts-ignore
+					if($.parseXML(row).getElementsByTagName("control").length == 0 || $.parseXML(row).getElementsByTagName("label").length == 0 || $.parseXML(row).getElementsByTagName("control")[0].attributes.datafieldname == undefined || $.parseXML(row).getElementsByTagName("label")[0].attributes.description == undefined){
+						continue;
+					}
+
+					// @ts-ignore
+					var rowTechName =  $.parseXML(row).getElementsByTagName("control")[0].attributes.datafieldname.value;
+					// @ts-ignore
+					let isReadOnly =  $.parseXML(row).getElementsByTagName("control")[0].attributes.disabled.value === "true";
 
-				// Generating the fields rendering
-				this.retrieveFieldOptions(fieldDetail, isReadOnly);	
+					// Checking if in the attributes metadata we find the current field
+					let fieldDetail = attributesDetail.filter(function(a: any){
+						return a._logicalName == rowTechName}
+					);
+					
+					if(fieldDetail.length == 1)
+					{
+						fieldDetail = fieldDetail[0];
+					}
+
+					// Generating the fields rendering
+					this.retrieveFieldOptions(fieldDetail, isReadOnly, subColumnDiv);	
+				}
 			}
 		}
 	}
@@ -647,7 +671,7 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 	 * Render the fields based on the metatada
 	 * @param fieldDetail field metadata
 	 */
-	private retrieveFieldOptions(fieldDetail: any, fieldReadOnly : boolean){
+	private retrieveFieldOptions(fieldDetail: any, fieldReadOnly : boolean, divflex : HTMLDivElement){
 		let _this = this;
 		let item = document.createElement("div");
 		var techFieldName = fieldDetail.attributeDescriptor.LogicalName;
@@ -854,7 +878,7 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 				break;
 		}
 
-		this._formDiv.appendChild(item);
+		divflex.appendChild(item);
 	}
 
 	/**

From a5d9a44a0500c8242c592e7c29476af78fb95674 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20OLIVIER?= <clement.olivier@javista.com>
Date: Wed, 26 Aug 2020 23:40:41 +0200
Subject: [PATCH 06/10] adding multi line text field support

---
 .../AnyCompositeFIelds/ControlManifest.Input.xml             | 5 ++++-
 .../AnyCompositeFIelds/components/CompositeControl.tsx       | 3 +++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/AnyCompositeFields/AnyCompositeFIelds/ControlManifest.Input.xml b/AnyCompositeFields/AnyCompositeFIelds/ControlManifest.Input.xml
index f9b4aa0..582f8f7 100644
--- a/AnyCompositeFields/AnyCompositeFIelds/ControlManifest.Input.xml
+++ b/AnyCompositeFields/AnyCompositeFIelds/ControlManifest.Input.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest>
-  <control namespace="Carfup" constructor="AnyCompositeFIelds" version="0.0.72" display-name-key="Carfup.AnyCompositeFIelds" description-key="AnyCompositeFIelds will allow  you to display any stack of fields as composite rendering." control-type="standard" preview-image="img/preview.png">
+  <control namespace="Carfup" constructor="AnyCompositeFIelds" version="0.0.74" display-name-key="Carfup.AnyCompositeFIelds" description-key="AnyCompositeFIelds will allow  you to display any stack of fields as composite rendering." control-type="standard" preview-image="img/preview.png">
     <!-- property node identifies a specific, configurable piece of data that the control expects from CDS -->
     <property name="FieldToAttachControl" display-name-key="FieldToAttachControl" description-key="Field to attach the control to" of-type-group="strings" usage="bound" required="true" />
     <property name="separator" display-name-key="Values separator" description-key="Separator to split the mapped values (for a space, put %20)" of-type="SingleLine.Text" usage="input" required="true" default-value="%20" />
@@ -20,6 +20,9 @@
       <type>SingleLine.Email</type>
       <type>SingleLine.Text</type>
       <type>SingleLine.Phone</type>
+      <type>SingleLine.TextArea</type>
+      <type>SingleLine.URL</type>
+      <type>Multiple</type>
     </type-group>
     <!-- 
       Property node's of-type attribute can be of-type-group attribute. 
diff --git a/AnyCompositeFields/AnyCompositeFIelds/components/CompositeControl.tsx b/AnyCompositeFields/AnyCompositeFIelds/components/CompositeControl.tsx
index aea7d69..f7e4a1e 100644
--- a/AnyCompositeFields/AnyCompositeFIelds/components/CompositeControl.tsx
+++ b/AnyCompositeFields/AnyCompositeFIelds/components/CompositeControl.tsx
@@ -61,6 +61,7 @@ export default class CompositeControl extends React.Component<ICompositeControlP
                             {elements.map((value, index) => {
                                 // @ts-ignore
                                 let element = this.state.compositeValue[value];
+                                const isMultiline = element.type === "SingleLine.TextArea" || element.type === "Multiple";
                                 
                                 return element.attributes.LogicalName != undefined && <TextField 
                                     value={element.raw!} 
@@ -69,6 +70,8 @@ export default class CompositeControl extends React.Component<ICompositeControlP
                                     onChange={this.onChangeField}
                                     disabled={this.state.disabled || element.disabled!}
                                     styles={textFieldStyles}
+                                    multiline={isMultiline}
+                                    autoAdjustHeight={isMultiline}
                                     required={element.attributes.RequiredLevel == 1 || element.attributes.RequiredLevel == 2}
                                     maxLength={element.attributes.MaxLength}
                                 />

From b17b0de079f30434822061ea3097ee3b53822163 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20OLIVIER?= <clement.olivier@javista.com>
Date: Thu, 27 Aug 2020 00:07:52 +0200
Subject: [PATCH 07/10] adding capability to click on field for phone and call
 the number

---
 .../components/CompositeControl.tsx             | 17 +++++++++++++++++
 AnyCompositeFields/AnyCompositeFIelds/index.ts  |  1 +
 2 files changed, 18 insertions(+)

diff --git a/AnyCompositeFields/AnyCompositeFIelds/components/CompositeControl.tsx b/AnyCompositeFields/AnyCompositeFIelds/components/CompositeControl.tsx
index f7e4a1e..26848f0 100644
--- a/AnyCompositeFields/AnyCompositeFIelds/components/CompositeControl.tsx
+++ b/AnyCompositeFields/AnyCompositeFIelds/components/CompositeControl.tsx
@@ -4,6 +4,7 @@ import { TextField, ITextFieldStyles } from '@fluentui/react/lib/TextField';
 import { Stack, IStackStyles } from '@fluentui/react/lib/Stack';
 import { Callout, ICalloutContentStyles, DirectionalHint } from '@fluentui/react/lib/Callout';
 import { CompositeValue } from '../EntitiesDefinition';
+import { IInputs } from '../generated/ManifestTypes';
 
 export interface ICompositeControlProps {
     disabled : boolean;
@@ -12,6 +13,7 @@ export interface ICompositeControlProps {
     doneLabel : string;
     randNumber: number;
     onClickedDone : (compositeValue? : CompositeValue) => void;
+    context?: ComponentFramework.Context<IInputs>;
 }
 
 export interface IBCompositeControlState {
@@ -68,6 +70,7 @@ export default class CompositeControl extends React.Component<ICompositeControlP
                                     label={element.attributes.DisplayName}
                                     id={"acf_"+value}
                                     onChange={this.onChangeField}
+                                    onClick={this.onClickPhone}
                                     disabled={this.state.disabled || element.disabled!}
                                     styles={textFieldStyles}
                                     multiline={isMultiline}
@@ -102,6 +105,20 @@ export default class CompositeControl extends React.Component<ICompositeControlP
         this.props.onClickedDone(this.state.compositeValue);
     }
 
+    private onClickPhone = (event: React.MouseEvent<HTMLInputElement | HTMLTextAreaElement, MouseEvent>) : void => {
+        // @ts-ignore
+        let target = event.target.id.replace('acf_', '');
+        const compositeValue = {...this.state}.compositeValue;
+        // @ts-ignore
+        let isPhoneType = compositeValue[target].type === "SingleLine.Phone";
+
+        if(!isPhoneType) return;
+
+        // @ts-ignore
+        const currentValue : any = compositeValue[target].raw!;
+        this.props.context?.navigation.openUrl(`tel:${currentValue}`);
+    }
+
     private buildFullValue = (compositeValue : CompositeValue) : void => {
         let arrayValues = [];
 		
diff --git a/AnyCompositeFields/AnyCompositeFIelds/index.ts b/AnyCompositeFields/AnyCompositeFIelds/index.ts
index 4f6c049..f733b88 100644
--- a/AnyCompositeFields/AnyCompositeFIelds/index.ts
+++ b/AnyCompositeFields/AnyCompositeFIelds/index.ts
@@ -112,6 +112,7 @@ export class AnyCompositeFIelds implements ComponentFramework.StandardControl<II
 			);
 
 			let optionsText = {
+				context : this._context,
 				compositeValue : this._compositeValue,
 				doneLabel : this._context.resources.getString("Done"),
 				disabled : this._context.mode.isControlDisabled,

From a5710a509c21bf347a6439e96550bd996b5e979d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20OLIVIER?= <clement.olivier@javista.com>
Date: Thu, 27 Aug 2020 09:39:11 +0200
Subject: [PATCH 08/10] handling open phone call, url and mailto

---
 .../components/CompositeControl.tsx           | 50 +++++++++++++++----
 1 file changed, 41 insertions(+), 9 deletions(-)

diff --git a/AnyCompositeFields/AnyCompositeFIelds/components/CompositeControl.tsx b/AnyCompositeFields/AnyCompositeFIelds/components/CompositeControl.tsx
index 26848f0..d699079 100644
--- a/AnyCompositeFields/AnyCompositeFIelds/components/CompositeControl.tsx
+++ b/AnyCompositeFields/AnyCompositeFIelds/components/CompositeControl.tsx
@@ -70,13 +70,14 @@ export default class CompositeControl extends React.Component<ICompositeControlP
                                     label={element.attributes.DisplayName}
                                     id={"acf_"+value}
                                     onChange={this.onChangeField}
-                                    onClick={this.onClickPhone}
+                                    onDoubleClick={this.onDoubleClick}
                                     disabled={this.state.disabled || element.disabled!}
                                     styles={textFieldStyles}
                                     multiline={isMultiline}
                                     autoAdjustHeight={isMultiline}
                                     required={element.attributes.RequiredLevel == 1 || element.attributes.RequiredLevel == 2}
                                     maxLength={element.attributes.MaxLength}
+                                    iconProps={{ iconName: this.getIcon(element.type) }} 
                                 />
                             })}
 
@@ -105,18 +106,31 @@ export default class CompositeControl extends React.Component<ICompositeControlP
         this.props.onClickedDone(this.state.compositeValue);
     }
 
-    private onClickPhone = (event: React.MouseEvent<HTMLInputElement | HTMLTextAreaElement, MouseEvent>) : void => {
+    private onDoubleClick = (event: React.MouseEvent<HTMLInputElement | HTMLTextAreaElement, MouseEvent>) : void => {
         // @ts-ignore
         let target = event.target.id.replace('acf_', '');
         const compositeValue = {...this.state}.compositeValue;
         // @ts-ignore
-        let isPhoneType = compositeValue[target].type === "SingleLine.Phone";
-
-        if(!isPhoneType) return;
-
-        // @ts-ignore
-        const currentValue : any = compositeValue[target].raw!;
-        this.props.context?.navigation.openUrl(`tel:${currentValue}`);
+        switch(compositeValue[target].type){
+            case "SingleLine.Phone":
+                // @ts-ignore
+                const currentValue : any = compositeValue[target].raw!;
+                this.props.context?.navigation.openUrl(`tel:${currentValue}`);
+            break;
+            case "SingleLine.URL":
+                // @ts-ignore
+                const currentValue : any = compositeValue[target].raw!;
+                this.props.context?.navigation.openUrl(`${currentValue}`);
+            break;
+            case "SingleLine.Email":
+                // @ts-ignore
+                const currentValue : any = compositeValue[target].raw!;
+                this.props.context?.navigation.openUrl(`mailto:${currentValue}`);
+            break;
+            default : 
+            return;
+        }
+       
     }
 
     private buildFullValue = (compositeValue : CompositeValue) : void => {
@@ -135,5 +149,23 @@ export default class CompositeControl extends React.Component<ICompositeControlP
                   
         this.setState({compositeValue : compositeValue});
     }
+
+    private getIcon = (type: string) : string => {
+        let icon = "";
+
+        switch(type){
+            case "SingleLine.Phone" :
+                icon = "Phone";
+                break;
+            case "SingleLine.URL": 
+                icon = "Globe";
+                break;
+            case "SingleLine.Email":
+                icon = "EditMail";
+                break;
+        }
+
+        return icon;
+    }
 };
 

From 98217b36b25070f6f3899bc3ed851b3aa61fd74f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20OLIVIER?= <clement.olivier@javista.com>
Date: Thu, 27 Aug 2020 09:59:37 +0200
Subject: [PATCH 09/10] opening the phonecall activity form as well

---
 .../components/CompositeControl.tsx                | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/AnyCompositeFields/AnyCompositeFIelds/components/CompositeControl.tsx b/AnyCompositeFields/AnyCompositeFIelds/components/CompositeControl.tsx
index d699079..b5ed21c 100644
--- a/AnyCompositeFields/AnyCompositeFIelds/components/CompositeControl.tsx
+++ b/AnyCompositeFields/AnyCompositeFIelds/components/CompositeControl.tsx
@@ -5,6 +5,7 @@ import { Stack, IStackStyles } from '@fluentui/react/lib/Stack';
 import { Callout, ICalloutContentStyles, DirectionalHint } from '@fluentui/react/lib/Callout';
 import { CompositeValue } from '../EntitiesDefinition';
 import { IInputs } from '../generated/ManifestTypes';
+import { cpuUsage } from 'process';
 
 export interface ICompositeControlProps {
     disabled : boolean;
@@ -110,12 +111,25 @@ export default class CompositeControl extends React.Component<ICompositeControlP
         // @ts-ignore
         let target = event.target.id.replace('acf_', '');
         const compositeValue = {...this.state}.compositeValue;
+        // @ts-ignore
+		var contextInfo = this.props.context?.mode.contextInfo;
         // @ts-ignore
         switch(compositeValue[target].type){
             case "SingleLine.Phone":
                 // @ts-ignore
                 const currentValue : any = compositeValue[target].raw!;
                 this.props.context?.navigation.openUrl(`tel:${currentValue}`);
+                this.props.context?.navigation.openForm({
+                    entityName : "phonecall",
+                    createFromEntity : {
+                        // @ts-ignore
+                        id : contextInfo.entityId,
+                        // @ts-ignore
+                        entityType : contextInfo.entityTypeName,
+                        // @ts-ignore
+                        name : contextInfo.entityRecordName
+                    }
+                });
             break;
             case "SingleLine.URL":
                 // @ts-ignore

From 47cfd2f29a8e00d3f2806c38115579e71d5e8d22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20OLIVIER?= <clement.olivier@javista.com>
Date: Tue, 1 Sep 2020 21:11:12 +0200
Subject: [PATCH 10/10] ability to call a number

---
 .../AnyCompositeFIelds/ControlManifest.Input.xml         | 2 +-
 .../AnyCompositeFIelds/components/CompositeControl.tsx   | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/AnyCompositeFields/AnyCompositeFIelds/ControlManifest.Input.xml b/AnyCompositeFields/AnyCompositeFIelds/ControlManifest.Input.xml
index 582f8f7..8a32397 100644
--- a/AnyCompositeFields/AnyCompositeFIelds/ControlManifest.Input.xml
+++ b/AnyCompositeFields/AnyCompositeFIelds/ControlManifest.Input.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest>
-  <control namespace="Carfup" constructor="AnyCompositeFIelds" version="0.0.74" display-name-key="Carfup.AnyCompositeFIelds" description-key="AnyCompositeFIelds will allow  you to display any stack of fields as composite rendering." control-type="standard" preview-image="img/preview.png">
+  <control namespace="Carfup" constructor="AnyCompositeFIelds" version="0.0.75" display-name-key="Carfup.AnyCompositeFIelds" description-key="AnyCompositeFIelds will allow  you to display any stack of fields as composite rendering." control-type="standard" preview-image="img/preview.png">
     <!-- property node identifies a specific, configurable piece of data that the control expects from CDS -->
     <property name="FieldToAttachControl" display-name-key="FieldToAttachControl" description-key="Field to attach the control to" of-type-group="strings" usage="bound" required="true" />
     <property name="separator" display-name-key="Values separator" description-key="Separator to split the mapped values (for a space, put %20)" of-type="SingleLine.Text" usage="input" required="true" default-value="%20" />
diff --git a/AnyCompositeFields/AnyCompositeFIelds/components/CompositeControl.tsx b/AnyCompositeFields/AnyCompositeFIelds/components/CompositeControl.tsx
index b5ed21c..540e70c 100644
--- a/AnyCompositeFields/AnyCompositeFIelds/components/CompositeControl.tsx
+++ b/AnyCompositeFields/AnyCompositeFIelds/components/CompositeControl.tsx
@@ -56,7 +56,7 @@ export default class CompositeControl extends React.Component<ICompositeControlP
                 {this.state.showCallout && (
                     <Callout
                         target={"#acf_compositeFullValue"+this.props.randNumber}
-                        onDismiss={() => this.setState({ showCallout : false }) }
+                        onDismiss={this.onDismissCallout}
                         styles={calloutStyles}
                         directionalHint={DirectionalHint.topCenter}
                     >
@@ -91,6 +91,12 @@ export default class CompositeControl extends React.Component<ICompositeControlP
         );
     }
 
+    private onDismissCallout = (ev?: any) : void => {
+        if(this.props.context?.client.getClient() !== "Mobile"){
+            this.setState({ showCallout : false });
+        }
+    }
+
     private onChangeField = (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string | undefined) : void => {
         // @ts-ignore
         let target = event.target.id.replace('acf_', '');
@@ -130,6 +136,7 @@ export default class CompositeControl extends React.Component<ICompositeControlP
                         name : contextInfo.entityRecordName
                     }
                 });
+                this.setState({showCallout : false});
             break;
             case "SingleLine.URL":
                 // @ts-ignore