3

Hi I want to use PropertyFieldCollectionData from @pnp/spfx-property-controls but it doesn't work as expected.

When I debug my freshly set up WebPart in the workbench the PropertyFieldCollectionData control works pretty fine and the propertypane stretches to 2-3 times the usual size. But when I deploy it the Propertypane won't get any wider than 340px as usual.

Where's the possible mistake?

import * as React from 'react';
import * as ReactDom from 'react-dom';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { PropertyFieldCollectionData, CustomCollectionFieldType } from '@pnp/spfx-property-controls/lib/PropertyFieldCollectionData';

import * as strings from 'HelloWorldWebPartStrings';
import HelloWorld from './components/HelloWorld';
import { IHelloWorldProps } from './components/IHelloWorldProps';

export interface IHelloWorldWebPartProps {
  description: string;
  todoListData: any[];
}

export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {

  public render(): void {
    const element: React.ReactElement<IHelloWorldProps> = React.createElement(
      HelloWorld,
      {
        description: this.properties.description,
        todoListData: this.properties.todoListData
      }
    );

    ReactDom.render(element, this.domElement);
  }

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }


  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                }),
                PropertyFieldCollectionData("todoListData", {
                  key: "todoListData",
                  label: "test",
                  panelHeader: "Configure information to generate todo tasks",
                  manageBtnLabel: "Configure Tasks",
                  value: this.properties.todoListData,
                  fields: [
                    {
                      id: "Title",
                      title: "Title",
                      type: CustomCollectionFieldType.string,
                      required: true
                    },
                    {
                      id: "Description",
                      title: "Description",
                      type: CustomCollectionFieldType.string,
                      required: true
                    },
                    {
                      id: "Importance",
                      title: "Importance",
                      type: CustomCollectionFieldType.dropdown,
                      options: [
                        {
                          key: "high",
                          text: "high"
                        },
                        {
                          key: "medium",
                          text: "medium"
                        },
                        {
                          key: "low",
                          text: "low"
                        }
                      ],
                      required: true
                    },
                    {
                      id: "Status",
                      title: "Staus",
                      type: CustomCollectionFieldType.dropdown,
                      options: [
                        {
                          key: "notStarted",
                          text: "Not Started"
                        },
                        {
                          key: "inProgress",
                          text: "In Progress"
                        },
                        {
                          key: "completed",
                          text: "Completed"
                        },
                        {
                          key: "waitingOnOthers",
                          text: "Waiting on others"
                        },
                        {
                          key: "deferred",
                          text: "Deferred"
                        }
                      ],
                      required: true
                    }
                  ],
                  disabled: false
                })

              ]
            }
          ]
        }
      ]
    }
  }
}

thats what it looks like in the workbench Workbench

and thats what it looks like when deployed when deployed

EDIT:

here's what console logs say, when site with nothing but the webpart is loading: (nothing more, when clicking the button to open the desired panel) console log

4
  • Can you check the Console/Debugger to see if there are any files failing to load or CSS overrides? – Omar Stewey Oct 24 '20 at 3:32
  • I have just tried your code - for me, it worked just fine when deployed (the size and z-order are correct). You can try to clean caches, use a clean SharePoint site, or use debugger (dev tools). – Nikolay Oct 25 '20 at 20:51
  • added the console logs as wished. – MP_89 Oct 27 '20 at 10:28
  • It set up a completely new page with a new Browser profil. Same result. Gave it to our Sharepoint Architect. same result on his dev-tenant and on production – MP_89 Oct 27 '20 at 10:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.