Write your first JavaScript Object Model in SharePoint Online and learn how to use JavaScript and HTML for SharePoint Online Development

How to use SharePoint Online Tutorial
SharePoint
Collaborate Brilliantly

Are you trying to learn SharePoint development using JavaScript? Then this is post will help you get started.

SharePoint online is a Microsoft solution for organizational document management. Many companies use SharePoint as their first choice for document management because of its rich features and modern appeal. Moreover, SharePoint websites can be customized to improve user experience and to add new features.
Although SharePoint online websites are customizable just as any other website but it is not straight forward. Furthermore, SharePoint online supports only a few number customization solutions, JavaScript Object model is one of them. JavaScript code can be implemented in SharePoint very quickly for different kind of modification needs.

In this post you will learn
SharePoint Rest API call Tutorial and example using JavaScript

Prerequisite:

  • You need to have the following to develop this application
    • A SharePoint online site with web-part page.
    • An IDE to write the code. Although this is not mandatory but this helps to write codes faster.
    • Basic knowledge of HTML and JavaScript.
    • Basic understanding of REST API call works and how to call a REST endpoint.

First Step: Add the Web-part

Edit the SharePoint page and add a “Script Editor” web-part. In order to add a “Script Editor”, click on Insert > Media and Content > Script Editor.

Add Script Editor for SharePoint development using javascript example

Step 2: Edit the Web-Part

The code is provided below for your reference. It is very simple HTML/JS code which is calling a REST and fetching the result. One point to note, for the script to work you need to change the list name. Check the screenshot below for reference.

JavaScript in SharePoint Online development for Beginners
change the list name

To paste the code, Edit page > Edit Snippet > Paste the code > Stop editing the page.

SharePoint web development
Paste the script as shown above
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    
<button type="button" id="id-btn2" onclick="getAllListItems()" style="width:120px;height:40px;">Show SP Items</button> <!-- Button -->
<div id="responseViewer">
    <!-- Content Place Holder. This will display the response -->
</div>

<script src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js" type="text/javascript"></script> 
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script> <!-- SharePoint runtime javascript reference -->
<script type="text/javascript" src="/_layouts/15/sp.js"></script> 
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script> <!-- JQeury reference -->

<script>

function getAllListItems() 
{
	var listName = "Issue tracker"; //Make sure to change this to your list name

    var url = _spPageContextInfo.webAbsoluteUrl;
    var requestUri = url + "/_api/web/lists/getbytitle('" + listName + "')/items"; //rest api end point URI
    var str = "";
	var attachmentUrl;

	$.ajax({
        url: requestUri,
        type: "GET",
        async: true, //do not freeze the page if the list has too many items
        headers: 
		{
            "accept": "application/json;odata=verbose",
            "content-type": "application/json;odata=verbose",
        },
        success: function(response)
        { //this will get executed if the ajax call is successful
            //var JsonResponses = response.d.results;

            //formatting the data as html table
            var htmlTableString = "<div><strong>Issue Tracker List</strong><table border='2'><tr><th style='width:150px;'> Id </th><th style='width:150px;'> Description </th></tr>";
            for (let index = 0; index < response.d.results.length; index++) {
                const element = response.d.results[index];
                htmlTableString += "<tr><td>" + element.Id + "</td><td>" + element.Title + "</td></tr>";
            }
            htmlTableString += "</table></div>";

            $("#responseViewer").html(htmlTableString); //display the result

        },
        error: doError
	});
}

function doError() {
	alert("Error! Unable to execute! Check Console for more information!");
}

</script>
</body>
</html>

Final Step: Test the result

Click the button “Show SP items” and the result will be visible in table format as below. Congratulations on completing your first JavaScript Object Model app for SharePoint online. This is definitely a good starting point for SharePoint development.

SharePoint development using JSOM

Next Steps:

Follow our other blog posts related to SPO development

Moreover, you can check the Microsoft documentation, which can help you to improve your knowledge further.

Do not forget to check our other blog posts at https://newbietechie.com/


newbietechie.com
Thank you @ramizmollahmd

Leave a Comment