Add updateETag method to DynamicForm and update documentation

Added public updateETag method to DynamicForm to allow external updates when list item is modified.
Updated documentation for both ListItemAttachments and DynamicForm with integration examples.
This completes the fix for ETag conflict errors when using attachments with DynamicForm.

Co-authored-by: AJIXuMuK <[email protected]>

Author: Copilot

docs/documentation/docs/controls/DynamicForm.md

@@ -120,6 +120,56 @@ The `DynamicForm` can be configured with the following properties:
 | thumbnailFieldButtons | IStyle | styles for button when field type is 'Thumbnail' |
 | selectedFileContainer | IStyle | styles for File Selection Control |
 
+## Public Methods
+
+The `DynamicForm` control exposes the following public methods that can be called using a ref:
+
+### updateETag(itemData: any): void
+
+Updates the ETag stored in the component's state. This is useful when the list item has been modified externally (e.g., by adding/removing attachments using the ListItemAttachments control) and you need to update the ETag to prevent 412 conflict errors on save.
+
+**Parameters:**
+- `itemData` - The updated item data containing the new ETag (typically from SharePoint REST API response with `odata.etag` property)
+
+**Example:**
+
+```TypeScript
+import * as React from 'react';
+import { DynamicForm } from '@pnp/spfx-controls-react/lib/DynamicForm';
+import { ListItemAttachments } from '@pnp/spfx-controls-react/lib/ListItemAttachments';
+
+export class MyComponent extends React.Component {
+  private dynamicFormRef = React.createRef<DynamicForm>();
+
+  private onAttachmentChange = (itemData: any): void => {
+    // Update the DynamicForm's ETag when attachments are modified
+    if (this.dynamicFormRef.current) {
+      this.dynamicFormRef.current.updateETag(itemData);
+    }
+  }
+
+  public render() {
+    return (
+      <div>
+        <ListItemAttachments
+          listId={this.props.listId}
+          itemId={this.props.itemId}
+          context={this.props.context}
+          onAttachmentChange={this.onAttachmentChange}
+        />
+        <DynamicForm
+          ref={this.dynamicFormRef}
+          context={this.props.context}
+          listId={this.props.listId}
+          listItemId={this.props.itemId}
+          respectETag={true}
+        />
+      </div>
+    );
+  }
+}
+```
+
 ## How to use styles property
 
 Property styles of Dynamic Form gives you a set of properties which you can use to modify styles.

docs/documentation/docs/controls/ListItemAttachments.md

@@ -63,5 +63,53 @@ The `ListItemAttachments` control can be configured with the following propertie
 | description | string | no | Description text to display on the placeholder, below the main text and icon. |
 | disabled | boolean | no | Specifies if the control is disabled or not. |
 | openAttachmentsInNewWindow | boolean | no | Specifies if the attachment should be opened in a separate browser tab. Use this property set to `true` if you plan to use the component in Microsoft Teams. |
+| onAttachmentChange | (itemData: any) => void | no | Callback function invoked when attachments are added or removed. Receives the updated item data including the new ETag. This is useful when using the control within a form (like DynamicForm) that tracks ETags for optimistic concurrency control. |
+
+## Usage with DynamicForm
+
+When using `ListItemAttachments` within a `DynamicForm` or any component that uses ETags for optimistic concurrency control, you should use the `onAttachmentChange` callback to update the ETag when attachments are modified:
+
+```TypeScript
+import * as React from 'react';
+import { DynamicForm } from '@pnp/spfx-controls-react/lib/DynamicForm';
+import { ListItemAttachments } from '@pnp/spfx-controls-react/lib/ListItemAttachments';
+
+export class MyFormComponent extends React.Component<any, any> {
+  private dynamicFormRef = React.createRef<DynamicForm>();
+
+  /**
+   * Callback invoked when attachments are added or removed
+   * Updates the ETag in DynamicForm to prevent 412 conflicts
+   */
+  private onAttachmentChange = (itemData: any): void => {
+    if (this.dynamicFormRef.current) {
+      this.dynamicFormRef.current.updateETag(itemData);
+    }
+  }
+
+  public render(): React.ReactElement {
+    return (
+      <div>
+        <ListItemAttachments
+          listId={listId}
+          itemId={itemId}
+          context={this.props.context}
+          onAttachmentChange={this.onAttachmentChange}
+        />
+        
+        <DynamicForm
+          ref={this.dynamicFormRef}
+          context={this.props.context}
+          listId={listId}
+          listItemId={itemId}
+          respectETag={true}
+        />
+      </div>
+    );
+  }
+}
+```
+
+This prevents 412 ETag conflict errors when saving the form after adding or removing attachments.
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ListItemAttachments)

src/controls/dynamicForm/DynamicForm.tsx

@@ -121,6 +121,21 @@ export class DynamicFormBase extends React.Component<
     this._customFormatter = new CustomFormattingHelper(this._formulaEvaluation);
   }
 
+  /**
+   * Updates the ETag stored in the component's state.
+   * This is useful when the list item has been modified externally (e.g., by adding/removing attachments)
+   * and you need to update the ETag to prevent 412 conflict errors on save.
+   * 
+   * @param itemData - The updated item data containing the new ETag
+   */
+  public updateETag(itemData: any): void { // eslint-disable-line @typescript-eslint/no-explicit-any
+    if (itemData && itemData["odata.etag"]) {
+      this.setState({
+        etag: itemData["odata.etag"]
+      });
+    }
+  }
+
   /**
    * Lifecycle hook when component is mounted
    */