Now nearly two years old, you have been using CAPS, the CorasWorks API for building solutions in SharePoint, for a while; and hopefully you’re hammering out some pretty slick custom displays. However you keep running into one place you can’t leverage your CorasWorks variables, be it Global Variables or our built-in ones. Namely, how do you centralize your resource files (i.e. JS, CSS, images, etc) and yet still be able to leverage a Global Variable to reference those files?
CAPS has the answer for you: the “GetFileContents” method!
You may say “Wait, that is not right; is it…?” but it is. Normally, you might use a CorasWorks CAPS HTML Viewer to call an HTML file that is the base of your display; and to keep things clean, you reference all your dependent JS, CSS & Image files inside that HTML file. However that means that you have to reference them either via fully-qualified domain names (which then are not portable) or via relative paths, which is not always conducive to centralizing those resources. Well here is the technique…
In your CorasWorks CAPS HTML Viewer, instead of pointing directly to the HTML file (a scenario discussed in a previous blog post), make a call like this:
%SiteURL%/_layouts/CorasWorksApps/CorasWorksApplicationService.ashx?RequestType=GetFileContents&FileUrl=[Your Global Variable]/Folder/YourFile.htm
Then in your HTML file, you can now freely use references like:
<link href="[Your GV]/Folder/YourFile.css" rel="stylesheet"/> <script src="[Your GV]/Folder/YourFile.js"></script> <img src="[Your GV]/Folder/YourFile.png" title="Your Image">
This also open up the use of any of the built-in CorasWorks variables or your own Global Variables for anything else in that HTML page (think maybe current Username or Site Title in an <h1> tag). The reason this works is because the contents of the file – in this case, an HTML file – that is being queried via the GetFileContents method is automatically being passed through the CorasWorks variable replacement engine, thus ensuring proper translation/insertion of variable values anywhere within that HTML. And because that HTML includes those resource file URLs, their location is automatically set using those variables.