Sample Project: Serving a Web Page

The Serving a Web Page Sample Project creates an OL Connect project that responds to a request by serving a web page. This project extracts data from a parameter in the given URL and shows the value on the web page.

For an introduction to this Sample Project, see Sample Projects overview video on the OL Learn website (start at 12:44) or on Youtube: Serving a Web Page.

Installing the project

To start the Sample Project, select File > New > Sample Projects > Serving a Web Page from the menu. (See also: Serving a Web Page - 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 Home 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).

To test the project:

  1. Send the Workflow configuration to the OL Connect Workflow service; see Saving and sending a Workflow Configuration in Workflow's Online Help.

  2. Access the web page by entering the following URL in a browser on the machine that runs Workflow: http://localhost:9090/hello.

  3. Follow the instructions on the page to see how values in the URL change the text of the page.

Saving input as sample data

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 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 template

The web page is designed in the WEB_HELLO Web Page template. It contains one Web section (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 how they combine the HTML tag, ID and class of elements to select them. (See also: Selectors in OL Connect.)

There are only two scripts in the template, as you can see on the Scripts pane. You can double-click to open them.

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

  • The My name is script looks for an element that has the ID: hero. Inside that element it looks for the text: @name@ and replaces that with either the default name ("John Doe") or the name given in the URL.
  • The Year script puts the current year in the footer.

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

Tip: You don't have to write a script yourself if you just want to insert some data directly into the template. You could simply drag-and-drop the data on the template or use a wizard (see: Variable data in the text).

The Workflow configuration

The project's Workflow configuration, Serving a Web Page.OL-workflow, contains just one process. It is a simple OL Connect Web process (see Web processes with OL Connect tasks).

The NodeJS Server Input task's HTTP action is set to hello. This means that this process will be invoked whenever someone tries to access the Workflow server with this URL: http://{server's address}/hello.

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. If it wouldn't be followed by another task, the Create Web Content task would not return its output to the Workflow process, where it can be viewed (click View as HTML).

The data mapping configuration

When the browser sends the request to Workflow, the Workflow process starts and puts the request into XML, including the values that were given in the URL. To extract those values from the 'job file' (the XML) the process uses a data mapping configuration, made with the DataMapper: WEB_HELLO Data.

To open the data mapping configuration, select File > Open from the menu and browse to the Configurations\Resources folder.

To create the data mapping configuration, the input data needed to be saved to a file first (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.

Input data

If you want to add other parameters to the URL and use those data in the template, here's how to do that:

  1. Run the project, add more parameters to the URL and let the process save the input data to a file (see Saving input as sample data).

  2. Use the file to create a new data mapping configuration that extracts the additional data. (See Creating a new data mapping configuration.)

  3. Send the new data mapping configuration to Workflow (see Sending files to Workflow).

  4. Open the Workflow configuration, double-click the Execute Data Mapping task to open it and select the new data mapping configuration.

  5. Use the data in the template (see: Personalizing content), send the new template to Workflow and select it in the properties of the Create Web Content task.

  6. Send the Workflow configuration to the server (see Saving and sending a Workflow Configuration in Workflow's Online Help).

Alternatively you could use input data from a Web form. This is demonstrated by another Sample Project: .

Web page

There are countless ways to modify the template. You could add text, images and other elements (see Content elements) and change the layout (see Styling and formatting).

In order to further personalize the web page, open your data mapping configuration (or JSON data, if the input data will be in that format; see Adding JSON sample data) and use the data fields to personalize the page. (See: Personalizing content.)

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.

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 page to be responsive (have a different layout on screens of different sizes), it is recommended to start a new template with a wizard; see Creating a Web template with a Wizard.

Workflow configuration

The current Workflow configuration is very simple. In a real-life solution, a process that generates a web page could be part of a larger solution, in which, for example, emails are generated with a link to a personal landing page.

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