Sample Project: Submitting Data with Web Forms

The Submitting Data with Web Forms Sample Project creates an OL Connect project that responds to a request by serving a web page with a web form. When the form is submitted, it handles the submitted data, saving them to the Data Repository.

For an introduction to this Sample Project, see Sample Projects overview video on the OL Learn website (start at 16:50) or on Youtube: Submitting Data with Web Forms.

Installing the project

From the menu, select File > New > Sample Projects > Submitting Data with Web Forms to start the wizard. See also: Submitting Data with Web Forms - Sample Project.)

The wizard lets you select the folder in which you want the solution to be installed.
In the selected folder, the Sample Project will create two subfolders: Configurations and Workspace.
The project's resource files are saved to the Configurations folder.
The Workspace folder is used for debugging or running the solution. It has an In folder that may be used to monitor incoming data and an Out folder to write output files to.

The selected folder's path is saved to a global variable in the Workflow configuration (see The Workflow configuration).

Testing and running the project

Once the Sample Project has finished the installation, the project is ready to be tested.

1. If the templates and data mapping configurations haven't been sent to Workflow yet, do that first (see Sending files to Workflow). This requires that the Workflow service is running (see Starting the Workflow service in Workflow's Online Help).
2. Send the Workflow configuration to PlanetPress Workflow service; see Saving and sending a Workflow Configuration in Workflow's Online Help.
3. Access the web page by entering the following URL in a browser on the machine that runs Workflow: http://localhost:9090/form. (The process starts with a NodeJS Server Input task, and Workflow's NodeJS Server listens on port 9090 by default.)
4. Fill in some data and submit the form. You will now be presented with a Thank You web page.

Saving input as sample data

Testing a process in Debug mode is only possible with a sample data file. The process is pre-configured to use the Sample Data.xml file located in the Configurations\Data folder.
To create your own sample data file:

1. Locate the Workflow configuration in the Configurations\Workflow folder and open it in Connect Workflow.
2. Select the process.
3. Enable the Send to Folder step (step 2 in the process).
4. Send the Workflow configuration to PlanetPress Workflow service (see Saving and sending a Workflow Configuration) and run it again, with a custom name value.
   The Send to Folder step will now write the input data - the job file - to a file in the Workspace\Debug folder.

When you select the file as sample file (on the Debug ribbon), it can be used to debug the process. Note however that the process will not return the web page to a browser, as it wasn't started by a browser.

Project details

The web templates

Both web pages are designed in the WEB_FORM Web Page template. It contains a Web context with two Web pages: form and thank_you (see Web pages).

Styling is done via style sheets (see Local formatting versus style sheets). The style rules are in the context_web_styles.css file. Note that they use the HTML tag (e.g. section), ID (#theID) and/or the class (.theclass) of elements to select them. (See also: Selectors in Connect.)

Dynamic content is inserted by scripts, which are listed on the Scripts pane. You can double-click a script to open it.
The scripts in the Thank you folder only affect the thank_you Web page; on the form Web page, nothing matches their selectors.

• Most of the scripts in the Thank you folder directly insert data that were submitted via the Web form; see Inserting variable data directly (drag-and-drop).
• The Snippets script (also in the Thank you folder) loads two snippets, depending on the values of two data fields (see Loading a snippet via a script). Note that it selects the table, in order to insert the snippet after the table (via results.after(); see after()).
• The Year script puts the current year in the footer of both Web pages.

For more information about writing scripts, see: Writing your own scripts.

The Workflow configuration

The project's Workflow configuration contains just one process: an OL Connect Web process (see Web processes with OL Connect tasks).
Its NodeJS Server Input task has two HTTP Action entries: form and thank_you. This means the process will be triggered when the server receives a request that ends with either /form or /thank_you.

The request is saved to an XML file, which becomes the job file.

The Text Condition task checks if the request's header is thank_you. (For the function that is used to read the header from the job file, see: XML data selections.)
If it is, the tasks in the branch run. The submitted data are merged with the thank_you Web section and saved in Workflow's Data Repository.
Otherwise the main branch renders and returns the web form.
Note how the Section setting in the Create Web Content tasks determines which web page is outputted (double-click the task to open the properties).

The Delete task is an Output task that does nothing, actually; it doesn't even remove anything. However, this step is useful when running the project step by step in Debug mode. When it is followed by another task, the Create Web Content task returns its output to the Workflow process, where it can be viewed (click View as HTML).

The data mapping configuration

To extract the submitted data from the job file (the request XML), the process uses the data mapping configuration: WEB_FORM Data.
To open it, select File > Open from the menu and browse to the Configurations\Resources folder.

In order to create the data mapping configuration, the input data needed to be saved to a file (see Saving input as sample data).
The sample data file is located in the Configurations\Data folder, but you will also see it when you open the data mapping configuration itself.

For more information about data mapping configurations see The DataMapper.

Customizing the project

A project is a great starting point for building an OL Connect solution. This part explains how to make changes to the project.

Do you intend to expand the project into a solution where Workflow runs on a different machine that also has a different regional setting? Then indicate the desired encoding in the Designer preferences (see Sample Project deployment settings) before installing the project.

The form

If you want to add inputs to the form and use the submitted data in the Thank You web page, here's how to do that.

1. Open the form Web section and add inputs to the Web Form (see Using Form elements).
2. Save the template and send it to Workflow (see Sending files to Workflow).
3. Upload the Workflow configuration to the server (see Saving and sending a Workflow Configuration in Workflow's Online Help) and let the process save the input data to a file (see Saving input as sample data).
4. Use the saved file to add the new data to the data mapping configuration (see Opening a data mapping configuration). Send the data mapping configuration to Workflow.
5. Open the thank_you Web section and use the new data fields to personalize the page (see: Personalizing content). Then send the template to Workflow again.

   The Designer can have one data mapping configuration and one template open at the same time. Use the tabs at the top of the workspace to switch between the two. Click the synchronize button on the Data Model pane to make sure that the Data Models are the same in both.

6. Send the Workflow configuration to the server.

Web pages

Apart from the form, there are lots of ways to modify the template. You could add text, images and other elements (see Content elements) and change the layout of the web pages (see Styling and formatting).

Once the template is ready, send it to Workflow (see Sending files to Workflow).

Finally, in Workflow, adjust the process: double-click the Create Web Content task to open it, and select the new template. This is only necessary when the file name has changed.
Send the Workflow configuration to the server (see Saving and sending a Workflow Configuration in Workflow's Online Help).

Workflow configuration

Serving the two web pages could also be achieved using separate processes, but in fact it is more efficient to have a single process, as activity needs to be monitored for each process.

In real life the submitted data will probably not be stored in the Data Repository, but used differently. This means that the Push to Repository task will need to be replaced by the appropriate tasks, but that won't change the way the submitted data is retrieved.
To see how the current process does that, double-click the Push to Repository task and take a look at the task's properties. The xmlget() function, used in the Value fields, is a data selection function (see Data Selections). Data selection functions are available in many plugins, in any field that accepts variables. Try right-clicking a field and select Get Data Location from the contextual menu. (See also: Variable Task Properties.)

For general information about processes in Workflow see About Processes and Subprocesses, in the Online Help of Workflow.