Using json Feeds in Static Web Pages

Version: Bedework 3.5

See the files in /downloads/webcontent/temp/json
The json-list-src.xsl file will be released with Bedework 3.5

Example HTML

Two html files are included as examples.

These files draw on example json output to let you see what they do. Use the json-list-src stylesheet (described below) to make the feeds live.

Producing the JSON Feeds

  • The stylesheet used to produce the json feed is json-list-src.xsl.
  • You must also include the util.xsl stylesheet that does some string replacement and URL encoding.

Place json-list-src.xsl in the default xsl directory for the calendar suite you want to draw events from. In the quickstart source this is
bedework/deployment/webpublic/webapp/resources/demoskins/MainCampus/default/default
and gets deployed to
apache-tomcat-5.5.17/webapps/ROOT/calrsrc.MainCampus/default/default

Place util.xsl in your bedework-common folder. In the quickstart this is
bedework/deployment/resources/xsl/default/default
and gets deployed to
apache-tomcat-5.5.17/webapps/ROOT/bedework-common/default/default
Note: you can include util.xsl locally if you wish. If you do, change the reference to it in json-list-src.xsl. Placing it in bedework-common puts it with other common stylesheets, and is where it will end up in 3.5.

Instructions (included in the json-list-src.xsl file)

JSON feed of Bedework events, Bedework v3.4.x, Arlen Johnson

Purpose: produces an array of javascript objects representing events.

Usage: call the JSON feed from an html file by embedding a script tag.

Examples: The next four days (max days = 31): 

<script src="http://localhost:8080/cal/main/listEvents.do?days=4&skinName=json-list-src" type="text/javascript"></script>

A range of dates: 

<script src="http://localhost:8080/cal/main/listEvents.do?start=2008-10-03&end=2008-11-02&skinName=json-list-src" type="text/javascript"></script>

The next ten days limited by category (you can append as many categories as you like): 

<script src="http://localhost:8080/cal/main/listEvents.do?days=10&cat=Concerts&skinName=json-list-src" type="text/javascript"></script>

Filters: Arbitrary filters can be sent to this stylesheet using the query parameter "setappvar=filter(somekey:somevalue)". Group (creator) and location filters are included here, but you can add more under line 82.

The next ten days filtered by a group (creator): 

<script src="http://localhost:8080/cal/main/listEvents.do?days=10&setappvar=filter(creator:agrp_Library)&skinName=json-list-src" type="text/javascript"></script>

Object name: The json object name can be passed by adding "setappvar=objName(myobjname)" to the query string, allowing multiple json object calls on the same html page. If objName is not supplied, the default name is "bwObject". Here is an example that sets the object name to "myobj": 

<script src="http://localhost:8080/cal/main/listEvents.do?days=4&setappvar(objName=myobj)&skinName=json-list-src" type="text/javascript"></script>

Other Approaches

Using the html example above, users remain on the same web page for views of both the event list and the individual events. This may cause some confusion over the use of the back button: if a user clicks the back button, the user will return to the page prior to pulling up the events listing. Some other approaches that might be better would be to load a pop-up box (e.g. a hidden div or a lightbox) for the event details or to pass the json object to a new page for loading the specific event.