FME Server Order Form
From fmepedia
(http://fmepedia.com/attachments/FME_Server_-_ArcGIS_Server_JavaScript_API_Integration/images/ssbig_fmeForm_-_web_page_HTML_tags.png)
Above: FME Server Order Form HTML elements
(http://fmepedia.com/attachments/FME_Server_-_ArcGIS_Server_JavaScript_API_Integration/images/ssbig_fmeForm_-_web_page_javascript.png)
Above: FME Server Order Form JavaScript functions
Creating a order form for an FME Server service is quite easy. In fact, the FME Server Web User Interface provides a HTML form snippet to get you started. Check it out by going to the following page and clicking the Show Request button (Note: this workspace is used in the ArcGIS Server JavaScript API integration example and is also shipped as a sample with FME Server):
However, the sample form provided is not that sophisticated. So we've created an advanced HTML and JavaScript FME Server Order Form that can be plugged into any web mapping site and which provides all the most common options for FME Server requests. Integrations with ArcGIS Server, Microsoft Bing Maps, OpenLayers and Google Maps have been produced with this form.
| Table of contents |
Description
HTML, JavaScript and CSS Files
Refer to the screenshots in the top right of this page for a visual overview.
HTML Template Files
These files provide a starting point for building the HTML web page.
fmeForm.head.template.htm (view this file) (http://fmeserver.com/fmeForm-v1/templates/fmeForm.head.template.htm)
- The HTML snippet that must be included in the <head> section of your web page;
fmeForm.body.template.htm (view this file) (http://fmeserver.com/fmeForm-v1/templates/fmeForm.body.template.htm)
- The HTML snippet that must be included in the <body> section of your web page; and
ArcGIS_fmeForm.template.htm (view this file) (http://fmeserver.com/fmeForm-v1/templates/ArcGIS_fmeForm.template.htm)
- An ArcGIS Server JSAPI web map with placeholders showing where the FME Server Order form HTML should be inserted.
JavaScript
fmeForm.class.js (view this file) (http://fmeserver.com/fmeForm-v1/fmeForm.class.js)
- A JavaScript class with methods that:
- retrieve values from the form options;
- set the values of form options; and
- submit the order request to the FME Server Service.
This class is fairly specific to the HTML form elements we designed it for. If, for example, you need to use two select form elements instead of one (e.g. two seperate layer option boxes), then you will need to modify the class. We think this is a reasonable approach, since we can't envision all the configurations that users will want and modifying the functions should be easy for even novice JavaScript developers.
CSS
fmeForm.css (view this file) (http://fmeserver.com/fmeForm-v1/fmeForm.css)
- CSS definitions used to hide/show individual options and buttons.
Form Options
Refer to the screenshots in the top right of this page for a visual overview.
The available form options are:
- Search Envelope and Coordinate System (i.e. bounding box);
- Search Feature and Method (i.e. complex features to be used for intersection);
- output Format;
- output Coordinate System;
- output Layers;
- ability to add additional URL parameters, which can influence a workspace translation; and
- e-mail address to send results (note: your FME Server installation must be configured to use a mail server).
Each form option has the following:
- a unique name that can be referenced with JavaScript;
- a CSS class that can be used to hide/show the option;
- a JavaScript function which can retrieve and update the option's value; and
- a published parameter name, which is defined in the JavaScript file.
How it works
Integration Point: drawing graphics and updating the area of interest
The key part of the integration is when the graphics are digitized on the screen, a JavaScript function must be called to update the FME Server Order Form. As an example, here is the JavaScript code required to draw a polygon in a ArcGIS Server JSAPI web map and then update the FME Server Order Form:
// Update the ArcGIS Server JavaScript map with the new polygon
ext = geometry.getExtent();
var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255,0,0]), 1);
var graphic = new esri.Graphic(geometry, symbol);
map.graphics.add(graphic);
// Update the FME Server Order Form with the new bounding box and search feature
xmin=Math.round(ext.xmin*1000000)/1000000;
ymin=Math.round(ext.ymin*1000000)/1000000;
xmax=Math.round(ext.xmax*1000000)/1000000;
ymax=Math.round(ext.ymax*1000000)/1000000;
theFmeForm.setBbox(xmin,ymin,xmax,ymax);
theFmeForm.setQueryFeature('GEODB_INTERSECTS',String(geometry.paths[0]).replace(/,/g," "));
When the form changes
Anytime the HTML form options are changed, a JavaScript function is called that retrieves all of the values from the HTML form and populates a completely separate HTML form that contains only text fields. When the Order button is clicked, the separate form is submitted to the FME Server Service.
Initially, we contemplated using a Javascript object to hold all of the values that would be submitted to the FME Server service. However, we realized that the HTML form elements already hold all of this information and although a separate object for holding these form values would be a nice abstraction, it seems like overkill. So the JavaScript class simply takes the values from the HTML form options and populates a second form with text fields with the properly formated values and correct published parameter names. One upside, is that you can display this form's text fields and values for debugging by modifying one of the CSS classes.
Integrating the FME Server Order Form with your Web Map
- Unzip the fmeForm-v1.zip into your web server's root directory.
- Create your web map complete with drawing tools. Most web mapping products have demo or sample sites that provide this basic requirement.
- Copy the contents of the <fmeForm>\templates\fmeForm.head.template.htm file and place it in the <head> portion of your HTML file making sure to do the following:
- Make sure the paths are valid.
- Choose the workspace you will use for the data download and replace the existing workspace.
- Copy the contents of the <fmeForm>\templates\fmeForm.body.template.htm file and place it at the location within the <body> where you would like the form to be displayed.
- Modify the options for the following <select> lists:
- Search Filter > Coordinate system (fmeQueryCoordsysNames)
- Search Method (fmeQueryMethod)
- Output > Format (fmeFormatNames)
- Output > Coordinate System (fmeCoordsysNames)
- Output > Layers (fmeLayerNames)
- Modify the options for the following <select> lists:
- Locate the part of the JavaScript that performs the drawing and for each drawing tool, add the appropriate call(s) to update the FME Server order form:
- theFmeForm.setBbox()
- theFmeForm.setQueryFeature()
