Write your first JavaScript Object Model in SharePoint Online and learn how to use JavaScript and HTML for SharePoint Online Development
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.
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.
To paste the code, Edit page > Edit Snippet > Paste the code > Stop editing the page.
<!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.
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/