Basics of SharePoint Add-in Development
Collaborate brilliantly
In this post I will show you how to use JavaScript and HTML for SharePoint add-in development.
This SharePoint add-in will show different time zones in your SharePoint page.
Similar to a World Clock.
SharePoint is a very powerful and robust collaboration platform from Microsoft with various features available out of the box.
Although SharePoint comes with many features but it does not always fulfill project specific requirements. To fulfill project specific requirements, you can develop custom SharePoint hosted add-in (an add-in is a small application which adds feature in another application) using simple JavaScript and HTML code. This is also one of the many reasons why SharePoint is so popular.
Anyways, please check below to know the process of SharePoint add-in development.
Who This Post Is For? What will you learn?
This post is for anyone who is trying to learn SharePoint development or SharePoint hosted add-in development.
This post will give you a brief overview of SharePoint development using JavaScript and HTML. You can use this knowledge and develop other custom add-ins. Moreover, this can also be applied to SharePoint modern pages as well. Follow the below steps to understand how to apply this in SharePoint modern page.
By the End, you will have this world clock add-in
Prerequisites for SharePoint Development
You need to have the following to develop this JavaScript add-in
- 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.
Follow these simple steps to complete your first SharePoint Hosted Add-in Development tutorial.
Step 1: SharePoint Add-In Development
Upload these two JavaScript and CSS files in the Site Assets library (or any library of your choice). We will use these in the HTML file later. I have saved the HTML file as a reference.
Note: If you change the folder structure, please make sure to change the same in the JavaScript file as well.
Download the files from here. Extract it and upload the files.
Step 2
Add a new Script Editor Web part in SharePoint page. If you are not sure how to add a script editor web-part, please check this SharePoint JavaScript beginner tutorial
Step 3
Edit the page and Paste the below HTML code in the Script Editor Web Part
<!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">
<link rel="stylesheet" href="./devsiteone/SiteAssets/JSOM/WorldClock/WorldClockUsingJSOM/styles.css">
<title>World Clock</title>
</head>
<body>
<div class="container-css">
<h1 class="header-text-css">World Clock</h1>
<div id="clock-holder-elm">
<div class="box1">
<h4 class="text-elm-region" id="id-region1">Indian Standard Time</h4>
<p class="clock-text" id="id-time1">##:##</p>
<p class="text-elm-region">Date</p>
</div>
<div class="box1">
<h4 class="text-elm-region" id="id-region2">Place Holder</h4>
<p class="clock-text" id="id-time2">##:##</p>
</div>
<div class="box1">
<h4 class="text-elm-region" id="id-region3">Place Holder</h4>
<p class="clock-text" id="id-time3">##:##</p>
</div>
</div>
<div class="clr"></div>
<p style="font-weight: 500;font-size: 10px;padding-left: 16px;text-overflow:clip;">
Note: You can change the timezone from code
</p>
</div>
<script src="./SiteAssets/JSOM/WorldClock/WorldClockUsingJSOM/index.js"></script>
</body>
</html>
Final Step
Save and Stop Editing the page.
Reload
And the clock web part should be visible as below.
Additional
If you want to add another world clock time or would like to remove an existing clock then please change the JavaScript Array. Open the JavaScript file and modify the clock data.
Note: the time difference should be mentioned correctly for the add-in to work correctly. As an example, Indian Standard Time is GMT+5:30 hence the time difference is +5 hours and +30 minutes. Similarly for MT time it is -8 hours.
Thank you, I hope you have learned the basics of how to create a SharePoint hosted Add-in.
Please check our other technical blogs at https://newbietechie.com/