add respectETag to DynamicForm

AJIXuMuK · AJIXuMuK · commit 270bd1dc1a3c · 2023-01-08T17:24:45.000-05:00
diff --git a/docs/documentation/docs/controls/DynamicForm.md b/docs/documentation/docs/controls/DynamicForm.md
@@ -45,3 +45,4 @@ The `DynamicForm` can be configured with the following properties:
 | returnListItemInstanceOnSubmit | boolean | no | Specifies if `onSubmitted` event should pass PnPJS list item (`IItem`) as a second parameter. Default - `true` |
 | webAbsoluteUrl | string | no | Absolute Web Url of target site (user requires permissions). |
 | fieldOverrides | {[columnInternalName: string] : {(fieldProperties: IDynamicFieldProps): React.ReactElement\<IDynamicFieldProps\>}} | no | Key value pair for fields you want to override.  Key is the internal field name, value is the function to be called for the custom element to render. |
+| respectEtag | boolean | no | Specifies if the form should respect the ETag of the item. Default - `true` |
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/controls/dynamicForm/DynamicForm.tsx b/src/controls/dynamicForm/DynamicForm.tsx
@@ -82,7 +82,7 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
         {fieldCollection.length === 0 ? <div><ProgressIndicator label={strings.DynamicFormLoading} description={strings.DynamicFormPleaseWait} /></div> :
           <div>
             {fieldCollection.map((v, i) => {
-              if(fieldOverrides && Object.prototype.hasOwnProperty.call(fieldOverrides, v.columnInternalName)) {
+              if (fieldOverrides && Object.prototype.hasOwnProperty.call(fieldOverrides, v.columnInternalName)) {
                 v.disabled = v.disabled || isSaving;
                 return fieldOverrides[v.columnInternalName](v);
               }
@@ -222,9 +222,11 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
       }
 
       // If we have the item ID, we simply need to update it
+      let newETag: string | undefined = undefined;
       if (listItemId) {
         try {
-          const iur = await sp.web.lists.getById(listId).items.getById(listItemId).update(objects);
+          const iur = await sp.web.lists.getById(listId).items.getById(listItemId).update(objects, this.state.etag);
+          newETag = iur.data['odata.etag'];
           if (onSubmitted) {
             onSubmitted(iur.data, this.props.returnListItemInstanceOnSubmit !== false ? iur.item : undefined);
           }
@@ -239,58 +241,59 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
       }
       // Otherwise, depending on the content type ID of the item, if any, we need to behave accordingly
       else if (contentTypeId === undefined || contentTypeId === '' || !contentTypeId.startsWith('0x0120')) {
-            // We are adding a new list item
-            try {
-              const iar = await sp.web.lists.getById(listId).items.add(objects);
-              if (onSubmitted) {
-                onSubmitted(iar.data, this.props.returnListItemInstanceOnSubmit !== false ? iar.item : undefined);
-              }
-            }
-            catch (error) {
-              if (onSubmitError) {
-                onSubmitError(objects, error);
-              }
-              console.log("Error", error);
-            }
-        } else if (contentTypeId.startsWith('0x0120')) {
-          // We are adding a folder or a Document Set
-          try {
-            const idField = 'ID';
-            const titleField = 'Title';
-            const contentTypeIdField = 'ContentTypeId';
-
-            const library = await sp.web.lists.getById(listId);
-            const folderTitle = (objects[titleField] !== undefined && objects[titleField] !== '') ?
-              (objects[titleField] as string).replace(/["|*|:|<|>|?|/|\\||]/g, "_") : // Replace not allowed chars in folder name
-              ''; // Empty string will be replaced by SPO with Folder Item ID
-            const newFolder = await library.rootFolder.addSubFolderUsingPath(folderTitle);
-            const fields = await newFolder.listItemAllFields();
-            if (fields[idField]) {
-
-              // Read the ID of the just created folder or Document Set
-              const folderId = fields[idField];
-
-              // Set the content type ID for the target item
-              objects[contentTypeIdField] = contentTypeId;
-              // Update the just created folder or Document Set
-              const iur = await library.items.getById(folderId).update(objects);
-              if (onSubmitted) {
-                onSubmitted(iur.data, this.props.returnListItemInstanceOnSubmit !== false ? iur.item : undefined);
-              }
-            } else {
-              throw new Error('Unable to read the ID of the just created folder or Document Set');
-            }
+        // We are adding a new list item
+        try {
+          const iar = await sp.web.lists.getById(listId).items.add(objects);
+          if (onSubmitted) {
+            onSubmitted(iar.data, this.props.returnListItemInstanceOnSubmit !== false ? iar.item : undefined);
+          }
+        }
+        catch (error) {
+          if (onSubmitError) {
+            onSubmitError(objects, error);
           }
-          catch (error) {
-            if (onSubmitError) {
-              onSubmitError(objects, error);
+          console.log("Error", error);
+        }
+      } else if (contentTypeId.startsWith('0x0120')) {
+        // We are adding a folder or a Document Set
+        try {
+          const idField = 'ID';
+          const titleField = 'Title';
+          const contentTypeIdField = 'ContentTypeId';
+
+          const library = await sp.web.lists.getById(listId);
+          const folderTitle = (objects[titleField] !== undefined && objects[titleField] !== '') ?
+            (objects[titleField] as string).replace(/["|*|:|<|>|?|/|\\||]/g, "_") : // Replace not allowed chars in folder name
+            ''; // Empty string will be replaced by SPO with Folder Item ID
+          const newFolder = await library.rootFolder.addSubFolderUsingPath(folderTitle);
+          const fields = await newFolder.listItemAllFields();
+          if (fields[idField]) {
+
+            // Read the ID of the just created folder or Document Set
+            const folderId = fields[idField];
+
+            // Set the content type ID for the target item
+            objects[contentTypeIdField] = contentTypeId;
+            // Update the just created folder or Document Set
+            const iur = await library.items.getById(folderId).update(objects);
+            if (onSubmitted) {
+              onSubmitted(iur.data, this.props.returnListItemInstanceOnSubmit !== false ? iur.item : undefined);
             }
-            console.log("Error", error);
+          } else {
+            throw new Error('Unable to read the ID of the just created folder or Document Set');
+          }
+        }
+        catch (error) {
+          if (onSubmitError) {
+            onSubmitError(objects, error);
           }
+          console.log("Error", error);
+        }
       }
 
       this.setState({
-        isSaving: false
+        isSaving: false,
+        etag: newETag
       });
     } catch (error) {
       if (onSubmitError) {
@@ -346,14 +349,20 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
 
   //getting all the fields information as part of get ready process
   private getFieldInformations = async (): Promise<void> => {
-    const { listId, listItemId, disabledFields } = this.props;
+    const { listId, listItemId, disabledFields, respectETag } = this.props;
     let contentTypeId = this.props.contentTypeId;
     try {
       const spList = await sp.web.lists.getById(listId);
       let item = null;
-      if (listItemId !== undefined && listItemId !== null && listItemId !== 0)
+      let etag: string | undefined = undefined;
+      if (listItemId !== undefined && listItemId !== null && listItemId !== 0) {
         item = await spList.items.getById(listItemId).get();
 
+        if (respectETag !== false) {
+          etag = item['odata.etag'];
+        }
+      }
+
       if (contentTypeId === undefined || contentTypeId === '') {
         const defaultContentType = await spList.contentTypes.select("Id", "Name").get();
         contentTypeId = defaultContentType[0].Id.StringValue;
@@ -390,7 +399,7 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
           }
           if (fieldType === 'Choice' || fieldType === 'MultiChoice') {
             field.Choices.forEach(element => {
-              choices.push({key: element, text: element});
+              choices.push({ key: element, text: element });
             });
           } else if (fieldType === "Note") {
             richText = field.RichText;
@@ -418,15 +427,15 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
             anchorId = field.AnchorId;
             if (item !== null) {
               item[field.InternalName].forEach(element => {
-                selectedTags.push({key: element.TermGuid, name: element.Label});
+                selectedTags.push({ key: element.TermGuid, name: element.Label });
               });
 
               defaultValue = selectedTags;
             } else {
               if (defaultValue !== "") {
                 defaultValue.split(/#|;/).forEach(element => {
                   if (element.indexOf('|') !== -1)
-                    selectedTags.push({key: element.split('|')[1], name: element.split('|')[0]});
+                    selectedTags.push({ key: element.split('|')[1], name: element.split('|')[0] });
                 });
 
                 defaultValue = selectedTags;
@@ -441,12 +450,12 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
             if (item !== null) {
               const response = await this._spService.getSingleManagedMtadataLabel(listId, listItemId, field.InternalName);
               if (response) {
-                selectedTags.push({key: response.TermID, name: response.Label});
+                selectedTags.push({ key: response.TermID, name: response.Label });
                 defaultValue = selectedTags;
               }
             } else {
               if (defaultValue !== "") {
-                selectedTags.push({key: defaultValue.split('|')[1], name: defaultValue.split('|')[0].split('#')[1]});
+                selectedTags.push({ key: defaultValue.split('|')[1], name: defaultValue.split('|')[0].split('#')[1] });
                 defaultValue = selectedTags;
               }
             }
@@ -523,7 +532,7 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
         }
       }
 
-      this.setState({ fieldCollection: tempFields });
+      this.setState({ fieldCollection: tempFields, etag: etag });
       //return arrayItems;
     } catch (error) {
       console.log(`Error get field informations`, error);
diff --git a/src/controls/dynamicForm/IDynamicFormProps.ts b/src/controls/dynamicForm/IDynamicFormProps.ts
@@ -46,16 +46,12 @@ export interface IDynamicFormProps {
    * Key value pair for fields you want to override.  Key is the internal field name, value is the function to be called for the custom element to render
    */
   fieldOverrides?: {[columnInternalName: string] : {(fieldProperties: IDynamicFieldProps): React.ReactElement<IDynamicFieldProps>}};
+
   /**
    * Specifies if onSubmitted event should pass PnPJS list item (IItem) as a second parameter. Default - true
    */
   returnListItemInstanceOnSubmit?: boolean;
 
-  /**
- * Used to execute WebSearch. If not provided SearchTab will not be available.
- */
-  //bingAPIKey?: string;
-  
   /**
    * InternalName of fields that should be disabled
    */
@@ -68,6 +64,11 @@ export interface IDynamicFormProps {
 
   /**
    * Absolute Web Url of target site (user requires permissions)
-   * */
+   */
   webAbsoluteUrl?: string;
+
+  /**
+   * Specifies if ETag should be respected when updating the item. Default - true
+   */
+  respectETag?: boolean;
 }
diff --git a/src/controls/dynamicForm/IDynamicFormState.ts b/src/controls/dynamicForm/IDynamicFormState.ts
@@ -3,6 +3,7 @@ import { IDynamicFieldProps } from './dynamicField/IDynamicFieldProps';
 export interface IDynamicFormState {
   fieldCollection: IDynamicFieldProps[];
   isSaving?: boolean;
+  etag?: string;
 }
 
 
diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
@@ -924,7 +924,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
       <div className={styles.controlsTest}>
         <div className="ms-font-m">
           {/* Change the list Id and list item id before you start to test this control */}
-          <DynamicForm context={this.props.context} listId={"b1416fca-dc77-4198-a082-62a7657dcfa9"} onCancelled={() => { console.log('Cancelled'); }} onSubmitted={async (listItem) => { let itemdata = await listItem.get(); console.log(itemdata["ID"]); }}></DynamicForm>
+          <DynamicForm context={this.props.context} listId={"db25f5f6-5ae1-4fa0-a2f7-e093d3d463ae"} listItemId={1} onCancelled={() => { console.log('Cancelled'); }} onSubmitted={async (listItem) => { let itemdata = await listItem.get(); console.log(itemdata["ID"]); }}></DynamicForm>
         </div>
         <WebPartTitle displayMode={this.props.displayMode}
           title={this.props.title}

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@ import { IDynamicFieldProps } from './dynamicField/IDynamicFieldProps';`
`3`	`3`	`export interface IDynamicFormState {`
`4`	`4`	`fieldCollection: IDynamicFieldProps[];`
`5`	`5`	`isSaving?: boolean;`
	`6`	`+ etag?: string;`
`6`	`7`	`}`
`7`	`8`
`8`	`9`