Error using PnP Property Controls on SPFx Adaptive Card Extension

[mfdezvil]

Category

• [ ] Enhancement
• [X] Bug
• [ ] Question

Version

Please specify what version of the library you are using: 3.13.0

I'm trying to use PnP Property Controls on a SPFx Adaptive Card Extension, in order to use advanced controls (PropertyFieldSpinner and PropertyFieldIconPicker) in property panel of adaptive card. I try to use a "simple" control as Spinner with properties:

PropertyFieldSpinner("", {
      key: "sp1",
      size: SpinnerSize.medium,
      isVisible: true,
      label: "Loading ..."
  })

And a more "complex" control , with elaborated properties like component context or onPropertyChange function:

PropertyFieldIconPicker('iconPicker', {
                  currentIcon: this.properties.iconPicker,
                  key: "iconPickerId",
                  onSave: (icon: string) => { console.log(icon); this.properties.iconPicker = icon; },
                  onChanged:(icon: string) => { console.log(icon);  },
                  buttonLabel: "Icon",
                  renderOption: "panel",
                  properties: this.properties,
                  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
                  label: "Icon Picker"              
                }),

Neither option works despite of I follow documentation step by step.

Expected / Desired Behavior / Question

Expect behaviour would be to view and use Property Controls in the property pane of the Adaptive Card.

Observed Behavior

When I open property pane to edit Adaptive Card properties, it shows a blank pane. In the browser console it shows this error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'isInternal')
    at e.loadComponent (sp-pages-assembly_es-es_a3e0bec465829500ae697c1a8bdc6de0.js:70:742212)
    at sp-pages-assembly_es-es_a3e0bec465829500ae697c1a8bdc6de0.js:70:742851
    at async Promise.all (/SitePages/index 1)
    at async Promise.all (/SitePages/index 0)

Steps to Reproduce

Using a default Adaptive Card Extension on SPFx v1.17.2 , with default scaffolding, I install @pnp/spfx-property-controls with npm. Then, I add code of the control in AdaptiveCardPropertyPane as it is said in documentation, for example:

import { PropertyFieldSpinner} from '@pnp/spfx-property-controls/lib/PropertyFieldSpinner';
import {  SpinnerSize } from '@fluentui/react/lib/Spinner';

export class AdaptiveCardPropertyPane {
  public getPropertyPaneConfiguration( ): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: { description: strings.PropertyPaneDescription },
          groups: [
            {
              groupFields: [
                PropertyPaneTextField('title', {
                  label: strings.TitleFieldLabel
                }),
                PropertyFieldSpinner("", {
                  key: "sp1",
                  size: SpinnerSize.medium,
                  isVisible: true,
                  label: "Loading ..."
              })
              ]
            }
          ]
        }
      ]
    };
  }
}

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[rayani1203]

I am having the exact same issue having gone through the documentation multiple times and looking at source code from other projects it just doesn't seem to work.

[AJIXuMuK]

@mfdezvil - thanks for reporting this one. Does the solution work fine without PnP controls in the property pane? Could you please share the test solution with us?

Thanks!

[mfdezvil]

Hi @AJIXuMuK , Yeah, solution works perfect if I don't use any PnP Property Controls component. I have uploaded a test adaptive card to this repo -all code is default created by yeoman, except I installed PnP Property Controls and use them in property pane. Let me know if you need more info.

Thanks.

[AJIXuMuK]

@mfdezvil Thanks for the confirmation! We'll be looking into it.

[mfdezvil]

Hi, any updates on this one?

[c-eiser13]

I have a brand new 1.18.2 SPFx ACE project, and installed 3.15.1 of this project and I get the same result as the OP. I've tried several controls including Taxonomy Picker and MultiSelect.

It is hard to tell if the error is coming from this library or something within SPFx. @mfdezvil , did you have any luck getting around this issue? I can use any controls from the @microsoft/sp-property-pane space, just none from this repo.

[mfdezvil]

Hi @c-eiser13 , I did not find a solution for this, so finally I removed library, stopped use these controls and redefined my application design. A bit disappointed about support team, who never taked care of this bug and neither answered me :(

[joelfmrodrigues]

@mfdezvil I am sorry that this slipped through and created a bad experience for you when using the controls. We try our best to review PRs, handle issues and questions, general project maintenance, etc, but sometimes it's hard to keep up with all the work as we do all this outside of working hours. Hoping for one of us or a community member to provide an update soon

[joaojmendes]

@mfdezvil, please see this samples: https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-My-Notifications/src, https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-my-calendar-plan

[ghost]

Closing issue as "answered". If you encounter similar issue(s), please open up a NEW issue. Thank you.