Call a service passing a field value


The problem

When users change a value in a field of your form, you would like to call a service, and use the value returned by that service to populate an other field. For instance, imagine you have a form with two fields: a drop down to select a city, and an output field showing weather information for that city. When users select a city with the drop down, you want to call a service that retrieves weather information and shows it through the output field.



The solution

This how-to uses the Services and Actions feature, which is only available in Orbeon Forms PE.

  1. Create the fields — We'll want 2 fields: a drop-down and a text output field.



    Through the dialog that opens when you click on the cogwheel to the left of each field, name those fields city and forecast. You'll be calling the Yahoo! Weather API, which takes the location as a WOEID. You can find the id for a location doing a search with the Yahoo! web interface, and copying the ID at the end of the URL. Pick a few locations you want to use with their corresponding WOEID, and add them to the drop-down, through Edit Items, for instance:



    The Yahoo! Weather API returns the weather information as HTML. So the HTML is shown correctly, you'll want to tell the output control that it will be showing HTML. Currently, Form Builder doesn't provide a UI for this, and you need to edit the form source: in the sidebar, got to Advanced, Edit Source, search for xforms:output, and add the attribute mediatype="text/html", so the source of the output control will look like:

    <xforms:output bind="forecast-bind" id="forecast-control" mediatype="text/html">


  2. Define the service — In the sidebar, under Services & Actions, add an HTTP Service. Let's name this service yahoo-weather. The URL of the service is http://weather.yahooapis.com/forecastrss. It takes its parameter as a request parameter named w, so set the Serialization to HTML Form, and the request body to <request><w/></request>. (The choice of the name in <request> is arbitrary, but <w> must match the name of the parameter expected by the service.)



  3. Define when to call the service — In the sidebar, under Services & Actions, add an Action. Let's name this action update-forecast. You want to run it when users change a value in the city field. When that happens, you want to call the yahoo-weather service you just defined. The value currently in the city field is used as the value of the w parameter. And with the result you want to set the value of the control forecast. The result comes from /rss/channel/item/description in the XML returned by the service, which you can see by looking at the XML it returns.


Then test your form by clicking on the Test button, and every time you select another value through the drop-down, you'll see the weather information for that area will be shown under Forecast.

Get the source

If you'd like to bypass the step above and just get the running form:
  1. Download weather.xhtml, open it with a text editor, and copy the content.
  2. Create a new form in Form Builder, and go to sidebar, and under Advanced choose Edit Source.
  3. Replace the source already there with the text you just copied.
ċ
weather.xhtml
(10k)
Alessandro Vernet,
Aug 30, 2011, 7:16 PM
Comments