Navigation between Single WebPart App Pages does not refresh WebPart content

[salascz]

Category

• Bug

Describe the bug

I have a SPFx WebPart. The WebPart is placed on two Single WebPart App Pages (with different configuration for each page). Links to those pages are included to site navigation.

The WebPart is not refreshed if user click on the navigation link. (The page url and page title is updated correctly)

Steps to reproduce

The issue might be reproduced with standard WebPart (e.g. Hero)

1. Create two different App Pages with a Hero WebPart
2. Add links to those pages to site navigation
3. Open first page and click on a link to second page in site navigation - the page url is changed but the WebPart is not refreshed

Expected behavior

• The render method of the WebPart should be called with properties related to second page

Environment details (development & target environment)

• Your Developer Environment: Windows 10 or MacOS 10.15.6
• Target Environment: SharePoint Online
• Framework: Node.js v10
• Browser(s): Chrome v85
• Tooling: SPFx v1.11.0

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[kongmengfei]

Hi salascz,

I am able to reproduce this error with the demo webpart:

I suspect this is a bug and caused by a special mechanism on Modern page : when a hyperlink is clicked, navigation to the page is achieved via a page router to avoid full refresh of the screen.

Baker Kong
Microsoft SharePoint Community Support

[salascz]

Hi @kongmengfei,
thanks for preparing a demo WebPart. I agree with your observation, the page router mechanism is probably the root cause. Seems to be OK for "standard" Modern pages and only App pages are affected.

Is there a way, how to get it fixed?

Thanks

[parmira5]

@salascz just ran into this issue myself. Were you able to find a workaround?

[salascz]

@salascz just ran into this issue myself. Were you able to find a workaround?

Yes, I created two separate webparts (one for each configuration) and reference the same React component.

Not a good solution for large projects as each webpart increase the build time...

[parmira5]

@salascz just ran into this issue myself. Were you able to find a workaround?

Yes, I created two separate webparts (one for each configuration) and reference the same React component.

Not a good solution for large projects as each webpart increase the build time...

Also kind of a cruddy solution but I just went up the dom and grabbed the site nav elements and added the data-interception=off attribute to each. Hopefully this is resolved before this comes back to bite me.

[AJIXuMuK]

Hello @salascz - sorry for the long delay.
The issue seems to be fixed by now.

Could you please check if the bug is still appearing for you?

[salascz]

Hello,
@AJIXuMuK I am able to replicate the issue on Single WebPart App Pages using PnP Template (for page provisioning) and OOTB Image WebParts :(. Standard pages are OK I guess

Here is my xml template:

<?xml version="1.0"?>
<pnp:Provisioning xmlns:pnp="http://schemas.dev.office.com/PnP/2019/09/ProvisioningSchema" Version="1.0"
                  DisplayName="Issue Page Template">
  <pnp:Templates>
    <pnp:ProvisioningTemplate ID="IssuePageTemplate" Version="1.0" BaseSiteTemplate="SITEPAGEPUBLISHING#0" DisplayName="Issue Page"
                              Scope="RootSite">
      <pnp:ClientSidePages>
        <pnp:ClientSidePage PageName="TestPage1.aspx" Publish="true" PromoteAsNewsArticle="false" Overwrite="true" Layout="SingleWebPartAppPage" EnableComments="false"
                            Title="TestPage1">
          <pnp:Sections>
            <pnp:Section Order="1" Type="OneColumnFullWidth">
              <pnp:Controls>
                <!-- Image control -->
                <pnp:CanvasControl WebPartType="Image" JsonControlData="{&quot;id&quot;: &quot;d1d91016-032f-456d-98a4-721247c305e8&quot;, &quot;instanceId&quot;: &quot;5fb5c954-0ed7-477d-8b12-f5a8fa0a40fc&quot;, &quot;title&quot;: &quot;Image&quot;, &quot;description&quot;: &quot;Add an image, picture or photo to your page including text overlays and ability to crop and resize images.&quot;, &quot;dataVersion&quot;: &quot;1.9&quot;, &quot;properties&quot;: {&quot;imageSourceType&quot;:2,&quot;captionText&quot;:&quot;&quot;,&quot;altText&quot;:&quot;&quot;,&quot;linkUrl&quot;:&quot;&quot;,&quot;overlayText&quot;:&quot;&quot;,&quot;fileName&quot;:&quot;&quot;,&quot;siteId&quot;:&quot;{sitecollectionid}&quot;,&quot;webId&quot;:&quot;{siteid}&quot;,&quot;listId&quot;:&quot;{listid:Documents}&quot;,&quot;uniqueId&quot;:&quot;b30ebc1b-6a8a-4c50-8d58-7b6cd235bf39&quot;,&quot;imgWidth&quot;:300,&quot;imgHeight&quot;:392,&quot;isFullWidth&quot;:true,&quot;alignment&quot;:&quot;Center&quot;,&quot;resizeCoefficient&quot;:1,&quot;resizeDesiredWidth&quot;:2513,&quot;fixAspectRatio&quot;:false}, &quot;serverProcessedContent&quot;: {&quot;htmlStrings&quot;:{},&quot;searchablePlainTexts&quot;:{},&quot;imageSources&quot;:{&quot;imageSource&quot;:&quot;https://{fqdn}{site}/Shared Documents/parker-blue.png&quot;},&quot;links&quot;:{},&quot;customMetadata&quot;:{&quot;imageSource&quot;:{&quot;siteId&quot;:&quot;{sitecollectionid}&quot;,&quot;webId&quot;:&quot;{siteid}&quot;,&quot;listId&quot;:&quot;{listid:Documents}&quot;,&quot;uniqueId&quot;:&quot;b30ebc1b-6a8a-4c50-8d58-7b6cd235bf39&quot;,&quot;imgWidth&quot;:300,&quot;imgHeight&quot;:392}}}, &quot;dynamicDataPaths&quot;: {}, &quot;dynamicDataValues&quot;: {}}" ControlId="d1d91016-032f-456d-98a4-721247c305e8" Order="1" Column="1" />
              </pnp:Controls>
            </pnp:Section>
          </pnp:Sections>
        </pnp:ClientSidePage>
        <pnp:ClientSidePage PageName="TestPage2.aspx" Publish="true" PromoteAsNewsArticle="false" Overwrite="true" Layout="SingleWebPartAppPage" EnableComments="false"
                            Title="TestPage2">
          <pnp:Sections>
            <pnp:Section Order="1" Type="OneColumnFullWidth">
              <pnp:Controls>
                <!-- Image control -->
                <pnp:CanvasControl WebPartType="Image" JsonControlData="{&quot;id&quot;: &quot;d1d91016-032f-456d-98a4-721247c305e8&quot;, &quot;instanceId&quot;: &quot;5fb5c954-0ed7-477d-8b12-f5a8fa0a40fc&quot;, &quot;title&quot;: &quot;Image&quot;, &quot;description&quot;: &quot;Add an image, picture or photo to your page including text overlays and ability to crop and resize images.&quot;, &quot;dataVersion&quot;: &quot;1.9&quot;, &quot;properties&quot;: {&quot;imageSourceType&quot;:2,&quot;captionText&quot;:&quot;&quot;,&quot;altText&quot;:&quot;&quot;,&quot;linkUrl&quot;:&quot;&quot;,&quot;overlayText&quot;:&quot;&quot;,&quot;fileName&quot;:&quot;&quot;,&quot;siteId&quot;:&quot;{sitecollectionid}&quot;,&quot;webId&quot;:&quot;{siteid}&quot;,&quot;listId&quot;:&quot;{listid:Documents}&quot;,&quot;uniqueId&quot;:&quot;b30ebc1b-6a8a-4c50-8d58-7b6cd235bf39&quot;,&quot;imgWidth&quot;:300,&quot;imgHeight&quot;:392,&quot;isFullWidth&quot;:true,&quot;alignment&quot;:&quot;Center&quot;,&quot;resizeCoefficient&quot;:1,&quot;resizeDesiredWidth&quot;:2513,&quot;fixAspectRatio&quot;:false}, &quot;serverProcessedContent&quot;: {&quot;htmlStrings&quot;:{},&quot;searchablePlainTexts&quot;:{},&quot;imageSources&quot;:{&quot;imageSource&quot;:&quot;https://{fqdn}{site}/Shared Documents/parker-green.png&quot;},&quot;links&quot;:{},&quot;customMetadata&quot;:{&quot;imageSource&quot;:{&quot;siteId&quot;:&quot;{sitecollectionid}&quot;,&quot;webId&quot;:&quot;{siteid}&quot;,&quot;listId&quot;:&quot;{listid:Documents}&quot;,&quot;uniqueId&quot;:&quot;b30ebc1b-6a8a-4c50-8d58-7b6cd235bf39&quot;,&quot;imgWidth&quot;:300,&quot;imgHeight&quot;:392}}}, &quot;dynamicDataPaths&quot;: {}, &quot;dynamicDataValues&quot;: {}}" ControlId="d1d91016-032f-456d-98a4-721247c305e8" Order="1" Column="1" />
              </pnp:Controls>
            </pnp:Section>
          </pnp:Sections>
        </pnp:ClientSidePage>
      </pnp:ClientSidePages>
    </pnp:ProvisioningTemplate>
  </pnp:Templates>
</pnp:Provisioning>

[patmill]

Hi @salascz - you need to use a webpart that supports being in a single webpart app page - none of the out of the box webparts support this. If you have a custom webpart that supports the single webpart app page, and use the same process, does it work or not? Also - if you create the page manually (not using the PNP provisioning) does it work (we are unable to repro manually)?

[salascz]

Hi @patmill,
thank you for looking into our issue. Sorry, I thought out of the box webparts are supported as it was not possible to use not configured custom webparts when creating page from template (different story)

I can confirm it does work for pages created manually.

Looks like some kind of configuration issue on our side.

[ghost]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues