@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
789 lines • 89.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const ReactDom = tslib_1.__importStar(require("react-dom"));
const react_1 = require("@fluentui/react");
const react_icons_1 = require("@fluentui/react-icons");
const DateTimeUtilities_1 = require("@fluentui/react/lib/DateTimeUtilities");
const MessageBar_1 = require("@fluentui/react/lib/MessageBar");
const Spinner_1 = require("@fluentui/react/lib/Spinner");
const sp_core_library_1 = require("@microsoft/sp-core-library");
const sp_property_pane_1 = require("@microsoft/sp-property-pane");
const sp_webpart_base_1 = require("@microsoft/sp-webpart-base");
const helpers_1 = require("../../helpers");
const PropertyFiedMonacoEditor_1 = require("../../PropertyFiedMonacoEditor");
const PropertyFieldButton_1 = require("../../PropertyFieldButton");
const PropertyFieldButtonWithCallout_1 = require("../../PropertyFieldButtonWithCallout");
const PropertyFieldCheckboxWithCallout_1 = require("../../PropertyFieldCheckboxWithCallout");
const PropertyFieldChoiceGroupWithCallout_1 = require("../../PropertyFieldChoiceGroupWithCallout");
const PropertyFieldCodeEditor_1 = require("../../PropertyFieldCodeEditor");
const PropertyFieldCollectionData_1 = require("../../PropertyFieldCollectionData");
const PropertyFieldColorPicker_1 = require("../../PropertyFieldColorPicker");
const PropertyFieldBrandFontPicker_1 = require("../../PropertyFieldBrandFontPicker");
const PropertyFieldColumnPicker_1 = require("../../PropertyFieldColumnPicker");
const PropertyFieldContentTypePicker_1 = require("../../PropertyFieldContentTypePicker");
const PropertyFieldDateTimePicker_1 = require("../../PropertyFieldDateTimePicker");
const PropertyFieldDropdownWithCallout_1 = require("../../PropertyFieldDropdownWithCallout");
const PropertyFieldEditableComboBox_1 = require("../../PropertyFieldEditableComboBox");
const PropertyFieldFilePicker_1 = require("../../PropertyFieldFilePicker");
const PropertyFieldFolderPicker_1 = require("../../PropertyFieldFolderPicker");
const PropertyFieldGuid_1 = require("../../PropertyFieldGuid");
const PropertyFieldHeader_1 = require("../../PropertyFieldHeader");
const PropertyFieldLabelWithCallout_1 = require("../../PropertyFieldLabelWithCallout");
const PropertyFieldLinkWithCallout_1 = require("../../PropertyFieldLinkWithCallout");
const PropertyFieldListPicker_1 = require("../../PropertyFieldListPicker");
const PropertyFieldMessage_1 = require("../../PropertyFieldMessage");
const PropertyFieldMultiSelect_1 = require("../../PropertyFieldMultiSelect");
const PropertyFieldNumber_1 = require("../../PropertyFieldNumber");
const PropertyFieldOrder_1 = require("../../PropertyFieldOrder");
const PropertyFieldPassword_1 = require("../../PropertyFieldPassword");
const PropertyFieldPeoplePicker_1 = require("../../PropertyFieldPeoplePicker");
const PropertyFieldRoleDefinitionPicker_1 = require("../../PropertyFieldRoleDefinitionPicker");
const columnPicker_1 = require("../../propertyFields/columnPicker");
const FieldErrorMessage_1 = tslib_1.__importDefault(require("../../propertyFields/errorMessage/FieldErrorMessage"));
const iconPicker_1 = require("../../propertyFields/iconPicker");
const PropertyPanePropertyEditor_1 = require("../../propertyFields/propertyEditor/PropertyPanePropertyEditor");
const propertyFieldGrid_1 = require("../../propertyFields/propertyFieldGrid");
const teamPicker_1 = require("../../propertyFields/teamPicker");
const PropertyFieldEnterpriseTermPicker_1 = require("../../propertyFields/termPicker/PropertyFieldEnterpriseTermPicker");
const webPartInformation_1 = require("../../propertyFields/webPartInformation");
const PropertyFieldSearch_1 = require("../../PropertyFieldSearch");
const PropertyFieldSitePicker_1 = require("../../PropertyFieldSitePicker");
const PropertyFieldSliderWithCallout_1 = require("../../PropertyFieldSliderWithCallout");
const PropertyFieldSpinButton_1 = require("../../PropertyFieldSpinButton");
const PropertyFieldSpinner_1 = require("../../PropertyFieldSpinner");
const PropertyFieldSwatchColorPicker_1 = require("../../PropertyFieldSwatchColorPicker");
const PropertyFieldTermPicker_1 = require("../../PropertyFieldTermPicker");
const PropertyFieldTextWithCallout_1 = require("../../PropertyFieldTextWithCallout");
const PropertyFieldToggleWithCallout_1 = require("../../PropertyFieldToggleWithCallout");
const PropertyFieldViewPicker_1 = require("../../PropertyFieldViewPicker");
const PropertyPaneMarkdownContent_1 = require("../../PropertyPaneMarkdownContent");
const PalettePickerPropertyField_1 = require("../../propertyFields/PalettePicker/PalettePickerPropertyField");
const PropertyControlsTest_1 = tslib_1.__importDefault(require("./components/PropertyControlsTest"));
/**
* Web part that can be used to test out the various property controls
*/
class PropertyControlsTestWebPart extends sp_webpart_base_1.BaseClientSideWebPart {
constructor() {
super(...arguments);
this.multiSelectProps = []; // eslint-disable-line @typescript-eslint/no-explicit-any
this.showMessageButton = false;
this.gridItems = [
{
key: "1",
icon: React.createElement(react_icons_1.DocumentBulletListRegular),
title: "File 1",
description: "This is the first document"
},
{
key: "2",
icon: React.createElement(react_icons_1.DocumentBulletListRegular),
title: "File 2",
description: "This is the first document"
},
{
key: "3",
icon: React.createElement(react_icons_1.DocumentBulletListRegular),
title: "File 3",
description: "This is the first document"
},
{
key: "4",
icon: React.createElement(react_icons_1.DocumentBulletListRegular),
title: "File 4",
description: "This is the first document"
}
];
this.monacoChange = (newValue, validationErrors) => {
console.log('teste', newValue);
};
}
onPropertyPaneFieldChanged(propertyPath, oldValue, newValue) {
console.log("PropertyPaneFieldChanged", propertyPath, oldValue, newValue);
}
render() {
this.properties.monacoEditor = "";
const element = React.createElement(PropertyControlsTest_1.default, {
context: this.context,
numberValue: this.properties.numberValue || 0,
multiSelect: this.properties.multiSelect || [],
people: this.properties.people || [],
list: this.properties.singleList || "",
listFiltered: this.properties.singleListFiltered || "",
singleListMultipleBaseTemplate: this.properties.singleListMultipleBaseTemplate || "",
view: this.properties.view,
column: this.properties.column,
multiColumn: this.properties.multiColumn,
multiList: this.properties.multiList || [],
multiListFiltered: this.properties.multiListFiltered || [],
terms: this.properties.terms || [],
datetime: this.properties.datetime || { value: null, displayValue: null },
color: this.properties.color,
colorObj: this.properties.colorObj,
spinValue: this.properties.spinValue,
dropdownWithCalloutKey: this.properties.dropdownWithCalloutKey,
sliderWithCalloutValue: this.properties.sliderWithCalloutValue,
choiceGroupWithCalloutValue: this.properties.choiceGroupWithCalloutValue,
dropdownInfoHeaderKey: this.properties.dropdownInfoHeaderKey,
textInfoHeaderValue: this.properties.textInfoHeaderValue,
toggleInfoHeaderValue: this.properties.toggleInfoHeaderValue,
checkboxWithCalloutValue: this.properties.checkboxWithCalloutValue,
htmlCode: this.properties.htmlCode,
collectionData: this.properties.collectionData,
orderedItems: this.properties.orderedItems,
swatchColor: this.properties.swatchColor,
brandFont: this.properties.brandFont,
enterpriseTerms: this.properties.enterpriseTerms || [],
sites: this.properties.sites || [],
password: this.properties.password,
searchLibrary: this.properties.searchLibrary,
message: this.properties.message,
filePickerResult: this.properties.filePickerResult,
roleDefinitions: this.properties.roleDefinitions || [],
folderPicker: this.properties.folderPicker,
guid: this.properties.guid,
iconPicker: this.properties.iconPicker,
editableComboBox: this.properties.editableComboBox,
monacoEditor: this.properties.monacoEditor,
contentType: this.properties.contentType,
gridItems: this.properties.gridItems || [],
selectedPalette: this.properties.selectedPalette,
selectedPaletteColors: this.properties.selectedPaletteColors || [],
});
ReactDom.render(element, this.domElement);
}
wait() {
return new Promise((resolve) => {
setTimeout(() => {
resolve();
return;
}, 1000);
});
}
/**
* Load property pane resources
*/
loadPropertyPaneResources() {
return tslib_1.__awaiter(this, void 0, void 0, function* () {
helpers_1.PropertyPaneHelpers.setSpinner({
spinnerProps: {
size: Spinner_1.SpinnerSize.large,
styles: {
circle: {
height: 80,
width: 80
}
}
}
});
yield this.wait();
helpers_1.PropertyPaneHelpers.clearSpinner();
});
}
get dataVersion() {
return sp_core_library_1.Version.parse('1.0');
}
get disableReactivePropertyChanges() {
return true;
}
minLengthValidation(value, index, item) {
return new Promise(resolve => {
setTimeout(() => {
console.log(`Currently editing item nr: ${index === null ? "new item" : index}. It contains the following properties:`, item);
value.length >= 3 ? resolve("") : resolve("Should at least contain 3 characters.");
}, (Math.floor(Math.random() * 4) + 1) * 100); // Random number between 1 - 4
});
}
ageValidation(value) {
console.log(value);
return value >= 18 ? "" : "Person should be at least 18 years old";
}
comboBoxOptionAdded(text) {
console.log(`${text} was added to the combo box. This is your chance to do something about it!`);
}
_onChangedPassword(value) {
console.log(value);
}
_onChangedTextWithCallout(value) {
console.log(value);
}
onPropertyPaneConfigurationStart() {
setTimeout(() => {
this.multiSelectProps = [
{
key: "EN",
text: "EN"
},
{
key: "FR",
text: "FR"
},
{
key: "NL",
text: "NL"
}
];
this.context.propertyPane.refresh();
}, 2000);
}
getPropertyPaneConfiguration() {
const dropdownWithCalloutSelectedKey = this.properties.dropdownWithCalloutKey || 'gryffindor';
const dropdownWithCalloutCallountContent = this.getDropdownInfoHeaderCalloutContent();
return {
pages: [
{
header: {
description: '', //strings.PropertyPaneDescription
},
displayGroupsAsAccordion: true,
groups: [
{
groupName: 'About',
isCollapsed: false,
groupFields: [
(0, webPartInformation_1.PropertyPaneWebPartInformation)({
description: `This is a <strong>demo webpart</strong>, used to demonstrate all the <a href="https://aka.ms/sppnp">PnP</a> property controls`,
moreInfoLink: `https://pnp.github.io/sp-dev-fx-property-controls/`,
videoProperties: {
embedLink: `https://www.youtube.com/embed/d_9o3tQ90zo`,
properties: { allowFullScreen: true }
},
key: 'webPartInfoId'
})
]
},
{
groupName: 'Inputs',
isCollapsed: true,
groupFields: [
(0, PropertyFieldSearch_1.PropertyFieldSearch)("searchLibrary", {
key: "search",
placeholder: 'Search libraries',
value: this.properties.searchLibrary,
onSearch: (newValue) => { console.log(newValue); },
styles: { root: { margin: 10 } }
}),
(0, PropertyFieldMessage_1.PropertyFieldMessage)("message", {
key: "0",
text: "Something went wrong, try later...",
messageType: MessageBar_1.MessageBarType.error,
isVisible: true
}),
(0, PropertyFieldMessage_1.PropertyFieldMessage)("message", {
key: "0",
text: "Completed!",
messageType: MessageBar_1.MessageBarType.success,
isVisible: true
}),
(0, PropertyFieldMessage_1.PropertyFieldMessage)("message", {
key: "0",
text: "long teste linne ,long teste linne , long teste linne , long teste linne , long teste linne , long teste linne , long teste linne , long teste linne , long teste linne , long teste linne , long teste linne , long teste linne , long teste linne , long teste linne , ",
multiline: true,
messageType: MessageBar_1.MessageBarType.info,
isVisible: true
}),
(0, PropertyFieldSpinner_1.PropertyFieldSpinner)("", {
key: "sp3",
size: Spinner_1.SpinnerSize.small,
isVisible: true,
}),
(0, PropertyFieldSpinner_1.PropertyFieldSpinner)("", {
key: "sp1",
size: Spinner_1.SpinnerSize.medium,
isVisible: true,
label: "loading libraries..."
}),
(0, PropertyFieldSpinner_1.PropertyFieldSpinner)("", {
key: "sp2",
size: Spinner_1.SpinnerSize.large,
isVisible: true,
label: "loading libraries large ..."
}),
(0, PropertyFieldPassword_1.PropertyFieldPassword)('password', {
key: 'password',
label: "Password",
value: this.properties.password,
onChanged: this._onChangedPassword
}),
(0, PropertyFieldCollectionData_1.PropertyFieldCollectionData)("collectionData", {
key: "collectionData",
label: "Collection data",
panelHeader: "Collection data panel header",
manageBtnLabel: "Manage collection data",
saveBtnLabel: "Save button",
saveAndAddBtnLabel: "Save + Add button",
cancelBtnLabel: "Cancel button",
panelDescription: "This is the description which appears in the panel.",
value: this.properties.collectionData,
enableSorting: true,
disableItemDeletion: false,
disableItemCreation: false,
panelClassName: "MyAwesomePanelClassName",
tableClassName: "MyAwesomeTableClassName",
panelProps: {
type: react_1.PanelType.extraLarge,
layerProps: { eventBubblingEnabled: true }
},
fields: [
{
id: "Title",
title: "Firstname",
type: PropertyFieldCollectionData_1.CustomCollectionFieldType.string,
required: true,
placeholder: "Enter the firstname",
onGetErrorMessage: this.minLengthValidation,
deferredValidationTime: 500,
disableEdit: true
},
{
id: "Lastname",
title: "Lastname",
type: PropertyFieldCollectionData_1.CustomCollectionFieldType.string
},
{
id: "Age",
title: "Age",
type: PropertyFieldCollectionData_1.CustomCollectionFieldType.number,
required: true,
placeholder: "Enter the age",
onGetErrorMessage: this.ageValidation,
deferredValidationTime: 0
},
{
id: "Country",
title: "Favorite country",
type: PropertyFieldCollectionData_1.CustomCollectionFieldType.dropdown,
options: [
{
key: "netherlands",
text: "Netherlands"
},
{
key: "finland",
text: "Finland"
},
{
key: "canada",
text: "Canada"
},
{
key: "germany",
text: "Germany"
}
],
required: true,
placeholder: "Favorite country of the person",
defaultValue: "netherlands"
},
{
id: "City",
title: "Favorite city",
type: PropertyFieldCollectionData_1.CustomCollectionFieldType.dropdown,
options: (fieldId, item) => {
let options = [];
if (item["Country"] === "netherlands") {
options.push({ key: "antwerp", text: "Antwerp" });
}
else if (item["Country"] === "finland") {
options.push({ key: "helsinki", text: "Helsinki" });
}
else if (item["Country"] === "canada") {
options.push({ key: "montreal", text: "Montreal" });
}
else if (item["Country"] === "germany") {
options.push({ key: "paderborn", text: "Paderborn" });
options.push({ key: "berlin", text: "Berlin" });
}
return options;
},
required: true,
placeholder: "Favorite city of the person",
onRenderOption: (props, defaultRenderer) => {
if (props.text.toLowerCase() === "antwerp") {
return React.createElement("b", { className: "Testing" }, `${props.text.toUpperCase()} 🎉`);
}
else {
return defaultRenderer(props);
}
}
},
{
id: "Sign",
title: "Signed",
type: PropertyFieldCollectionData_1.CustomCollectionFieldType.boolean,
defaultValue: true
},
{
id: "IconName",
title: "Icon Name",
type: PropertyFieldCollectionData_1.CustomCollectionFieldType.fabricIcon,
placeholder: "Enter the name of the icon",
defaultValue: "website",
onGetErrorMessage: this.minLengthValidation,
disable: (item) => !item.Sign
},
{
id: "URL",
title: "URL",
type: PropertyFieldCollectionData_1.CustomCollectionFieldType.url,
required: true,
placeholder: "Enter a URL"
},
{
id: "custom",
title: "Custom Field",
type: PropertyFieldCollectionData_1.CustomCollectionFieldType.custom,
onCustomRender: (field, value, onUpdate, item, itemId, onError) => {
return (React.createElement("div", null, React.createElement("input", {
key: itemId, value: value, onChange: (event) => {
if (event.currentTarget.value === "error") {
onError(field.id, "Value shouldn't be equal to error");
}
else {
onError(field.id, "");
}
onUpdate(field.id, event.currentTarget.value);
}
}), " 🎉"));
}
}
],
disabled: false
}),
(0, PropertyFieldCollectionData_1.PropertyFieldCollectionData)('columns2', {
key: 'columnsKey2',
label: 'Table columns',
panelHeader: 'Configure table columns',
manageBtnLabel: 'Manage columns',
value: [],
fields: [
{
id: "customFieldId",
title: "Custom Field",
type: PropertyFieldCollectionData_1.CustomCollectionFieldType.custom,
onCustomRender: (field, value, onUpdate, item, itemId, onError) => {
return (React.createElement("div", null, React.createElement("input", { key: itemId, value: value, onChange: (event) => {
onError(field.id, "Value shouldn't be equal to error");
} }), " 🎉"));
}
}
],
}),
(0, PropertyFieldNumber_1.PropertyFieldNumber)("numberValue", {
key: "numberValue",
label: "Number value only",
description: "Number field description",
placeholder: "Please insert a number",
value: this.properties.numberValue,
maxValue: 10,
minValue: 0,
disabled: false,
precision: 2
}),
(0, PropertyFieldMultiSelect_1.PropertyFieldMultiSelect)('multiSelect', {
key: 'multiSelect',
label: "Multi select field",
options: this.multiSelectProps,
selectedKeys: this.properties.multiSelect
}),
// PropertyFieldOrder("asyncOrderItems", {
// key: "asyncOrderItems",
// label: "Async order items",
// items: this.properties.multiSelect,
// properties: this.properties,
// onPropertyChange: this.onPropertyPaneFieldChanged
// }),
(0, PropertyFieldDateTimePicker_1.PropertyFieldDateTimePicker)('datetime', {
label: 'Select the date and time',
disabled: false,
initialDate: this.properties.datetime,
// formatDate: this._formatDateIso,
dateConvention: PropertyFieldDateTimePicker_1.DateConvention.DateTime,
timeConvention: PropertyFieldDateTimePicker_1.TimeConvention.Hours12,
firstDayOfWeek: DateTimeUtilities_1.DayOfWeek.Monday,
onPropertyChange: this.onPropertyPaneFieldChanged,
properties: this.properties,
onGetErrorMessage: null,
deferredValidationTime: 0,
key: 'dateTimeFieldId',
showLabels: false
}),
(0, PropertyFieldSpinButton_1.PropertyFieldSpinButton)('spinValue', {
label: 'Spin Value',
initialValue: this.properties.spinValue,
onPropertyChange: this.onPropertyPaneFieldChanged,
properties: this.properties,
//disabled: true,
suffix: 'px',
min: 0,
max: 5,
step: 0.25,
decimalPlaces: 2,
//incrementIconName: 'CalculatorAddition',
//decrementIconName: 'CalculatorSubtract',
key: 'spinButtonFieldId'
}),
(0, PropertyFieldGuid_1.PropertyFieldGuid)('guid', {
key: 'guid',
label: "GUID",
value: this.properties.guid,
errorMessage: "Please enter a correct GUID."
}),
(0, PropertyFieldEditableComboBox_1.PropertyFieldEditableComboBox)('editableComboBox', {
disabled: false,
key: 'editableComboBox',
label: 'Editable ComboBox',
maxFillInLength: 50,
options: [{ key: 'Apples', text: 'Apples' }, { key: 'Oranges', text: 'Oranges' }],
properties: this.properties,
selectedText: 'Oranges',
showTooltip: false,
tooltipText: 'This is what the tooltip would say if it shows. lol',
onPropertyChange: this.onPropertyPaneFieldChanged,
onOptionAdded: this.comboBoxOptionAdded
}),
]
},
{
groupName: 'Site, Teams, Lists, and Views',
isCollapsed: true,
groupFields: [
(0, sp_property_pane_1.PropertyPaneTextField)("siteUrl", {
label: "Site URL"
}),
(0, PropertyFieldListPicker_1.PropertyFieldListPicker)('singleList', {
label: 'Select a list',
selectedList: this.properties.singleList,
includeHidden: false,
//baseTemplate: 109,
orderBy: PropertyFieldListPicker_1.PropertyFieldListPickerOrderBy.Title,
multiSelect: true,
disabled: false,
onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
properties: this.properties,
context: this.context,
onGetErrorMessage: (value) => {
return typeof value === 'string' ? value : value.join(',');
},
contentTypeId: "0x0100",
deferredValidationTime: 0,
key: 'listPickerFieldId',
webAbsoluteUrl: this.properties.siteUrl || this.context.pageContext.web.absoluteUrl,
listsToExclude: ["cdn"],
}),
(0, PropertyFieldListPicker_1.PropertyFieldListPicker)('singleListMultipleBaseTemplate', {
label: 'Select a list (Multiple base template)',
selectedList: this.properties.singleListMultipleBaseTemplate,
baseTemplate: [101, 106, 107],
orderBy: PropertyFieldListPicker_1.PropertyFieldListPickerOrderBy.Title,
disabled: false,
onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
properties: this.properties,
context: this.context,
deferredValidationTime: 0,
key: 'singleListMultipleBaseTemplateId',
webAbsoluteUrl: this.properties.siteUrl || this.context.pageContext.web.absoluteUrl,
}),
(0, PropertyFieldListPicker_1.PropertyFieldListPicker)('singleListFiltered', {
label: 'Select a list (Filtered)',
selectedList: this.properties.singleListFiltered,
// includeHidden: false,
// baseTemplate: 101,
orderBy: PropertyFieldListPicker_1.PropertyFieldListPickerOrderBy.Title,
// multiSelect: false,
disabled: false,
onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
properties: this.properties,
context: this.context,
// onGetErrorMessage: (value: string) => {
// return value;
// },
contentTypeId: "0x0120",
deferredValidationTime: 0,
key: 'listPickerFieldId',
webAbsoluteUrl: this.properties.siteUrl || this.context.pageContext.web.absoluteUrl,
listsToExclude: ["cdn"],
filter: "ItemCount gt 0",
onListsRetrieved: (lists) => {
console.log("Lists", lists);
return lists;
}
}),
(0, PropertyFieldContentTypePicker_1.PropertyFieldContentTypePicker)('contentType', {
label: 'Select a Content Type',
context: this.context,
selectedContentType: this.properties.contentType,
//listId: "0da3b4b7-8ebd-4f15-87ee-afae5cacadad",//this.properties.singleListFiltered,//"03B3B5BC-8F37-4E9F-B9CF-0B13C5B5E8B8",
disabled: false,
//webAbsoluteUrl:"https://pm3q.sharepoint.com/sites/PnPDemo",
orderBy: PropertyFieldContentTypePicker_1.PropertyFieldContentTypeOrderBy.Name,
onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
properties: this.properties,
onGetErrorMessage: null,
deferredValidationTime: 0,
key: 'contentTypePickerFieldId'
}),
(0, PropertyFieldViewPicker_1.PropertyFieldViewPicker)('view', {
label: 'Select a view',
context: this.context,
selectedView: this.properties.view,
listId: this.properties.singleListFiltered,
disabled: false,
orderBy: PropertyFieldViewPicker_1.PropertyFieldViewPickerOrderBy.Title,
onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
properties: this.properties,
onGetErrorMessage: null,
deferredValidationTime: 0,
key: 'viewPickerFieldId'
}),
(0, PropertyFieldColumnPicker_1.PropertyFieldColumnPicker)('column', {
label: 'Select a column',
context: this.context,
selectedColumn: this.properties.column,
listId: this.properties.singleListFiltered,
disabled: false,
orderBy: PropertyFieldColumnPicker_1.PropertyFieldColumnPickerOrderBy.Title,
onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
properties: this.properties,
onGetErrorMessage: null,
deferredValidationTime: 0,
key: 'columnPickerFieldId',
displayHiddenColumns: false,
columnReturnProperty: columnPicker_1.IColumnReturnProperty["Internal Name"],
columnsToExclude: ['Compliance Asset Id'],
}),
(0, PropertyFieldColumnPicker_1.PropertyFieldColumnPicker)('multiColumn', {
label: 'Select columns',
context: this.context,
selectedColumn: this.properties.multiColumn,
listId: this.properties.singleListFiltered,
disabled: false,
orderBy: PropertyFieldColumnPicker_1.PropertyFieldColumnPickerOrderBy.Title,
onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
properties: this.properties,
onGetErrorMessage: null,
deferredValidationTime: 0,
key: 'multiColumnPickerFieldId',
displayHiddenColumns: false,
columnReturnProperty: columnPicker_1.IColumnReturnProperty["Internal Name"],
columnsToExclude: ['Compliance Asset Id'],
multiSelect: true,
renderFieldAs: columnPicker_1.IPropertyFieldRenderOption["Multiselect Dropdown"]
}),
(0, PropertyFieldListPicker_1.PropertyFieldListPicker)('multiList', {
label: 'Select multiple lists',
selectedList: this.properties.multiList,
includeHidden: false,
//baseTemplate: 109,
orderBy: PropertyFieldListPicker_1.PropertyFieldListPickerOrderBy.Title,
multiSelect: true,
showSelectAll: true,
selectAllInList: false,
selectAllInListLabel: 'Select all',
disabled: false,
onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
properties: this.properties,
context: this.context,
onGetErrorMessage: null,
deferredValidationTime: 0,
key: 'multiListPickerFieldId',
webAbsoluteUrl: this.properties.siteUrl || this.context.pageContext.web.absoluteUrl,
listsToExclude: ["cdn"]
}),
(0, PropertyFieldListPicker_1.PropertyFieldListPicker)('multiListFiltered', {
label: 'Select multiple lists (Filtered)',
selectedList: this.properties.multiListFiltered,
includeHidden: false,
//baseTemplate: 109,
orderBy: PropertyFieldListPicker_1.PropertyFieldListPickerOrderBy.Title,
multiSelect: true,
showSelectAll: true,
selectAllInList: false,
selectAllInListLabel: 'Select all',
disabled: false,
onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
properties: this.properties,
context: this.context,
onGetErrorMessage: null,
deferredValidationTime: 0,
key: 'multiListPickerFieldId',
webAbsoluteUrl: this.properties.siteUrl || this.context.pageContext.web.absoluteUrl,
filter: "ItemCount gt 0",
onListsRetrieved: (lists) => {
console.log("Lists", lists);
return Promise.resolve(lists);
},
listsToExclude: ["cdn"]
}),
(0, PropertyFieldSitePicker_1.PropertyFieldSitePicker)('sites', {
label: 'Select sites',
initialSites: this.properties.sites,
context: this.context,
deferredValidationTime: 500,
multiSelect: true,
onPropertyChange: this.onPropertyPaneFieldChanged,
properties: this.properties,
key: 'sitesFieldId',
trimDuplicates: true,
disabled: false
}),
(0, teamPicker_1.PropertyFieldTeamPicker)('teams', {
key: 'teamsPicker',
context: this.context,
label: 'Teams',
onPropertyChange: this.onPropertyPaneFieldChanged,
properties: this.properties,
initialTeams: this.properties.teams,
multiSelect: true
})
]
},
{
isCollapsed: true,
groupName: 'Colors',
groupFields: [
(0, PalettePickerPropertyField_1.PropertyPanePalettePickerField)("selectedPalette", {
key: "palettePicker",
label: "Select a Palette",
selectedPalette: this.properties.selectedPalette || "Palette 1",
palettes: {
"Palette 1": ["#FF5733", "#33FF57", "#3357FF", "#F3FF33"],
"Palette 2": ["#8E44AD", "#3498DB", "#1ABC9C", "#F39C12"],
"Palette 3": ["#E74C3C", "#9B59B6", "#2ECC71", "#F1C40F"],
"Palette 4": ["#1A1A2E", "#16213E", "#0F3460", "#E94560"]
},
onPropertyChange: (propertyPath, newValue) => {
this.properties.selectedPalette = newValue;
},
onSelectedPalette: (palette) => {
console.log("Selected palette:", palette);
const paletteName = Object.keys(palette)[0];
this.properties.selectedPalette = paletteName;
this.properties.selectedPaletteColors = palette[paletteName];
this.render();
}
}),
(0, sp_property_pane_1.PropertyPaneToggle)("isColorFieldVisible", {
label: "Color Field Visible",
checked: true
}),
(0, PropertyFieldColorPicker_1.PropertyFieldColorPicker)('color', {
label: 'Color',
selectedColor: this.properties.color,
onPropertyChange: this.onPropertyPaneFieldChanged,
properties: this.properties,
debounce: 500,
showPreview: true,
//disabled: true,
//alphaSliderHidden: true,
//style: PropertyFieldColorPickerStyle.Full,
//iconName: 'Precipitation',
isHidden: this.properties.isColorFieldVisible === false,
key: 'colorFieldId'
}),
(0, PropertyFieldColorPicker_1.PropertyFieldColorPicker)('colorObj', {
label: 'Color Object',
selectedColor: this.properties.colorObj,
onPropertyChange: this.onPropertyPaneFieldChanged,
properties: this.prope