cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Nijo
Helper I
Helper I

Pass updated data back to PCF index file from react file

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.

2 ACCEPTED SOLUTIONS

Accepted Solutions

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/updatereco...

 

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 

View solution in original post

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);

 

Power Maverick | Microsoft Business Application MVP

View solution in original post

4 REPLIES 4

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/updatereco...

 

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 

View solution in original post

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

 

 

 

Hi 

I wanted to reconfirm if that is the best approach to go.

Thank you @ScottDurow 

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);

 

Power Maverick | Microsoft Business Application MVP

View solution in original post

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

MBAS Attendee Badge

Claim Your Badge & Digital Swag!

Check out how to claim yours today!

secondImage

Are Your Ready?

Test your skills now with the Cloud Skill Challenge.

secondImage

Demo Extravaganza is Back!

We are excited to announce that Demo Extravaganza for 2021 has started!

Users online (86,787)