Basics of 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.
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.
By the End, you will have this world clock add-in
Prerequisites for SharePoint Development
- 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.
Follow these simple steps to complete your first SharePoint Hosted Add-in Development tutorial.
Step 1: SharePoint Add-In Development
Download the files from here. Extract it and upload the files.
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>
Save and Stop Editing the page.
And the clock web part should be visible as below.
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/