Add note-taking functionality to a folio

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.

Figures 1–3 show the example files in the viewer.

File Structure

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

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.

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.

2. 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.

3. Update Notes.js:

On line 3, set the value for FOLIO_ID to the same value set in step 1.

4. 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.

5. 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.

6. 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.

7. Test on device:

Open your device and verify that everything works.

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.

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.