Pcf Control using the Dynamics 365 form save button

[sandzz]

Hi,

I've developed a working PCF control that includes a save button with the event (saveResponsesHandler). I'm interested in leveraging the Dynamics 365 form's save button.

When I click the save button on the Dynamics 365 form,

I can see the PCF control's updateview function getting triggered. However, I'm unsure how to replace the save button within the PCF control with the one from the Dynamics 365 form.

Is there an example on how to accomplished this?

export const QuestionInputStack: React.FC<QuestionInputStackProps> = ({ questions, saveResponses, responses }) => {
  const [loadedResponses, setLoadedResponses] = React.useState<{ [key: string]: any }>(responses);

  const saveResponsesHandler = async () => {
    const newResponses: any[] = [];
    const isUpdate = Object.keys(loadedResponses).length > 0;

    // Collect responses from inputs
    questions.forEach((question: any, index: number) => {
      const inputElement = document.getElementById(`questionInput_${index}`) as HTMLInputElement;
      if (inputElement) {
        let response: any = {
          lfs_name: question.lfs_name,
          lfs_inputresponse: inputElement.value
        };

        response["lfs_QuestionId@odata.bind"] = `/lfs_questions(${question.lfs_questionid})`;
        //response["lfs_QuestionGroupId@odata.bind"] = `/lfs_questiongroups(${question.lfs_questiongroupid})`;
        //response["ContactIdd@odata.bind"] = `/contact(${question.lfs_questionid})`;

        // If it's an update, include lfs_questionresponseid if available
        if (isUpdate) {
          const existingResponse = loadedResponses[question.lfs_questionid];
          if (existingResponse && existingResponse.lfs_contactquestionresponseid) {
            response["lfs_contactquestionresponseid"] = existingResponse.lfs_contactquestionresponseid;
          }
        }
        newResponses.push(response);
      }
    });

    // Call saveResponses function from props
    await saveResponses(newResponses, isUpdate);
    setLoadedResponses(newResponses.reduce((acc, cur) => {
      acc[cur.lfs_questionid] = cur;
      return acc;
    }, {}));
  };

  React.useEffect(() => {
    console.log("Responses prop:", responses);
    if (typeof responses === 'object' && responses !== null) {
      const mappedResponses: { [questionId: string]: any } = {};
      Object.keys(responses).forEach((key) => {
        const cur = responses[key];
        console.log("Current response:", cur);
        mappedResponses[key] = cur;
      });
      console.log("Mapped responses:", mappedResponses);
      setLoadedResponses(mappedResponses);
    } else {
      console.error("Responses is not an object or is null:", responses);
    }
  }, [responses]);

  const handleChange = (value: string, questionId: string) => {
    setLoadedResponses(prevState => ({
      ...prevState,
      [questionId]: {
        ...prevState[questionId],
        lfs_inputresponse: value
      }
    }));
  };

  return (
    <Stack>
      {questions.map((question: any, index: number) => {
        const questionResponse = loadedResponses[question.lfs_questionid] || {}; // Get the response for the current question
        return (
          <div key={index} className="input-container">
            <Label className="label">{question.lfs_translationname}</Label>
            <QuestionInput
              id={`questionInput_${index}`}
              dataTypeName={question["lfs_questiondatatype@OData.Community.Display.V1.FormattedValue"]}
              isRequired={question.lfs_isinputrequired}
              decimalNumberFormat={question.lfs_decimalnumberformat}
              minNumber={question.lfs_min}
              maxNumber={question.lfs_max}
              pattern={question.lfs_pattern}
              value={questionResponse.lfs_inputresponse || ''}
              onChange={(value: string) => handleChange(value, question.lfs_questionid)}
            />
          </div>
        );
      })}
      <button onClick={saveResponsesHandler}>Save</button>
    </Stack>
  );
};

[skoofy5]

PCFs are bound to either a dataset or a field. This means they don't have access to the form context and so can't trigger a save of all the form values, but can be part of the form. Check out the documentation for what a PCF component can do here: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/

For datasets (i.e. subgrids) you have options like setvalue and save - but these only work for the records in the dataset.

https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/entityrecord/se...

https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/entityrecord/sa...

https://www.inogic.com/blog/2022/02/how-to-use-the-setvalue-and-save-methods-in-pcf-dataset-componen...

For fields you have getoutputs (see second link as the MS documentation around this isn't great)

https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/control/getoutp...

https://www.blog.allandecastro.com/deep-dive-into-power-apps-component-framework-part-3-focus-on-arc...

You can also update through the webapi

https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/webapi/updatere...

So your options would be to have it bound to a field that triggers a save via the client api (https://learn.microsoft.com/en-us/power-apps/developer/model-driven-apps/clientapi/reference) or have the form update via a webapi update. Personally, if this is for a model-driven app I wouldn't do either of those and instead just get your users to use the ribbon save button after you've set the values to the bound fields.

[sandzz]

I wanted to share some updates regarding the PCF control I've been working on. This control serves as a dynamic tool for users to input multiple questions seamlessly. To integrate it into our system, I created a field named "pcfField" and embedded the PCF control within it, utilizing a custom PCF control template designed specifically for fields.

Now, while the PCF control includes its own button, my aim is to streamline the process by utilizing the ribbon save button on the form. Upon clicking this button, I intend for it to seamlessly trigger the save function within the PCF control.

Your insights and guidance on achieving this integration efficiently would be greatly appreciated.

[skoofy5 · Accepted solution]

There's no way to achieve this beside what I've mentioned:

1. Trigger an event that a separate form JS script will then capture to save the record
   • https://xrmtricks.com/2022/09/20/model-driven-apps-client-scripting-how-to-interact-the-client-api-w...
2. Use the webapi to update the record

[sandzz]

Thanks for the help.

One more question.

Is there a way to trigger the function I have in the pcf control that will update the dataverse using the webAPI.createrecord or webAPI.updaterecord

  public async saveResponses(

    responses: any[],

    isUpdate: boolean = false

  ): Promise<void> {

    try {

      await Promise.all(

        responses.map((response) => {

          if (isUpdate && response.lfs_questionresponseid) {

            return this._webAPI.updateRecord(

              "lfs_questionresponse",

              response.lfs_questionresponseid,

              response

            );

          } else {

            return this._webAPI.createRecord(

              "lfs_questionresponse",

              response

            );

          }

        })

      );

      alert("Responses saved successfully!");

    } catch (error) {

      console.error("Error saving responses:", error);

      alert("Error occurred while saving responses. Please try again later.");

    }

  }

[sandzz]

I am having issues with trying to access a pcf control using javascript "formContext.getControl"

In our project, I've developed a JavaScript function named "saveForm" intended to trigger the execution of the save functionality within the PCF control. To achieve this, I utilized the "formContext.getControl" method to obtain a reference to the PCF control instance.

Get the Pcf Control using javascript&colon;

 let control = formContext.getControl("lfs_pcfquestioninput");

javascript logic:

let control = formContext.getControl("lfs_pcfquestioninput");

// Call the updateControlPropertyWithValue method within the pcf control
control.updateControlPropertyWithValue(new Date());

Within the PCF control, I've implemented a method named "updateControlPropertyWithValue" to handle the saving functionality. This method is designed to update certain properties of the control based on user input or other factors.

However, upon attempting to execute the "updateControlPropertyWithValue" method using the provided logic, I encountered an issue. Specifically, the JavaScript code returned an error indicating that the "updateControlPropertyWithValue" method could not be found on the control instance.

Pcf Control Method

public async updateControlPropertyWithValue(propertyValue: Date Promise<void> {
    try {
      // Get the record ID from the context
      const recordId = this._entityid;
      const entityTypeName = this._entityTypeName;

      // Construct the entity object with the property to update
      const entityToUpdate: ComponentFramework.WebApi.Entity = {
        lfs_pcfcontrolupdateon: propertyValue,
      };

      // Execute the request to update the record
      await this._webAPI.updateRecord(entityTypeName, recordId, entityToUpdate);

      // Log a message indicating successful property update
      console.log("lfs_PcfControlUpdateOn property updated successfully.");

      // Trigger the notifyOutputChanged method to mark the form as unsaved
      this.notifyOutputChanged();
    } catch (error) {
      console.error("Error updating control property:", error);
    }
  }

I verified that the method is correctly implemented within the PCF control code and is properly exported for external access. Additionally, I ensured that the manifest file associated with the PCF control accurately specifies the method.

Despite these efforts, the error persists, leading me to believe there may be a discrepancy in how the method is being accessed or invoked from the JavaScript code.

Any suggestion on how I can resolve this issue?