Members Forums Knowledge Base Jobs Software User Groups Consultants

webMethods FAQ webMethods Glossary webMethods Ezine White Papers

Print this Article

Dan Green -- webMethods Ezine Columnist

Using HTML to submit data to Flow

By Dan Green

Building the input HTML

Our HTML document will begin with standard HTML tags. <HTML> indicates to the browser that the document is to be displayed and <HEAD> is used to describe that document. It is the items within the <BODY> tag that are the focus of our example. The <BODY> tag is what is displaying the the browser window.

Our HTML form will begin as follows:

1  <HTML>
2   <HEAD>
3     <TITLE>Submitting data to the webMethods Platform</TITLE>
4   </HEAD>
5   <BODY>

Next, we create our <FORM>. <FORM> has two attributes in our example -- ACTION and METHOD. The <FORM> tag tells the browser to start collecting data. The ACTION attribute is where to send that data and the METHOD attribute represents how to send that data.

Note that the ACTION is the exact namespace of the webMethods Flow we created earlier. Also, notice that we are using the "POST" method to send the data. There are other acceptable values for the METHOD attribute, but this article is not intended to be a tutorial for HTML.

The HTML input form is created with the following line of code:

6     <FORM ACTION=http://serverhost:serverport/invoke/wMUsers/htmlReply METHOD=POST>

Next, we create the input fields. Note that our text input is named "htmlInput". When submitting the data inside the <FORM> tags, the attribute NAME specificies the Name in the Name-Value relationship. Whatever values the user provides in the text box will be the value of "htmlInput".

Notice that the <INPUT> tag attribute NAME is the exact name that is expected in our webMethods Flow as an input. This is a case-sensitive field so any deviation from the proper spelling and casing will not yield the expected results

On the same line, we have included a generic "Submit" button. The TYPE attribute controls the display of the form <INPUT> tag -- "SUBMIT" is a button.

The above referenced HTML is as follows:

7     User input <INPUT TYPE=TEXT NAME=htmlInput> <INPUT TYPE=SUBMIT>

We next close out the <FORM>, <BODY> and <INPUT> tags, respectively. This signals the browser to stop collecting data (<FORM>) and that the document is at its end (<BODY> and <HTML>).

The HTML is as follows:

8     </FORM>
9   </BODY>
10 </HTML>

Save the HTML document to disk and open it using your favorite browser. The document will resemble the following:

HTML input form

The complete HTML input form is below for your convenience:

1  <HTML>
2   <HEAD>
3     <TITLE>Submitting data to the webMethods Platform</TITLE>
4   </HEAD>
5   <BODY>
6     <FORM ACTION=http://serverhost:serverport/invoke/wMUsers/htmlReply METHOD=POST>
7     User input <INPUT TYPE=TEXT NAME=htmlInput> <INPUT TYPE=SUBMIT>
8     </FORM>
9   </BODY>
10 </HTML>

Designing the output DSP

The DSP output will look very similar to the HTML input form. DSP is only different from HTML in that it is a server-side language which means that the webMethods Platform will examine it line-by-line for instructions before sending the document as HTML to the user's browser.

DSP can perform very complex operations but in our example, we will apply it to substitute values only.

As expected, our DSP output template will begin as follows:

1  <HTML>
2   <HEAD>
3     <TITLE>Submitting data to the webMethods Platform</TITLE>
4   </HEAD>
5   <BODY>

Next, we will substitute the webMethods Flow into our template using the DSP tag %value value%. In our webMethods Flow, we set the output value to "outputValue" so this is the value we must use in our DSP.

6     %value outputValue%

Then, we close our DSP using the following code:

7   </BODY>
8  </HTML>

The complete DSP output template is below for your convenience:

1  <HTML>
2   <HEAD>
3     <TITLE>Submitting data to the webMethods Platform</TITLE>
4   </HEAD>
5   <BODY>
6     %value outputValue%
7   </BODY>
8  </HTML>

Using DSP to format the Flow output

The last step is to add the DSP output template to the webMethods Flow. This will format the HTML output for the user.

In the Flow wMUsers:htmlReply, select the "Settings" tab and beneath "Service Output Template", select "New".

In the pop-up box, paste the DSP code above. Your template will resemble the following:

DSP Output template

This is plain vanilla HTML so we will expect the user's browser to display the substituted %value outputValue% and nothing else.

Select "Save" and save your Flow. We are now ready to test our HTML form against the Flow and DSP output tempate.

Testing our work

With our HTML form, our Flow and DSP template in place, we are ready to test.

Open your browser and load the HTML form.
Provide an input value in the text box for which you know the expected output.
Press the "Submit" button.

The HTML reply will display only the returned output value, as expected. The browser will resemble the following:

HTML response from webMethods Platform

If you browser is empty, examine your DSP template for proper case structure on your substituted variable names. If everything checks out, you lost the output variable from your pipeline. Go back and Unit Test until everything is in working order.

<<Prev 1 [2]

Go Deeper on the Subject: The wMUsers Discussion Forums

Dan Green is the Founder and Director of the wMUsers. He can be reached via email at .

Advertise at wMUsers