ads

Monday, December 26, 2022

SharePoint custom html form input autocomplete users

SharePoint expose a lot of API. SP REST API reference and samples

The more you know them it's will be easy develop a lot of features

So in our tutorial we will be use   this api "/_api/SP.UI.ApplicationPages.ClientPeoplePickerWebServiceInterface.clientPeoplePickerSearchUser";

to make ajax call and retrieve list of users by param input

1.       first we added a reference to jQuery and jQuery UI library in our page

2.       our html form will be look like this

<div id="my-custom-form">

<input type="text" id="emplyeeName" />

</div>

 

3.       JS – our script looks like this

<script>

// user picker auto complete rest api

function searchUsers(request, response) {

 

    var qURL = _spPageContextInfo.siteAbsoluteUrl + "/_api/SP.UI.ApplicationPages.ClientPeoplePickerWebServiceInterface.clientPeoplePickerSearchUser";

    var principalType = this.element[0].getAttribute('principalType');

    $.ajax({

        'url': qURL,

        'method': 'POST',

        'data': JSON.stringify({

            'queryParams': {

                '__metadata': {

                    'type': 'SP.UI.ApplicationPages.ClientPeoplePickerQueryParameters'

                },

                'AllowEmailAddresses': true,

                'AllowMultipleEntities': false,

                'AllUrlZones': false,

                'MaximumEntitySuggestions': 20,

                'PrincipalSource': 15,

                'PrincipalType': 15,

                'QueryString': request.term,

                'Required': false

 

 

 

            }

        }),

        'headers': {

            'accept': 'application/json;odata=verbose',

            'content-type': 'application/json;odata=verbose',

            'X-RequestDigest': $("#__REQUESTDIGEST").val()

        },

        'success': function (data) {

            var d = data;

            var results = JSON.parse(data.d.ClientPeoplePickerSearchUser);

            if (results.length > 0) {

                response($.map(results, function (item) {

                    //  return {label:item.DisplayText,value:item.DisplayText} 

                    return {

                        label: item.DisplayText,

                        value: item.Key.replace("i:0#.w|domain\\", "")

                    }

                }));

            }

        },

        'error': function (err) {

            if (err.responseJSON.error.code = "-2130575252, Microsoft.SharePoint.SPException")

                RefreshRequestDigist();

            else

                alert(JSON.stringify(err));

        }

    });

}

$(document).ready(function(){

    $("#emplyeeName").autocomplete({

        source: searchUsers,

        minLength: 2,

        select: function (event, ui) {

            var label = ui.item.label;

            var value = ui.item.value;

            $("#emplyeeName").val(ui.item.label);

 

            return false;

        }

    });

});

</script>

Sunday, December 25, 2022

SharePoint List Rendering with VUE.JS Ajax call

When we using in client side developing is not matter what version of SharePoint it will work in all version of SharePoint.

Steps:

1.       Create SP list with Name "Test"

2.       Add some data to list

3.       For the example I have only title column

 

Now after creating the list we will write some code

1.       Create a folder in your workspace with name ex "vue-demo-sp-list"

2.       Inside the folder create a html file "index.html"

3.       Open the file with editor (vs-code,notpad++)

4.       Copy the code below

 

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<div id="app">

                <table class="table">

                                <thead>

                                                <tr>

                                                                <th>Title</th>

                                                </tr>

                                </thead>

                                <tbody>

                                                <tr v-for="item in items">

                                                                <td>{{item.title}}

                                                                </td>

                                                </tr>

                                </tbody>

                </table>

</div>

 

<script>

const app = new Vue({

    el: '#app',

                data() {

                                return {

                                                items:[]

                                                }

                                },

                created: function () {

                                    this.getTestList();                                       

                                },

                methods: {

                                getTestList:function() {

                                 

                                  var that = this;

 

            var endPointUrl = _spPageContextInfo.webAbsoluteUrl+"/_api/web/lists/getbyTitle('Test')/items";

            var headers = {

                "accept": "application/json;odata=verbose"

            };

            $.ajax({

                url: endPointUrl,

                type: "GET",

                headers: headers,

                success: function (data, status, xhr) {

                    that.items = data.d.results;

                    //alert('Success');

                },

                error: function (xhr, status, error) {

 

                   console.log("error",xhr);

 

                }

            });

        },

                                }

                });

</script>

 

5.       upload to sharepoint assets folder create folder for the project

6.       add content editor webpart in some page and put the link to the file "index.html""

DEMO

Title
{{item.title}}