PropertyFieldFilePicker not working in Viva ACE Property Panes

Category

[ ] Enhancement

[ x] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 3.2.0 ]

Expected Behaviour

Expected the control to work when implemented with a Viva Adaptive Card

Observed Behaviour

When implementing the control, I initially sort of got it working inside the separate Property Control Pane file that comes scaffolded with the Adaptive Card generated in yeoman. However, since it couldn’t obtain the correct web part context in the separate file, my colleague and I tried migrating it to the main .ts file where the render function lives. This worked fine with the other controls I had implemented (some custom filtering functions that use PropertyPaneTextField to take in a query string) but as soon as I tried to add in the File Picker, I suddenly received an entry point error telling me that the module “PropertyControlStrings” couldn’t be found. After pairing with a more experienced dev we were unable to find a way to resolve the issue.

Steps to Reproduce

• Clone the repo HERE
• In the project repo, run npm install
• Implement the file picker as shown in the docs OR migrate the property pane into the HelloWorldAdaptivecardExtension.ts file and then attempt to implement the file picker as per docs. Both methods have caused the issue for me.

Thank you so much for your help and apologies if I’m doing something stupid - I’m only a junior and struggling with developing Viva ACEs

[msftbot[bot]]

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

[AJIXuMuK]

Hi @Theosaurus-Rex - what exactly doesn’t work for you? I don’t see any issues:

I took your example, installed property controls in there. This is the code for property pane:

import { IPropertyPaneConfiguration, PropertyPaneTextField, PropertyPaneDropdown } from '@microsoft/sp-property-pane';
import * as strings from 'HelloWorldAdaptiveCardExtensionStrings';
import { IHelloWorldAdaptiveCardExtensionProps } from './HelloWorldAdaptiveCardExtension';
import { PropertyFieldFilePicker, IPropertyFieldFilePickerProps, IFilePickerResult } from "@pnp/spfx-property-controls/lib/PropertyFieldFilePicker";
import { BaseComponentContext } from '@microsoft/sp-component-base';

export class HelloWorldPropertyPane {
  public getPropertyPaneConfiguration(properties: IHelloWorldAdaptiveCardExtensionProps,
    context: BaseComponentContext,
    onPropertyPaneFieldChanged: () => void): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: 'Card Settings'
          },
          groups: [
            {
              groupName: "Filters",
              groupFields: [
                PropertyPaneTextField('filterBySenderEmail', {
                  label: 'Filter by Sender',
                }),
                PropertyPaneTextField('filterBySubject', {
                  label: 'Filter by Subject'
                }),
                PropertyFieldFilePicker('filePicker', {
                  context: context as any,
                  filePickerResult: properties.filePickerResult,
                  onPropertyChange: onPropertyPaneFieldChanged,
                  properties: properties,
                  onSave: (e: IFilePickerResult) => { console.log(e); properties.filePickerResult = e; },
                  onChanged: (e: IFilePickerResult) => { console.log(e); properties.filePickerResult = e; },
                  key: "filePickerId",
                  buttonLabel: "File Picker",
                  label: "File Picker",
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

And here is how it’s called:

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return this._deferredPropertyPane!.getPropertyPaneConfiguration(this.properties, this.context, this.onPropertyPaneFieldChanged);
  }