search

SharePoint / sp-dev-docs

SharePoint & Viva Connections Developer Documentation
https://docs.microsoft.com/en-us/sharepoint/dev/
Creative Commons Attribution 4.0 International
1.24k stars 1.01k forks source link

Navigation between Single WebPart App Pages does not refresh WebPart content #6246

Closed salascz closed 2 years ago

salascz commented 4 years ago

Category

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

AppPageWPIssue

Expected behavior

Environment details (development & target environment)

msft-github-bot commented 4 years ago

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

kongmengfei commented 4 years ago

Hi salascz,

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

test

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 commented 4 years ago

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 commented 4 years ago

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

salascz commented 4 years ago

@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 commented 4 years ago

@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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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