Can't choose a custom image

[4Ilan]

When I click on the Choose Image button for a playlist it opens a blank screen. I am able to get out of it by clicking the escape button on the kb. When I upgraded to version 5, I approved the Microsoft Graph API Files.ReadWrite.All in the SharePoint admin center. I have removed the solution and added back and approved the API permissions again, but still no go. I checked my permissions to the tenant app catalog and the learning pathway site, and I am a site collection admin in both, as well as SharePoint admin role.

Thanks

[dcashpeterson]

@4Ilan Can you please double check the api permissions again as well as the permissions on the Site Assets library. Those are the only two reasons why the user wouldn't see the asset picker. To help any further I would need to see any errors in the console.

[4Ilan]

Thanks, Derek.
I attached an image of the API permissions. I think this is correct. The permissions to the Site Asset library is inheriting permissions from the site and I am a site collection admin. I have also added myself to the site's SP owners' group for good measures. I am seeing some errors in via the dev tools trace though. The first error that comes up when I click on the Edit Detail button for a playlist is FilePicker (componentDidMount) - TypeError: Cannot read properties of null (reading 'focus'). I attached a screenshot from the trace. The blank screen is the FilePicker.aspx. I tested this by editing an image web part on a page and it worked file there. It looked the same only it wasn't blank. It gave me the option to upload, search, etc.

What do you think?
Does this sound like an API permission?
Did I inadvertently do something?

Thanks,
Ilan

[dcashpeterson]

@4Ilan I was able to replicate the error in the console however I was not able to replicate the issue. I did update the code to remove that error. If you update to 5.0.0.6 that error should be removed. The dialog showing nothing only happens when the Graph permissions are not working properly. Is there any chance that calls to the graph are being blocked in your tenant? That is really the only thing I can think of.

[4Ilan]

@dcashpeterson I removed the solution and deleted the site to start over. The error comes up in trace when I click on the + to add a new playlist, AADSTS500011: The resource principal named 7bb6a192-cfae-41ca-b95b-20c15d8367d3 was not found in the tenant. I have a dev / test tenant and I can't find that resource principal there either.

After I created the site, apply the learning pathways template, it deployed version 4.4 of the solution and it is working with that version. After I upgrade to 5 is when it breaks.

"error": "invalid_resource",
"error_description": "AADSTS500011: The resource principal named 7bb6a192-cfae-41ca-b95b-20c15d8367d3 was not found in the tenant".

Thoughts, directions?

Thanks,
Ilan

[dcashpeterson]

@4Ilan It looks like this is a different issue. Are you able to load the administration site with V 5.0.0.6? If you can't load the admin screen then you are most likely encountering this issue https://github.com/pnp/custom-learning-office-365/blob/main/installation/UpdateV4-V5.md#v5-update-note

[4Ilan]

@dcashpeterson The administration page does load and seems to display correctly. I can create playlists, hide content, etc. The ability to upload a custom image has to do with the API permissions so I thought maybe this is related.

The issue you pointed out to I saw the first time I upgraded to version 5 and that fixed it for me.

[dcashpeterson]

ok, then I am a little confused. Can you please confirm that V5 works fine for you with the exception of not being able to add a custom image for sub-categories or playlists?

[4Ilan]

Yeah, everything seems to work fine except for when I try to change the image. When I click on the Change Image button it opens the window on the right but it's just a blank, white, page. I opened the dev. tools to hopefully see an error and I found out that the first error, invalid_resource AADSTS500011, comes up when I click the + to create a new playlist. Since the custom image is related to the API, which is permissions, this looks like it's related. I also deployed the SharePoint Success Site, but we never used it so I removed it.

[dcashpeterson]

@4Ilan Can you right click and Inspect the dialog box. There should be an Iframe with a data-component value of FilePicker

Let me know what the URL that it is pointing to. Also, what version are you using. I know you said you were updating.

[dcashpeterson]

If the API permissions are not approved you should still see this.

[4Ilan]

Hmm...this is what I see when I inspect that white space. There seems to be an issue with that button too.

I am currently using 5.0.0.6.

Maybe I should try to remove the solution from the tenant and deploy it to a new site with a different URL?
Something might be cached somewhere?

[Heavm00]

@4Ilan have you approved all of your API permissons in https://[tenantname]-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx#/webApiPermissionManagement?

In my case, approving the API permission resolved showing the blank page and I can select images now.

[4Ilan]

@HamEv
Did you also get a blank screen, like I attached the image above? Based on what Derek is saying, that screen should not be blank, even if the Graph permission has not been approved. I have made sure the Microsoft Graph is enabled though.

The Microsoft Graph permissions we enable in the SharePoint online admin center can also be managed via the SharePoint Online Client Extensibility Web Application Principal registered app in Azure. The only difference I see between my dev. and prod. tenants is in Authentication blade. Both https://fluidpreview.office.net/spfxsinglesignon and https://dev.fluidpreview.office.net/spfxsinglesignon in my dev. tenant are listed under Platform configuration as Web and in my prod. tenant they are listed under the Single-page application. There's an option to migrate the two links to the Single-page application Redirect URIs, which I did, in my dev. tenant, but that didn't break. I was hoping this would break the learning pathways site in my dev. tanant as I am adjusting this the same as in my prod. tenant. In my prod. tenant I have additional Graph permissions as I also have the PnP Search solution installed, which uses a bunch of Graph permissions.

[Heavm00]

@4Ilan, yes my screen was blank, too. Approving the permissions worked for me.

[dcashpeterson]

@4Ilan Are there any other errors that you are seeing in the console? Something with either a 🟢 or 🎓 emoji next to it? Also, please check the network tab and see if there is anything returning anything other than a 200 status. The dialog is opening but the File Picker component is not rendering so there should be an error in the log.

[4Ilan]

@dcashpeterson I am attaching a couple of images from the dev. tools from the console and the networking tab.

There are a lot of https://res-1.cdn.office.net/... and to the custom learning admin web part in the tenant app catalog /sites/apps/ClientSideAssets/. I am seeing the folder it is looking for.

Thank you, I really appreciate all the help.

[4Ilan]

@dcashpeterson, maybe this'll help.

I deployed the learning pathways solution exactly the same way in both my dev. and prod. tenants and I found a difference following the trace.

In the dev. tenant
After I click the + sign to create/edit a playlist I am seeing in the network tab a "playlist_bw.png" and right after it the "token?client-request...". In the payload there's a client_id which is the id of the "SharePoint Online Web Client Extensibility" enterprise app. It contains the Graph API permissions I approved in the SharePoint admin center.

In the prod. tenant
I follow the same procedure, right after the "playlist_bw.png" there's an error:
"error": "invalid_resource",
"error_description": "AADSTS500011: The resource principal named 7bb6a192-cfae-41ca-b95b-20c15d8367d3 was not found in
the tenant
In this tenant, prod., this ent. app. has a different id than what it is calling for. This is probably why it is failing because it can't get the graph API permissions it needs. The id in the error doesn't exist anywhere. In the "SharePoint Online Client Extensibility Web Application Principal" reg. app the correct "SharePoint Online Web Client Extensibility" is listed in the Exposed API.

The correct ent. app. is SharePoint Online Web Client Extensibility - 08e18876-6177-487e-b8b5-cf950c1e598c

How does it know to look for id of 7bb6a192-cfae-41ca-b95b-20c15d8367d3?
Is there some caching I need or can clear somewhere?
Is this a tenant thing or specific to this solution?

Thanks

[dcashpeterson]

@4Ilan As you can see in the screen shots the Authentication Service is not able to get a token from Entra ID. This is because you are getting an unauthorized from the post being made. Are you by any chance using the same account to log into both tenants? The client IDs are not hard coded in the application. The application makes a request to the authentication endpoint with context of the user that is currently logged in. Can you pose what the response is from that token request? Is it an error (meaning that there is something wrong with the call) or is it an unauthorized response (meaning it's making the call and the call is returning unauthorized)

[4Ilan]

I created a ticket with Azure support. I also have the PnP Custom Search solution deployed, which also uses API permissions, and I am seeing the same error.
"error": "invalid_resource",
"error_description": "AADSTS500011: The resource principal named 7bb6a192-cfae-41ca-b95b-20c15d8367d3 was not found in the tenant

I'll let you know once I start working with an Azure engineer, and hopefully resolve the issue.

Thanks for all your help on this.