You can use the JavaScript API to get access to a list's data source and then change that data source, as shown in the following simple example:

<gm:page title="My App">
  <!-- Click on the "Switch data" button to switch the feed -->
  <gm:list id="feedItems" data="http://www.digg.com/rss/index.xml" template="default"/>
  <input type="button" value="Switch Data" onClick="switchData();"/>
  <script>
    function switchData(){
      var listModule = google.mashups.getObjectById('feedItems');
      listModule.setData('http://google-code-updates.blogspot.com/atom.xml');
    }
  </script>
</gm:page>

List Module Interface

In addition to the general module interface, GME provides a specific interface for lists. This interface includes the following methods:

Item Module Interface

There is a JavaScript GME interface for item modules that provides the following methods:

Map Module Interface

The GME JavaScript interface for map modules includes the following methods:

The Map Module Interface supports Google Maps API version 2.88.

Data Source Object

This section describes how you can use the JavaScript API to access data feeds and perform the CRUD operations: create, read, update, and delete.

Data Source Object Interface

The data source object interface gives you access to data feeds and exposes the following methods:

Data Source Element Interface (GPath)

The data source element interface provides access to methods that set and get the value of elements in a feed. To get or set a particular element, you declare a GPath object, then create an XPath query to the entry you want to operate on.

This interface defines the following methods you can use:

The following example shows how to set a feed element from another value:

//Declare a new GPath
var titleGPath = new GPath("atom:title");

//Get an element from a feed
var myData = google.mashups.getObjectById('myData');
feed = myData.getData();
entry = feed.getSelectedEntry();

//set the value of an element in that entry
titleGPath.setValue(entry,"This is a title");

Running a Script at Load Time

If you have JavaScript calls that you want to execute when the application loads, you must ensure that the GME JavaScript library is loaded before your JavaScript runs. An easy way to do this is to place your JavaScript inside a function, then call the function from an onload handler in the gm:page tag.

Performing the Basic CRUD Operations

The example in this section shows how you can create, read, update, and delete entries from a data feed, using the JavaScript API. These are the steps:

• Create a new Gpath object to specify the location in the feed where data will be read from and saved to.
• Get the feed object.
• Create a new entry.
• Set the values in the entry whose locations in the feed correspond to the XPath expression we created with the GPath object.
• Add the newly created entry to the feed.

Here's the sample code:

<script>

  //Create the new GPath object and set the path of the location where you will store or read data
  var titleGPath = new GPath("atom:title");
  var contentGPath = new GPath("atom:content");

  //Get the Feed
  var feed = google.mashups.getObjectById('myList').getData();

  if(feed.canCreate()){
    //Create a new entry
    var entry = feed.createEntry();

    //Set the values
    titleGPath.setValue(entry,'New Title');
    contentGPath.setValue(entry,"This is where you put the content');

    //Add the entry to the feed
    feed.addEntry(entry);
  }

</script>

If we simply want to read an element, we get the selected entry and read its value:

<script>

  var titleGPath = new GPath("atom:title");
  var contentGPath = new GPath("atom:content");

  var feed = google.mashups.getObjectById('myList').getData();
  var listEntry = google.mashups.getObjectById('myList').getSelectedEntry();

  var title = titleGPath.getValue(listEntry);

  alert(title);

</script>

We can delete an element from the feed by getting the selected entry and removing it:

<script>

  var feed = google.mashups.getObjectById('myList').getData();
  var listEntry = google.mashups.getObjectById('myList').getSelectedEntry();

  if(feed.canCreate()){
    feed.removeEntry(listEntry);
  }

</script>