Prerequisite knowledge
This article will describe how to add note taking functionality to a folio using HTML and JavaScript. Familiarity with Adobe Digital Publishing Suite, HTML, and JavaScript is assumed.
 
User level: All
 
Required products Sample files

note-taking.zip
By downloading software from the Adobe Web site you agree to the terms of our license agreement. Please read it before downloading.
 
 
 
This article provides example files to implement note-taking for items in your folio using HTML and JavaScript. By implementing this functionality, you can enable users to take notes on items and review them at a later time. Use cases can range anywhere from instructional material to catalogs. This example uses two HTML pages: one for taking notes and another to view all notes. Note that data is stored locally in an HTML5 database that is available to all iOS webviews.
 

 
Overview of the example

Figures 1–3 show the example files in the viewer.
 
Figure 1. A screenshot of the viewer of a very simple stack that displays two buttons. The first button enables a user to add a note. The second button enables a user to view all notes. When a user clicks either button, a slide-up webview will display. These buttons are purely for illustration purposes. The only thing that is needed to link to the slide up webviews is to set the URL from the Hyperlinks panel in InDesign.

Figure 1. A screenshot of the viewer of a very simple stack that displays two buttons. The first button enables a user to add a note. The second button enables a user to view all notes. When a user clicks either button, a slide-up webview will display. These buttons are purely for illustration purposes. The only thing that is needed to link to the slide up webviews is to set the URL from the Hyperlinks panel in InDesign.

 

Figure 2. After a user clicks Add Note from Figure 1, a form is displayed for the user to enter notes. There must be one form for each item that has note-taking enabled.

Figure 2. After a user clicks Add Note from Figure 1, a form is displayed for the user to enter notes. There must be one form for each item that has note-taking enabled.

 

Figure 3. After a user clicks View All Notes from figure 1, an HTML page is displayed that enables a user to remove all notes, email notes, or delete a note.

Figure 3. After a user clicks View All Notes from figure 1, an HTML page is displayed that enables a user to remove all notes, email notes, or delete a note.

 

 
File Structure
If you unzip notes.zip, you will see the file structure displayed in Figure 4.
 
Figure 4. File structure of notes.zip.

Figure 4. File structure of notes.zip.

 

Here are the files and folders:
 
  • stack_v.indd: example INDD with hyperlinks to the HTML files.
  • HTMLResources: folder that will be zipped and uploaded to Folio Producer.
  • HTMLResources/addNote.1.1.html, addNote.1.2.html, addNote.1.3.html: files used to add notes for a particular item. Naming convention for this file is addNote.folio-id.item-id.html. folio-id and item-id are specific to the local database, not what is stored on Adobe's DPS servers. There must be one of these files per item for which you would like to have note–taking enabled.
  • HTMLResources/notes.html: file used to display all notes.
  • HTMLResources/styles: folder containing the CSS styles for this example.
  • HTMLResources/js/AddNote.js: JavaScript file included in the addNote HTML files. This file includes the code to add a note to the database.
  • HTMLResources/js/ConfirmDialog.js: file used to display a confirmation dialog box, since JavaScript alert() dialogs are suppressed.
  • HTMLResources/js/DatabaseDelegate.js: JavaScript file used for database operations.
  • HTMLResources/js/jquery-1.7.1.min.js: jQuery file included in HTML pages.
  • HTMLResources/js/Notes.js: JavaScript file included in notes.html. This file includes the code to display all of the notes on the page.

 
Modifying the example for your use

To make use of the example files with your own content, you will have to complete the following steps.
 
  1. Update js/DatabaseDelegate.js.
  2. Create addNote for each item.
  3. Update Notes.js.
  4. Test in Safari.
  5. Create a folio.
  6. Zip and upload HTMLResources.
  7. Test on device.
The following sections explain these steps in more detail.
 
  1. Update js/DatabaseDelegate.js:
On line 13, set a value for FOLIO_ID. This ID does not have to match the ID from Folio Producer. This is an ID you assign to the folio for which you are adding note-taking functionality.
 
On line 16, modify the records array so it matches the items for which you would like note-taking functionality. Be sure to close each item with curly braces, { }, and separate them with commas. Each itemId must be unique.
 
  1. Create addNote for each item:
For each item in your folio that you would like note-taking functionality, create a new version of addNote using the format addNote.folio-id.item-id.html. For example, in step 1 if you set FOLIO_ID = f1 and you have an item with itemId = 1, the file name would be addNote.f1.1.html. You do not have to modify the contents of the file. The reason why a copy of this file has to be created for each item is because it's impossible to pass URL parameters to local hyperlinks in InDesign. For example, ideally you would use addNote.html?folioId=f1&itemId=1, but instead you have to use addNote.f1.1.html.
 
  1. Update Notes.js:
On line 3, set the value for FOLIO_ID to the same value set in step 1.
 
  1. Test in Safari:
Open an addNote HTML page in Safari to test. Verify a title and description is displayed for the item. If nothing is displayed, there was probably a formatting error introduced when modifying the JavaScript. Open the debug console and see where the error occurred, and then go back to the appropriate JavaScript file and fix the formatting. If there aren't any problems, enter a note.
 
Open notes.html to view the note entered from addNote.
 
  1. Create a folio:
Create a folio that contains an INDD file that links to an addNote HTML file (created in step 2) and notes.html. The hyperlink should have the path "HTMLResources/" followed by the name of the file. For example, to create a hyperlink that opens notes.html, in the Hyperlinks panel set URL= HTMLResources/notes.html.
 
  1. Zip and upload HTMLResources:
Zip the contents of HTMLResources, name it HTMLResources and upload to your folio in Folio Producer. Make sure to zip at the content level of the folder, not the folder level of HTMLResources—otherwise, there will be an extra path to your files. To upload your zip to your folio, in Folio Producer, locate your folio, click "open," and then click the "HTML" button.
 
  1. Test on device:
Open your device and verify that everything works.
 

 
Important considerations about local storage

 
Data is stored locally in an HTML5 database that is available to all iOS WebViews, although as of iOS 5.1 the data could be erased at any time. For more info, you can view this blog post from Sencha. In my own development, I did not see any data loss, although if any is experienced in your testing it is recommended that a server-side solution is implemented that complements local storage.
 
 

 
Where to go from here

This article has provided example files on how to implement note-taking functionality. To learn more about Adobe Digital Publishing, visit the Digital Publishing Suite Developer Center.