Merge pull request #40 from carfup/i39_requiredField

I39 required field
carfup · Jul 23, 2020 · 422c016 · 422c016
2 parents e870629 + 11d0ad5
commit 422c016
Show file tree

Hide file tree

Showing 25 changed files with 121 additions and 31 deletions.
diff --git a/AnyCompositeFields/AnyCompositeFIelds/components/CompositeControl.tsx b/AnyCompositeFields/AnyCompositeFIelds/components/CompositeControl.tsx
@@ -66,6 +66,7 @@ export default class CompositeControl extends React.Component<ICompositeControlP
                                     onChange={this.onChangeField}
                                     disabled={this.state.disabled || element.disabled!}
                                     styles={textFieldStyles}
+                                    required={element.attributes.RequiredLevel == 1 || element.attributes.RequiredLevel == 2}
                                     maxLength={element.attributes.MaxLength}
                                 />
                             })}

diff --git a/QuickEditForm/QuickEditForm/ControlManifest.Input.xml b/QuickEditForm/QuickEditForm/ControlManifest.Input.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest>
-  <control namespace="Carfup" constructor="QuickEditForm" version="0.0.227" display-name-key="Carfup.QuickEditForm" description-key="QuickEditForm allows you to edit data from a lookup record using a Quick View Form definition as enty form." control-type="standard" preview-image="img/preview.png">
+  <control namespace="Carfup" constructor="QuickEditForm" version="0.0.230" display-name-key="Carfup.QuickEditForm" description-key="QuickEditForm allows you to edit data from a lookup record using a Quick View Form definition as enty form." 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="Property_Desc_Key" of-type="SingleLine.Text" usage="bound" required="true" />
     <property name="QuickViewFormId" display-name-key="QuickViewFormId" description-key="GUID of the Quick View Form to render" of-type="SingleLine.Text" usage="input" required="true" />

diff --git a/QuickEditForm/QuickEditForm/EntitiesDefinition.ts b/QuickEditForm/QuickEditForm/EntitiesDefinition.ts
@@ -12,6 +12,7 @@ export class EntityReferenceIdName{
 
 export class DataFieldDefinition {
 	public isDirty? : boolean;
+	public isRequired? : boolean;
 	public fieldName? : string;
 	public fieldType? : string;
 	public fieldValue? : any;

diff --git a/QuickEditForm/QuickEditForm/components/DatePickerControl.tsx b/QuickEditForm/QuickEditForm/components/DatePickerControl.tsx
@@ -101,7 +101,7 @@ export default class DatePickerControl extends React.Component<IDatePickerProper
       <Stack horizontal  styles={{root : {
         paddingBottom: "3.5px", paddingTop:"3.5px", borderBottom: "1px solid rgb(216, 216, 216)"
         }}}>
-        <Stack.Item styles={{root : { width : '170px' }}} ><Label style={{position: 'absolute',fontWeight: 'normal'}}>{this.props.label}</Label></Stack.Item>
+        <Stack.Item styles={{root : { width : '170px' }}} ><Label style={{position: 'absolute',fontWeight: 'normal'}} required={this.state.fieldDefinition?.isRequired}>{this.props.label}</Label></Stack.Item>
         <Stack.Item grow={(this.props.showTime ? 1 : 1)}>
           <DatePicker
             disabled={this.props.disabled!}

diff --git a/QuickEditForm/QuickEditForm/components/FilteredOptionsetControl.tsx b/QuickEditForm/QuickEditForm/components/FilteredOptionsetControl.tsx
@@ -33,7 +33,9 @@ export default class FilteredOptionsetControl extends React.Component<IFilteredO
             <Stack horizontal  styles={{root : {
                 paddingBottom: "3.5px", paddingTop:"3.5px", borderBottom: "1px solid rgb(216, 216, 216)"
             }}}>
-                <Stack.Item styles={{root : { width : '170px' }}} ><Label style={{position: 'absolute',fontWeight: 'normal'}}>{this.props.label}</Label></Stack.Item>
+                <Stack.Item styles={{root : { width : '170px' }}} >
+                    <Label style={{position: 'absolute',fontWeight: 'normal'}} required={this.state.fieldDefinition?.isRequired}>{this.props.label}</Label>
+                </Stack.Item>
                 <Stack.Item grow>
                     {!this.props.isMultiSelect && <Dropdown
                     disabled={this.props.disabled!}
@@ -43,7 +45,7 @@ export default class FilteredOptionsetControl extends React.Component<IFilteredO
                     placeHolder="--Select--"
                     options={this.props.options}            
                     selectedKey={(!this.props.isMultiSelect ?
-                        this.state.fieldDefinition?.fieldValue.toString() : 
+                        this.state.fieldDefinition?.fieldValue?.toString() : 
                         null
                     )}
                     onChange={this.onChange}

diff --git a/QuickEditForm/QuickEditForm/components/TextFieldControl.tsx b/QuickEditForm/QuickEditForm/components/TextFieldControl.tsx
@@ -34,14 +34,12 @@ export default class TextFieldControl extends React.Component<ITextFieldControlP
         };
     }
 
-
-
     render() {
         return (
             <Stack horizontal  styles={{root : {
                 paddingBottom: "3.5px", paddingTop:"3.5px", borderBottom: "1px solid rgb(216, 216, 216)"
             }}}>
-                <Stack.Item styles={{root : { width : '170px' }}} ><Label style={{position: 'absolute', fontWeight: 'normal'}}>{this.props.label}</Label></Stack.Item>
+                <Stack.Item styles={{root : { width : '170px' }}} ><Label style={{position: 'absolute', fontWeight: 'normal'}} required={this.state.fieldDefinition?.isRequired}>{this.props.label}</Label></Stack.Item>
                 <Stack.Item grow>
                     <TextField 
                         disabled={this.props.disabled!}

diff --git a/QuickEditForm/QuickEditForm/components/ToggleControl.tsx b/QuickEditForm/QuickEditForm/components/ToggleControl.tsx
@@ -30,7 +30,7 @@ export default class ToggleControl  extends React.Component<IToggleProps, IToggl
                 paddingBottom: "3.5px", paddingTop:"3.5px", borderBottom: "1px solid rgb(216, 216, 216)"
             }}}>
                 <Stack.Item styles={{root : { width : '170px' }}} >
-                    <Label style={{position: 'absolute',fontWeight: 'normal'}}>{this.props.label}</Label></Stack.Item>
+                    <Label style={{position: 'absolute',fontWeight: 'normal'}} required={this.state.fieldDefinition?.isRequired}>{this.props.label}</Label></Stack.Item>
                 <Stack.Item grow>
                     <Toggle
                         onText={this.props.options[1].Label}

diff --git a/QuickEditForm/QuickEditForm/index.ts b/QuickEditForm/QuickEditForm/index.ts
@@ -74,9 +74,6 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 
 		this.addButtons();
 
-		this._quickViewFormId = context.parameters.QuickViewFormId.raw!;
-		this._forceRecordId = context.parameters.FieldToAttachControl.raw!;
-
 		this._container = container;
 	}
 
@@ -165,6 +162,19 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 		let _this = this;	
 
 		this._updateError = false;
+
+
+		// checking if we have empty required fields
+		var emptyRequiredFields = this._dataFieldDefinitions.filter(function (dfd){
+			if(dfd.isRequired && dfd.fieldValue == undefined)
+				return true;
+		});
+
+		if(emptyRequiredFields){
+			_this.displayMessage(MessageBarType.error, _this._context.resources.getString("EmptyRequiredFields"));
+			this._buttonsComponnent.setState({disabled : true});
+			return;
+		}
 
 		// Checking if we have dirty values on the form
 		var dirtyValues = this._dataFieldDefinitions.filter(function(dfd) {
@@ -173,6 +183,7 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 			}
 		});
 
+
 		if(dirtyValues.length == 0){
 			return;
 		}
@@ -185,7 +196,7 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 		var lookupToClear: string[] = [];
 		let entityNamePlural = "";
 		dirtyValues.forEach(function(data){
-			if(data.fieldValue.EntityName != undefined)
+			if(data.fieldValue?.EntityName != undefined)
 				entityNamePlural = _this.getEntityPluralName(data.fieldValue.EntityName);
 
 			switch(data.fieldType){
@@ -383,6 +394,9 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 		this._parentRecordDetails.Id = contextInfo.entityId;
 		this._parentRecordDetails.Name = contextInfo.entityRecordName;
 
+		this._quickViewFormId = this._context.parameters.QuickViewFormId.raw!;
+		this._forceRecordId = this._context.parameters.FieldToAttachControl.raw!;
+
 		this._lookupMapped = this._context.parameters.LookupFieldMapped.raw!;
 
 		this._useTextFieldAsLookup = (this._context.parameters.UseTextFieldAsLookup && this._context.parameters.UseTextFieldAsLookup.raw && this._context.parameters.UseTextFieldAsLookup.raw.toLowerCase() === "true") ? true : false;
@@ -405,7 +419,6 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 	 * @param id id of the lookup field which the pcf is attached to
 	 */
 	private async queryQuickViewFormData(id : string){
-
 		try
 		{
 			// Rendering is already in progress !
@@ -513,22 +526,26 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 		for(i = 0; i < sections.length; i++){
 			var section = sections[i].outerHTML;
 
-
+			// If we do not load the title or description is empty !
 			// @ts-ignore
 			if($.parseXML(section).getElementsByTagName("label")[0].attributes.description == undefined){
 				continue;
 			}
+
 			// @ts-ignore
-			var sectionLabel =  $.parseXML(section).getElementsByTagName("label")[0].attributes.description.value;
-
-			// Adding Section Name
-			var sectionh1 =  document.createElement("h1");
-			sectionh1.style.borderBottom = "1px solid rgb(216, 216, 216)";
-			sectionh1.style.marginTop = "10px"
-			sectionh1.setAttribute("class", "js");
-			sectionh1.innerText = sectionLabel.toUpperCase();
-
-			this._formDiv.appendChild(sectionh1);
+			if($.parseXML(section).getElementsByTagName("section")[0].attributes.showlabel.value == "true"){
+				// @ts-ignore
+				var sectionLabel =  $.parseXML(section).getElementsByTagName("label")[0].attributes.description.value;
+
+				// Adding Section Name
+				var sectionh1 =  document.createElement("h1");
+				sectionh1.style.borderBottom = "1px solid rgb(216, 216, 216)";
+				sectionh1.style.marginTop = "10px"
+				sectionh1.setAttribute("class", "js");
+				sectionh1.innerText = sectionLabel.toUpperCase();
+
+				this._formDiv.appendChild(sectionh1);
+			}
 
 			// a row = a field
 			var rows = $.parseXML(section).getElementsByTagName("row");
@@ -554,24 +571,25 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 				}
 
 				// Generating the fields rendering
-				this.retrieveFieldOptions(fieldDetail, rowTechName);	
+				this.retrieveFieldOptions(fieldDetail);	
 			}
 		}
 	}
 
 	/**
 	 * Render the fields based on the metatada
 	 * @param fieldDetail field metadata
-	 * @param techFieldName field technical name
 	 */
-	private retrieveFieldOptions(fieldDetail: any, techFieldName : string){
+	private retrieveFieldOptions(fieldDetail: any){
 		let _this = this;
 		let item = document.createElement("div");
+		var techFieldName = fieldDetail.attributeDescriptor.LogicalName;
 		var controlId = "carfup_qef_"+techFieldName;
 		var type = fieldDetail.attributeDescriptor.Type;
 		var label = fieldDetail.DisplayName;
 
 		let isReadOnly = !fieldDetail.attributeDescriptor.IsValidForUpdate || this._isRecordReadOnly;
+		let isRequired = fieldDetail.attributeDescriptor.RequiredLevel == 1 || fieldDetail.attributeDescriptor.RequiredLevel == 2;
 
 		// Grabing the proper datafieldDefinition
 		let dataFieldDefinitionsDetails = this.getDataFieldDefinition(techFieldName);
@@ -589,7 +607,8 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 						width : this._context.mode.allocatedWidth,
 						label : label,
 						fieldDefinition : {
-							idDirty : false,
+							isRequired : isRequired,
+							isDirty : false,
 							fieldName : techFieldName,
 							fieldType : (type == "lookup" && fieldDetail.attributeDescriptor.Format == 2)  ? "regarding" : type,
 							controlId : controlId,
@@ -619,6 +638,7 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 						width : this._context.mode.allocatedWidth,
 						fieldDefinition : {
 							isDirty : false,
+							isRequired : isRequired,
 							fieldName : techFieldName,
 							fieldType : detailDateType,
 							controlId : controlId,
@@ -643,6 +663,8 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 				break;
 			case 'multiselectpicklist':
 			case 'picklist': 
+			case 'state':
+			case 'status':
 				const ddvalueOptions: IDropdownOption[] = fieldDetail.attributeDescriptor.OptionSet.map((o : any) => ({ key: o.Value.toString(), text : o.Label }));
 
 				if(type == "picklist"){
@@ -653,6 +675,7 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 					width : this._context.mode.allocatedWidth,
 					fieldDefinition : {
 						isDirty : false,
+						isRequired : isRequired,
 						fieldName : techFieldName,
 						fieldType : type,
 						controlId : controlId,
@@ -677,7 +700,8 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 						width : this._context.mode.allocatedWidth,
 						label : label,
 						fieldDefinition : {
-							idDirty : false,
+							isDirty : false,
+							isRequired : isRequired,
 							fieldName : techFieldName,
 							fieldType : type,
 							controlId : controlId,
@@ -708,7 +732,8 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 					label : label,
 					disabled : isReadOnly,
 					fieldDefinition : {
-						idDirty : false,
+						isDirty : false,
+						isRequired : isRequired,
 						fieldName : techFieldName,
 						fieldType : type,
 						controlId : controlId,
@@ -735,7 +760,8 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 						width : this._context.mode.allocatedWidth,
 						label : label,
 						fieldDefinition : {
-							idDirty : false,
+							isDirty : false,
+							isRequired : isRequired,
 							fieldName : techFieldName,
 							fieldType : type,
 							controlId : controlId,
@@ -840,6 +866,10 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 		}
 	}
 
+	/**
+	 * Return entityname in plural version
+	 * @param entityName entity to retrieve in plural version
+	 */
 	private getEntityPluralName(entityName : string) : string{
 		if(entityName.endsWith("s"))
 			return entityName+"es";
@@ -848,4 +878,11 @@ export class QuickEditForm implements ComponentFramework.StandardControl<IInputs
 		else
 			return entityName+"s";
 	}
+
+	private isGuid(guid : string, field : string) {
+		var regexGuid = /^(\{){0,1}[0-9a-fA-F]{8}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{12}(\}){0,1}$/gi;
+    	if(regexGuid.test(guid)){
+			this.displayMessage(MessageBarType.error, `The guid for the parameter ${field} has an incorrect format.`);
+		}
+	}
 }
diff --git a/QuickEditForm/QuickEditForm/strings/QuickEditForm.1030.resx b/QuickEditForm/QuickEditForm/strings/QuickEditForm.1030.resx
@@ -88,4 +88,7 @@
 <data name="SelectOptionDropdown" xml:space="preserve">
     <value>--Vælg--</value>
 </data>
+<data name="EmptyRequiredFields" xml:space="preserve">
+    <value>Mindst et påkrævet felt er ikke udfyldt.</value>
+</data>
 </root>
diff --git a/QuickEditForm/QuickEditForm/strings/QuickEditForm.1031.resx b/QuickEditForm/QuickEditForm/strings/QuickEditForm.1031.resx
@@ -88,4 +88,7 @@
 <data name="SelectOptionDropdown" xml:space="preserve">
     <value>--Auswählen--</value>
 </data>
+<data name="EmptyRequiredFields" xml:space="preserve">
+    <value>Mindestens ein Pflichtfeld ist nicht ausgefüllt.</value>
+</data>
 </root>
diff --git a/QuickEditForm/QuickEditForm/strings/QuickEditForm.1033.resx b/QuickEditForm/QuickEditForm/strings/QuickEditForm.1033.resx
@@ -88,4 +88,7 @@
 <data name="SelectOptionDropdown" xml:space="preserve">
     <value>--Select--</value>
 </data>
+<data name="EmptyRequiredFields" xml:space="preserve">
+    <value>At least one required field is not filled.</value>
+</data>
 </root>
diff --git a/QuickEditForm/QuickEditForm/strings/QuickEditForm.1035.resx b/QuickEditForm/QuickEditForm/strings/QuickEditForm.1035.resx
@@ -88,4 +88,7 @@
 <data name="SelectOptionDropdown" xml:space="preserve">
     <value>--Select--</value>
 </data>
+<data name="EmptyRequiredFields" xml:space="preserve">
+    <value>Ainakin yhtä pakollista kenttää ei ole täytetty.</value>
+</data>
 </root>
diff --git a/QuickEditForm/QuickEditForm/strings/QuickEditForm.1036.resx b/QuickEditForm/QuickEditForm/strings/QuickEditForm.1036.resx
@@ -88,4 +88,7 @@
 <data name="SelectOptionDropdown" xml:space="preserve">
     <value>--Selectionner--</value>
 </data>
+<data name="EmptyRequiredFields" xml:space="preserve">
+    <value>Au moins un champ obligatoire n'est pas remplit.</value>
+</data>
 </root>
diff --git a/QuickEditForm/QuickEditForm/strings/QuickEditForm.1037.resx b/QuickEditForm/QuickEditForm/strings/QuickEditForm.1037.resx
@@ -88,4 +88,7 @@
   <data name="SelectOptionDropdown" xml:space="preserve">
     <value>--בחר--</value>
   </data>
+  <data name="EmptyRequiredFields" xml:space="preserve">
+    <value>שדה חובה אחד לפחות לא מלא.</value>
+</data>
 </root>
diff --git a/QuickEditForm/QuickEditForm/strings/QuickEditForm.1038.resx b/QuickEditForm/QuickEditForm/strings/QuickEditForm.1038.resx
@@ -88,4 +88,7 @@
 <data name="SelectOptionDropdown" xml:space="preserve">
     <value>--Válasszon--</value>
 </data>
+<data name="EmptyRequiredFields" xml:space="preserve">
+    <value>Legalább egy kötelező mező nincs kitöltve.</value>
+</data>
 </root>
diff --git a/QuickEditForm/QuickEditForm/strings/QuickEditForm.1040.resx b/QuickEditForm/QuickEditForm/strings/QuickEditForm.1040.resx
@@ -88,4 +88,7 @@
 <data name="SelectOptionDropdown" xml:space="preserve">
     <value>--Seleziona--</value>
 </data>
+<data name="EmptyRequiredFields" xml:space="preserve">
+    <value>Almeno un campo obbligatorio non è compilato.</value>
+</data>
 </root>
diff --git a/QuickEditForm/QuickEditForm/strings/QuickEditForm.1043.resx b/QuickEditForm/QuickEditForm/strings/QuickEditForm.1043.resx
@@ -88,4 +88,7 @@
 <data name="SelectOptionDropdown" xml:space="preserve">
     <value>--Selecteren--</value>
 </data>
+<data name="EmptyRequiredFields" xml:space="preserve">
+    <value>Ten minste één verplicht veld is niet ingevuld.</value>
+</data>
 </root>
diff --git a/QuickEditForm/QuickEditForm/strings/QuickEditForm.1044.resx b/QuickEditForm/QuickEditForm/strings/QuickEditForm.1044.resx
@@ -88,4 +88,7 @@
 <data name="SelectOptionDropdown" xml:space="preserve">
     <value>--Velg--</value>
 </data>
+<data name="EmptyRequiredFields" xml:space="preserve">
+    <value>Minst ett obligatorisk felt er ikke fylt ut.</value>
+</data>
 </root>
diff --git a/QuickEditForm/QuickEditForm/strings/QuickEditForm.1045.resx b/QuickEditForm/QuickEditForm/strings/QuickEditForm.1045.resx
@@ -88,4 +88,7 @@
   <data name="SelectOptionDropdown" xml:space="preserve">
     <value>--Wybierz--</value>
   </data>
+  <data name="EmptyRequiredFields" xml:space="preserve">
+    <value>Co najmniej jedno wymagane pole nie jest wypełnione.</value>
+</data>
 </root>