0

This is my web part below, I need to call an API so I can dynamically populate the scope property dropdown that are provided as 'settings' to the web part.

Can I use componentdidmount? Doesn't seem to be working when I try that though.

The API im trying to call is the getEvents()

import { WebPartContext } from '@microsoft/sp-webpart-base';
import { AadHttpClient, HttpClientResponse } from '@microsoft/sp-http';

export interface IUpcomingEventsWebPartProps {
  description: string;
  layoutToggle: boolean;
  headerToggle: boolean;
  tooltipToggle: boolean;
  scope: string;
  dateRange: string;
  category: string;
  context: WebPartContext;
}

export default class UpcomingEventsWebPart extends BaseClientSideWebPart<IUpcomingEventsWebPartProps> {
  
  private httpClient: AadHttpClient;
  public getEvents() {
    this.httpClient.post('https://********.azurewebsites.net/api/GetEvents', AadHttpClient.configurations.v1, {
      body: JSON.stringify({
        "RangeStartDate": '2021-01-01',
        "RangeEndDate": '2050-01-01',
      })
    })
    .then((res: HttpClientResponse): Promise<any> => {
      return res.json();
    })
    .then(res => {
     console.log(res);
    })
  }

  public render(): void {
    const element: React.ReactElement<IUpcomingEventsProps> = React.createElement(
      UpcomingEvents,
      {
        description: this.properties.description,
        scope: this.properties.scope,
        context: this.context
      }
    );

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

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

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: 'Title'
                }),
                PropertyPaneDropdown('scope', {
                  label:'Scope',
                  options: [
                    { key: 'All', text: 'All' },
                    { key: 'United Kingdom', text: 'United Kingdom' },
                    { key: 'Germany', text: 'Germany' },
                    { key: 'Mexico', text: 'Mexico' },
                    { key: 'SPAIN', text: 'SPAIN' }
                  ],
                  selectedKey: 'All',
                })
              ]
            }
          ]
        }
      ]
    };
  }
}
1
  • You definitely should be able to make API calls and initiate them from componentDidMount. Where is that in your code though? I don't see componentDidMount in there or anywhere else where you call getEvents. Nov 29, 2021 at 17:49

1 Answer 1

1

The easiest way to do this would be to load the data in your OnInit() method, and then reference it in your property pane.

Similar thread: SharePoint Framework web parts - dynamic properties pane

Additional Reference:

  1. SharePoint Framework: how to properly dynamically populate dropdown property pane fields

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.