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

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
    4372 Posts
    ACCEPTED ANSWER

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

    ‏2013-03-15T08:27:18Z  in response to JagadishVemugunta
    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
      ACCEPTED ANSWER

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

      ‏2013-03-15T12:27:32Z  in response to HermannSW
      Just awesome Herman. Appreciate it.
      • JagadishVemugunta
        JagadishVemugunta
        37 Posts
        ACCEPTED ANSWER

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

        ‏2013-03-15T18:05:44Z  in response to JagadishVemugunta
        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>