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

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 :)