25 November 2014
User level: All
Required Adobe products (retail)
Additional required other products (third-party/labs/open source)
By downloading software from the Adobe website you agree to the terms of our license agreement. Please read it before downloading.
The ability to take notes in a folio is an important requirement for many educational and corporate use cases. Customers have implemented many different solutions, two of which are already documented on the DPS Developer Center: Derek Lu’s “Add note-taking functionality to a folio” article and this author’s “A Flexible Note-taking System for use in DPS Folios” article. This new system seeks to further simplify note-taking overlays by extending the functions documented in “A Flexible Note-taking System for use in DPS Folios” to include the folioDataService methods available with the DPS Reading SDK. folioDataServce provides access to the current page number as well as other metadata about the folio and its articles.
folioDataService has several methods that can be used to determine folio and article metadata as well as the current reading position. You can learn more and see a detailed example at Derek Lu’s article about the R30 APIs. Brian Hinkelman uses these same APIs for his “Customizing DPS Navigation with the Reading API” article. Both of these provide detailed instructions and example code showing how to use the R30 Reading SDK.
The new note-taking overlay uses folioDataService to gather the following information about the current reader’s context and uses it in the note-taking system:
The overlay consists of the following components:
A common strategy is to place the note-taking overlay on a Master page in InDesign. The Web Content Overlay that will display the note-taking system needs to be at the top of all other content, so it is best to create a layer called “notes” at the top of the layer stack in your InDesign document and to place the overlay on this layer. It is best to make the Web Content Overlay fill the entire screen, as it contains a semitransparent background that will cover the page content when it is active. The overlay needs to be set to AutoPlay with 0 or .125 sec delay; it needs to be transparent; it needs to allow user interaction; and it needs access to Entitlement Information. This last requirement is critical, because without access to Entitlement information, folioDataService will not work.
Once you have created your overlay, you can lock the “notes” layer. In order to display the note-taking overlay in your layout, simply apply this master page to any page of your article on which you want to allow readers to take notes.
To use the note-taking system, all a reader needs to do is to tap the icon in the lower right hand corner of the screen, and the note-taking interface will appear. The icon will change depending on whether there is a note stored for the current page. If there is no note, then the icon has a green “plus” sign on it, and if there is a note, then it has a yellow pencil on it. The icon is semitransparent, and since it is just a .png, you can adjust the icon to meet your style and branding requirements.
The note overlay itself consists of a text entry area and five controls. In the upper right hand corner of the overlay is the close box. Along the bottom of the overlay are four actions: Email all of the notes; Email this note; Delete this note; Delete all notes. Tapping on either of the Email buttons will format an email message and send it to the Mail app on the tablet. While the overlay works well on iOS, you will likely need to adjust the message format for Android and Windows to accommodate their mail applications.
The email message now reports the following information:
If the user emails all the notes, then the notes are listed with page number and article detail as well as the folio title for reference.
The other two buttons delete either the current note or all of the notes, respectively. The user will see a dialog asking for confirmation, so they will have a chance to decline if they tap the button by mistake.
While this system offers an easy to manage note-taking solution for many use cases, it is likely that customers will want to extend the content of the notes to include other functions and a more customized experience for the reader. With CSS treatment, it is possible to brand the sample code to match most requirements. One interesting possibility is to include snapshots of the pages in which the notes appear. At the present time, there is no way to pass an image or any other attachment to the mail application, so it will be necessary to provide an online service to host the page images and then link to them in the body of the email message. If a regular naming convention is followed, then it is easy to determine the file name of the appropriate image, since the system knows the folio, article and page number for each note.
Comments are currently closed as we migrate to a new commenting system. In the interim, please provide any feedback using our feedback form. Thank you for your patience.