How to automatically include folder of files to Captivate Project preview and zipped publish output?

[phd3]

Does anyone have a simple and automatic method of including assets/data/js files into a Captivate project, so that they are included in Preview and Publishing (as zipped file) outputs of the project?

I don't want to keep trying to find the temporary preview folders or keep modifying the published zip file to add the files, it just seems to be a "hacky" step, and should be capable from within the tool itself (preferences / options / properties etc.).

[kdmemory]

Hi phd4,

you can! I'm doing it in a way and I can't really claim that it is entirely my solution. Reading posts from people here on the forum like Stagprime or TLC Media Design was helpful to find 'my' way.

It is a bit 'hacky', though. I'm on MacOS, hence my explanation is mac-based, but it works on Windows as well.

Find the application/programme-folder of your Captivate installation. Go there to the HTML folder. Within it find the index.html and open it in text editor (like Brackets, Notepad etc.). index.html is the template file, which is used by Cp always when you publish or preview to HTML5 in a browser. Now in this index.html I added the following code after the second </script> end tag. It is approximately in line 168. Add something like this

<!-- custom added -->
<script src="assets/js/initmodule.js" type="text/javascript"></script>
<!-- END custom added -->

(the filename initmodule.js is valid in my case, you have to adapt that to your needs.)

Then make sure, that your javascript file(s) is/are copied to HTML/assets/js within the same Cp installation-folder.

This works for publish and preview cases.
Be careful, though. Should you update your Cp version you will have to repeat everything. And if you are working on several Cp projects at the same time, it is advisable to edit your javascript you want to embed in this way outside the HTML/assets/js folder and everytime you preview or publish, Save a copy from your editor to HTML/assets/js.

This works for me very well

Good luck

Klaus

[Stagprime]

Perhaps I am mistaken - but I think the idea was to eliminate the need to have to add files to the assets/js folder at all.

At least that is what I was trying to do.

I wonder, though, if the same idea you propose would work if we simply pointed it to another location that is always available.

That js folder seems to be created at publish time so we cannot place it there ahead of time but perhaps there is another place we can point to which is reliable...

You may be onto something. Gonna have to go and play now.

[kdmemory]

One more thing: my answer assumes that you want to add 'automatically' javascript to your Cp projects. Any other 'files' or 'folder of files' would be a different issue. Similar maybe but not the same!

Klaus

[Stagprime]

Perhaps now I see the root of your other post regarding Preview/Publish.

I wouldn't mind knowing this as well.

I had once thought I might be able to modify the HTML file that is used at publish time to always include other JS files but that file points to an array that when published, points to the assets/js folder where we drop that file and have to add the path.

pre-publish

post-publish

I am not sure where Captivate is grabbing the JS libraries from or how they are being included in this array but I agree that would be an awesome timesaver.

[RodWard]

What you are referring to here is sometimes called "headless loading".  It's the preferred way for loading JS libraries such as the one used in the CpExtra HTML5 widget for Captivate.  Tristan Ward (the programmer who developed that widget) shows how this is done for CpExtra here:

https://widgetking.github.io/cpextra/getting-started/installation.html#headless-installation

You can adapt the method to load whichever files you need to have present in your project.

However, I do agree with those who would like to see a more user-friendly method of loading extra files that might only apply to a single project.  This method of altering the templates for Captivate becomes somewhat cumbersome if you happen to be working on multiple different projects at the same time.

[Stagprime]

Rod!!

This is pure GOLD!

If I could drop a few more likes on this I would.

The only question I have is that Tristan mentioned (circa 12:00 - 12:15) if you aren't using it that basically you would need to go in and change back. I agree that it would add a little extra unnecessary overhead but would it actually break anything to leave it there unused?

[RodWard]

No it would not necessarily break anything to leave the redundant js file sitting in the Captivate install directory and have it called via the template array.  The only case in which it could cause you trouble (that I am aware of ) is if you later added some other JS code to the same project via other methods (e.g. the Captivate JS window) that had code which conflicted with that of the include file.  Having the redundant file there will also mean you get a little more bloat in the project, but JS files are usually the least of your worries when it comes to bloat with a Captivate project. 

Whenever I have had to include a custom JS file (using the method Tristan mentions) my preference is usually to just save a copy of the JS file with the project design documents and then just delete the code out of the JS file sitting down inside the Captivate install directory.  That way I still have the backup file with the project, there's no chance of a conflict, and there's really no added weight to other projects either.  The JS file is usually just called something like custom.js anyway.  So I can use the same file for other projects if I want to without having to change any of the include code.

[phd3]

Thanks,

     It seems that the more I use Captivate the more road blocks I keep coming up against, it just seems to be one more  "hacky" workaround after another just to do the simplest of jobs!

[kdmemory]

phd4, after reading the replies from Stagprime and RodWard, I became aware that I forgot to mention, that if the folder js/ within HTML/assets  does not exist (this is the case by default) you'll have to create it manually.

Klaus

[chrismay_at_delta]

Sorry to be so late to the party, I just saw this post as I was searching for something else...

Like Rod, we accomplish this by making custom widgets. But we add them during authoring, not the headless method. We have different widgets for different functionality. Most of our widgets do not contain any content (images and text) but rather JS and CSS. 

If you need to add a glosssary, insert the glossary widget.

If you want to collect user feedback - add the feedback widget.

And so on.

When you publish the widget files are all added to the publish .zip file. (Inserting javascript and css). 

The only caveat is that, at runtime, widgets are inserted via i-frames. So that can limit the functionalllity, depending on what you are trying to do.

[OH_CP_Lover_&_Hacker]

Hey there,

I do what you are talking about all of the time.....I shared how I was including speical external files (that work both when published and previewing...at this following Adobe discussion link: https://community.adobe.com/t5/captivate-discussions/html-interactive-chart-display/m-p/10968533#M27...

I've been using the idea I shared in that above link for many years...and it has worked worderfully - especially if you want to implement standard JS related support libraries for your CP projects.