Fix- Issue 1421- PeoplePicker Control - Shows wrong value in Dynamic Form when null is provided & Issue 1578 - DynamicForm - Error on save when clearing person from Person or Group field and leaving it blank.

[NishkalankBezawada]

Q	A
Bug fix?	[x]
New feature?	[ ]
New sample?	[ ]
Related issues?	fixes #1421 #1578, #1380

What's in this Pull Request?

Fixing the issue 1421 & 1380, Validating the Null in the user's name or email.
Fixing issue 1578, Error on save when clearing person from Person or Group field and leaving it blank.

Solution for Issue #1421

I have created a few users in my tenant, with the below mentioned names and email's

Added two columns in my test list, one as multi user, and single user respectively, and added the users to the list item as below.

I have also added extra validation at SPService.ts for the methods, getUsersUPNFromFieldValue & getUserUPNFromFieldValue to get the output as below.

Solution for Issue #1578

When the user is updating the people picker column, for a single user, Dynamic form is throwing error while saving the list item. The issue occurs at method onSubmitClick

The object formed with an empty user and is being submitted to update the item

          else if (fieldType === "User") {
            objects[`${columnInternalName}Id`] = val.newValue;
          }             

And the error is caught here,

let newETag: string | undefined = undefined;
if (listItemId) {
  try {
    const iur = await sp.web.lists.getById(listId).items.getById(listItemId).update(objects, this.state.etag);
    newETag = iur.data['odata.etag'];
    if (onSubmitted) {
      onSubmitted(iur.data, this.props.returnListItemInstanceOnSubmit !== false ? iur.item : undefined);
    }
  }
  catch (error) {
    if (onSubmitError) {
      onSubmitError(objects, error);
    }
    console.log("Error", error);
  }

By validating the null check as below, the issue is resolved.

else if (fieldType === "User") {
    objects[`${columnInternalName}Id`] = val.newValue.length === 0 ? null : val.newValue;
}

I have also corrected a spelling mistake at onSubmitClick

from, 'val.newValue.lenght'

          else if (fieldType === "UserMulti") {
            objects[`${columnInternalName}Id`] = { results: val.newValue.lenght === 0 ? null: val.newValue };
          }

To, 'val.newValue.length' as below.

else if (fieldType === "UserMulti") {
            objects[`${columnInternalName}Id`] = {
              results: val.newValue.length === 0 ? null : val.newValue,
            };
          }

Thanks,
Nishkalank Bezawada

[NishkalankBezawada]

Hello @joelfmrodrigues & @AJIXuMuK

I have created a new PR fixing the issue 1421

Kindly review,
Nishkalank Bezawada

[NishkalankBezawada]

Hello @joelfmrodrigues & @AJIXuMuK

I have created a new PR fixing the Issue 1421 & Issue 1578

Kindly review,
Nishkalank Bezawada

[joelfmrodrigues]

@NishkalankBezawada many thanks! Awesome work and super detailed explanation on the issues 👏👏👏

[NishkalankBezawada]

esome work and super detailed explanation on the issue

Thanks alot Joel @joelfmrodrigues