1

I've created a command set for creating and editing a new product and save it into a SP list. That list uses a term set for the categories.

When a product must being edited, the ProductEditor component (because the command set renders a React component) must contain the original data of the selected product.

For the term set I'm using a TaxonomyPicker from PnP and I'll to set the initial values to the values to the original picked terms. Here is a part of the component ProductEditor.

import { TaxonomyPicker, IPickerTerms } from "@pnp/spfx-controls-react/lib/TaxonomyPicker";

public render(): React.ReactElement<IProductEditorProps> {
    return (
        <TaxonomyPicker
            termsetNameOrID="xxx"
            context={this.props.webContext as WebPartContext}
            onChange={categories => { this.setState({ category: categories[0] }); }} /> 
    );
}

The problem is when I get the data from the term store with code below:

let term: ITermData & ITerm = await taxonomy
    .termStores.getByName('xxx')             // --> The name of the term store.
    .getTermSetById('yyy'),                  // --> The GUID of the term set.
    .getTermById('zzz');                     // --> The GUID of the original selected term.
    .get();

The variabele term is type of ITermData & ITerm but the TaxonomyPicker.initialValues property requests an IPickerTerms. How can I cast this to the correct type and back for the onChange method?

In other words: How can I set the initial values of the TaxonomyPicker equal to the data from the term store?

A product can only have one category.

From the API data to get the original data, I recieve this:

<d:Category m:type="SP.Taxonomy.TaxonomyFieldValue">
    <d:Label>11</d:Label>
    <d:TermGuid>zzz</d:TermGuid>                     <!-- The GUID of the original selected term. -->
    <d:WssId m:type="Edm.Int32">22</d:WssId>
</d:Category>

PS: I'm creating different edit buttons because there're fields dependent from other fields. More info here: Replace default "new" action to custom created command SPFX.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.