The following examples use the austinDownload sample workspace:
http://<host>/fmeserver/repositories/Samples/austinDownload.fmw/fmedatadownload/configure
Aim: To create an HTML form on your web page that allows users to set published parameters and then run a workspace. After the user clicks "Run", they are re-directed to the FME Server "success" or "failure" page.
http://<host>/fmeserver/repositories/Samples/austinDownload.fmw/fmedatadownload/configure<form method="post" enctype="application/x-www-form-urlencoded" action="http://servertest1/fmedatadownload/Samples/austinDownload.fmw">
<p>
Custom job request form for "Samples/austinDownload.fmw" for service "fmedatadownload"
</p>
Layers to Download:
<input type="text" name="THEMES" value="" /><br/>
Output Coordinate System:
<input type="text" name="COORDSYS" value="LL84" /><br/>
Output Format:
<input type="text" name="FORMAT_GENERIC" value="SHAPE" /><br/>
Search Envelope Min X:
<input type="text" name="MINX" value="-100" /><br/>
Search Envelope Min Y:
<input type="text" name="MINY" value="25" /><br/>
Search Envelope Max X:
<input type="text" name="MAXX" value="-90" /><br/>
Search Envelope Max Y:
<input type="text" name="MAXY" value="35" /><br/>
Search Envelope Coordinate System:
<input type="text" name="BBOX_COORDSYS" value="LL84" /><br/>
<!-- Extra service-specific directives -->
<input type="hidden" name="opt_showresult" value="false">
<input type="hidden" name="opt_servicemode" value="sync">
<!-- End of Extra service-specific directives -->
<input type="submit" value="Run">
</form>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Running a worksapce using an HTML Form</title>
<meta name="description" content="This example show you how to create a simple HTML form">
<meta name="author" content="SitePoint">
</head>
<body>
<
<form method="post" enctype="application/x-www-form-urlencoded" action="http://localhost/fmedatadownload/Samples/austinDownload.fmw">
<p>
Custom job request form for "Samples/austinDownload.fmw" for service "fmedatadownload"
</p>
Layers to Download:
<input type="text" name="THEMES" value="" /><br/>
Output Coordinate System:
<input type="text" name="COORDSYS" value="LL84" /><br/>
Output Format:
<input type="text" name="FORMAT_GENERIC" value="SHAPE" /><br/>
Search Envelope Min X:
<input type="text" name="MINX" value="-100" /><br/>
Search Envelope Min Y:
<input type="text" name="MINY" value="25" /><br/>
Search Envelope Max X:
<input type="text" name="MAXX" value="-90" /><br/>
Search Envelope Max Y:
<input type="text" name="MAXY" value="35" /><br/>
Search Envelope Coordinate System:
<input type="text" name="BBOX_COORDSYS" value="LL84" /><br/>
<!-- Extra service-specific directives -->
<input type="hidden" name="opt_showresult" value="false">
<input type="hidden" name="opt_servicemode" value="sync">
<!-- End of Extra service-specific directives -->
<input type="submit" value="Run">
</form>
</body>
</html>
The Run button has a type=”submit”, so it posts all of the values you have defined in the input boxes back to FME Server. In this case, the HTTP request is type POST, and the data is posted to the following URL: http://localhost/fmedatadownload/Samples/austinDownload.fmw. You can see this by looking on line 11 of the code.
Note: For an extensive list of interactive samples, see the FME Server Playground: http://fmeserver.com/userweb/sharper/playground/index.html
Aim: Often when writing a web application, you require more flexibility than an HTML form can provide. For example, you may want to control what happens based on the success or failure of the application, rather than simply re-directing the user to FME Server success/failure page. JavaScript, specifically AJAX, gives you that flexibility.
In this example, a workspace is run using JavaScript, and rather than re-direct the user to a web page to display the results of the translation, the HTML is returned and displayed in a simple alert dialog.
<html>
<head>
<script>
/*-- START SAMPLE CODE --*/
function runWorkspaceJavascript(){
/*
Commonly available on the web, this function was taken from:
http://ajaxpatterns.org/XMLHttpRequest_Call
*/
function createXMLHttpRequest(){
try {
return new XMLHttpRequest();
}
catch (e) {
}
try {
return new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
}
alert("XMLHttpRequest not supported");
return null;
}
/*
Display the result when complete
*/
function onResponse(){
// 4 indicates a result is ready
if (xhReq.readyState != 4)
return;
// Get the response and display it
alert(xhReq.responseText);
return;
}
/*
Create the XMLHttpRequest object
*/
var xhReq = createXMLHttpRequest();
// Request Variables
pHostName = "fmeserver.com"
pUrlBase = "http://" + pHostName + "/fmedatadownload/Samples/austinDownload.fmw"
pHttpMethod = "GET"
// Create REST call
pRestCall = pUrlBase +
"?FORMAT_GENERIC=MAPINFO" +
"&opt_responseformat=xml";
/*
* Other available response formats:
* + "&opt_responseformat=json";
* + "&opt_responseformat=html";
*/
// Send request
xhReq.open(pHttpMethod, pRestCall, true);
xhReq.onreadystatechange = onResponse;
xhReq.send(null);
}
/*-- END SAMPLE CODE --*/
</script>
</head>
<body>
<FORM name="fmeForm">
<INPUT type="button" value="Run Workspace" name="runButton" onClick="runWorkspaceJavascript()">
<br>
</FORM>
</body>
</html></html>
To see what is happening line by line, step through the JavaScript code using a tool such as Chrome Developer Tools or Firebug. The JavaScript does not trigger when the page loads, but when the user clicks the Run Workspace button, which calls function runWorkspaceJavascript(). This function triggers an AJAX request to FME Server to run the job. The results of the request are handled by function onResponse().