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.)

Alternatively, open the Welcome screen, click New at the left, then Project at the right and select the project type.

Tip: Click the Home icon icon at the top right to reopen the Welcome screen.

Note: In order to use the project, OL Connect Server and OL Connect Workflow must be installed on the local machine.

The wizard lets you select the folder in which you want the solution to be installed. Since Sample Projects are versioned (see Versioned projects), the software suggests to store it in the OL Connect folder that is located in your Documents folder. By default, all versioned project have their own folder under Documents/Connect.

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).

Finally, enter the username and password that will allow the software to access the Connect Server.

Testing and running the project

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

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).
Send the Workflow configuration to the Workflow service; see Saving and sending a Workflow Configuration in Workflow's Online Help.
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.)
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:

Locate the Workflow configuration in the Configurations\Workflow folder and open it in Connect Workflow.
Select the process.
Enable the Send to Folder step (step 2 in the process).
Send the Workflow configuration to the 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.

Tip: The saved file can be used to create a data mapping configuration.

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 OL 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.

Tip: Hover over the name of a script in the Scripts pane to highlight parts of the template that are affected by the script.

Most of the scripts in the Thank you folder directly insert data that were submitted via the Web form; see Variable data in text: scripts and placeholders.
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.

Open the form Web section and add inputs to the Web Form (see Using Form elements).
Save the template and send it to Workflow (see Sending files to Workflow).
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).
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.
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.

Tip: 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.
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).

Note: If you want the web pages to be responsive (have a different layout on screens of different sizes), you could add Media Queries to the style sheet (see Media Queries on MDN Web Docs), or start a new template with a wizard; see Creating a Web template with a Wizard.

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.