Create Simple Web Application Form for Data Collection

Introduction

With FME, we can create Server Apps that will allow users to submit their data using a form. We can collect and add each submission to a spreadsheet or database. This can be achieved in FME Server by building a Workspace App on top of a workspace authored in FME Desktop. This article outlines how to configure the workspace to get data from input fields and write out the collected data into an Excel format. 

As a scenario, say an FME user is a restaurant owner and would like to collect some customer feedback. They want to create a simple application for their patrons to fill out with their overall experience and include some personal information such as name, email and phone number. The restaurant owner would like to collect the information in an Excel spreadsheet. The Excel sheet will be saved on FME Server in the Data Folder and may then be accessed via FME Server > Files & Resources > Resources > Data. To follow this demo, you will require FME Workbench to author the workflow and FME Server to create the Server App. 

Step-by-Step Instructions 

This section will walk you through the steps required to create a simple workspace application for data collection. Optionally, the steps below will include emailing the results to the restaurant owner/yourself every time the form is completed. Part 1 will be authoring the workspace with FME Workbench. Part 2 will be creating the Server Workspace App on FME Server. You may choose to download the SimpleWebApp.fmw workspace and skip to Part 1, Step 4: Configuring Emailer Transformer.  
 

Part 1: FME Workbench

1. Create Workspace
Our workspace will not be reading in any data formats as we are looking for user input data. Therefore, we can start the workflow with the Creator transformer. The Creator transformer has no input port and creates features using the parameters supplied and sends them into the workspace for processing. 

In FME Workbench, add the Creator transformer to the canvas simply by typing Creator.

Next, add the AttributeManager transformer, the Microsoft Excel writer, and the Emailer transformer to the canvas. Connect the Creator transformer output port to the AttributeManager input port.  

Microsoft Excel Writer

To add the Microsoft Excel writer, click on the Add Writer button located on the ribbon and select the Microsoft format. For the “Dataset” parameter, where we specify a name for the file, select the folder where you would like to place your file and name the file “PatronData.xlsx”. (Optional: Include Date/Time functions to attach the DateTime to your Excel file name.) Ensure the “Sheet definition” is set to Automatic and select OK. 

The Feature Type window will pop up for you to enter the sheet name. You can either change the name or leave it as the default, “Sheet 1”. Leave the default Sheet Settings and select OK. Connect the AttributeManager output port to the Microsoft Excel writer. 

 

Optional: Emailer Transformer
Connect the Emailer transformer to the output port of the AttributeManager. We will configure the Emailer in Part 1, Step 4: Configuring Emailer. . If you would not like to include emailing results in your workflow, feel free to omit the Emailer transformer and skip over Part 1, Step 4.

2. Create User Parameters
Creating published User Parameters to feed into the workspace allows for user input. In the Navigator window, right-click User Parameters and select “Manage User Parameters…”. You should already have one user parameter, DestDataset_XLSXW with the prompt “Destination Microsoft Excel File”. This was created when we added the Microsoft Excel writer to the canvas. Here, we will be creating new user parameters for user input. Click on the green add button and select the type “Choice”. 

The Choice Parameter will allow users to select the rating of their experience: Good, Fair, Poor, and Don’t know. For Parameter Identifier, enter RATING with the prompt set to: “Overall, how was your experience with our service?”. Ensure the Published and Required options are enabled. Expand the Choice Configuration section and select Drop Down. Fill in the Choices table with the Value and Display of Good, Fair, Poor and Don’t know. See image for reference.
 

Next, add two more Text type parameters for name and email input. For the Name input, the Parameter Identifier can be set to NAME with the prompt: “Enter Your First and Last Name”. You can set the Default Value to John Smith as an example. For the second Text type parameter, have the Parameter Identifier set to EMAIL with the prompt as “Enter Your Email”. The Text Configuration should be the same as the Name, where the Editor Syntax is set to Plain Text (Uniline). You may set the default value to test@domain.com. Ensure the Published and Required options are enabled for the parameters.

Finally, add a Number type parameter for the phone number input. Have the Parameter Identifier set to PHONE and the prompt as “Enter Your Phone Number (no spaces, dashes or parentheses)”. For “Number Configuration”, set Lower Limit to None, Upper Limit to None and Numeric Precision to Integer. You may use a phone number as an example for the Default Value. Ensure the Published and Required options are enabled. Click OK and Save. 

 
3. Configure AttributeManager
The next step is to configure the AttributeManager transformer. Create 4 new attributes in the AttributeManager transformer to match up with the values of the created user parameters. 

In the Output Attribute column, add new attributes: Name, Email, Phone Number and Service Rating. To add the corresponding user parameters as values, click on the down arrow of the Attribute Value cell and select User Parameter and the corresponding User Parameter. The NAME parameter for the Name attribute, EMAIL parameter for the Email attribute, PHONE parameter for the Phone Number attribute and RATING parameter for the Service Rating attribute. You may remove the _creation_instance attribute by selecting the minus button at the bottom of the AttributeManager Parameters window.  
 

4. Configure and Authenticate Emailer Transformer
If we want to receive an email every time a patron fills out the form, the Emailer transformer will help us achieve this. Please see the Emailer documentation to set up your SMTP connection. 

Note: Should you not want to include the Emailer transformer in your workflow, simply delete the Emailer transformer from your canvas and go to Part 1, Step 5: Publish to FME Server. 

In the Emailer Parameters window, set up the From and To parameters. Click on the down arrow for the Body parameter and select Open Text Editor for easier editing. For the Message, set the Subject to “Patron Form Completed” and the Body to:

Patron @Value(Name) filled out the form on @DateTimeFormat(@DateTimeNow(), %B %d %Y).

Information includes:

Name: @Value(Name)

Email: @Value(Email)

Phone Number: @Value(Phone Number)

Service Rating: @Value(Service Rating)

Select the Email Service Gmail and authenticate a connection or set up your SMTP of choice and authenticate. Select OK and save the workspace.

Note: Another option to this workspace is replacing the AttributeManager with a ParameterFetcher transformer. Connecting a ParameterFetcher to the Creator transformer will automatically make attributes from user parameters. 

5. Publish to FME Server
Before we bring this workspace into FME Server, run the translation to ensure it completes successfully. Publish to FME Server using the Publish to FME Server button located on the ribbon and follow the Wizard. Add your web connection and authenticate with your login credentials. Select the Repository Name that you would like to place your workspace in or create a new repository. Here, you can rename your workspace if you would like to. Finally, select the Job Submitter service and click Publish.


To access your FME Server Web UI, you can either select the Direct Link available in the Workbench Translation Log window or go to Windows Start Menu > FME Server > FME Server Web Interface and log in.
 

Part 2: FME Server

1. Run Workspace on FME Server
To ensure the workspace runs on FME Server, it is good practice to run the workspace and test on the Run Workspace page. Log into FME Server Web UI with your credentials and go to the Run Workspace page. Select the repository that you’ve placed your workspace into and select the workspace. Choose the service Job Submitter and enter the parameters to test. For the Destination Microsoft Excel File parameter, enter:  $(FME_SHAREDRESOURCE_DATA)/InformationForm/PatronData.xlsx. This will place the excel file in Files & Connections > Resources > Data > InformationForm folder. Click Run. Once the job is complete and runs successfully, we can now build the Server Workspace App. 

 
2. Build Workspace Server App
Go to the Server Apps tab and select the Build Workspace App page. Fill out the Name, Title and Description of your App according to the image below. Select the repository that corresponds to your workspace, with the Job Submitter service. The Job Submitter service is optimal because we do not want patrons who fill out the form via the Server App to receive access to the excel sheet that contains other patrons’ information. 

For the Parameters, ensure the Destination Microsoft Excel File parameter is set to: $(FME_SHAREDRESOURCE_DATA)/InformationForm/PatronData.xlsx. However, disable the parameter so that users who fill out the form can’t access the excel file. 

You may customize your Server App by changing the logo, color and removing the default FME stylings. Click OK once you've completed the parameters.
 

Select the Server App link and test out your new Server Workspace App. Now you have a simple Server Workspace App that takes user inputs and writes to an excel file record by record!
 

 

Some next steps to take this demo further on your own would be to include validation such as the Tester transformer in your workspace to filter out invalid data input. You can also set up an automation where every time the workspace runs, an email is sent to the patron with restaurant promotions and events.
 

Additional Resources 

Getting Started with FME Server Workspace Apps
Getting Started with Gallery Apps
Sending Email in FME: FME Workbench vs. FME Server
Tutorial: Email in FME Server
Workspace Apps Documentation