At the moment unfortunately it’s not possible to put PCF directly to the SiteMap but I found a workaround you can use that I described in this post.
Entity
In order to place PCF Control to the Sitemap, you have to create a “stub” entity that will serve as a placeholder for a PCF Control. Create an entity and double-check that users that would need access to the control have at least the “read” privilege of the “user” level for your new custom entity directly through a security role or through a team users belong to. Here is a screenshot of how I configured that “proxy” entity:
Add an entity to the SiteMap navigation using OOB “Sitemap Designer”:
Save and publish the application’s sitemap.
PCF Control
Open VS Code, open a terminal, and navigate to the folder you want to create your PCF in. Run the following code to create your PCF Control (replace the namespace and control’s name with yours):
|
1 |
pac pcf init -ns AndrewButenko -n SitemapControl -t dataset |
Open the folder of the control using VSCode and perform the following modifications.
In order to check that the control works, I add the following code to the “init” method of the “index.ts” file:
|
1 2 3 4 5 6 |
public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement): void { container.innerHTML = "My PCF Control shown in the SiteMap"; } |
When PCF Control is used for a dataset – regular components of views are shown, like Command Bar, View Selector, and Quick Find. Obviously, that’s not something that should be shown for our scenario. In order to hide it – open “ControlManifest.Input.xml” file and modify the dataset with adding “cds-data-set-options” attribute to “data-set” node. In my case it looks like the following:
|
1 2 3 4 |
<data-set name="proxyEntityDataset" display-name-key="Proxy Entity Dataset" cds-data-set-options="displayCommandBar:false;displayViewSelector:false;displayquickfind:false;"> </data-set> |
Save the project and push it to the Dataverse instance.
Configuration of PCF Control
Open “Advanced Settings” and open the solution that contains a new “proxy” entity, navigate to that entity (make.powerapps.com at the moment doesn’t provide that configuration possibility so it’s required to use the “classic” client), and on the entity level open “Controls” tab:
Add the PCF Control imported to the instance earlier and mark that control active for required client types:
Save and publish the entity. Open the application. If everything you configured everything the right way PCF Control should be shown in the sitemap:
Cover photo by Jantine Doornbos on Unsplash
Although this is a great workaround but now, with the GA of custom pages, you can mix PCF and canvas controls to gain the same result in a supported way 🙂
Hameed,
That is absolutely correct with one exception though. Custom pages do not support Offline mode at the moment but PCFs do.
Andrew
also, it looks like this solution will work for on-premises version whereas the custom pages will not.
It should work. To be honest – I haven’t worked with on-premises versions for a while so no guarantees.