Merge pull request #1480 from martinlingstuyl/dynamicform-onlistiteml…

…oaded Adds onListItemLoaded handler to DynamicForm. Closes #1472
pnp · Mar 5, 2023 · b4cd72b · b4cd72b
2 parents 2333be3 + e1c9917
commit b4cd72b
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 7 deletions.
diff --git a/docs/documentation/docs/controls/DynamicForm.md b/docs/documentation/docs/controls/DynamicForm.md
@@ -38,6 +38,7 @@ The `DynamicForm` can be configured with the following properties:
 | contentTypeId | string | no | content type ID |
 | disabled | boolean | no | Allows form to be disabled. Default value is `false`|
 | disabledFields | string[] | no | InternalName of fields that should be disabled. Default value is `false`|
+| onListItemLoaded | (listItemData: any) => Promise&lt;void&gt; | no | List item loaded handler. Allows to access list item information after it's loaded.|
 | onBeforeSubmit | (listItemData: any) => Promise&lt;boolean&gt; | no | Before submit handler. Allows to modify the object to be submitted or cancel the submission. To cancel, return `true`.|
 | onSubmitted | (listItemData: any, listItem?: IItem) => void | no | Method that returns listItem data JSON object and PnPJS list item instance (`IItem`). |
 | onSubmitError | (listItemData: any, error: Error) => void | no | Handler of submission error. |

diff --git a/src/controls/dynamicForm/DynamicForm.tsx b/src/controls/dynamicForm/DynamicForm.tsx
@@ -197,7 +197,7 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
           }
           else if (fieldType === 'Thumbnail') {
             if (additionalData) {
-              const uploadedImage = await this.uplaodImage(additionalData);
+              const uploadedImage = await this.uploadImage(additionalData);
               objects[columnInternalName] = JSON.stringify({
                 type: 'thumbnail',
                 fileName: uploadedImage.Name,
@@ -354,7 +354,7 @@ 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, respectETag } = this.props;
+    const { listId, listItemId, disabledFields, respectETag, onListItemLoaded } = this.props;
     let contentTypeId = this.props.contentTypeId;
     try {
       const spList = await sp.web.lists.getById(listId);
@@ -363,6 +363,10 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
       if (listItemId !== undefined && listItemId !== null && listItemId !== 0) {
         item = await spList.items.getById(listItemId).get();
 
+        if (onListItemLoaded) {
+          await onListItemLoaded(item);
+        }
+
         if (respectETag !== false) {
           etag = item['odata.etag'];
         }
@@ -453,7 +457,7 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
             termSetId = field.TermSetId;
             anchorId = field.AnchorId;
             if (item !== null) {
-              const response = await this._spService.getSingleManagedMtadataLabel(listId, listItemId, field.InternalName);
+              const response = await this._spService.getSingleManagedMetadataLabel(listId, listItemId, field.InternalName);
               if (response) {
                 selectedTags.push({ key: response.TermID, name: response.Label });
                 defaultValue = selectedTags;
@@ -545,7 +549,7 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
     }
   }
 
-  private uplaodImage = async (file: IFilePickerResult): Promise<IUploadImageResult> => {
+  private uploadImage = async (file: IFilePickerResult): Promise<IUploadImageResult> => {
     const {
       listId,
       listItemId

diff --git a/src/controls/dynamicForm/IDynamicFormProps.ts b/src/controls/dynamicForm/IDynamicFormProps.ts
@@ -16,6 +16,11 @@ export interface IDynamicFormProps {
    * List id
    */
   listId: string;
+  /**
+   * List item loaded handler.
+   * Allows to access list item information after it's loaded.
+   */
+  onListItemLoaded?: (listItemData: any) => Promise<void>; // eslint-disable-line @typescript-eslint/no-explicit-any
   /**
    * Before submit handler.
    * Allows to modify the object to be submitted or cancel the submission.

diff --git a/src/extensions/testForm/components/TestForm.tsx b/src/extensions/testForm/components/TestForm.tsx
@@ -17,7 +17,7 @@ interface ITestFormState { }
 const LOG_SOURCE: string = 'TestForm';
 
 export default class TestForm extends React.Component<ITestFormProps, ITestFormState> {
-  
+
   constructor(props: ITestFormProps) {
     super(props);
 
@@ -40,7 +40,10 @@ export default class TestForm extends React.Component<ITestFormProps, ITestFormS
         <DynamicForm
           context={this.props.context}
           listId={this.props.context.list.guid.toString()}
-          listItemId={this.props.context.itemId} />
+          listItemId={this.props.context.itemId}
+          onListItemLoaded={async (listItemData: any) => {
+            console.log(listItemData);
+          }} />
       </EnhancedThemeProvider>);
   }
 }
diff --git a/src/services/SPService.ts b/src/services/SPService.ts
@@ -645,7 +645,7 @@ export default class SPService implements ISPService {
     }
   }
 
-  public async getSingleManagedMtadataLabel(listId: string, listItemId: number, fieldName: string): Promise<any> { // eslint-disable-line @typescript-eslint/no-explicit-any
+  public async getSingleManagedMetadataLabel(listId: string, listItemId: number, fieldName: string): Promise<any> { // eslint-disable-line @typescript-eslint/no-explicit-any
     try {
       const webAbsoluteUrl = this._context.pageContext.web.absoluteUrl;
       const apiUrl = `${webAbsoluteUrl}/_api/web/lists(@listId)/RenderListDataAsStream?@listId=guid'${encodeURIComponent(listId)}'`;