Pnp-sites-core: Install SPFx Web Part and add it to a ClientSidePage in the same provisioning session

[ThomasGranheim]

Which PnP repository should you use to report the issue?

• PnP Sites Core - https://github.com/OfficeDev/PnP-Sites-Core

Category

[x] Bug
[x] Enhancement

Environment

[x] Office 365 / SharePoint Online
[ ] SharePoint 2016
[ ] SharePoint 2013

Expected or Desired Behavior

When provisioning a template using Apply-PnPProvisioningTemplate it should be possible to install an SPFx Web Part and add it to a page in the same provisioning session. It seems like only available Web Parts from apps already installed in the site (or cross-site deployed) are added to a given ClientSidePage.

There should be a reference to the ComponentId even though it's not yet installed in the site.

<?xml version="1.0"?>
<pnp:Provisioning 
    xmlns:pnp="http://schemas.dev.office.com/PnP/2018/01/ProvisioningSchema">
    <pnp:Preferences></pnp:Preferences>
    <pnp:Templates ID="CONTAINER-TEMPLATE-SOMESITE">
        <pnp:ProvisioningTemplate ID="TEMPLATE-SOMESITE" Version="1" BaseSiteTemplate="GROUP#0" Scope="RootSite">
            <pnp:ApplicationLifecycleManagement>
                <pnp:Apps>
                    <pnp:App AppId="{AppPackageId:Some Custom Web Part}" Action="Install" />
                </pnp:Apps>
            </pnp:ApplicationLifecycleManagement>
             <pnp:ClientSidePages>
                <pnp:ClientSidePage PageName="SomePage.aspx" PromoteAsNewsArticle="false" Overwrite="true" Layout="Article" EnableComments="false">
                    <pnp:Sections>
                        <pnp:Section Order="1" Type="OneColumn">
                            <pnp:Controls>
                                <pnp:CanvasControl WebPartType="Custom" JsonControlData="{ &quot;serverProcessedContent&quot;: {&quot;htmlStrings&quot;:{},&quot;searchablePlainTexts&quot;:{},&quot;imageSources&quot;:{},&quot;links&quot;:{}}, &quot;properties&quot;: {&quot;listName&quot;:&quot;some list&quot;,&quot;viewName&quot;:&quot;All items&quot;,&quot;headerText&quot;:&quot;Some header&quot;}}" ControlId="b3d353ac-6103-42e2-9552-dde277b5d3d8" Order="1" Column="1" />
                            </pnp:Controls>
                        </pnp:Section>
                    </pnp:Sections>
                </pnp:ClientSidePage>
            </pnp:ClientSidePages>
        </pnp:ProvisioningTemplate>
    </pnp:Templates>
</pnp:Provisioning>

If I reapply the template after the WebPart is successfully installed in the site - the WebPart is added to the ClientSidePage.

Steps to Reproduce

When applying the template provided above the ClientSidePage has no reference to a given SPFx Web Part. If the template is reapplied after the SPFx app is installed, the Web Part is referenced correctly on the page.

Thanks for your contribution! Sharing is caring.

[wobba]

The issue is that the object handler loads up a list of available parts for the page
var componentsToAdd = page.AvailableClientSideComponents().ToList();

then checks if the id is available, which it's not as the feature has not been completely activated yet for the added app.

[wobba]

Thank you Thomas, we'll get this processed and change default behavior to wait for the app to be installed before continuing.