Creating downloadable pdf files in Storyline - an update on earlier methods

Thank you for sharing this - and helping JavaScript pretenders like me figure it out. I'm not sure if I'm doing something wrong, but on my PDF, the page looks blank initially and I have to click on little "+" signs in the bottom right corner of each field in order to see what's written there (1). Then, when I do open the note area, long notes aren't wrapping (2). I can click into the field and use my arrow keys to scroll across to read the notes, but I can already hear all of our learners screaming that nothing printed out for them.

Any ideas what I'm doing wrong? (Thank you so much!)

Hi lestyn

Sorry not to reply earlier.

Yes. I should have made the point that the Storyline example I loaded "NoteTaker.story" doesn't work if you compile it as a web app and then run it on your 'local' device. The problem is precisely as you describe - you get a CORS error.

It's a little ironic really that you cannot access a local data file from JavaScript because of a cross origin resource sharing error (unless that file is being served by a web server on the same system)... Basically it is a security issue. The browser executes the JavaScript and sends an 'Origin Header' with any 'fetch' or HTTP request. If the server's response doesn't include the appropriate CORS header, the browser will not allow the request and throws the CORS error you saw.

If you think about - it would be a little unsafe if I could just execute JavaScript code to access any data file on the local system!

If you load the Storyline output onto a web page on another server (as per my demo) everything will be fine.

There are services like Ngrok you can use to test your code locally if necessary.

Hi,

I have followed the steps above but am getting an issue with CORS with it trying to gain access to the local file - No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Would this be fixed by hosting the file on a cloud storage system or is there something else that I'm missing?

Thanks

 

Hi Rob

Glad you liked this demo. Thanks for viewing the LinkedIn page.

Adding new fields to the PDF and JavaScript is pretty simple. Just start with the NotesTemplate.pdf - open it with Adobe Acrobat (there are probably other pdf form editors but I only use Acrobat). Then select the "Prepare Form" option. You can now resize the boxes - edit the text - add new fields and even add additional pages if you wish. (see screenshot attached)

When you add new fields you will need to give them a name - make a note of the fields you add. e.g newtemplateField

Now add the text entry or variables you need to capture in Storyline - again note the field names. e.g newstoryField

Then edit the JavaScript - very simple...

var player = GetPlayer();
learnerName = player.GetVar("Name");
learnerTitle = player.GetVar("Title");
learnerNotes = player.GetVar("Notes");

newJSField = player.GetVar("newstoryField");

This grabs your new Storyline variable from Storyline and puts it in a JavaScript variable...

Then add the pdf template fields you have added to this section of code that gets the field names from the pdf template:

//Get field names
  const nameField = form.getTextField('LName');
  const titleField = form.getTextField('LTitle');
  const notesField = form.getTextField('LNotes');

  const newField = form.getTextField('newtemplateField');

Then just add you new variable when you fill the form out:

//Fill in form
  nameField.setText(learnerName);
  titleField.setText(learnerTitle);
  notesField.setText(learnerNotes);

  newField.setText(newJSField);

Simple! If I've got that right - I always need to check which is the pdf field name, which is the Storyline field name, which is the JS variable I'm using to store the Storyline variable and which is the JS variable I'm using to point to the field in the template.... But once you have your head around that it's simple :)

 

You are a hero among heroes!

How do you go about formatting the PDF to add more fields?

(Yes, I liked your LinkedIn Page!)

This is big news and a welcome addition.  It would be wonderful if SL could incorporate this into upcoming versions. 

I take it, there is no way to publish this in Review correct?

My project needs to be launched in a SCORM package on an LMS.  Are there any issues with launching that way? assuming you add the NotesTemplate.pdf to the root of the zip?

Hi

Your reply prompted me to tidy the demo up a bit - same link as above.

https://demo5.profilelearning.com

I am more than happy to explain how this is done - and share the Storyline file for this demo. But I would ask a favour in return - we have set up a new LinkedIn company page and will be publishing articles there on all things learning technology - it's new and needs followers!!

https://www.linkedin.com/company/profilelearning/

OK - so the heart of the JavaScript works this way:

Firstly it retrieves the Storyline variables it requires 

//Retrieve Player Variables
var player = GetPlayer();
learnerName = player.GetVar("Name");
learnerTitle = player.GetVar("Title");
learnerNotes = player.GetVar("Notes");

the code then dynamically loads the "pdf-lib" JavaScript library using an import() construction. This is part of 'modern JavaScript' and can only be used to load ES format or UMD format modules. By doing it this way you load the library only when the code is executed - you don't need to edit the story,html file to include a "src =" statement...

NOTE: I am loading the library from the on-line code repository unpkg.com and, by default I load the latest version. In a production environment it is always safer to load a specific version in case changes to the latest version messes your code up!

This bit inside the fillForm function uses the pdf-lib code to define a new pdf document instance PDFDocument and then uses a fetch command to read the pdf template file 'NotesTemplate.pdf' into a buffer array - i.e. it just reads it as a set of binary bytes. It then uses the pdf-lib 'load' method to create a pdf document pdfDoc and then the .getform method to read the pdf form data (fields etc.) from this pdf into a form called 'form'

//Read pdf form
  const { PDFDocument } = PDFLib;
  const formUrl = 'NotesTemplate.pdf';
  const formPdfBytes = await fetch(formUrl).then (res => res.arrayBuffer());
  const pdfDoc = await PDFDocument.load(formPdfBytes);
  const form = pdfDoc.getForm();

NOTE: the pdf template 'NotesTemplate.pdf' in this code is read from the root directory - so you will have to copy it to the root (where the story.html file is) after you have published the course - you could put it on a server with public access to the file...

Now you can create variables for each fieldname you want to fill in within the form (you need to know what fieldnames you have created in the pdf form template - in this case LName, LTitle and LNotes)

//Get field names
  const nameField = form.getTextField('LName');
  const titleField = form.getTextField('LTitle');
  const notesField = form.getTextField('LNotes');

You can then write your variables into the the newly created pdf form:

//Fill in form
  nameField.setText(learnerName);
  titleField.setText(learnerTitle);
  notesField.setText(learnerNotes);

The rest of the code converts the form back to a byte array and then uses another JavaScript library 'tiny-save-as' which is, again called dynamically. The file is output as a binary 'blob'.

I've attached the story file and the NotesTemplate.pdf form file. Just publish to the web - copy the pdf template into the root folder and it should work.

NOTE: you can modify the pdf template and add all sorts of stuff in it without changing your JavaScript code - as long as you don't change the field names. And, yes, it could be a multi-page document.

I know this looks daunting if your JavaScript is not so good - but, trust me, it is a lot easier than the previous methods I have used for multi-page pdf's.

Hi John,

That sounds amazing. Can you show how you set up the example or provide the source file? I'm looking for the exact functionality that you are showing here!

Thanks!