Forum Discussion
Print ANYTHING in StoryLine
By adding a new tab in the player properties panel and assigning it to execute the "window.print();" JavaScript, you can allow your participants to print any/every slide in your StoryLine projects including "Notes" or "Certificate" slides! No need to create a complex JavaScript course certificate solution, simply build a beautiful slide and let your users print it directly from the StoryLine player!
For SL 3 and 360 users, you can also move, reformat, hide, and reveal the button so you can take control over what users can print.
I've included the screen shots I used in the video in the attached Word document along with the JavaScript code snippets and an SL3 .story file.
206 Replies
This is fantastic, Owen! Just tested a few examples and this works really well: https://360.articulate.com/review/content/3ba1dd6a-db77-4452-bb4b-ca6cd211c83f/review
You didn't think it would?
Never doubted you, Owen!
Awesome!
Great, we were looking for something to resolve these types of issues. I will test this out soon!
Thanks!
Great tutorial Owen! Thanks for sharing.
Nice job Owen!
Fantastic share. Thanks for showing us this one. Liked the way to recorded the video to explain how you did all the steps. Nice job.
Thank you!
A creative idea that works really well! I tested it against multiple browsers and devices - it works in html 5 flawlessly. Switching to flash puts the print page button back up to the top tab area but it still works. It didn't work in AMP for me but did work well in html5 on the same ipad. Prints just what's on the screen which is great for certificates but for longer notes or other types of captures that are in a scroll box or a variable-driven list, outputting to html or pdf still seems to be needed. That said, this solution is simple, easy and does the trick!
I should go back and edit my post to include: "Stephanie Tested - Stephanie Approved" :-)
; )
Stephanie,
How have you printed out longer content in a slide that outputs to PDF? I've never been able to do this.
Hi Stephanie, I have a Storyline file with a number of text input fields and other text etc in a scrolling panel. Is there a way that can be printed by the user?
This is wonderful! I'm a SL2 user and know nothing about JavaScript, so this is easy for me to add.
Is there a way to turn on/off the custom tab for select slides, as there is in the base layer settings for the pre-set tabs?Thanks!
Unfortunately no (at least not by the built in functionality); custom tabs are not included in the Slide Properties 'Custom for the selected slides' window.
However.... IF (and you will notice that is a big IF) you are publishing your SL2 using HTML 5... you can use the following to hide the button. Note that this is for SL2 only; the identifiers changed with SL3/360 as noted in my original post.- Find the button/tab and rename it. You can do this on your first slide at timeline start using the following JavaScript:
$(".customlink").attr("id","printButton"); - To hide the button/tab, use the following JS:
$("#printButton").hide(); - To show the button/tab, use this JS:
$("#printButton").show();
Note, this will only work in the HTML5 output of SL2.
- Find the button/tab and rename it. You can do this on your first slide at timeline start using the following JavaScript:
Thanks, Owen. I came across this discussion from 2 years ago to add a button with the same JavaScript you used for creating the print tab: https://community.articulate.com/discussions/articulate-storyline/print-button-javascript
This allows more control on the page(s) I want the learner to be able to print.
