Power Platform Community Forum Thread Details

I am facing a sequencing issue here.

My control type is virtual because I am using React so I suppose there is no container parameter here.

Nevertheless, my code could not render because it initialized before the HTML div container is created as per the screenshot above. Once the container is created, however, the updateview does not rerun.

public init(
    context: ComponentFramework.Context<IInputs>,
    notifyOutputChanged: () => void,
    state: ComponentFramework.Dictionary,
    container: HTMLDivElement
  ): void {
    this._container = container;
    console.log("Container assigned:", this._container);

    const observer = new MutationObserver((mutationsList, observer) => {
      const htmlContainer = document.querySelector(
        ".container"
      ) as HTMLDivElement;
      if (htmlContainer) {
        console.log("Container detected in MutationObserver:", htmlContainer);
        this._container = htmlContainer;
        observer.disconnect();
        notifyOutputChanged();
      } else {
        console.warn("Container not found in MutationObserver.");
      }
    });
    observer.observe(document.body, { childList: true, subtree: true });
  }

  /**
   * 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
   * @returns ReactElement root react element for the control
   */
  public updateView(
    context: ComponentFramework.Context<IInputs>
  ): React.ReactElement {
    if (!this._container) {
      console.warn(
        "PCF Container not available yet. Retrying...",
        this._container
      );
    }
    console.log("PCF Container available ", this._container);
    return React.createElement(heremapsrender);
  }

Categories:

Power Apps Pro Dev & ISV