locked
PNP SPFx React Taxonomy Picker Issue RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    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

  • Question
    Sign in to vote
    2
    Sign in to vote

    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. WssId: 28

    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

All replies

  • Question
    Sign in to vote
    2
    Sign in to vote

    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. WssId: 28

    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
  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi,

    Thank for this.

    I tried setting the termSet as undefined, and it worked also:

      private BuildIPickerTerms(terms: any) : IPickerTerms {
        const iPickerTerm: IPickerTerms = [];
        this._log("terms", terms);
        terms.map(tag => {
          iPickerTerm.push({
            key: `${tag.TermGuid}`,
            name: `${tag.Label}`,
            termSet: undefined,
            path: ""
          });
        });
        return iPickerTerm;
      }

    Kind regards, Frank-Ove

    Friday, February 7, 2020 1:32 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    Thank youu, You saved my life :)
    Thursday, February 13, 2020 9:53 AM