Create Simple Web Application Form for Data Collection

Introduction

With FME, we can create Flow Apps that will allow users to submit their data using a form. We can then collect this data and add each submission to a spreadsheet or database. This can be achieved in FME Flow by building a Workspace App on top of a workspace authored in FME Form. This article outlines how to configure the workspace to retrieve data from input fields and write it to an Excel file. 

In this scenario, an FME user is a restaurant owner who wants to collect customer feedback. They want to create a simple application for their patrons to fill out, rating their overall experience and including personal contact 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 in the FME Flow Data Folder and can then be accessed via FME Flow > Resources > Data. To follow this exercise, you will require FME Form to author the workflow and FME Flow to create the Flow App. 

Step-by-Step Instructions 

This section walks you through the steps to create a simple workspace application for data collection. As optional content, this exercise also includes instructions for configuring the Emailer transformer to email the results of the survey to yourself whenever the form is completed. Part 1 will cover authoring the workspace with FME Workbench. Part 2 will focus on creating the Flow Workspace App in FME Flow. 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 read any data formats, as we will be collecting user-input data. Therefore, we can start the workflow with the Creator transformer. The Creator transformer has no input port; it creates features using the supplied parameters and sends them to the workspace for processing. 

In FME Workbench, add the Creator transformer to the canvas by typing "Creator". Next, add the AttributeManager transformer and, optionally, the Emailer transformer to the canvas. Connect the Creator transformer output port to the AttributeManager input port. If you choose to use the Emailer transformer in this exercise, connect the AttributeManager output port to the Emailer input port.

The Emailer transformer is included as an optional step in this exercise. We will configure the transformer in Part 1, Step 4: Configuring Emailer. If you do not want to include emailing results in your workflow, feel free to omit the Emailer transformer and skip Part 1, Step 4.

To add a writer, click on the Writer button located on the ribbon. In the Add Writer dialog: 

• Format: Microsoft Excel
• Dataset: /PatronData.xlsx
  • Optional: Include Date/Time functions to attach the DateTime to your Excel file name.
• Sheet Definition: Automatic

Then click 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. 

2. Create User Parameters

Next, we will create published User Parameters to feed into the workspace, allowing users to input data. 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. From this window, we can create new user parameters for user input. 

The first User Parameter we create will allow users to choose a rating that reflects their experience. Click the green Add button, then select the Choice type. 

• Type: Choice
• Parameter Identifier: RATING
• Prompt: Overall, how was your experience with our service?
• Published: Enabled
• Required: Enabled 
• Choice Configuration: Dropdown
  • Choices: 
    • Very Good
    • Fair
    • Poor
    • Don't Know
• Preserve Choice Order: Enabled 

Next, add another parameter for the customer name input

• Type: Text
• Parameter Identifier: NAME
• Prompt: Enter your first and last name
• Published: Enabled
• Required: Enabled
• Editor Syntax: Plain Text (Uniline)
• Default Value: John Smith

Now, add a parameter for phone number:

• Type: Number
• Parameter Idenfitier: PHONE
• Prompt: Enter your phone number (no spaces, dashes, or parentheses) 
• Published: Enabled
• Required: Enabled
• Number Configuration:
  • Lower Limit: None
  • Upper Limited: None
  • Numeric Precision: Integer
• Default Value: 123456789

Finally, if you choose to use the Emailer transformer, add a parameter for the email address. 

• Type: Text
• Parameter Identifier: EMAIL
• Prompt: Enter your email
• Published: Enabled
• Required: Enabled
• Editor Syntax: Plain Text (Uniline)
• Default Value: test@domain.com

After the workspace is published to FME Flow, we can control which parameters are visible to the app users. However, the order in which the parameters will be displayed can only be changed from this window in FME Form. Use the blue handles on the left of each parameter to arrange them in your desired order.

Click OK to save the User Parameters. 

3. Configure AttributeManager

The next step is to configure the AttributeManager transformer. We will create four new attributes in the AttributeManager transformer to match the values of the created user parameters. 

In the Output Attribute column, add these new attributes: 

• Name
• Email
• Phone Number
• Service Rating

To add the corresponding user parameters as values, click on the down arrow of the Value cell, select User Parameter, and then select the corresponding User Parameter for each attribute: 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. Optional: Configure and Authenticate Emailer Transformer

We can use the Emailer transformer to send an email every time the form is filled out by a patron. Three email services are supported: Generic SMTP, Gmail, and Microsoft Mail. To set up your connection, please refer to the Emailer documentation.

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

In the Emailer Parameters window, select your desired Email Service and then fill in required Connection parameters:

• For Generic SMTP email service, the host name, receiving port, and encryption must be specified. 
• For Gmail or Microsoft email service, a valid web connection must be specified.

Under Addressing, enter an email address in the From and To parameters. If the Gmail email service is being used, the From email address must match the account name of the Gmail Web Service connection. 

Under Message, set the Subject to “Patron Form Completed”. For the Body parameter, click on the down arrow and select Open Text Editor for easier editing. Instead of sending a static message, we will use the Feature Attributes that we created in AttributeManager to deliver a more dynamic and informative message. Set 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 OK, then save the workspace.

5. Publish to FME Flow 

Before we bring this workspace into FME Flow, run the translation to ensure it completes successfully. Publish the workspace to FME Flow using the following parameters. 

• Repository Name: Simple Web App
• Workspace Name: Create_Simple_Web_App_Form_for_Data_Collection.fmw
• Upload Packages: Emailer
• Register Service: Job Submitter

Click the drop-down below to learn how to publish to FME Flow. 

• To publish a workspace from FME Workbench to FME Flow, follow the generic instructions below using the specific details listed in the article. If the article does not have a specific repository name listed, we recommend creating a Training repository. If a specific service is not listed in the article, please use the default Job Submitter.

  1. Click Publish

  From the File menu, click Publish to FME Flow, or from the toolbar ribbon, click Publish.

  Toolbar Ribbon:
  
  
  File Menu:
  

  Deploy Menu (2025.1+):
  

  2. Add a Web Connection

  In the Publish to FME Flow wizard, a FME Flow connection needs to be selected or created. To create an FME Flow connection, click the drop-down under FME Flow Connection and select Connect to FME Flow.

  

  The following instructions are for a basic connection, but if your FME Flow is set up for Microsoft Azure, SAML, or Windows Credentials, please see the Using Web Connections to Connect to FME Flow documentation.

  An FME Flow Connection dialog will appear; here, we will set up the connection. The connection information and credentials can be obtained from your FME Flow Administrator. If you have not yet logged into FME Flow after installing, please do so prior to continuing, as you will be prompted to change the password from the default:
  Username: admin
  Password: admin

  • • Web Service: FME Flow

    • Server URL: http://localhost

    • Connection Name: Training FME Flow

    • Authentication: Basic

    • Username: your username

    • Password: your password

    Click OK. FME will try to authenticate the connection. Once authenticated, this connection will be available whenever you publish a workspace. The connection will only need to be created once.

  • • Web Service: FME Server

    • Connection Name: Training FME Server

    • Server URL: http://localhost

    • Username: your username

    • Password: your password

    Click Authenticate. FME will try to authenticate the connection. Once authenticated, this connection will be available whenever you publish a workspace. The connection will only need to be created once.

    Click Next to move to the Create Repository page of the dialog

  3. Create Repository

  Repositories are used to store groups of related items that have been published to FME Flow (similar to directories). Items such as workspaces, source data, custom formats, custom transformers, and templates can be published to a repository.

  If you need to create a new repository, click on the New button next to Repository Name. Enter the repository name and an optional description. Click OK to close the Create New Repository dialog.
  

  To select an existing repository, click the drop-down next to Repository Name and select the desired repository.
  

  4. Upload Files

  Some workspaces require additional files to run correctly on FME Flow, so these need to be uploaded along with the workspace. To upload files, enable Upload data files at the bottom of the dialog.

  When files are uploaded through the publishing menu, they are stored within the repository. If you want to upload folder files (such as geodatabases) or to specify where the files stored, the Select Files button allows you to do that. For detailed instructions on how to use the Select Files button, see the documentation.

  5. Register Services

  The final step before publishing a workspace is to register services. Services control how the data will be output after the workspace is run.

  

  Services return results in different forms:

  • Data Download Service returns results as a downloadable zip file

  • Data Streaming Service returns results as a data stream

  • Job Submitter Service accepts and runs workspace job requests

  • KML Network Link returns a KML Network Link that can be used in Google Earth

  • Notification Service allows for event-driven messaging

  Typically, the Job Submitter is always enabled, but multiple services can be enabled. Once services have been enabled, click Publish.

  6. Review Translation Log

  To confirm whether or not the workspace was published successfully, check the Translation Log. The Translation log will show which repository you published to, which files were included, and a quick link to run the workspace.

Part 2: FME Flow

1. Run Workspace on FME Flow 

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

To ensure the workspace runs on FME Flow, it is good practice to test it on the Run Workspace page. Log in to the FME Flow Web UI with your credentials, then go to the Run Workspace page. 

• Repository Name: Simple Web App
• Workspace Name: Create_Simple_Web_App_Form_for_Data_Collection.fmw
• Service: Job Submitter
• User Parameters:
  • Destination Microsoft Excel File: $(FME_SHAREDRESOURCE_DATA)/InformationForm/PatronData.xlsx. 

This will write the output Excel file to Resources > Data > InformationForm. Click Run. Once the job completes successfully, we can build the Flow Workspace App. 

2. Build Workspace Flow App

Navigate to the Flow Apps page from the sidebar; by default, it will open on the Workspace Apps tab. Click Create to open the Create Workspace App page. App Details:

• Name: PatronForm
• Title: Survey Form
• Description: Please tell us how we did and fill out the information below. Thank you!
• Repository Name: Simple Web App
• Workspace Name: Create_Simple_Web_App_Form_for_Data_Collection.fmw
• Service: Job Submitter

The Job Submitter service is ideal for our purposes because we do not want patrons who fill out the form via the FME Flow App to have access to the Excel sheet containing other patrons’ information - this way, the data will only flow in one direction.

Expand Parameter Defaults: 

• Destination Microsoft Excel File: $(FME_SHAREDRESOURCE_DATA)/InformationForm/PatronData.xlsx

  • Show in App: Disabled 

It is also important to ensure that the Show in App option for this parameter is not selected so that app users are not able to alter the write path.

Optionally, in the Customize section, you can style your Flow App with customized icons, logos, banners, backgrounds, headers, and footers. 

• The look and feel of your Automation app can be tailored to your organization’s colors, logo, and images. The parameters below used to customize the application run page are all optional. 

  The Icon, Logo, and Banner parameters only support JPEG and PNG file formats.

  a. Browser Icon (optional): The icon will be visible in the browser tab. There is a 300 KB file size limit for icon images. 

  b. Heading Background Color (optional): You can configure the banner's background color at the top of the app page. If it is transparent, it appears behind the Heading Banner. 

  c. Heading Logo (optional): This will appear above the Heading Banner and Heading Background Color. The image has a 1 MB file size limit. 

  d. Heading Banner (optional): This image will appear at the top of the app page. If transparent, it will be placed over the Heading Background Color. The image has a 1 MB file size limit. 

  e. Footer Text (optional): The text appears below the links on the app page. 

  f. Footer Logo (optional): This appears beneath the Footer Text and behind the Footer Banner if it is transparent. The image has a 1 MB file size limit. 

  g. Footer Banner (optional): An image to comprise the banner at the bottom of the app page. If transparent, it appears over the Footer Logo. There is a 1 MB file size limit for the image. 

  h. Run Immediately: Option to configure the Automation app to run immediately once the URL is invoked without displaying a run page. 

  

Click Save once you've completed the parameters. 

Click on the FME Flow App link to test out your new Flow Workspace App. Now you have a simple FME Flow Workspace App that takes user inputs and writes to an Excel file record by record!

To confirm that the output file writes successfully, navigate to Resources > Data > InformationForm. To download and inspect the file, click Actions, and select Download.

Some next steps to take this exercise 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 that sends an email to the patron each time the workspace runs, with restaurant promotions and events.

Additional Resources 

Getting Started with Sending and Receiving Email in FME Form and FME Flow
Getting Started with FME Flow Workspace Apps
Getting Started with Gallery Apps
Sending Email in FME: FME Workbench vs. FME Flow
Workspace Apps Documentation