I am working on a SP online project, we have a dev site (/teams/ABCDev) and a production site (/teams/ABCProd). The Style library path is /teams/[Site]/Style Library.

When I am referencing any item from the style library in the home page (/teams/[site]/Pages/Default.aspx) I use ../style library/[Item]. Everything is working fine.

the problem happens when SP opens the site as /teams/[Site]/ without the (/Pages/Default.aspx), in this case, the (../style library) will point to /teams/Style library (which doesn't exist) instead of /teams/[site]/Style library

Is there a solution for this issue without having to use the path (/teams/ABCProd and /teams/ABCDev) and having to change it from dev to production?

  • Why don't you put all your stuff in root-site Style Library and point it to like ~/Style Library/FolderName/filename or ~sitecollection/Style Library/FolderName/filename – Arsalan Adam Khatri May 6 '14 at 19:57
  • ~sitecollection is a server side token, in SP online you can not use Server side code, only client side. – Emad Gabriel May 7 '14 at 19:29

Since you're on SP online, you could make use of the root site which is https://yoursite.sharepoint.com, create a SiteAssets library if not already there, and create folders within it such as scripts, styles, images. For this library give Read permission to 'Everyone'. If you keep your assets within this root folder, you could reference your files using the full url

<script type="text/javascript" src="https://yoursite.sharepoint.com/SiteAssets/scripts/jQuery-1.9.1.min.js"></script>

This way when you're building apps, you could refer your assets by full url and utilize the caching mechanism. The browser will not attempt to re-download since it know it's already there. Useful for apps/Iframes.

or you could still use it as:

<script type="text/javascript" src="/SiteAssets/scripts/jQuery-1.9.1.min.js" />

P.S Above are my suggestions, not saying it's a best practice. This approach has been increasingly common for SPOnline. I would be happy to know what others are doing.

| improve this answer | |
  • The problem is that i have no access to the yoursite.sharepoint.com this top level site is corporate level and my project can only go to yoursite.sharepoint.com/Teams/ABCSite. So my Style library is actually at yoursite.sharepoint.com/Teams/ABCSite/Style Library. – Emad Gabriel May 7 '14 at 19:31
  • To keep it in globally accessible place, you need to add it to your top level site. If there's no site existing in there, you can ask your admin to create a team site there. If you decide to add your assets within Site Collection level, you'll run into issue as you stated before. Or you can create another wsp that would need to be deployed to each site collection, but you'll end up with multiple copies of assets and for updates that's again another nightmare. – Aveenav May 7 '14 at 20:05

I ended up using this for CSS files

<!--SPM:<asp:Literal runat="server" Text="&#60;link rel='stylesheet' type='text/css' href='"/>--><!--SPM:<asp:Literal runat="server" Text="&#60;% $SPUrl:~sitecollection/Style%20Library/css/grid.css %&#62;"/>--><!--SPM:<asp:Literal runat="server" Text="'&gt;"/>-->

and Using Script On Demand SP.SOD to load JS files

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.