You’re offline. This is a read only version of the page.
61
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.
Share
Report 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.
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:
All responses (
Answers (
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);
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
#1
WarrenBelz
109
Most Valuable Professional
#2
Michael E. Gernaey
82
Super User 2025 Season 1
#3
mmbr1606
71
Super User 2025 Season 1
