Dynamically generated input fields on a screen

Ken Papagno

Question

I have a situation where we are looking at using an external bank account verification system. The user enters their bank routing number, and their account number. Based on that data, the external system responds back with html that we need to display to the user to collect their online credentials, or whatever is being asked for, and there are hundreds of variations of how this small html block can come back. I want to be able to use the responses to the htm block, to be able to call the external service and register the external account. This will eventually give the ability for users to transfer funds or fund their new account.

How can I utilize external HTML, which I can place on the screen using an expression/un-encoded and get the responses back?
Example:
1. User enters a Bank Routing Number (122000247), a function is called and it returns a Bank Name(Wells Fargo Bank) and an internal identifier (5); Obviously Outsystems has no problems with that.

2. We call another function which we pass in the internal identifier (5) and it returns back HTML code which I need to display on the screen, to collect the users data, and then pass it on to another function call.

Obviously, we could strip off the form tag from the string, leaving just plain html. Unfortunately, this data varies in field names, number of fields, etc, so it can’t be hardcoded on the screen. I haven’t tried, but I’m also sure its not as simple as prefixing everything with wt_ as well.
How can I use the returned HTML form in Outsystems?
<form action="#">
<table border="1">
<tr>
<td>Username/SSN:</td>
<td>
<input type="text" name="LOGIN" value="" size="20" maxlength="40" />
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" name="PASSWORD" value="" size="20" maxlength="40"
/>
</td>
</tr>
<tr>
<td>Question1:</td>
<td>
<input type="text" name="OP_LOGIN1" value="" size="20" maxlength="40" />

</td>
</tr>
<tr>
<td>Answer1:</td>
<td>
<input type="text" name="OP_LOGIN2" value="" size="20" maxlength="40" />

</td>
</tr>
<tr>
<td>Question2:</td>
<td>
<input type="text" name="OP_LOGIN3" value="" size="20" maxlength="40" />

</td>
</tr>
<tr>
<td>Answer2:</td>
<td>
<input type="text" name="OP_LOGIN4" value="" size="20" maxlength="40" />

</td>
</tr>
<tr>
<td>Question3:</td>
<td>
<input type="text" name="OP_LOGIN5" value="" size="20" maxlength="40" />
</td>
</tr>
<tr>
<td>Answer3:</td>
<td>
<input type="text" name="OP_LOGIN6" value="" size="20" maxlength="40" />

</td>
</tr>
</table>
</form>

I need to be able to "receive" the OP_LOGIN1, 2,3,4,5, etc. values
Any suggestions / ideas?

05 Jun 2008

Tiago Simões

Staff

Hi Ken,

What you are trying to achieve is not very basic but here is an idea that might work:

javascript/pseudocode

onButtonClick()

  for each element in form

    commaSeparatedValues += element.value + ","

  document.location.href= "processForm.aspx?values=" + encodeURL(commaSeparatedValues)

(you can find several encodeURL javascript functions on the web)
And then create an OutSystems web screen (processForm) with a values parameter and process these concatenated values.

Cheers,
Tiago Simões

12 Jun 2008

1 reply

13 Jun 2008

Show thread

Hide thread

Ken Papagno

I had that idea in mind, I just didn't want to go down that path if I didn't have to. My other thought is that the html that is delivered is in a consistent table format. I played with the idea of writing an extension that would parse the html table and put the results into a record list to be returned to the OS App. The record list would also have an extra field called response. Once the app has the record list, I could put a repeating table records to display the question / input field and have the input field point to the table record response field.

Thanks for the suggestion!
Ken

13 Jun 2008

Janete Martins

Hi!

I'm using web blocks with one textarea inside. Each page I am building can have one or more textareas (it's dynamic). I need to have an unique id for each one. How can I do that if the input name only accepts strings?

04 Jul 2011

Janete Martins

Solved:
Using the extended properties instead of the Name.

05 Jul 2011

suraj mukherjee

Hii,

I am too facing the same problem ,Can anyone please help me out

09 Feb 2017

Guilherme Menescal Dantas

We too have had some problems regarding this dynamic input form generation.

You could parse the given HTML and retrieve field names. Feed them into a list containing webblocks, this webblocks contain a form, inside the form you have the label and the input field. These webblocks must have a save action and a validation action(if you want), then, in the parent screen you can have a button to perform all the actions within the webblocks (This can be achieved using events system). Hope this help, if you need more info just ask ;) .

10 Feb 2017

suraj mukherjee

hi ,

i tried to get the respone in an expession in which i inserted an iframe to get the html but i am unable to define

the source

10 Feb 2017

Guilherme Menescal Dantas

What you mean is that you assigned the response (which is a text with html content) to a variable and inserted it in an expression? If so, then set the "Escape content" property of that expression to no.

What this will do is to make the html be rendered.

kind regards

10 Feb 2017

suraj mukherjee

actually i am getting response but the issue is my response is a html form and has a submit button which directs to another site

10 Feb 2017

suraj mukherjee

but when i publish my os page the submit button dose'nt work

10 Feb 2017

Guilherme Menescal Dantas

Oh, of course, Suraj, that input button that you are using is not, very probably, a default button from outsystems, it came from the html that you retrieved.

To solve this I would:

1- Parse the HTML to retrieve Field names. (list)

2-From the input names list retrieved in step 1 I would create a dynamic form.

2.1- To create the dynamic form start by using a webscreen, in that webscreen you have a list, in that list each item is a webblock.

2.2- The webblock mentioned before will have an input which is the input identifier (somehow you must keep this in DB).

2.3- The Webblock must also contain a form, within that form the current input.

3- To use this approach you must get system events from forge to handle this type of architecture more easily.

Kind regards.

10 Feb 2017

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines