SharePoint REST API – Interview Questions

SharePoint REST API is an interface which allows communication between server and client.

Hello friends, in this article we will learn SharePoint REST API in details. To make this article more interesting, we will use a question-answer pattern here. Let’s get started.

1) What is API?

API stands for Application Program Interface. We can define API as an interface between two different applications so that they can communicate with each other.

2) What is REST?

  • REST stands for Representational State Transfer.
  • REST is an architectural style (general and reusable solution) providing standards between computer systems on the web, making them easier to communicate with each other.

3) What is SharePoint REST API?

SharePoint REST API

  • SharePoint REST API is an interface which allows communication between the SharePoint server and client machine.
  • Using SharePoint REST APIs, users can interact remotely with SharePoint data by using any technology that supports REST web requests.

4) How SharePoint REST API service works?

  1. We/developer construct and send a RESTful HTTP request by using the OData standards.
  2. Then client.svc web service handles the HTTP request and serves the appropriate response in either Atom or JSON format.
  3. The client application must then parse that response.

    SharePoint REST API
    How SharePoint REST API works?

5) In which format does SharePoint REST API give output?

SharePoint REST API gives output in Atom XML or JSON format.

Recommended articles:

  1. CRUD Operations using REST API in SharePoint
  2. SharePoint Interview Questions
  3. SharePoint Content Types – Best Explained
  4. SharePoint Site Columns – Best Explained
  5. How to Make Conditionally Mandatory Field in SharePoint 2013

I hope you liked this article. If you have any queries, please use below comments section for the same. Please like our facebook page and subscribe to our newsletter for future updates. Have a nice day! tada…

Multi Level Cascading Dropdown for Sharepoint Online using REST Api

Hello Friends, in this tutorial we are going to implement Multi Level Cascading Dropdown in SharePoint Online custom Bootstrap form using REST api.

Multi Level Cascading Dropdown in SharePoint Online using REST

We have one list for City which has only one column named Title.

List Name : City
List Name : City

We have one list for State which has only one column named Title

List Name: State
List Name: States

We have one master list for all (Country, state and City) in which we are storing country values in Title field, State is a lookup field in which data is coming from State list, City is also a lookup column in which data is coming fom City list.

List Name: CountryStateCity
List Name: CountryStateCity

We have one custom bootstrap form in which we have 3 dropdowns which are Multi Level Cascading Dropdown, Country, State and City.

Html code:

<html>

<head>
    <title>Contact Form Tutorial by Bootstrapious.com</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../CustomCode/referenceFiles/bootstrap.min.css" rel="stylesheet">
    <link href='../CustomCode/referenceFiles/googleFonts.css' rel='stylesheet' type='text/css'>
    <link href="../CustomCode/css/CustomCSS.css" rel="stylesheet">
</head>

<body>

    <div class="container">

        <div class="row">

            <div class="col-lg-8 col-lg-offset-2" id="form-body">

                <div id="main-form" role="form">

                    <div class="messages"></div>

                    <div class="controls">

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="form_name">Firstname *</label>
                                    <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="form_lastname">Lastname *</label>
                                    <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="form_email">Email *</label>
                                    <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="form_phone">Phone</label>
                                    <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="form_country">Country</label>
                                    <select class="form-control" id="form_country">
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="form_state">State</label>
                                    <select class="form-control" id="form_state">
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="form_city">City</label>
                                    <select class="form-control" id="form_city">
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="form_address">Address *</label>
                                    <textarea id="form_address" name="address" class="form-control" rows="4"></textarea>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <input type="button" class="btn btn-success btn-send" value="Submit">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <p class="text-muted"><strong>*</strong> These fields are required.</p>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
            <!-- /.8 -->

        </div>
        <!-- /.row-->

    </div>
    <!-- /.container-->

    <script src="../CustomCode/referenceFiles/jquery.min.js"></script>
    <script src="../CustomCode/referenceFiles/bootstrap.min.js"></script>
    <script src="../CustomCode/js/CustomJS.js"></script>
    <!--<script src="validator.js"></script>
 <script src="contact.js"></script>-->
</body>

</html>

This will look like

Multi Level Cascading Dropdown
SharePoint Bootstap form

When user selects Country, it will populate only those states which belongs to selected countris, when user select perticular state, it will populate only those cities which belongs to selected state.

here is the REST javascript file for Multi Level Cascading Dropdown:

$(document).ready(function() {
    appendCountries();
    $('#form_country').change(function() {
        appendStates();
    });
    $('#form_state').change(function() {
        appendCity();
    });
    $('.btn').click(function() {
        AddListItem();
    });
});

function appendCountries() {
    $.ajax({
        url: "../_vti_bin/ListData.svc/CountryStateCity()?$orderby= Title asc&$select=Title",
        type: "get",
        headers: {
            "Accept": "application/json;odata=verbose"
        },
        success: function(data) {
            var values = [];
            var uniqueValues = [];
            var option = "";
            var valuesArray = data.d.results;
            $.each(valuesArray, function(i, result) {
                values.push(result.Title);
            });
            $.each(values, function(i, el) {
                if ($.inArray(el, uniqueValues) === -1) {
                    uniqueValues.push(el);
                    option += "<option value='" + el + "'>" + el + "</option>";
                }
            });
            $("#form_country").append(option);
        },
        error: function(data) {
            alert(data.responseJSON.error);
        }
    });
}

function appendStates() {
    var country = $('#form_country').val();
    $.ajax({
        url: "../_vti_bin/ListData.svc/CountryStateCity()?$select=State&$filter=Title eq '" + country + "'&$expand=State&$orderby= State/Title asc",
        type: "get",
        headers: {
            "Accept": "application/json;odata=verbose"
        },
        success: function(data) {
            var values = [];
            var uniqueValues = [];
            var option = "";
            var valuesArray = data.d.results;
            $.each(valuesArray, function(i, result) {
                values.push(result.State.Title);
            });
            $.each(values, function(i, el) {
                if ($.inArray(el, uniqueValues) === -1) {
                    uniqueValues.push(el);
                    option += "<option value='" + el + "'>" + el + "</option>";
                }
            });
            $("#form_state").empty();
            $("#form_state").append(option);
        },
        error: function(data) {
            alert(data.responseJSON.error);
        }
    });
}

function appendCity() {
    var state = $('#form_state').val();
    $.ajax({
        url: "../_vti_bin/ListData.svc/CountryStateCity()?$select=City&$filter=State/Title eq '" + state + "'&$expand=State,City&$orderby= City/Title asc",
        type: "get",
        headers: {
            "Accept": "application/json;odata=verbose"
        },
        success: function(data) {
            var values = [];
            var uniqueValues = [];
            var option = "";
            var valuesArray = data.d.results;
            $.each(valuesArray, function(i, result) {
                values.push(result.City.Title);
            });
            $.each(values, function(i, el) {
                if ($.inArray(el, uniqueValues) === -1) {
                    uniqueValues.push(el);
                    option += "<option value='" + el + "'>" + el + "</option>";
                }
            });
            $("#form_city").empty();
            $("#form_city").append(option);
        },
        error: function(data) {
            alert(data.responseJSON.error);
        }
    });
}

function AddListItem()
{
    var firstName = $("#form_name").val();
    var lastName = $("#form_lastname").val();
    var email = $("#form_email");
    var phone = $('#form_phone');
    var country = $('#form_country');
    var state = $('#form_state');
    var city = $('#form_city');
    var address = $('#form_address');
    $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "../_vti_bin/ListData.svc/EmployeeDetails()",
        type: "POST",
        data: JSON.stringify({
            __metadata:
            {
                type: "SP.Data.TestListItem"
            },
            FirstName: firstName,
            Lastname: lastName,
            Email: email,
            Phone: phone,
            Country: country,
            State: state,
            City: city,
            Address: address
        }),
        headers:
        {
            "Accept": "application/json;odata=verbose",
            "Content-Type": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),
            "X-HTTP-Method": "POST"
        },
        success: function(data, status, xhr)
        {
            alert('Request has been submitted successfully');
        },
        error: function(xhr, status, error)
        {
            //console.log(data.responseJSON.error);
            alert('Error');
        }
    });
}

You can download full code here: Download or use mediafire link or user Google Drive link.

I hope you liked this article. If you have any queries, feel free to ask in the comment section below. Like our facebook page and subscribe to our newsletter for future updates. Have a nice day!