In the previous blog here, we looked at how to deploy and install SharePoint Apps. Now let’s look at installing SharePoint Framework extensions – Listview command sets programmatically.

SharePoint CSOM

SharePoint Framework has three type of extensions that could be created – Application customiser, Listview command sets and Field customisers. In this blog, we will look at adding list view command sets programmatically.

Listview command extensions are actually custom actions installed in a library or list. Hence to activate it we will go to the library/list, find the installed custom actions, if not installed we will install the new custom action. Below is the code for that.


private string appJsonInfo;
private AppDeclaration Apps;
// A class to hold JSON converted objects for Apps
private class AppDeclaration
{
public string appName;
public string appId;
public string clientsideId;
}
// Declare and create a Json Object for all Apps
public void DeclareAppIds
{
appJsonInfo = "[{appId: \"xxxxx-xxxx-xxxx-xxxx-xxxxxxxx\", appName: \"testApp\", clientsideId: \"xxxxxx-xxxx-xxxx-xxxx-xxxxxxxx\"}, " +
"{appId: \"xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx\", appName: \"testApp1\", clientsideId: \"xxxxxx-xxxx-xxxx-xxxxx-xxxxxx\"}, " +
"{appId: \"xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx\", appName: \"testApp2\", clientsideId: \"xxxxxx-xxxx-xxxx-xxxxx-xxxxxx\"}]";
Apps = JsonConvert.DeserializeObject<List<AppDeclaration>>(appJsonInfo);
}
public void AddExtensions(string listURL)
{
AppDeclaration App = appConfiguration.Apps.Find(app => app.appName.Contains("<app name>"));
Guid AppID = new Guid(App.clientsideId);
string AppName = App.appName;
using (ClientContext context = new ClientContext(<siteUrl>))
{
if (AppID != Guid.Empty)
{
context.Credentials = new SharePointOnlineCredentials(UserName, SecurePass);
List list = context.Web.GetListByUrl(<list URL>);
log.Info("Finding and Adding Extenstion to " + list.Title);
context.Load(list);
context.Load(list, t => t.UserCustomActions);
context.ExecuteQuery();
UserCustomActionCollection listExt = list.UserCustomActions;
bool AppPresent = false;
foreach (UserCustomAction customAcc in listExt)
{
if (customAcc.ClientSideComponentId == AppID)
{
tenancyAppPresent = true;
continue;
}
}
if (!tenancyAppPresent)
{
UserCustomAction customAction = list.UserCustomActions.Add();
customAction.ClientSideComponentId = AppID;
customAction.Location = "ClientSideExtension.ListViewCommandSet";
customAction.Name = AppName;
customAction.Title = AppName;
customAction.Update();
context.ExecuteQuery();
}
}
else
throw new Exception("System Error – App cannot be added as no App ID found");
}
}

view raw

Add Extension using SharePoint CSOM

hosted with ❤ by GitHub

PowerShell

We could also use PnP PowerShell to add the Library extension onto a page using the code below


$credentials = Get-Credential
Connect-PnPOnline "https://<your-tenant&gt;.sharepoint.com/sites/<target-site>" -Credentials $credentials
## You can use the following PnP cmdlet
## ClientSideComponentId from Manifest.Json of the extension
Add-PnPCustomAction -Name "<CommandSetName>" -Title "<CommandSetTitle>" -Description "<Text>" -RegistrationId "101" -RegistrationType List -ClientSideComponentId "<Id from Manifest.json>" -Location "ClientSideExtension.ListViewCommandSet"

view raw

Add Extension using PnP CSOM

hosted with ❤ by GitHub

Hence, above we saw how we could add extensions onto a library or list using CSOM or PowerShell

Happy Coding!!

5 Comments

  1. Pingback: Provisioning complex Modern Sites with Azure Functions and Flow – Part 3 – Post Provisioning Site Configuration
  2. Pingback: Provisioning complex Modern Sites with Azure Functions and Flow – Part 3 – Post Provisioning Site Configuration | Kloud Blog

  3. Hi Asish
    Thank you for your post. It’s quite helpful.
    But in my case, I need one step back.
    My App is installed. I can see that using AppManager(clientContext);

    When I’m trying to get the app using,
    var components = page.AvailableClientSideComponents();

    it’s not getting, because it’s in [Apps you can add] state, not in added state.
    How to achieve this condition.
    I’m provisioning modern site, I want to add a Custom SPFX webpart into a newly added page.
    Any help on this is much appreciated.

    Thank you
    anand

    Like

    Reply

Leave a comment