Pass updated data back to PCF index file from react file

(0) Share

Report

Posted on by Nijos

Hi,

I am using react with PCF, ReactDOM.render() method is called from updateView() methods in index file.

The react app(.tsx) accepts different input values and transforms it into the required format. now I need to update this processed value back to CDS(D365). Has someone done this before? I can pass the context to react app and update CDS directly using web API but, I know its not a good approach. I can update data collection as state property and access it from index file, again here I won't get the update event happening in reach app index file. following is my update view method.

	public updateView(context: ComponentFramework.Context<IInputs>): void
	{
		
		this._props.data =context.parameters.sampleDataSet;
		ReactDOM.render(
			React.createElement(
				App,
				this._props
			),
			this.theContainer
		);
	}

Please advise the best approach if someone has done this before.

Many thanks in advance.

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (5)

Answers (2)

Verified answer

ScottDurow 1,039 on at

Like (1)

Report

Hi,
Why do you think it’s not the best approach? If you need to update data that is bound to your dataset PCF control in a Model driven app then using the Xrm.WebApi is the easiest approach. https://docs.microsoft.com/en-us/powerapps/developer/component-framework/reference/webapi/updaterecord

You could update the data locally in your react app at the same time so you don’t need to refresh the dataset.

Hope this helps

Was this reply helpful? Yes No
Nijos 61 on at

Like (0)

Report

Thank you @ScottDurow, I wanted to reconfirm if that is the best approach to go.

Was this reply helpful? Yes No
Nijos 61 on at

Like (0)

Report

Hi
I wanted to reconfirm if that is the best approach to go.
Thank you @ScottDurow

Was this reply helpful? Yes No
Verified answer

Danish N. 186 on at

Like (0)

Report
I like to keep my Code and UI separate (in this case MVVM design). So, I don't like to pass the context to React component. Rather, I would create a callback function as a property with parameter/s. React component will invoke this function when the value changes and pass that value to the function in form of parameters. In my code file, I will write the definition for that function.

React:
export interface IReactComponentProps { data: string; returnDataFunction?: (returnValue: string) => void; } export class ReactComponentSample extends React.Component<IReactComponentProps, IReactComponentState> { //Your UI render logic goes here and init state private localReturnDataFunction() { // Get your data here this.state.returnDataFunction(data); } public render() { return ( <Fabric> <PrimaryButton text="Primary" onClick={this.localReturnDataFunction} allowDisabledFocus /> </Fabric> ); }

Code file:
// Init your React component private reactProps: IReactComponentProps { data: "" } private actionFunction(data: string): void { // Either call notifyOutputChanged or WebApi to update the data } // Inside updateView before rendering React component - Init properties reactProps.returnDataFunction = this.actionFunction.bind(this);

Was this reply helpful? Yes No
kalluu91 39 on at

Like (0)

Report

We can use postMessage API to exchange data between pages.

Check this article for an example: https://kalcancode.wordpress.com/2025/04/01/how-to-send-large-json-data-in-the-data-parameter-of-a-power-platform-html-web-resource/

Cheers,

Kim Anh

Was this reply helpful? Yes No