I am building my own custom stack.
I first tested the HTML, CSS and Javascript by placing it in an HTML stack. It works as required.
I ported it to a custom stack.
Do I need to reference the JS file’s location in my stacks HTML resource file? CSS works without such a reference.
The stack also works if I place the JS file in my site’s resource file.
See the Stacks Api Reference. You just need to define your javascript file in the template files dictionary of your stack pList. You can scope the javascript as each or page depending on whether you want it adding per stack or per page respectively. If you need to include template variables from your stack settings then obviously this will have to be an each (per stack instance) type. If it is a library (for example a javascript plugin) then you can declare it as page scoped so that you do not add unnecessary duplicate instances of the code.
I did define it in the template files directory. Maybe its just a little buggy. Your second point I think is spot on. The stack JS was only going to be a subset of a page level JS resource. It’s better to have one page level source and keep it clean and simple.
Many thanks for your time and suggestion.
Also, do make sure that you declare that your stack should use jQuery if necessary - I’m not sure if you require jQuery or whether it is pure Javascript. Again this can be done with the keys in the API document.
Let me ask a basic question. My javascript refers to a 3rd party JS API for Tableau dashboards. I usually reference the URL in the header section. How and where do I place that reference in the stack’s plist? (It will be in the page’s header section one way or the other.
You would reference it as a page scoped JS template file in the templates dictionary. You will then get one instance of it in the stacks_page_nn_.js file output by stacks that you can then call from your each scoped script.js file for each instance of the stack (also declared in the templates dictionary). You will not actually be invoking the plugin code in the <head> this way, rather calling it explicitly within a $document.ready function in your stack js code.
May I also suggest that the YourHead stacks Slack channel may be a better forum for stacks API related questions https://yourhead.slack.com