Issue setting lookup field value from DynamicForm onBeforeSubmit method

[EdAlexander]

[x] Question using release 3.19.0

I am attempting to set the value of a Lookup field in the onbeforesubmit method invoked by a DynamicForm control. When I try to create a new list item from the dynamic form the onbeforesubmit is intended to set the value of a lookup field to a specific Id.

component from render:

<DynamicForm webAbsoluteUrl={'https://xxxxxx.sharepoint.com/sites/Intranet'}
                    listId={"<list guid>"}
                    onCancelled={() => { this.setState({ showNewTask: false }) }}
                    onBeforeSubmit={this._newTaskOnBeforeSubmit}
                    onSubmitError={(listItem, error) => { alert(error.message); }}
                    onSubmitted={async (listItemData) => {
                      this._closeTaskPanel();
                    }}
                    context={this.props.context as any}
                    hiddenFields={["Case"]}
                  />

method I am testing:

private _newTaskOnBeforeSubmit = async (listItemData: any): Promise<boolean> => {
    try {
      console.log("In _newTaskOnBeforeSubmit...")
      console.log(this.state.selectedCaseId)
      const usethisId: number = this.state.selectedCaseId;
      listItemData.Case = {
        "__metadata": { "type": "SP.FieldLookupValue" },
        "LookupId": usethisId
      };
      return false; 
    }
    catch (err) {
      alert(err);
      return true;
    }
  }

The "Case" field is a simple lookup to another list in the same web and was created with default Title option. Works fine in sharepoint online out of the box forms.

When I use the DynamicForm to create a new list item I get the following error when clicking [Save]:
Error making HttpClient request in queryable [400] ::> {"error":{"code":"-1, Microsoft.SharePoint.Client.InvalidClientQueryException","message":{"lang":"en-US","value":"Incompatible type kinds were found. The type 'SP.FieldLookupValue' was found to be of kind 'Complex' instead of the expected kind 'Entity'."}}}

[github-actions]

Thank you for submitting your first issue to this project.

[EdAlexander]

I think I was able to get this working.... In case it helps someone else in the same boat here is my updated code

 private _newTaskOnBeforeSubmit = async (listItemData: any): Promise<boolean> => {
    try {
      console.log("In _newTaskOnBeforeSubmit...")
      console.log(this.state.selectedCaseId)
      const usethisId: number = this.state.selectedCaseId;

      // const lookupFieldValue = {
      //   '__metadata': { 'type': 'SP.FieldLookupValue' },
      //   'LookupId': usethisId
      // };
    
      const lookupFieldValue = {
        'LookupId': usethisId
      };
    
      listItemData.Case = lookupFieldValue;

      return false; //continue with save.
    }
    catch (err) {
      console.log("Error creating new task:");
      console.log(err);
      alert(err);
      return true;
    }
  }

[EdAlexander]

I think I was able to get this working.... In case it helps someone else in the same boat here is my updated code

 private _newTaskOnBeforeSubmit = async (listItemData: any): Promise<boolean> => {
    try {
      console.log("In _newTaskOnBeforeSubmit...")
      console.log(this.state.selectedCaseId)
      const usethisId: number = this.state.selectedCaseId;

      // const lookupFieldValue = {
      //   '__metadata': { 'type': 'SP.FieldLookupValue' },
      //   'LookupId': usethisId
      // };
    
      const lookupFieldValue = {
        'LookupId': usethisId
      };
    
      listItemData.Case = lookupFieldValue;

      return false; //continue with save.
    }
    catch (err) {
      console.log("Error creating new task:");
      console.log(err);
      alert(err);
      return true;
    }
  }

I was wrong... this does not work either. Any help?

[michaelmaillot]

Hi @EdAlexander,

If you want to set a lookup field value, you can do it this way:

<DynamicForm
            context={this.props.context}
            listId={"e7a3ef63-70f6-4cc1-b95c-1f9eb8af2c8c"}
            listItemId={1}
            returnListItemInstanceOnSubmit={true}
            onBeforeSubmit={async (listItem) => { 
              // The name of the lookup field internal name is formatted like this: [InternalName] + "Id"
              // Here the internal name of the field is "LookupField"
              const fieldInternalName = "LookupFieldId"
              const lookupId = 4
              listItem[fieldInternalName] = lookupId;
              // For a multi-lookup, you have to format the field in an array like this
              // listItem[fieldInternalName] = {results: [lookupId]};
              console.log(listItem);
  
              return false;
          }} 
            onCancelled={() => {
              console.log('Cancelled');
            }}
          />

Does this answer to your question?

[EdAlexander]

Thanks @michaelmaillot .... I did eventually get this working in my solution:

 private _newTaskOnBeforeSubmit = async (listItemData: any): Promise<boolean> => {
    try {
      console.log("In _newTaskOnBeforeSubmit...");
      console.log(this.state.selectedCaseId);
      const usethisId: number = this.state.selectedCaseId;
      listItemData.CaseId = usethisId;
      return false; //continue with save.
    }
    catch (err) {
      console.log("Error creating new task:");
      return true;
    }
  }