Site Collection App Catalogs Summary View: SPFx sample webpart

Update: During January, 16 2020 SharePoint Framework Community Call I made a demo of my contribution, here you can find the registration :)

Hi guys!

Today we’ll talk about a new SPFx sample webpart I made using SharePoint Framework! Some days ago my colleague Alberto ask to me if there is a way to see all active Site Collection App Catalog and related Installed App. So I checked on the web and I find an interesting blog post from David Ramalho . In this post, David talk about how to check all SharePoint sites collections with App Catalog active . So I discovered there is an hidden List tenant.sharepoint.com/sites/AppCatalogUrl/Lists/SiteCollectionAppCatalogs/ into Tenant App Catalog. Inside, you can find listed all SiteCollection App catalog Url.

This list is very useful, and can help you don’t lose sight of how many SiteCollection app catalogs have been created and in which sites, even if only one SharePoint Administrator can create a SiteCollection App Catalog, it could be easy to lose sight of this information. Please, look at this other post if you want to understand better Tenant App Catalog vs Site Collection App Catalog differences. It is well done, so many thanks David!

Let’s get into my last code contribution 🙂

General needs

General needs of this sample is find a way to list all SiteCollection App Catalogs, and all Apps installed, with some useful metadata. This time I would like to do some experience on @pnp/spfx-controls-react which are reusable React controls for your SharePoint Framework solutions. In particolar way

• WebPart Title from @pnp/spfx-controls-react
• ListView from @pnp/spfx-controls-react

react-admin-sc-catalog-pnpjs in action!

The WebPart shows all SiteCollection catalogs and installed Apps with metadata

• Site Collection: site title with direct link to Site Collection App Catalog
• App Title: the name of the app
• App Catalog Version: This is the version of the app
• Deployed: a boolean flag, stands for app deployed into the site
• Installed Version: the app version
• Is Client Side Solution: a boolean flag, stands for solution type

Code deep-dive

The solution is pushed in my GitHub repository, but I would like to focus on some snippets.

How to retrieve all Site Collections app catalogs and related Apps

let resultData = new Array<SiteCatalogApps>();

    var tenantAppCatalogWeb = await sp.getTenantAppCatalogWeb();

    let siteCollectionAppCatalogs = await tenantAppCatalogWeb.lists.getByTitle("Site Collection App Catalogs").items.get();

    let data = await Promise.all(siteCollectionAppCatalogs.map(async siteCollCatalog => {

      let siteUrl = siteCollCatalog["SiteCollectionUrl"];

      let tmpSite = new Site(siteUrl);
      let tmpCatalog = await tmpSite.rootWeb.getSiteCollectionAppCatalog(siteUrl);
      let apps = await tmpCatalog.get();

This snippet, using pnpjs, shows how to

• Retrieve Tenant App Catalog Web, in order to get “Site Collection App Catalogs” list.
• For each items of this list, it use SiteCollectionUrl list column, in order to retrieve Site Collection URL with local app catalog configurated
• Using @pnp/sp/appcatalog we can access to the Site Collection App Catalog and get all Apps. Internally it use this SharePoint Online REST Api for ALM

GET /_api/web/sitecollectionappcatalog/AvailableApps

How to include spfx-controls-react in your SPFx solution

  public render(): React.ReactElement<ISiteCollectionCatalogWebPartProps> {
    return (
      <div className={styles.siteCollectionCatalog}>
        <WebPartTitle displayMode={this.props.displayMode}
          title={this.props.title}
          updateProperty={this.props.updateProperty} />
        <ListView
          items={this.state.siteAppCatalogs}
          viewFields={_viewFields}
          compact={true}
          selectionMode={SelectionMode.none}
          selection={this._getSelection}
          showFilter={true}
          filterPlaceHolder="Search..."
        />
      </div>
    );
  }

Sample response from ALM SharePoint Online REST Api

{
   "odata.metadata":"https://tenantname.sharepoint.com/sites/ContosoFinance/_api/$metadata#SP.ApiData.CorporateCatalogAppMetadatas",
   "value":[
      {
         "odata.type":"Microsoft.SharePoint.Marketplace.CorporateCuratedGallery.CorporateCatalogAppMetadata",
         "odata.id":"https://tenantname.sharepoint.com/sites/ContosoFinance/_api/Microsoft.SharePoint.Marketplace.CorporateCuratedGallery.CorporateCatalogAppMetadata182b7174-04f2-4c94-9d60-29a77a7d8510",
         "odata.editLink":"Microsoft.SharePoint.Marketplace.CorporateCuratedGallery.CorporateCatalogAppMetadata182b7174-04f2-4c94-9d60-29a77a7d8510",
         "AadAppId":null,
         "AadPermissions":null,
         "AppCatalogVersion":"1.0.0.0",
         "CanUpgrade":false,
         "CDNLocation":null,
         "CurrentVersionDeployed":true,
         "Deployed":true,
         "ID":"8d49dde8-e146-458d-8331-46102aed9175",
         "InstalledVersion":"1.0.0.0",
         "IsClientSideSolution":true,
         "IsEnabled":false,
         "ProductId":null,
         "ShortDescription":null,
         "SkipDeploymentFeature":false,
         "ThumbnailUrl":null,
         "Title":"react-command-page-model-pnpjs-client-side-solution"
      }, 
      {
         "odata.type":"Microsoft.SharePoint.Marketplace.CorporateCuratedGallery.CorporateCatalogAppMetadata",
         "odata.id":"https://tenantname.sharepoint.com/sites/ContosoFinance/_api/Microsoft.SharePoint.Marketplace.CorporateCuratedGallery.CorporateCatalogAppMetadata55a5528c-dd8a-4f88-9ce5-265ec7e7c5d3",
         "odata.editLink":"Microsoft.SharePoint.Marketplace.CorporateCuratedGallery.CorporateCatalogAppMetadata55a5528c-dd8a-4f88-9ce5-265ec7e7c5d3",
         "AadAppId":null,
         "AadPermissions":null,
         "AppCatalogVersion":"2.0.0.0",
         "CanUpgrade":false,
         "CDNLocation":null,
         "CurrentVersionDeployed":true,
         "Deployed":true,
         "ID":"78f10712-3e3a-4e97-b07f-bbebc62ca2b3",
         "InstalledVersion":"2.0.0.0",
         "IsClientSideSolution":true,
         "IsEnabled":false,
         "ProductId":null,
         "ShortDescription":null,
         "SkipDeploymentFeature":false,
         "ThumbnailUrl":null,
         "Title":"react-admin-sc-catalog-pnpjs-client-side-solution"
      }
   ]
}

And it is all from my side.. 🙂

I hope you enjoy my new code contribution!
Cheers
Federico