From abc82cb3b52191b7270a87526c68bb3a09669bcc Mon Sep 17 00:00:00 2001 From: IRRDC Date: Tue, 3 Sep 2024 09:43:19 +0200 Subject: [PATCH] DynamicForm folder support Allows the creation of items and files in specific folders of a list or library. --- .../documentation/docs/controls/DynamicForm.md | 1 + src/controls/dynamicForm/DynamicForm.tsx | 18 ++++++++++++++---- src/controls/dynamicForm/IDynamicFormProps.ts | 6 ++++++ 3 files changed, 21 insertions(+), 4 deletions(-) diff --git a/docs/documentation/docs/controls/DynamicForm.md b/docs/documentation/docs/controls/DynamicForm.md index 352d7d47b..fadf1c974 100644 --- a/docs/documentation/docs/controls/DynamicForm.md +++ b/docs/documentation/docs/controls/DynamicForm.md @@ -64,6 +64,7 @@ The `DynamicForm` can be configured with the following properties: | saveDisabled | boolean | no | Specifies if save button is disabled. | | validationErrorDialogProps | IValidationErrorDialogProps | no | Specifies validation error dialog properties | | customIcons | { [ columnInternalName: string ]: string } | no | Specifies custom icons for the form. The key of this dictionary is the column internal name, the value is the Fluent UI icon name. | +| folderServerRelativeUrl | string | no | Server relative URL of the folder a new item or file gets created in. If not set a new item or file will be created in the root folder of the list or library. ## Validation Error Dialog Properties `IValidationErrorDialogProps` | Property | Type | Required | Description | diff --git a/src/controls/dynamicForm/DynamicForm.tsx b/src/controls/dynamicForm/DynamicForm.tsx index 7720addcf..8b1682e5d 100644 --- a/src/controls/dynamicForm/DynamicForm.tsx +++ b/src/controls/dynamicForm/DynamicForm.tsx @@ -555,6 +555,13 @@ export class DynamicForm extends React.Component< // check if item contenttype is passed, then update the object with content type id, else, pass the object if (contentTypeId !== undefined && contentTypeId.startsWith("0x01")) objects[contentTypeIdField] = contentTypeId; const iar = await sp.web.lists.getById(listId).items.add(objects); + if (this.props.folderServerRelativeUrl && this.props.folderServerRelativeUrl !== '' && iar.item) { + // Move list item to target folder. Only way to directly create the item in the target folder would be to use AddValidateUpdateItemUsingPath which uses a different structure for the item's data. + const values = await iar.item.fieldValuesAsText(); + const fileRef = values['FileRef']; + const fileLeafRef = values['FileLeafRef']; + await sp.web.getFileByServerRelativePath(fileRef).moveTo(this.props.folderServerRelativeUrl + '/' + fileLeafRef); + } if (onSubmitted) { onSubmitted( iar.data, @@ -587,9 +594,9 @@ export class DynamicForm extends React.Component< "_" ) // 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 newFolder = this.props.folderServerRelativeUrl && this.props.folderServerRelativeUrl !== '' ? + await sp.web.getFolderByServerRelativePath(this.props.folderServerRelativeUrl).addSubFolderUsingPath(folderTitle) : + await library.rootFolder.addSubFolderUsingPath(folderTitle); const fields = await newFolder.listItemAllFields(); if (fields[idField]) { // Read the ID of the just created folder or Document Set @@ -665,7 +672,10 @@ export class DynamicForm extends React.Component< ) // Replace not allowed chars in folder name : ""; // Empty string will be replaced by SPO with Folder Item ID - const fileCreatedResult = await library.rootFolder.files.addChunked(encodeURI(itemTitle), await selectedFile.downloadFileContent()); + const fileCreatedResult = this.props.folderServerRelativeUrl && this.props.folderServerRelativeUrl !== '' ? + await sp.web.getFolderByServerRelativePath(this.props.folderServerRelativeUrl).files.addChunked(encodeURI(itemTitle), await selectedFile.downloadFileContent()) + : + await library.rootFolder.files.addChunked(encodeURI(itemTitle), await selectedFile.downloadFileContent()); const fields = await fileCreatedResult.file.listItemAllFields(); if (fields[idField]) { diff --git a/src/controls/dynamicForm/IDynamicFormProps.ts b/src/controls/dynamicForm/IDynamicFormProps.ts index f886cef46..f495bb165 100644 --- a/src/controls/dynamicForm/IDynamicFormProps.ts +++ b/src/controls/dynamicForm/IDynamicFormProps.ts @@ -126,4 +126,10 @@ export interface IDynamicFormProps { * The key is the field internal name and the value is the Fluent UI icon name. */ customIcons?: { [columnInternalName: string]: string }; + + /** + * Server relative URL of the folder a new item or file gets created in. + * If not set a new item or file will be created in the root folder of the list or library. + */ + folderServerRelativeUrl?: string; }