@@ -16,6 +16,11 @@ import styles from './DynamicForm.module.scss';
1616import { IDynamicFormProps } from './IDynamicFormProps' ;
1717import { IDynamicFormState } from './IDynamicFormState' ;
1818
19+ import '@pnp/sp/lists' ;
20+ import '@pnp/sp/content-types' ;
21+ import '@pnp/sp/folders' ;
22+ import '@pnp/sp/items' ;
23+
1924const stackTokens : IStackTokens = { childrenGap : 20 } ;
2025
2126/**
@@ -103,6 +108,7 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
103108 const {
104109 listId,
105110 listItemId,
111+ contentTypeId,
106112 onSubmitted,
107113 onBeforeSubmit,
108114 onSubmitError
@@ -215,6 +221,7 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
215221 }
216222 }
217223
224+ // If we have the item ID, we simply need to update it
218225 if ( listItemId ) {
219226 try {
220227 const iur = await sp . web . lists . getById ( listId ) . items . getById ( listItemId ) . update ( objects ) ;
@@ -230,20 +237,61 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
230237 }
231238
232239 }
240+ // Otherwise, depending on the content type ID of the item, if any, we need to behave accordingly
233241 else {
234- try {
235- const iar = await sp . web . lists . getById ( listId ) . items . add ( objects ) ;
236- if ( onSubmitted ) {
237- onSubmitted ( iar . data , this . props . returnListItemInstanceOnSubmit !== false ? iar . item : undefined ) ;
242+ if ( contentTypeId === undefined || contentTypeId === '' || ! contentTypeId . startsWith ( '0x0120' ) ) {
243+ // We are adding a new list item
244+ try {
245+ const iar = await sp . web . lists . getById ( listId ) . items . add ( objects ) ;
246+ if ( onSubmitted ) {
247+ onSubmitted ( iar . data , this . props . returnListItemInstanceOnSubmit !== false ? iar . item : undefined ) ;
248+ }
249+ }
250+ catch ( error ) {
251+ if ( onSubmitError ) {
252+ onSubmitError ( objects , error ) ;
253+ }
254+ console . log ( "Error" , error ) ;
255+ }
256+ } else if ( contentTypeId !== undefined && contentTypeId !== '' && contentTypeId . startsWith ( '0x0120' ) ) {
257+ // We are adding a folder or a Document Set
258+ try {
259+ const idField = 'ID' ;
260+ const titleField = 'Title' ;
261+ const contentTypeIdField = 'ContentTypeId' ;
262+
263+ const library = await sp . web . lists . getById ( listId ) ;
264+ const folderTitle = ( objects [ titleField ] !== undefined && objects [ titleField ] !== '' ) ?
265+ ( objects [ titleField ] as string ) . replace ( / [ " | * | : | < | > | ? | / | \\ | | ] / g, "_" ) : // Replace not allowed chars in folder name
266+ '' ; // Empty string will be replaced by SPO with Folder Item ID
267+ const newFolder = await library . rootFolder . addSubFolderUsingPath ( folderTitle ) ;
268+ const fields = await newFolder . listItemAllFields ( ) ;
269+ if ( fields [ idField ] ) {
270+
271+ // Read the ID of the just created folder or Document Set
272+ const folderId = fields [ idField ] ;
273+
274+ // Set the content type ID for the target item
275+ objects [ contentTypeIdField ] = contentTypeId ;
276+
277+ // Update the just created folder or Document Set
278+ const iur = await library . items . getById ( folderId ) . update ( objects ) ;
279+ if ( onSubmitted ) {
280+ onSubmitted ( iur . data , this . props . returnListItemInstanceOnSubmit !== false ? iur . item : undefined ) ;
281+ }
282+ } else {
283+ throw new Error ( 'Unable to read the ID of the just created folder or Document Set' ) ;
284+ }
238285 }
239- }
240- catch ( error ) {
241- if ( onSubmitError ) {
242- onSubmitError ( objects , error ) ;
286+ catch ( error ) {
287+ if ( onSubmitError ) {
288+ onSubmitError ( objects , error ) ;
289+ }
290+ console . log ( "Error" , error ) ;
243291 }
244- console . log ( "Error" , error ) ;
245292 }
246293 }
294+
247295 this . setState ( {
248296 isSaving : false
249297 } ) ;
@@ -313,10 +361,10 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
313361 const defaultContentType = await spList . contentTypes . select ( "Id" , "Name" ) . get ( ) ;
314362 contentTypeId = defaultContentType [ 0 ] . Id . StringValue ;
315363 }
316- const listFeilds = await this . getFormFields ( listId , contentTypeId , this . webURL ) ;
364+ const listFields = await this . getFormFields ( listId , contentTypeId , this . webURL ) ;
317365 const tempFields : IDynamicFieldProps [ ] = [ ] ;
318366 let order : number = 0 ;
319- const responseValue = listFeilds . value ;
367+ const responseValue = listFields . value ;
320368 const hiddenFields = this . props . hiddenFields !== undefined ? this . props . hiddenFields : [ ] ;
321369 let defaultDayOfWeek : number = 0 ;
322370 for ( let i = 0 , len = responseValue . length ; i < len ; i ++ ) {
@@ -537,7 +585,11 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
537585 const webAbsoluteUrl = ! webUrl ? this . webURL : webUrl ;
538586 let apiUrl = '' ;
539587 if ( contentTypeId !== undefined && contentTypeId !== '' ) {
540- apiUrl = `${ webAbsoluteUrl } ${ contentTypeId } ${ encodeURIComponent ( listId ) } ;
588+ if ( contentTypeId . startsWith ( '0x0120' ) ) {
589+ apiUrl = `${ webAbsoluteUrl } ${ contentTypeId } ${ encodeURIComponent ( listId ) } ;
590+ } else {
591+ apiUrl = `${ webAbsoluteUrl } ${ contentTypeId } ${ encodeURIComponent ( listId ) } ;
592+ }
541593 }
542594 else {
543595 apiUrl = `${ webAbsoluteUrl } ${ encodeURIComponent ( listId ) } ;
0 commit comments