unable to configure react-application-announcements
Closed this issue · 9 comments
Sample
https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-announcements
Author(s)
What happened?
I have followed all steps mentioned within this page https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-announcements under Announcements list columns, Build and deploy and using PowerShell but I am not able to make react-application-announcements application work.
I have to fix the few minor issues within PnPPowerShell before add customaction to add extension to my site as below. I also made sure list name is also "Site Announcements".
Add-PnPCustomAction -Name "Announcements" -Title "Announcements" -Location "ClientSideExtension.ApplicationCustomizer" -ClientSideComponentId "dd7ec4fd-97aa-44c5-b6ad-87535862e0bf" -ClientSideComponentProperties "{"listName":"Site Announcements", "siteUrl":"/sites/HubTest"}"
Steps to reproduce
- It does work when I do gulp serve and append following query string after site url
?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"dd7ec4fd-97aa-44c5-b6ad-87535862e0bf":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{"listName":"Site%20Announcements","siteUrl":"/sites/ProjectHubTest"}}}
- However, it does not work after adding Add-PnPCustomAction , it does not work, it does not show any annoucements.
Expected behavior
Announcement(s) banner should show up after adding announcements to Site Announcements list, as displayed in above image.
I will appreciate any help or suggestion on this.
Thank You,
Nilang
Target SharePoint environment
SharePoint Online
Developer environment
Windows
Browsers
- Internet Explorer
- Microsoft Edge
- Google Chrome
- FireFox
- Safari
- mobile (iOS/iPadOS)
- mobile (Android)
- not applicable
- other (enter in the "Additional environment details" area below)
SPFx version
1.9.1
Node.js version
v8.9.4
Additional environment details
No response
Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.
Did you correctly escape that PowerShell string? The way it is pasted looks wrong, but it might just be GH issues messing it up. Otherwise, it looks like you're using the /sites/ProjectHubTest in one case and /sites/HubTest in the other.
You should look at your network traffic tab to see if any queries are 404 or looks wrong.
Hi @thespooler,
Thanks for your quick reply. I am using exact same URL "/sites/ProjectHubTest", for some reason I messed up while creating a bug, I am attaching image for both my PS command and Network traffic tab below.
PowerShell
Network Traffic Tab - FYI, I sorted status by descending
Thank You,
Nilang
Hi @thespooler ,
One thing I noticed when its working in debug mode with gulp serve and query string. it does return with 2 404 errors for react and react-dom as in below screenshot.
However, while in regular mode its not working it does not give those 2 errors.
So is it possible, when we use gulp-serve with query string, and allow loading unsafe script, may execute the script which otherwise does not allow in regular mode ?
Thank You,
Nilang
Hi @thespooler ,
I will appreciate any help or suggestion on this, so I can troubleshoot it further.
Thank You,
Nilang
Any error in the console?
And again, why the backticks in the PowerShell snippet... it should be " IIRC.
Hi @thespooler ,
Screenshots I provided above message do contain errors in the console.
In reference with backticks, As PowerShell provided in readme did not work for me I have got reference from Add-PnPCustomAction Example-2
Thank You for all your help!
The errors I see are not related to this webpart, the call stack only shows platform stuff.
React.js 404s again are platform, can't do much about that.
As for the Add-PnPCustomAction, I'd guess that's where the issue is and that the JSON is not correctly escaped.
@nilang-shah it looks like the issue isn't related to the extension.
I'll mark this issue as closed, but feel free to open a new issue so we can investigate further.