Global Constant
Steve Nay's ramblings

Combining client-side processing with server-side in KRL

My next post describes another way to do dialoguing. If this method doesn’t work for you, try that one.

Sometimes you need a Kynetx app to have access to the data on a page in the user’s browser, but you can’t do all the processing you need on the client side. Here’s an example:

I wrote an app a while ago that took the BYU Bookstore’s “MyBooklist” web app and let the user look up those books on Amazon to compare prices. (The Bookstore has since added this functionality to its own website, so I’ve discontinued my app.) I needed the ISBN numbers from the page (client-side), but then I needed to look them up in the Amazon product API (server-side, with KRL). I wrote some JavaScript and a special rule to allow me to extract that data from the page and send it back to the Kynetx servers so I could process it.

The process is pretty simple. It goes like this:

  1. The first rule emits some JavaScript that will use jQuery to get the appropriate pieces of information from the page.
  2. The rule also puts a hidden form on the page. The script adds the extracted data into fields on that form.
  3. When the script finishes collecting the data, it triggers the submit action on the form.
  4. All the while, this first rule has been watch()ing for that form to be submitted.
  5. The second rule handles the event that gets raised (through watch()) when the form is submitted.
  6. That rule extracts the data from the form and does any necessary operations with it (API lookups, storage, etc.) and takes appropriate actions.

Here’s a simplified version of the first rule from the BookComparison app:

You’ll notice we’re creating a series of input elements all with the name isbnList[] and some subscript. This will come in useful in the next rule, where we can foreach over those inputs. Here’s the second rule:

This second rule handles a web submit event with the ID of the form given in quotes. Thereafter, it iterates over each of the ISBN numbers returned from the form. In the original app, this involved looking up the ISBN number in the Amazon API and then returning the price data back to the page (via an action like replace or append.)