React rendering new view with filtered Data in Model Driven PowerApps

Question

Currently I am implementing a custom list in a model driven app. I noticed that while filtering the data the init method as well as the updateView method is called, furthermore the updateView method is called 3 times. However, the new view is not rendered.

My guess is that the async promises are not correctly ordered and processed by my components, so that the init method at the end resets everything to or overwrites it with the original data.

What would be the right way to do this?

1. Initially render the components (by this I mean the render code in the init or updateView method)?
2. if the data is refreshed, how do the async calls have to be processed to render the view again?

Currently the code looks like the following:

     public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement) {
    this._context = context;
    //load the global context with the app properties.
    this._globalContext = Xrm.Utility.getGlobalContext();
    this._globalContext.getCurrentAppProperties().then((appProperties:any) =>{
      this._currentAppProperties = appProperties;
      this._projectList = React.createElement(ProjectDetailList,{context:this._context, appProperties: this._currentAppProperties, globalContext: this._globalContext});
      ReactDOM.render(React.createElement(Fabric, null, this._projectList), container);
    }, (error:any) =>{console.log(error)});
  }

  public updateView(context: ComponentFramework.Context<IInputs>): void {
    // storing the latest context from the control.
    this._context = context;
    this._globalContext = Xrm.Utility.getGlobalContext();
    this._globalContext.getCurrentAppProperties().then((appProperties:any) =>{
      this._currentAppProperties = appProperties;
      ReactDOM.render(React.createElement(Fabric, null, React.createElement(ProjectDetailList,{context:this._context, appProperties: this._currentAppProperties, globalContext: this._globalContext})), this._container);
    }, (error:any) =>{console.log(error)});
    console.log("NEW CONTEXT!!!! ->>>>>>>>>>>>>>>>>>>>>>>")
    console.log(this._currentAppProperties);
    console.log(context);
    console.log(this._context);

  }

Answer 1

You need to call the notifyOutputChanged which will inturn call the updateView

PCF PM words:

NotifyOutputChange calls the CRM client layer to update the value and it makes the form dirty(save before exit). Additionally all business layer logic like clientAPI, PBL and field validation is kicked in. If this is not needed and the control needs to just change the UI you can skip notifyOutputChange.

Control reload , page resize and external business logic updating the control value triggers UpdateView.

In React framework - you should do like below:

we need to create a notifyChange function, which will update the output value of PCF and call the notifyOutputChanged in our PCF component.

We can pass the notifyChange function to our custom React component as part of props. Whenever a value is updated in our React component, the notifyChange function is executed, which will subsequently call notifyOutputChanged to update the output value and subsequently trigger onChange event on PowerApps Form.

Learn more