How to use the @pnp/spfx-property-controls/lib/PropertyFieldTextWithCallout.PropertyFieldTextWithCallout function in @pnp/spfx-property-controls

To help you get started, we’ve selected a few @pnp/spfx-property-controls examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github SharePoint / sp-dev-fx-webparts / samples / react-calendar-feed / src / webparts / calendarFeedSummary / CalendarFeedSummaryWebPart.ts View on Github external
{
          displayGroupsAsAccordion: true,
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.FeedSettingsGroupName,
              groupFields: [
                // feed type drop down. Add your own types in the drop-down list
                PropertyPaneDropdown("feedType", {
                  label: strings.FeedTypeFieldLabel,
                  options: feedTypeOptions
                }),
                // feed url input box -- only if not using a mock provider
                !isMock && PropertyFieldTextWithCallout("feedUrl", {
                  calloutTrigger: CalloutTriggers.Hover,
                  key: "feedUrlFieldId",
                  label: strings.FeedUrlFieldLabel,
                  calloutContent:
                    React.createElement("div", {}, strings.FeedUrlCallout),
                  calloutWidth: 200,
                  value: feedUrl,
                  placeholder: "https://",
                  deferredValidationTime: 200,
                  onGetErrorMessage: this._validateFeedUrl.bind(this)
                }),
                // how days ahead from today are we getting
                PropertyPaneDropdown("dateRange", {
                  label: strings.DateRangeFieldLabel,
                  options: [
                    { key: DateRange.OneWeek, text: strings.DateRangeOptionWeek },
github pnp / FilterPack / src / webparts / dynamicValue / DynamicValueWebPart.ts View on Github external
switch(this.properties.displayType === 'object' ? this.properties.displaySubPropertyType : this.properties.displayType) {
      case "bool":
        displayPaneFields.push(...[
          PropertyPaneTextField('displayBoolTrue',{
            label: 'Value when true'
          }),
          PropertyPaneTextField('displayBoolFalse',{
            label: 'Value when false'
          }),
        ]);
        break;
    }

    //Advanced Display Template
    displayPaneFields.push(...[
      PropertyFieldTextWithCallout('displayTemplate', {
        calloutTrigger: CalloutTriggers.Hover,
        key: 'displayTemplate',
        label: 'Template (Advanced)',
        calloutWidth: 200,
        value: this.properties.displayTemplate,
        calloutContent: displayTemplateCallout(),
      }),
      PropertyPaneDropdown('displayUndefined', {
        label: 'When value is undefined',
        options: [
          {key:'blank', text:'Show blank value'},
          {key:'undefined', text:'Show "undefined"'},
          {key:'custom', text:'Use custom value'}
        ]
      })
    ]);

@pnp/spfx-property-controls

Reusable property pane controls for SharePoint Framework solutions

MIT
Latest version published 3 days ago

Package Health Score

73 / 100
Full package analysis