Feature Enhancement on ListItemAttachments

[EA12]

Category

[x] Enhancement

Version

Version of the library: [@pnp/spfx-controls-react": "3.8.1"]

Enhancement

Please provide the ability to allow a certain group to add or remove attachments.

A typical Use-Case: In a quality process, certain technical users (Members of SharePoint-Security-Group XY) are allowed to add attachments in the NewForm and the EditForm of a SPFx Forms Customizer. They are not allowed to delete attachments in the EditForm.

Certain clerks (Members of SharePoint-Security-Group AB) are allowed to add and remove attachments.

You could extend IListItemAttachmentsProps.ts with two new props groupNameAdd?: string; groupNameDelete?: string;

And also extend IListItemAttachmentsState.ts with these properties. Then in ListItemAttachments.tsx you could assign the props to state and implement a function to determine if the current user is a member of the given groups and set the state of these two properties. The render function could then evaluate the state to activate/deactivate the delete- and/or the add-Icon

It would also be helpful to have public properties to identify if the user added or removed attachments in a EditForm. This would help to run business logic right from the form or in a Nintex Automation Cloud Workflow.

Thanks!

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[EA12]

Or may be even better, leave the validation outside and just provide to boolean props. canAdd?: boolean canDelete?: boolean

[EA12]

At least this is not much work. I have tested it locally and it works. Only some litte changes are needed:

IListItemAttachmentsProps allowAdd?: boolean; allowDelete?: boolean; dirty?: boolean;

<ListItemAttachments allowAdd={true} allowDelete={_currentUserIsClerk()} ... <UploadAttachment disabled={!this.props.allowAdd} ... <DocumentCardActions actions={ [ { disabled: !this.props.allowDelete } ] }

In ListItemAttachment: this.state = { ... allowAdd: props.allowDelete, allowDelete: props.allowAdd, dirty: false };

public hasChanged(): boolean { return this.state.dirty; }

In _onConfirmedDeleteAttachment and uploadAttachments setting the state of dirty to true.

If you have no time, I could send an PR