SharePoint Online: How to add JavaScript and jQuery in SharePoint site page

  • Article

As we know, the use of scripts and especially adding any scripts to a SharePoint page will make a lot of tasks and easy and understandable to use and process.

For example: if we have a list of multiple PDP pages it will show very odd together on the same page, we need to always scroll down all pages to select particular PDP.

With the help of a script, we can see in categories view and can access very easily. Just the same will be TAB code for SharePoint, search more on a Google page.

http://www.markrackley.net/2015/08/16/sharepoint-tabbed-web-partshillbillytabs-3-0/


For adding any script on SharePoint online page, follow the below steps:

  • Log in to the SharePoint site or log in to the subsite with user id and password.
  • To add any of script on a page or any list, PDP we need to edit the page.

https://lh3.googleusercontent.com/gCh-MpOdqYFRoD9ud7ESt-rHI9ifBbHWI_jbTox45mefFp-aaT4tUah-tul2f1TO4V2WxTwVaAAyWQM4rPkm_R5hiUCKuPZGQCEQZjc3UPXwQsTzaPf1hkleksX_bhkc6PfQcSf6D_hVz7YuCg

  • Click on the page tab and edit this page or click Setting option and select Edit page.

https://lh5.googleusercontent.com/xUVSQ8DE5BgCTG2v6qUw4jWl6L859LNYFjqPIjazfWJu8e3_TnwAgWLK4oi4J4iA_YMIoUFMzGhCC_Z5dv9qx4fKX60Yk3QeqObABI1SERt26LbqENfZmyzNRHUAQxGsXSUbbMyg3sDFB-q0kQ

  • Once clicked on Edit page, it will start edit wizard and here we need to add a web part for a script where we can add our code.

https://lh4.googleusercontent.com/8VuDF3zEqZV3hEUze3TG4sQxXYLxZZ44B_j9pujtGrzEgOubs2gkVjC1C8I4SJHBjoSUqMK0HsXOVVLlibbhCKQRmM6aTLecFZRBqXTWuDWQV35A8GWhwPOcklhEaAqmuCSVfcHn9q3DcJ0HaQ

  • Now add the web part for a script. To do this go to categories of Web part and select media and content, it will take script web part from the right side of the screen. See below

https://lh4.googleusercontent.com/1p9GuT6jFBqCn1UU6UbsI5Xg8RlRNXcljkwDjHqKJQTL0yM-iQDDrm7LH0Rya20I0GmJZF8KAcyulYeylIZCF3dlniUdqCol8P9ZfYyWDSWkilpNFtZtsPwcAxXAEdESfr9AiuaxB_tE5uDbkw

  • Now click Add button to add the script edit web part. Wait for some time till that is adding over there.
  • Now we can see script editor has been added over here. We will get an option called EDIT SNIPPEST. Click this and add your code.

https://lh3.googleusercontent.com/mNaTYJ3YT5cMliXahsE4eaYFd0a9divLv759v9t9MrbVHrSzdgm_M77EAoLfJvHLTID0tKTbttl1p6u-El89x5-4Olc6CwSmDF0-YMxWXB40-WaTkqS_gHnCkDSgKz8w0VRcAeNhF18aL9NZ4w

https://lh6.googleusercontent.com/otdJh1kU_0p4EP7Cli2aP281C-Cq-8co5Rz5jAXE9PY4fCgjpqgbFD9xT23ZhXb6SICdkAAEuf6LwuBQFlAETbJaT35SkEvMeA01CQ9AUxUoaKSjU8sYVIAIcstcZK0udEIWDU9bC6MoKEkJ3Q

  • Now result will be like below:

https://lh5.googleusercontent.com/gYZXx9VmiLYb56TesfVshzYWxBrZbI7E-RJKxncB_hkIuQRK2g1_yiTTJp8CGua2x2e7LXBjmpwKuLRm1Uh7NRaOn4t-2HzjUtMLx01hxieJaR9Xt_JBFFz7DC895BbdnY2selv0e2hCLdVH8w