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

PowerApps Component Framework howto init and update custom views

Hi,

 

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


Best regards.

 

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Helper I
Helper I

Re: PowerApps Component Framework howto init and update custom views

I have found the issue.

 

1. Don't run code which renders components in the Init Method!

2. run the render code in the UpdateView Method

3. Add a ComponentDidUpdate and ReceivedProps in the Component you want to render and call set.state() method with the received data.

Addiontaly add the paging size like described on this post: https://www.inogic.com/blog/2019/09/get-all-the-records-of-dataset-grid-control-swiftly/

Example Code:

 public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement) {

    this._notifyOutputChanged = notifyOutputChanged.bind(this);
    this._container = container;
    this._globalContext = Xrm.Utility.getGlobalContext();
    this._globalContext.getCurrentAppProperties().then((appProperties: any) => {
      this._currentAppProperties = appProperties;
    }, (error: any) => { console.log(error) });
  }


  /**
   * Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.
   * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
   */
  public updateView(context: ComponentFramework.Context<IInputs>): void {
    if (!context.parameters.dataSetGrid.loading) {

      if (context.parameters.dataSetGrid.paging != null && context.parameters.dataSetGrid.paging.hasNextPage == true) {

        //set page size

        context.parameters.dataSetGrid.paging.setPageSize(5000);

        //load next paging

        context.parameters.dataSetGrid.paging.loadNextPage();

      } else {

        //load the global context with the app properties.
        this._context = context;

        this._projectListProps = {
          notifyChange: this.notifyChange,
          globalContext: this._globalContext,
          appProperties: this._currentAppProperties,
          context: context,
        }
        this._projectList = React.createElement(ProjectDetailList, this._projectListProps);
        ReactDOM.render(React.createElement(Fabric, null, this._projectList), this._container);

        console.log("NEW CONTEXT!!!! ->>>>>>>>>>>>>>>>>>>>>>>")
        console.log(this._currentAppProperties);
        console.log(context);
        console.log(this._context);

      }
    }else{
      //TODO: ADD RENDERING WITH SHIMMER!!
    }

 

 

View solution in original post

2 REPLIES 2
Highlighted
Anonymous
Not applicable

Re: PowerApps Component Framework howto init and update custom views

Bumping for visibility 

 

@Anonymous 

Highlighted
Helper I
Helper I

Re: PowerApps Component Framework howto init and update custom views

I have found the issue.

 

1. Don't run code which renders components in the Init Method!

2. run the render code in the UpdateView Method

3. Add a ComponentDidUpdate and ReceivedProps in the Component you want to render and call set.state() method with the received data.

Addiontaly add the paging size like described on this post: https://www.inogic.com/blog/2019/09/get-all-the-records-of-dataset-grid-control-swiftly/

Example Code:

 public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement) {

    this._notifyOutputChanged = notifyOutputChanged.bind(this);
    this._container = container;
    this._globalContext = Xrm.Utility.getGlobalContext();
    this._globalContext.getCurrentAppProperties().then((appProperties: any) => {
      this._currentAppProperties = appProperties;
    }, (error: any) => { console.log(error) });
  }


  /**
   * Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.
   * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
   */
  public updateView(context: ComponentFramework.Context<IInputs>): void {
    if (!context.parameters.dataSetGrid.loading) {

      if (context.parameters.dataSetGrid.paging != null && context.parameters.dataSetGrid.paging.hasNextPage == true) {

        //set page size

        context.parameters.dataSetGrid.paging.setPageSize(5000);

        //load next paging

        context.parameters.dataSetGrid.paging.loadNextPage();

      } else {

        //load the global context with the app properties.
        this._context = context;

        this._projectListProps = {
          notifyChange: this.notifyChange,
          globalContext: this._globalContext,
          appProperties: this._currentAppProperties,
          context: context,
        }
        this._projectList = React.createElement(ProjectDetailList, this._projectListProps);
        ReactDOM.render(React.createElement(Fabric, null, this._projectList), this._container);

        console.log("NEW CONTEXT!!!! ->>>>>>>>>>>>>>>>>>>>>>>")
        console.log(this._currentAppProperties);
        console.log(context);
        console.log(this._context);

      }
    }else{
      //TODO: ADD RENDERING WITH SHIMMER!!
    }

 

 

View solution in original post

Helpful resources

Announcements
Check this Out

Helpful information

Featuring samples like Return to the Workplace and Emergency Response Applications

August 2020 Community Challenge: Can You Solve These?

August 2020 Community Challenge: Can You Solve These?

We're excited to announce our first cross-community 'Can You Solve These?' challenge!

secondImage

Return to Workplace

Reopen responsibly, monitor intelligently, and protect continuously with solutions for a safer work environment.

secondImage

Super Users Coming in August

We are excited for the next Super User season.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Top Solution Authors
Top Kudoed Authors
Users online (6,059)