none
PNP SPFx React Taxonomy Picker Issue RRS feed

  • Question

  • Hello,

    I'm trying to pre-populate Taxonomy picker field but it shows empty tags. Please see screen shot below.


    On button click my function is as follows:

    this.setState({
    DocumentTag:item.DocumentTag
    });

    And my Taxonomy picker looks like this:

    <TaxonomyPicker allowMultipleSelections={true}
    termsetNameOrID="Document Categories"
    panelTitle="Select Document Tag"
    label="Select Document Tag"
    context={this.props.context}
    onChange={this.onTaxPickerChange.bind(this)}
    isTermSetSelectable={false}
    initialValues={this.state.DocumentTag}
    />
    </div>

    When I check metadata tags just before they are inserted in "initialValues" property, I'm getting this in console. Which shows they are not empty.

    Please suggest what should be done to get rid of this issue.

    Thanks

    Rohit Pandey

    Thursday, August 1, 2019 9:34 AM

Answers

  • Hello,

    After a lot of  hit and trial. I have managed to solve this issue.

    So I'm sharing the solution here in case anyone who faces the same issue can get help.

    Background:

    PnP SPFx React Taxonomy Control take value in form of "IPickerTerms" Object. The structure of this object for each tag is in this form:

    1. key"0e1ae297-bd9f-4e90-9be0-da46c6092c77"
    2. name"Pitch Pack"
    3. path"Business Development;Pitch Pack"
    4. termSet"e5bd***-GUID-***116f2f01"
    5. termSetName"Document Categories"

    When we fetch data from SharePoint List item "Taxonomy/Metadata" Field we get data in this format for each tag:

    1. Label"Pitch Pack"
    2. TermGuid"0e1ae297-bd9f-4e90-9be0-da46c6092c77"
    3. WssId28

    So even if we cast this object to IPickerTerms and pass it to Taxonomy Control, it shows value as blank as shown in above screenshot.

    Solution:

    To solve this issue we need to create IPickerTerm object in following way and pass it to Taxonomy control.


    Declare IPickerTerms object arrary (in case of more than one tag)
    const iPickerTerm :IPickerTerms=[];

    "item" object of list item. "DocumentTag" is the taxonomy field which contains tags information.

    item.DocumentTag.map(tag=>{
    iPickerTerm.push({
    key: `${tag.TermGuid}`,
    name:`${tag.Label}`,
    termSet:"e5b****-GUID-****116f2f01",
    path:""
    });
    })

    Comment if you find this helpful. 

    Thanks

    Rohit Pandey


    Friday, August 9, 2019 11:08 AM