Can we add multiple preconfiguredEntries to a SPFx web part for use on SharePoint Server 2016?

Question

I'm finding that no matter which web part I try to add, only one of the preconfigured entries is ever added to a page.

Have I done something wrong in my web part manifest.json file, or does having multiple preconfigured entries simply not work as designed on SharePoint Server 2016 pages?

Background

I created a SharePoint Framework web part for displaying charts from SharePoint lists and successfully deployed it and used it on SharePoint Server 2016 (on-premises) on classic publishing and wiki pages.

The web part has a lot of configurable properties, so I thought as a next step I could improve the experience by using multiple preconfigured entries so people could set up different types of charts (pie, bar, line, etc) with a single click.

Preconfigured Entries Work as Expected from Workbench

I added the multiple preconfigured entries and they all work great from the workbench.

Preconfigured Entries Don't Work on Actual Pages

However, after deploying my app in the app catalog, whenever I try to add any of the preconfigured web parts to a page, only the first preconfigured entry (first based on their alphabetical order) is added to the page.

In my case, it always adds a Horizontal Bar Chart instead of a Line Chart, Pie Chart, Vertical Bar Chart, or whatever.

Has anyone else run into this behavior? Are there any workarounds?

My preconfiguredEntries JSON for reference

Here's my preconfiguredEntries JSON from the manifest

"preconfiguredEntries": [
  {
    "groupId": "1e95b737-7aeb-459a-8b74-ff30335ea553", 
    "group": { "default": "Charts from SharePoint Lists" },
    "title": { "default": "Pie Chart" },
    "description": { "default": "Web part for displaying charts using data from SharePoint lists" },
    "officeFabricIconFontName": "PieDouble",
    "properties": {
      "chartType": "Pie",
      "options":"{\"labelDirection\":\"explode\",\"labelPosition\":\"outside\"}"
    }
  },
  {
    "groupId": "1e95b737-7aeb-459a-8b74-ff30335ea553", 
    "group": { "default": "Charts from SharePoint Lists" },
    "title": { "default": "Line Chart" },
    "description": { "default": "Web part for displaying charts using data from SharePoint lists" },
    "officeFabricIconFontName": "LineChart",
    "properties": {
      "chartType": "Line",
      "options":"{\"lineSmooth\":true,\"low\":0,\"showArea\":false,\"showPoint\":false,\"axisY\":{\"onlyInteger\":true}}"
    }
  },
  {
    "groupId": "1e95b737-7aeb-459a-8b74-ff30335ea553", 
    "group": { "default": "Charts from SharePoint Lists" },
    "title": { "default": "Horizontal Bar Chart" },
    "description": { "default": "Web part for displaying charts using data from SharePoint lists" },
    "officeFabricIconFontName": "BarChartHorizontal",
    "properties": {
      "chartType": "Bar",
      "options":"{\"horizontalBars\":true,\"low\":0,\"reverseData\":true,\"seriesBarDistance\":15,\"stackBars\":false,\"chartPadding\":{\"left\":30,\"right\":0}}"
    }
  },
  {
    "groupId": "1e95b737-7aeb-459a-8b74-ff30335ea553", 
    "group": { "default": "Charts from SharePoint Lists" },
    "title": { "default": "Vertical Bar Chart" },
    "description": { "default": "Web part for displaying charts using data from SharePoint lists" },
    "officeFabricIconFontName": "BarChartVertical",
    "properties": {
      "chartType": "Bar",
      "options":"{\"horizontalBars\":false,\"low\":0,\"reverseData\":false,\"seriesBarDistance\":15,\"stackBars\":false}"
    }
  },
  {
    "groupId": "1e95b737-7aeb-459a-8b74-ff30335ea553", 
    "group": { "default": "Charts from SharePoint Lists" },
    "title": { "default": "Stacked Bar Chart" },
    "description": { "default": "Web part for displaying charts using data from SharePoint lists" },
    "officeFabricIconFontName": "StackedBarChart",
    "properties": {
      "chartType": "Bar",
      "options":"{\"stackBars\":true,\"fullWidth\":true,\"low\":0,\"axisY\":{\"onlyInteger\":true},\"reverseData\":false}"
    }
  },
  {
    "groupId": "1e95b737-7aeb-459a-8b74-ff30335ea553", 
    "group": { "default": "Charts from SharePoint Lists" },
    "title": { "default": "Multiseries Line Chart" },
    "description": { "default": "Web part for displaying charts using data from SharePoint lists" },
    "officeFabricIconFontName": "StackedLineChart",
    "properties": {
      "chartType": "Line",
      "options":"{\"lineSmooth\":true,\"fullWidth\":true,\"showPoint\":false,\"showArea\":true,\"low\":0,\"axisY\":{\"onlyInteger\":true},\"reverseData\":false}"
    }
  }
]

Note: I've duplicated the issue on both the November 2019 patch and the January 2020 patch of SharePoint Server 2016.

Edit: Looks like this was reported as a problem in May of 2017 and according to a comment on GitHub, a fix was planned for June of 2017. But the issue was closed automatically due to inactivity. Does anyone know if this was ever actually fixed?

Answer 1

Problem confirmed as bug

Well, I opened a new issue on GitHub but it got closed with a dismissive response and locked before I could post any followup questions or workarounds.

For anyone else who suffers with this problem, here's what I found out. According to Andrew Connell:

there is no mechanism to update SPFx on-prem so the issue that was fixed in SPO hasn't & won't be fixed in the existing SPFx v1.1 on SP2016

(As an aside, the idea that any enterprise-grade product sold in this century would be unpatchable by design is mind-boggling. What if this had been a security flaw instead of an annoying interface bug?)

So is it officially and forever unfixable? Not necessarily. Nobody so far has identified what the bug was that got fixed, or whether the problematic code was in the (apparently unpatchable) SharePoint Framework source code or the reliably patched-every-month SharePoint Server source code.

I'm guessing I'll have to contact Microsoft support directly to get it fixed instead of raising the problem through GitHub.

Workaround in the meantime

As a workaround, you can use Yeoman to add additional web parts to your SPFx project (Waldek Mastykarz has a good blog post about it).

In order to add a new Web Part to your existing SharePoint Framework project all you need to do, is call the SharePoint Yeoman generator on your existing SharePoint Framework project.

The generator will detect that it's running on an existing project and instead of scaffolding the whole project it will skip directly to adding a new Web Part.

So just run yo @microsoft/sharepoint inside your existing project and answer the questions to add a new web part.

Add a new web part for each variant web part you want to include, then reuse your code and strings, but change your web part manifest.json for each web part to include the desired preconfigured entry.

You can reuse your localized strings in the localizedResources in the config.json file for your project, but unless you're using references to external code you won't be able to refer to code from one web part inside another web part directory; duplicating the files into each web part folder works, even though it feels wrong.

If your solution has already been deployed, make sure you update the version number in package-solution.json. To get the updates to go through on a site where your SPFx solution has already been added, you'll need to go to Site Contents on the site and click the About option on your solution, then click the "Get It" button where it says a new version is available.