Introduction

This article is currently being re-written

The PCF control displayed in Figure 1 is a React based PCF control called a MultiSelectControl.

Referring to Figure 2, there are two components ‘Generic Component’ and ‘Select Component’ (which make up the PCF control) that are rendered in the DOM. After this rendering completes, the React method componentDidMount() is called for each component. This post provides an example of how to implement this method

Details

Before the componentDidMount method is called

Within the init() method of PcfControlBase (the MultiSelectControl class extends the PcfControlBase class) a call is made to create the component ‘GenericComponent’. This is achieved by calling the render() method defined in the GenericComponent class. (This class overrides the render() method defined in the ComponentBase class.) A snippet of the code in this render() method is displayed below

return (
   <SelectComponent
      attributeEditProfile={attributeEditProfile}
      dataService={this.props.dataService}
      parent={this}
      isLazyInitialization={attributeEditProfile.isLazyInitialization}
   </SelectComponent>
);

Then, the component ‘SelectComponent’ is rendered by calling ComponentBase’s render() method

When the componentDidMount method is called

The following describes the implemention of the componentDidMount method

Assigning event listeners to the components

The GenericComponent object has the following parent listeners assigned:

• the GenericParentComponent with the handler onChildEvent() (EditModel.ts). (onChildEvent() is implemented by PcfControlBase’s onChildComponentEvent())
• the AttributeEditProfile with the handler componentEventHandler() (EditProfile.ts)

The SelectComponent object has the following parent listeners assigned:

• the GenericComponent with the handler onChildEvent()
• the AttributeEditProfile with the handler componentEventHandler() (EditProfile.ts)

Note, this object isn’t explained later in this post

Generating events from the components

The GenericComponent object generates the following events

Event 1 – component.ready

The first event generated is component.ready. This is sent to the Generic Component’s two parents.

1. onChildEvent() in GenericParentComponent (implemented in onChildComponentEvent())
   • This results in the MultiSelectControl.editComponent = GenericComponent
2. componentEventHandler() in AttributeEditProfile
   • This isn’t implemented…it handles the AttributeValueChange event which isn’t described in this post

Event 2 – initialization

The second event generated is ‘initialization’. Again, this is sent to the component’s two parents.

1. onChildEvent() in GenericParentComponent (implemented in onChildComponentEvent())
   • This function handles the event by calling the function below. In the call, it includes information about the attribute that the MultiSelectControl is bound to (attributeEditProfile)
     • ComponentCore.componentEventService()
       • The initialisation of the component occurs here. Once this is complete, a new event is generated called ‘initialized’
2. componentEventHandler() in AttributeEditProfile
   • Not implemented

Event 3 – initialized

In event 2, an ‘initialized’ event was generated. Again, this is sent to the component’s two parents

1. onChildEvent() in GenericParentComponent
   • This sends the event to the form
2. componentEventHandler() in AttributeEditProfile
   • This isn’t implemented

Appendix

• class MultiSelectControl extends PcfControlBase (index.ts)

• class PcfControlBase (pcfControlBase.ts) implements ComponentFramework.StandardControl
  • init()
  • onChildComponentEvent()

• class GenericComponent extends AttributeEditComponentBase (GenericComponent.tsx)
  • render()
  • onChildEvent()

• class GenericParentComponent (EditModel.ts)
  • onChildEvent()
  • childEventListener

• class AttributeEditProfile (EditProfile.ts)
  • componentEventHandler()

• class ComponentBase (ComponentBase.tsx)
  • render()

• class ComponentCore (ComponentCore.tsx)
  • componentEventService()

References

https://react.dev/reference/react/Component#componentdidmount

https://github.com/microsoft/PowerApps-Samples/blob/master/component-framework/ReactStandardControl/ReactStandardControl/index.ts