Topic
  • 4 replies
  • Latest Post - ‏2013-03-15T22:27:22Z by HermannSW
JagadishVemugunta
JagadishVemugunta
37 Posts

Pinned topic How to add new HTML form data element in the MPG

‏2013-03-14T19:28:44Z |
I have the front end HTML form submitting to DataPower MPG. The MPG has pass this data and pass to the RESTful service on the backend. DataPower can directly submit the form-data to the Restful service backend, but my requirement is add an additional form field at runtime. How can I do in data power? Please advise
This is my HTML form. I need to add a hidden field "<input type="hidden" name="uid" value="xyz">" at runtime in the MPG. is this doable?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function submitform() {
document.myform.submit();
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My Test application for form submit</title>
</head>
<body>

<form name="myform" action="http://localhost:8000/aries/v1/dfs/getTrxInFileContent" method="POST">

<input type="hidden" name="trxId" value="1234">
My Link
</form>

</body>
</html>
Updated on 2013-03-15T22:27:22Z at 2013-03-15T22:27:22Z by HermannSW
  • HermannSW
    HermannSW
    4657 Posts

    Re: How to add new HTML form data element in the MPG

    ‏2013-03-15T08:27:18Z  
    Hi,

    > I have the front end HTML form submitting to DataPower MPG. The MPG has pass this data and pass to the RESTful service on the backend.
    > DataPower can directly submit the form-data to the Restful service backend, but my requirement is add an additional form field at runtime.
    > How can I do in data power? Please advise
    >
    in case your HTML form is XTHML you can just use a stylesheet and do an XML injection.

    If not, you need to be sure on the input encoding.
    In your sample I see UTF-8.

    Find below and attached a simple Transform binary action stylesheet which does what you requested.
    These two WSTE webcasts provide more details:
    http://www-01.ibm.com/support/docview.wss?uid=swg27022977
    http://www-01.ibm.com/support/docview.wss?uid=swg27022979

    
    $ cat inject.xsl <!-- Inject hidden field into UTF-8 encoded HTTP form --> <xsl:stylesheet version=
    "1.0" xmlns:xsl=
    "http://www.w3.org/1999/XSL/Transform" xmlns:dp=
    "http://www.datapower.com/extensions" xmlns:regexp=
    "http://exslt.org/regular-expressions" extension-element-prefixes=
    "dp" > <xsl:variable name=
    "inject"> <![CDATA[<input type=
    "hidden" name=
    "uid" value=
    "xyz">]]> </xsl:variable>   <xsl:variable name=
    "where" select=
    " '&lt;/form>' " />   <dp:input-mapping  href=
    "store:///pkcs7-convert-input.ffd" type=
    "ffd"/> <dp:output-mapping href=
    "store:///pkcs7-convert-input.ffd" type=
    "ffd"/>   <xsl:template match=
    "/"> <!-- base64 encoded (binary) input --> <xsl:variable name=
    "input64" select=
    "dp:binary-encode(/object/message/node())"/>   <!-- validate 
    
    for UTF-8 encoding and get raw input --> <xsl:variable name=
    "input" select=
    "dp:decode($input64, 'base-64')"/>   <!-- 
    
    do injection --> <xsl:variable name=
    "result" select=
    "regexp:replace( $input, $where, 
    '', concat($inject,$where) )
    " />   <!-- frame as required by dp:output-mapping --> <object> <message> <xsl:copy-of select=
    "dp:binary-decode(dp:encode($result, 'base-64'))"/> </message> </object> </xsl:template> </xsl:stylesheet> $
    


    And here you can see that it really works:
    
    $ coproc2 inject.xsl form.html http:
    //dp3-l3:2224 <!DOCTYPE html PUBLIC 
    "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type=
    "text/javascript"> function submitform() 
    { document.myform.submit(); 
    } </script>   <meta http-equiv=
    "Content-Type" content=
    "text/html; charset=UTF-8"> <title>My Test application 
    
    for form submit</title> </head> <body>   <form name=
    "myform" action=
    "http://localhost:8000/aries/v1/dfs/getTrxInFileContent" method=
    "POST">   <input type=
    "hidden" name=
    "trxId" value=
    "1234">   My Link   <input type=
    "hidden" name=
    "uid" value=
    "xyz"> </form>   </body> </html> $
    


     
    Hermann<myXsltBlog/> <myXsltTweets/> <myCE/>
  • JagadishVemugunta
    JagadishVemugunta
    37 Posts

    Re: How to add new HTML form data element in the MPG

    ‏2013-03-15T12:27:32Z  
    • HermannSW
    • ‏2013-03-15T08:27:18Z
    Hi,

    > I have the front end HTML form submitting to DataPower MPG. The MPG has pass this data and pass to the RESTful service on the backend.
    > DataPower can directly submit the form-data to the Restful service backend, but my requirement is add an additional form field at runtime.
    > How can I do in data power? Please advise
    >
    in case your HTML form is XTHML you can just use a stylesheet and do an XML injection.

    If not, you need to be sure on the input encoding.
    In your sample I see UTF-8.

    Find below and attached a simple Transform binary action stylesheet which does what you requested.
    These two WSTE webcasts provide more details:
    http://www-01.ibm.com/support/docview.wss?uid=swg27022977
    http://www-01.ibm.com/support/docview.wss?uid=swg27022979

    <pre class="jive-pre"> $ cat inject.xsl <!-- Inject hidden field into UTF-8 encoded HTTP form --> <xsl:stylesheet version= "1.0" xmlns:xsl= "http://www.w3.org/1999/XSL/Transform" xmlns:dp= "http://www.datapower.com/extensions" xmlns:regexp= "http://exslt.org/regular-expressions" extension-element-prefixes= "dp" > <xsl:variable name= "inject"> <![CDATA[<input type= "hidden" name= "uid" value= "xyz">]]> </xsl:variable> <xsl:variable name= "where" select= " '&lt;/form>' " /> <dp:input-mapping href= "store:///pkcs7-convert-input.ffd" type= "ffd"/> <dp:output-mapping href= "store:///pkcs7-convert-input.ffd" type= "ffd"/> <xsl:template match= "/"> <!-- base64 encoded (binary) input --> <xsl:variable name= "input64" select= "dp:binary-encode(/object/message/node())"/> <!-- validate for UTF-8 encoding and get raw input --> <xsl:variable name= "input" select= "dp:decode($input64, 'base-64')"/> <!-- do injection --> <xsl:variable name= "result" select= "regexp:replace( $input, $where, '', concat($inject,$where) ) " /> <!-- frame as required by dp:output-mapping --> <object> <message> <xsl:copy-of select= "dp:binary-decode(dp:encode($result, 'base-64'))"/> </message> </object> </xsl:template> </xsl:stylesheet> $ </pre>

    And here you can see that it really works:
    <pre class="jive-pre"> $ coproc2 inject.xsl form.html http: //dp3-l3:2224 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type= "text/javascript"> function submitform() { document.myform.submit(); } </script> <meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8"> <title>My Test application for form submit</title> </head> <body> <form name= "myform" action= "http://localhost:8000/aries/v1/dfs/getTrxInFileContent" method= "POST"> <input type= "hidden" name= "trxId" value= "1234"> My Link <input type= "hidden" name= "uid" value= "xyz"> </form> </body> </html> $ </pre>

     
    Hermann<myXsltBlog/> <myXsltTweets/> <myCE/>
    Just awesome Herman. Appreciate it.
  • JagadishVemugunta
    JagadishVemugunta
    37 Posts

    Re: How to add new HTML form data element in the MPG

    ‏2013-03-15T18:05:44Z  
    Just awesome Herman. Appreciate it.
    Herman, It was not working when the injected xsl is used in the binary transform. Even though the coproc2 tool shows the field gets inserted. By the time it goes to the rest service, it is going as "null" for the dynamically field.

    However, If I add the field directly in the form, it works

    My HTML form with userID inserted statically looks as below as this one works. Not sure if I am doing anything wrong.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script type="text/javascript">
    function submitform() {
    document.myform.submit();
    }
    </script>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>My Test application for form submit</title>
    </head>
    <body>

    <form name="myform" action="http://dphost:8000/" method="POST">

    <input type="hidden" name="trxId" value="123">
    My Link
    <input type="hidden" name="uid" value="abc">

    </form>

    </body>
    </html>
  • HermannSW
    HermannSW
    4657 Posts

    Re: How to add new HTML form data element in the MPG

    ‏2013-03-15T22:27:22Z  
    Herman, It was not working when the injected xsl is used in the binary transform. Even though the coproc2 tool shows the field gets inserted. By the time it goes to the rest service, it is going as "null" for the dynamically field.

    However, If I add the field directly in the form, it works

    My HTML form with userID inserted statically looks as below as this one works. Not sure if I am doing anything wrong.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script type="text/javascript">
    function submitform() {
    document.myform.submit();
    }
    </script>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>My Test application for form submit</title>
    </head>
    <body>

    <form name="myform" action="http://dphost:8000/" method="POST">

    <input type="hidden" name="trxId" value="123">
    My Link
    <input type="hidden" name="uid" value="abc">

    </form>

    </body>
    </html>
    I cannot tell based on what you describe what is wrong.
    As I have showne the stylesheet works.

    Please attach a simple service export to investigate.

     
    Hermann<myXsltBlog/> <myXsltTweets/> <myCE/>