Declaring SharePoint Client Side Taxonomy Picker Control and Reading the Selected Values and Create Item in List

In this post, We will learn how to declare the SharePoint Client Side Taxonomy Picker control and reading the values from it.

Step 1: References required to load the Taxonomy Picker Control Correctly.

CSS Reference: Try to download it (Refer if  already have in your sites)
<!-- CSS Files -->
            <link href = "/taxonomypickercontrol.css" rel = "stylesheet" / >
<!-- Javacript Files -->


JS References Files:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type = "text/javascript" src = "../_layouts/15/SP.Taxonomy.js"></script>
<script type = "text/javascript" src = "/taxonomypickercontrol.js"> </script>
<script type = "text/javascript" src = "/taxonomypickercontrol_resources.en.js"></script>

If images are not loaded correctly please downlaod it and upload


HTML Code:

<table>
                <tr>
                    <td>
                        Asset Function
                    </td>
                    <td>
                        <input type="hidden" id="taxPickerAssetFunction" />
                    </td>
                </tr>
                <tr class="dislplayNone">
                    <td>
                        Business Segment
                    </td>
                    <td>
                        <input type="hidden" id="taxPickerBusinessSegment" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="button" id="btnCreateItem" onclick="createListItem();" value="Create Item"/>
                    </td>
                </tr>
            </table>


Please find the full code in the below.:

<html>
    <head>
        <!-- CSS Files -->
            <link href = "/taxonomypickercontrol.css" rel = "stylesheet"/>
<!-- Javacript Files -->
    
    <style>
        .dislplayNone
        {
            display:none;
        }
    </style>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type = "text/javascript" src = "../_layouts/15/SP.Taxonomy.js"></script>
<script type = "text/javascript" src = "taxonomypickercontrol.js"> </script>
<script type = "text/javascript" src = "taxonomypickercontrol_resources.en.js"></script>
    <script>
        var clientContext;
        var taxPickerIndex = {};
        
        var taxPicekrAssetFunctionTermID= "";
        var taxPickerBusinessSegmentTermID = "";
        $(document).ready(function() {
            var scriptbase = _spPageContextInfo.webServerRelativeUrl + "/_layouts/15/";
            $.getScript(scriptbase + "SP.Runtime.js", function () {
                    $.getScript(scriptbase + "SP.js", function(){
                        $.getScript(scriptbase + "SP.Taxonomy.js", bindTaxPickerAssetFunction);                    });
                });
        });
        
        function createListItem()
        {
            var today = new Date();
            $.ajax({
                url: _spPageContextInfo.webAbsoluteUrl +"/_api/web/lists/getbytitle('SPFcReact')/items",
                type: "POST",
                data: JSON.stringify({
                    "__metadata": { "type": "SP.Data.SPFcReactListItem" }, // <-- entity type name
"Title": "Title_" + today,
//On Item Creation to pass the Taxonomy Picker value
                    "AssetFunctionTS": {
                        "__metadata": {
                            "type": "SP.Taxonomy.TaxonomyFieldValue"
                        },
                        "TermGuid": taxPicekrAssetFunctionTermID, // <-- Term Id
                        "WssId": "-1" // <-- always "-1"
                    },
                    "BusinessSegmentTS": {
                        "__metadata": {
                            "type": "SP.Taxonomy.TaxonomyFieldValue"
                        },
                        "TermGuid": taxPickerBusinessSegmentTermID, // <-- Term Id
                        "WssId": "-1" // <-- always "-1"
                    }
                }),
                headers: {
                     "Accept": "application/json; odata=verbose",
                    "Content-Type": "application/json;odata=verbose",
                    "X-RequestDigest": $("#__REQUESTDIGEST").val()
                },
                success: function(data)
                {
                    alert("Success");
                },
                 error: function(data)
                {
                    console.log(data.responseText);
                    alert(data.responseText);
                }
            });
        }
        
      function bindTaxPickerAssetFunction()
        {   
            clientContext = new SP.ClientContext.get_current();
$('#taxPickerAssetFunction').taxpicker({ isMulti: true, allowFillIn: false,
useKeywords: false, termSetId: "749438f8-c292-46c9-820f-81eb680a32ea",
levelToShowTerms: 1,maxSuggestions: 5 }, clientContext,initializeBusinessSegmentTaxPicker);
$('#taxPickerBusinessSegment').taxpicker({ isMulti: false, allowFillIn: false,
useKeywords: false, termSetId: "67acc2d8-56ff-4f14-b423-15a0c3ef36af",
levelToShowTerms: 1, useTermSetasRootNode: false }, clientContext,getBusinessSetmentTerm);
                taxPickerIndex["#taxPickerBusinessSegment"] = 0;
        }
        
        
        //On Change showing the Other Taxonomy Picker and reade the Taxonomy Picker Value.
        function initializeBusinessSegmentTaxPicker() {
            if (this._selectedTerms.length <= 1) {
                $("tr").removeClass("dislplayNone");
                taxPicekrAssetFunctionTermID = this._selectedTerms[0].Id;
                console.log(taxPicekrAssetFunctionTermID);              
            }
            else if(this._selectedTerms.length > 1)
            {
                //Multiple items format : -1;#|TERMGUID1;#-1;#|TERMGUID2
                taxPicekrAssetFunctionTermID= "";
                $("tr").removeClass("dislplayNone");
                for(i=0; i < this._selectedTerms.length;i++)
                {
                    taxPicekrAssetFunctionTermID = "-1;#|" + this._selectedTerms[i].Id + ";#" + taxPicekrAssetFunctionTermID;
                    console.log(taxPicekrAssetFunctionTermID);  
                }
                taxPicekrAssetFunctionTermID = taxPicekrAssetFunctionTermID.slice(0, -2);
            }
        }
//On Change to reade the Taxonomy Picker Value.
        function getBusinessSetmentTerm()
        {
            if (this._selectedTerms.length > 0) {
            taxPickerBusinessSegmentTermID = this._selectedTerms[0].Id;
            console.log(taxPickerBusinessSegmentTermID);
            }
        }
</script>
</head>
    <body>
        <div>
            <table>
                <tr>
                    <td>
                        Asset Function
                    </td>
                    <td>
                        <input type="hidden" id="taxPickerAssetFunction" />
                    </td>
                </tr>
                <tr class="dislplayNone">
                    <td>
                        Business Segment
                    </td>
                    <td>
                        <input type="hidden" id="taxPickerBusinessSegment" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="button" id="btnCreateItem" onclick="createListItem();" value="Create Item"/>
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>


Happy Coding.... :)










Comments

Post a Comment

Popular posts from this blog

SharePoint 2013 Keyword Query (KQL) Content Class Property Restrictions

Using property restrictions in your KQL queries, you can restrict your search to only pull back certain things like calendar events for instance. This is a very powerful way to limit search results  and get exactly what you are looking for. You can use these in your query like this: " lunch contentclass:STS_ListItem_Events " This will return only calendar events with the word "lunch" in them.  Pretty powerful and pretty simple. Here is a list of available content class items: STS_Site –  Site Collection STS_Web  –  Site (Web) STS_List_850  –  Page Library STS_ListItem_850  –  Page STS_List_DocumentLibrary  –  Document Library STS_ListItem_DocumentLibrary  –  Document Library Items STS_List  –  Custom List STS_ListItem  –  Custom List Item STS_List_Links  –  Links List STS_ListItem_Links  –  Links List Item STS_List_Tasks  –  Tasks List ...
Read more

Hide Save button in New and Edit form in SharePoint 2013 list

Image
Hide Save button from New Edit form We have a SharePoint list where we have customized the input form using InfoPath. And in that customized InfoPath form we have a custom Save button and we are saving the item from the default data connection. This button also has some validation rules. So we do not want any user to insert an item by clicking on the Ribbon Save button. They should only be able to save through our Submit button which was presented inside the InfoPath form. You can disable the Save button from the InfoPath form submit properties. But we do not want to show the Save button at all. Be default the submit button appears like below:  We have written the JavaScript and css code to hide the Save button. For this Edit the page and then Insert a Script editor web part into it. Then write the below code inside the script editor web part and Save the page. <script type="text/javascript">     function hideEdit() {      ...
Read more

Filtering the Sharepoint List Taxonomy Column using Rest API

I ran into a strange issue today when using the SharePoint 2013 REST API for Lists with Managed Metadata columns    but I just had a ‘clever workaround’ moment with SharePoint’s oData/REST implementation when it comes to filtering list items based on taxonomy (managed metadata) columns. Now I do not consider myself a developer, so this article is probably a little verbose for some readers, but should be helpful to power users or IT pros. 1. To filter the Taxonomy columns in SharePoint list using Rest API call we need to use the Post method. 2. The Rest API call will give errors some times when the Rest API Query string crosses limit 260 characters that time we will use the Query in the body. Those things are clearly explained in the below example clearly. 3. WE can use the CAMEL Query in the Rest API call this example come under that. < script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" ></ script > < scri...
Read more