Property folderInfo is undefined if folder is loaded directly

[aalkousheh]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

i have tried it with 2 versions

• SPFx version 1.18.2
• Node.js version 16.20.2
• Npm version 8.19.4

AND

• SPFx version 1.16.1
• Node.js version 14.18.3
• Npm version 6.14.15

Describe the bug / error

this.context.listView.folderInfo is undefined when the folder is loaded directly.

Steps to reproduce

1.Create a List Command Set Extension

2.Deploy

3. Open a document library folder directly e.g
   https://yourdomain.sharepoint.com/sites/spfx-test/Shared%20Documents/Forms/AllItems.aspx?id=%2Fsites%2Fspfx-test%2FShared%20Documents%2FSubFolder

4. output this.context.listView.folderInfo.folderPath e.g. onExecute

public async onExecute(event: IListViewCommandSetExecuteEventParameters) { console.log(this.context.listView.folderInfo) .... }

5. Observe that it is undefined.
   Note: When you navigate to the subfolder within the document library the folderInfo property is not undefined and contains the folderPath property.

Expected behavior

this.context.listView.folderInfo should contain the folderPath property even when you load the folder directly in the browser.

This is important e.g. in Teams when you use the files tab and click on "Open in SharePoint".
It will directly open a subfolder which contains the files of the current channel. In this case folderInfo is set to undefined and cannot be used.

[aalkousheh]

I found workaround for this as below.

`private getFolderUrlFromQueryString(): string {
const id = this.getQueryStringParameter("Id");
const rootFolder = this.getQueryStringParameter("RootFolder");

var url = id != null ? id : rootFolder;
if (url === undefined) {
// in case of root folder
url = this.context.pageContext.list.serverRelativeUrl;
}

return decodeURIComponent(url);
}

private getQueryStringParameter(paramToRetrieve: string) {
if (document.URL.indexOf("?") == -1)
return null;

var params = document.URL.split("?")[1].split("&");
var strParams = "";
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0].toLowerCase() == paramToRetrieve.toLowerCase())
return singleParam[1];
}
}

public async onExecute(event: IListViewCommandSetExecuteEventParameters): Promise {
switch (event.itemId) {
case 'cmd_NewButton':
{
let folderServerRelativeUrl = this.context.listView.folderInfo.folderPath || "";
if (folderServerRelativeUrl === "") {
let folderServerRelativeUrlFromURLQuery =this.getFolderUrlFromQueryString();
if (folderServerRelativeUrlFromURLQuery === "") {
alert("something went wrong, please refresh the page try again.");
break;
} else {
folderServerRelativeUrl = folderServerRelativeUrlFromURLQuery;
}
}
....
break;
}
}

`