Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Monday, September 30, 2013

Hacking Google Forms

A few months back I pitched the idea of using Google forms for all the forms on the new website. Our current forms were created through a Joomla-specific add-on, and I'm not proficient enough in PHP or SQL to feel comfortable recreating them from scratch. Also, the forms on our current site turned into a pretty huge security risk as they aged, and I like the thought of using Google's servers to house the forms and resulting data. However, on their own, Google forms are pretty limited in their functionality, just dumping data into a Google spreadsheet document (which can be exported, but you still have to regularly log into your Google account to view the data.)

Forms do have the option of sending an email alert whenever someone fills out the form, but the alerting email doesn't include the actual form data, so you're still tied to constantly logging into that account to get the information. Enter: Google Apps Script. With a little knowledge of JavaScript, you can use their library of classes and methods to add functionality to basic Google forms.

I started out just wanting to be able to receive an email when someone submitted a form, with all the responses included. For this I found a really nice tutorial from Amit Agarwal (http://www.labnol.org/internet/google-docs-email-form/20884/). If that's all you need your form to do, great! You got it, dude.

I needed a few extras though. First, some of the forms need to go to multiple people. You can easily do this with a slightly more advanced version of the sendEmail method. (You can find documentation on the MailApp class and various iterations of the sendEmail method here: https://developers.google.com/apps-script/reference/mail/mail-app. Also helpful, their Understanding Events cheat sheet: https://developers.google.com/apps-script/understanding_events)

Essentially, you just need to find this line in the original code:

MailApp.sendEmail(email, subject, message);

and change it to:

MailApp.sendEmail(email, subject, message, {cc: email 
   of person you want to copy});

You can cc multiple people by just separating their email addresses with commas.

One of the librarians, however, wanted users to indicate what department they were affiliated with, and then have a copy of the form results go to the department liaison. This is where things start to get a little complicated, and it's helpful to know a little bit about programming languages. I wrote a simple switch statement (with some help from Babs, of course, my go-to programming guru.)

 var dept = e.values[array location 
    of dropdown].toString();
 var contact = toString("xx");

 switch (dept) {
   case "dropdown value 1": 
     contact = "email address 1";
     break;
   case "dropdown value 2": 
     contact = "email address 2";
     break;
   default:
     contact = "default email address";
 }

The first line of code pulls whatever drop-down value the user selected (the associated Google spreadsheet stores these values as an array. 'e.values' accesses the values in this array. Position [0] of the array is the time-date stamp that gets put in automatically, so your array location is just the exact question number of the drop-down question.)

Your switch statement is then just comparing that value to values that you associate with email addresses, and then assigning the associated email address to the variable "contact", so now your method call looks like this:

MailApp.sendEmail(email, subject, message, {cc: contact});

Ok, if I haven't given you a headache yet, there's one more tweak you can do to increase the usability of the form submission email. Using 'e.values' again, you can pull the user's email address from their form submission, and set it as the reply-to on the resulting email. That way, if the person who gets the email has a question for the submitter, they can just hit reply (default reply-to is the gmail account that you're using to create the form.)

Again, since the time-date stamp is [0], you just need the question number where you ask for the user's email address, and now you've got:

var reply = e.values[array location of user’s 
   email].toString();

MailApp.sendEmail(email, subject, message, {cc: 
   contact, replyTo: reply});

You can check out the whole script, as I use it, here.

If you've done any Google form hacking, I'd love to hear about it in the comments. I've only just begun delving into the possibilities here!

5/23/14 - I just stumbled across this post about using Google Forms for leaderboards/summer reading programs. It's also another good example of hacking Google Forms with formulas and scripts.


Tuesday, February 5, 2013

Just one more thing...

One thing I forgot to mention in yesterday's post on Harvard's library site... They have a really sleek user feedback system. When you click on the "Tell Us" button at the top of the page, you get the following javascript pop up:

I love that it not only gives you a place to provide feedback, but also tracks and reports on known issues. This saves time for both the user, and the helpdesk, since the helpdesk is used to receiving untold numbers of reports on the same printer being broken, or the wireless being down. This system allows users to see what issues are currently being dealt with before submitting their comment. Users can also comment on or "vote up" issues without having to submit a new ticket.

I did a little snooping around in the code, and it would seem that they are using (and correct me if I'm wrong here) an online helpdesk system called UserVoice. I like not only the functionality of the software, but also the sleek way it integrates into your website, and provides a social aspect to the online helpdesk. Nicely done, all around!

Monday, March 14, 2011

oneSearch bookmarklet @ LibTech 2011

On March 17th (this Thursday,) I'll be presenting at the Library Technology Conference on the oneSearch bookmarklet tool created by Barbara Arnett and I.

Barbara won't be able to make it out to Minnesota (she'll be presenting the bookmarklet to the NJLA 2011 Technology Innovation Award committee,) but because we want to be as practical as possible in our presentations, she put together a quick reference for the three parts of the bookmarklet (you don't actually need the third piece, it just creates a nice button for users to drag and drop into their browser, as opposed to a simple link.)

Below is the code you'd need to get started working on your own browser-based search bookmarklet:


(1)HTML, (2)Javascript & (3)CSS:


1 - HTML to display bookmarlet on your webpage:


(edit this line: {document.body.appendChild(document.createElement('script')).src='http://www.stevens.edu/library/js/search.js';}
so that the red text links to the JavaScript file you place on yo
ur server)


2 - Javascript to sit on your server (sits in search.js, referenced in bookmarklet HTML)


(edit this line: _gaq.push(['_setAccount', 'UA-XXXXXXX-1']);
so that the red text reflects your own Google Analytics account number (you can also find this complete code within GA, in actions->edit->check status,)
and this line: var searchString='http://ezproxy.stevens.edu/form?qurl=http://XXXXXXXX.cs....&field=title&term='+(Ti);
so that the red text reflects your own search URL, which you can get from your catalog, database or federated search vendor)

(Note: if you don't want to use Google Analytics, just remove all the code before the line: var Ti=document.title.replace('- Wikipedia, the free encyclopedia','');)


3 - CSS needed for the button:


(You can do this as inline CSS or a separate stylesheet. Just replace the background image with your own image file.)

-------------------------------------------------------------
***OR, if you'd rather just download all the files, edit them, and place move them to the appropriate locations on your server, you can download the file packet (with instructions in a ReadMe.txt file.)***
-------------------------------------------------------------

Presentation slides:



One note: when we developed the bookmarklet, we were beta-testing Ebsco Discovery Service. We have since switched to Serial Solutions' Summon, but while that's being configured, the bookmarklet used our integrated search (also a Serial Solutions product.)

On the down-side, this has caused some inconsistency in our screenshots (the slides feature EDS screenshots, since we don't have full access to Summon yet.) However, this does emphasize the importance of having the full code reside on your server, as we've been able to make the required adjustments to the code without users having to re-install the tool.

Tuesday, October 5, 2010

Bridging the gap from Wikipedia to scholarly sources: a simple library bookmarklet

So I know I have been alluding to a fancy-shmancy "project" for awhile now, and it's finally at a point that I can show it off! Barbara Arnett and I (mostly Barbara, but I set the project in motion, so that counts for something I guess) have created a javascript bookmarklet that can be used in any browser to execute a search in Ebsco Discovery Service from any web page.

The impetus for this project was a tendency for novice researchers to rely on internet sources that may not be up to the standards required by their professors for college-level research (read: Google & Wikipedia). Unfortunately, those users were not only beginning, but ending their search with those websites, without ever trying the library’s subscription databases, or even making it to the library’s website.

Stevens is currently undergoing a trial of Ebsco Discovery Service (EDS), a federated search tool which includes the library catalog data. To make it easier for students to search the library resources, we decided to create a bookmarket that eliminates the step of having to go to the library website first before searching library resources.

The bookmarket provides an important bridge between common search behaviors (especially among undergraduates), and the "deep web" content located in library-funded, proprietary databases, thus easing their transition into scholarly research. You just drag-and-drop it into any browser, after which a search can then be initiated from any webpage the user visits. When the bookmarklet is clicked, the search terms default to the title of the page (so it works especially well with Wikipedia articles), and a prompt is displayed that allows the user to edit the terms, if so desired. When they press the OK button, the search is automatically executed in the Discovery tool and the results are displayed in a new browser window.

The bookmarklet is written in simple Javascript code, which resides on the library’s server, so it can be edited or updated without the user having to reinstall it. It works on all major browsers, and can also be edited to work with various search tools, such as specific databases, library catalogs or competing federated search tools (such as Serial Solutions’ Summon.)

A short demo:



Barbara and I will be participating in a webinar for the Metro New York Library Council in December, demonstrating various tech tools for libraries. See here for details: http://bit.ly/aYud4Q

11/19/10 - NOTE:

Ken Varnum at the University of Michigan has used our code to create an ArticlesPlus bookmarklet for their users. To make it easier for other developers to adapt our code for their projects, here it is, in its entirety. You'll have to edit it to use whatever search tool you want it to run, and change it to link to your own Google Analytics account (or just take that part out if you're not using GA), and we ask that you keep the attribution statement in there.

Thanks!

~val