PropertyFieldCollectionData dropdown field render method

[deanbot]

Category

• Enhancement

Version

1.10.0

Desired Behavior

Within fields declaration in a PropertyFieldCollectionData, an optional 'render' property to allow for customizing the output individual items in a dropdown field.

PropertyFieldCollectionData('links', {
  key: 'linksKey',
  label: 'Links',
  panelHeader: 'Select update types',
  manageBtnLabel: 'Manage links',
  value: this.properties.links,
  fields: [
    ...buttonFields,
    {
      id: 'themeColor',
      title: 'Theme Color',
      type: CustomCollectionFieldType.dropdown,

      /* This is an example of how render method would be used */
      onRender: (option:IDropdownOption) => {
        if (option.data && !!option.data.color) {
          const optionClassName = getBackgroundStyle(option.data.color);
          return <div className={optionClassName}>{option.text}</div>;
        } else {
          return option.text;
        }
      }
      options: [
        {
          key: COLORS.themeDark,
          text: 'ms-themeDark',
          data: { color: COLORS.themeDark }
        },
          key: COLORS.themePrimary,
          text: 'ms-themePrimary',
          data: { color: COLORS.themePrimary }
        }
      ],
    },
  ]
})

export const COLORS = {
  themeDark: 'themeDark'
  themePrimary: 'themePrimary',
};

import msBackgroundColors from './msBackgrounds.module.scss';

export function getBackgroundStyle(themeColor: string): string {
  let style;

  // get theme styles
  switch (themeColor) {
    case THEME_COLOR.themeDark:
      style = msBackgroundColors.themeDark;
      break;
    case THEME_COLOR.themePrimary:
      style = msBackgroundColors.themePrimary;
      break;
  }

  return style;
}

msBackgrounds.module.scss

@import './node_modules/spfx-uifabric-themes/office.theme';

.themeDark {
  background-color: $ms-themeDark;
}
.themePrimary {
  background-color: $ms-themePrimary;
}

Observed Behavior

There is no ability to customize the output of items PropertyFieldCollectionData dropdown type field,

Thanks!

[estruyf]

A new property is now available called onRenderOption which can only be used in combination with the dropdown field type.

Feel free to test it out in the latest beta. Here you can find more information on how you can install a beta version: https://sharepoint.github.io/sp-dev-fx-property-controls/beta/

[estruyf]

Version 1.12.0 has just been released.