Opening PCF control inside the side pane in the Model-driven apps

Opening PCF control inside the side pane in the Model-driven apps

In my latest research, I've uncovered another valuable technique for leveraging the Xrm.App.sidePanes API to enhance your Model-Driven apps. This method allows for the integration of PCF controls, directly into the side pane.

Expanding Page Type Options:

Alongside out-of-the-box (OOTB) page types like entitylist, entityrecord, and webresource, you can now utilize the control page type. This addition allows for rendering custom PCF controls within the side pane, significantly broadening your app's functionality.

Example: Example of utilizing the functionality

var customPane = {
    uniqueName: "msdyn_yn_exampleDatePicker_tool_config",
    toolControlName: "yn_example.DatePickerComponent",
    paneId: "AppSidePane_yn_example.DatePickerComponent",
    toolIcon: "/WebResources/msdyncrm_/KbMultisession/msdyn_kbsearchcontroltabicon.svg",
    toolName: "my_custom_pcf_tab",
    toolTip: "Custom DateTime picker"
};

let entityRecordPane = await Xrm.App.sidePanes.createPane({
    paneId: customPane.paneId,
    canClose: false,
    isSelected: false,
    imageSrc: customPane.toolIcon,
    title: customPane.toolTip,
    hideHeader: true,
    hidden: false,
    alwaysRender: true,
    keepBadgeOnSelect: true
});

var paneInput = {
    pageType: "control",
    controlName: customPane.toolControlName,
    data: {/* Input parameters for the PCF control */}
};

await entityRecordPane.navigate(paneInput);        
Opening a Custom DateTime Picker PCF in the Side Panel:

Please find below the valuable parameters description:

  • toolControlName is the unique name of the custom PCF control from the table: customcontrol.
  • data is the input parameters for the PCF control

That is how the Knowledge Search functionality is implemented in multisession Model-Driven apps.

Why Is This Feature So Useful?

From my perspective, this functionality offers a unique opportunity to streamline your customization process. By allowing you to utilize the same development stack as you would for creating PCF controls, it eliminates the need for additional layers such as web resources or custom pages for embedding your custom PCFs. This integration not only simplifies the development workflow but also enhances the consistency and efficiency of your customizations.

However, it's important to note that this feature is still undocumented. While it opens up new possibilities for innovation within your applications, there are considerations and trade-offs to be aware of before deploying this solution in a production environment. It's crucial to weigh the benefits against the potential risks and ensure you have a thorough understanding of the implications of using undocumented features.




Soeren Andersen

Principal Consultant & Team Lead at Delegate , powerplatform & dynamics365

1 年
回复
Niels Minnee

Microsoft Power Platform Specialist at Be Empowered

1 年

要查看或添加评论,请登录

Yurii Nazarenko的更多文章

社区洞察

其他会员也浏览了