I am working on a SharePoint Framework (SPFx) project where I need to dynamically display a custom ListView Command Set on specific lists only. By default, the command set appears on all lists and libraries, but I only want it to be visible on specific ones.
To achieve this, I am fetching the internal names of the lists from the URL using the following code:
private async fetchListOrLibraryName(): Promise {
try { // Get the current URL path const path = window.location.pathname; const match = path.match(//Lists/([^/]+)//);
if (match && match[1]) {
// match[1] will contain the list name (e.g., "EmployeeDetails" or "ClientList")
const listName = match[1];
console.log("Current list/library name:", listName);
} else {
console.log("List name not found in the URL.");
}
} catch (error) { console.error("Error fetching list/library name from URL:", error); } } This helps me fetch the internal name of the list from the URL, such as "EmployeeDetails" or "ClientList".
Now, my goal is to dynamically retrieve the display name (e.g., "Employee Details" or "Client List") based on the internal name using PnP JS. Once I get the display name, I will then compare the current list's display name with my predefined list of acceptable names to determine whether the ListView Command Set should appear on the page. The command set should only be visible for certain lists.
How can I achieve this using the PnP JS library to get the display name of a SharePoint list once I have its internal name?
Any guidance or examples on how to do this would be greatly appreciated
