How do I get Terms from termstore using SharePoint Framework?

Question

I want to fetch terms from termstore, in my SharePoint Framework app.

I have tried this microsoft sample: https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/knockout-taxonomy

I followed the instructions to get the sample to work. In local workbench I get mocked up data. When I try it in my developer-tentant to get real data I get the following error:

---

[SPWebPartErrorCode.ScriptLoadError]:: Det går inte att läsa in skriptresurser för webbdelen WebPart.undefined.0860422e-6848-427c-8731-f523beae4bd2,TypeError: Cannot read property 'type' of undefined på grund av: undefined. CALLSTACK:: Error at t [as constructor] (https://spoprod-a.akamaihd.net/files/sp-client-prod_2016-11-21.008/sp-client-base_sv-se_899e14970aaef71dbcbcd91de5d6b91f.js:48:11145) at new t (https://spoprod-a.akamaihd.net/files/sp-client-prod_2016-11-21.008/sp-webpart-base_sv-se_0ea5703a63ae7b404f2389ac7097d7ae.js:47:21019) at Function.t.create (https://spoprod-a.akamaihd.net/files/sp-client-prod_2016-11-21.008/sp-webpart-base_sv-se_0ea5703a63ae7b404f2389ac7097d7ae.js:47:21432) at https://spoprod-a.akamaihd.net/files/sp-client-prod_2016-11-21.008/sp-webpart-base_sv-se_0ea5703a63ae7b404f2389ac7097d7ae.js:47:30960

Answer 1

This problem is definately related to wrong version with spfx, Reading this information got me on the right track.

To anyone trying to get the sample to work, follow these steps:

1. create a new spfx project(latest version)
2. copy files and folders into new project from sample
3. change \src\webparts\helloWorld\data-helpers\DataHelpersFactory.ts to this:

import {
  IWebPartContext
} from '@microsoft/sp-webpart-base';
import { EnvironmentType } from '@microsoft/sp-core-library';
import { IDataHelper } from './DataHelperBase';
import { DataHelperMock } from './DataHelperMock';
import { DataHelperSP } from './DataHelperSP';
export class DataHelpersFactory {
  public static createDataHelper(context: IWebPartContext): IDataHelper {
      return new DataHelperSP(context);
  }
}

4. change \src\webparts\helloWorld\HelloWebPart.ts to this:

import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';
import styles from './TermSetRequester.module.scss';
import * as strings from 'helloWorldStrings';
import { IHelloWorldWebPartProps } from './IHelloWorldWebPartProps';
import { TaxonomyControl } from './controls/TaxonomyControl';
export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
  public render(): void {
    this.domElement.innerHTML = '<div class="${styles.termSetRequester}"><div class="${styles.container}"></div></div>';
      const container: HTMLDivElement = this.domElement.querySelector('.' + styles.container) as HTMLDivElement;
      var termStoreCtrl = new TaxonomyControl(this.context);
      termStoreCtrl.render(container);
  }
  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: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

I got it to work in the 0365 workbench, as that was what I needed.