locked
Adding and linking a Custom JS script to Seattle Html page on SharePoint Designer RRS feed

  • Question

  • Hi,

    I would want to add a recent_hide.js script to my seattle html page so that all the pages on the team site can take effect instead of adding Script Editor or Content Editor.


    Thursday, December 11, 2014 8:45 AM

Answers

  • Hi,

    If you are using Office 365, you cannot use the _layouts folder.  You can copy your script file in some document library and give the full path of that document library with the file in the script tag.

    For example if you store the script file in the document library xyz

    <script src="https://my.sharepoint.com/lists/xyz/test.js"></script>

    Please don't forget to mark it answered, if your problem resolved or helpful.

    • Proposed as answer by AnilSharma4 Thursday, December 11, 2014 12:41 PM
    • Marked as answer by Ngeshlew Thursday, December 11, 2014 12:52 PM
    Thursday, December 11, 2014 12:40 PM

All replies

  • Hi,

    Please follow these steps

    • Upload the JS file to either layouts folder or some document library
    • Use the script tag at the end of head section to include your custom JS file.

    And also please refer to the following blog post

    http://www.ashokraja.me/post/Refer-Scripts-and-CSS-Style-Sheet-in-SharePoint-2013-Visual-Web-Part-and-Master-Page.aspx

    Please don't forget to mark it answered, if your problem resolved or helpful.

    Thursday, December 11, 2014 9:00 AM
  • The post talks of Master Page (seattle.master) , it's not the same process for refering scripts in Master Page html(seattle.html). So are the first steps you put for the .html or .master?
    Thursday, December 11, 2014 10:44 AM
  • Hi,

    If you are using .master file, you can use the following method.

    <SharePoint:ScriptLink ID="ScriptLink1" Name="~SiteCollection/_layouts/SFS.Ashok.Refer/Scripts/sitecol-master.js" runat="server" /> 

    If you are using .html file, please use the following method

    <script src="/sites/RootWeb/_layouts/15/sfs.ashok.refer/scripts/sitecol-delegate.js"></script>
    Please don't forget to mark it answered, if your problem resolved or helpful.


    Thursday, December 11, 2014 10:56 AM
  • Thanks. Will do. That will definitely work, but my issue is, where do I locate this folder in SharePoint Designer?
    /sites/RootWeb/_layouts/15/sfs.ashok.refer/scripts/
    so that I can upload my custom js script in it.
    Thursday, December 11, 2014 11:38 AM
  • Hi,

    The _layouts folder is protected by SharePoint Designer because changing the OOTB files in that directory puts SharePoint into an unsupported state.  So you have to directly copy your script file from the windows explorer.  The best practice is to use create a folder with some project name and copy your script file there.  For example:

    "sfs.ashok.refer" is a custom folder and "scripts" is another folder under it.

    C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\

    Or you have to use the Visual studio solution.  Please refer to the following post it is same for SharePoint 2013 as well.

    http://www.learningsharepoint.com/2011/05/21/deploy-files-to-_layouts-in-sharepoint-2010/

    Please don't forget to mark it answered, if your problem resolved or helpful.

    • Edited by Mokhtar Bepari Thursday, December 11, 2014 12:02 PM updated
    Thursday, December 11, 2014 11:59 AM
  • This path is missing on my PC:
    C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions

    Thursday, December 11, 2014 12:23 PM
  • Hi,

    Could you please tell me where is SharePoint Server is it on your machine or somewhere else??

    Thursday, December 11, 2014 12:26 PM
  • It's on Office 365 
    Thursday, December 11, 2014 12:32 PM
  • Hi,

    If you are using Office 365, you cannot use the _layouts folder.  You can copy your script file in some document library and give the full path of that document library with the file in the script tag.

    For example if you store the script file in the document library xyz

    <script src="https://my.sharepoint.com/lists/xyz/test.js"></script>

    Please don't forget to mark it answered, if your problem resolved or helpful.

    • Proposed as answer by AnilSharma4 Thursday, December 11, 2014 12:41 PM
    • Marked as answer by Ngeshlew Thursday, December 11, 2014 12:52 PM
    Thursday, December 11, 2014 12:40 PM