Question
Synechron Inc.
US
Last activity: 23 Aug 2017 8:27 EDT
How to View External Application in IFRAME Through HTTP POST in Pega
In our Application we have to show an External Application through HTTP POST and it would be in IFRAME. Is there a way to achieve this?
For POC Puspose, we used this below code. It doesn't bring anything in Pega; but in Stand Alone execution (save the code into .html file and open it in Browser) it populates result.
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='application/javascript'>
function loadGraph() {
var frm = document.getElementById("post_form");
if (frm) {
frm.submit();
//document.forms[0].submit();
}
}
</script>
<body >
<form action='https://chart.googleapis.com/chart' method='POST' id='post_form' target="output_frame">
<input type='hidden' name='cht' value='lc'/>
<input type='hidden' name='chtt' value='This is | my chart'/>
<input type='hidden' name='chs' value='300x200'/>
<input type='hidden' name='chxt' value='x'/>
<input type='hidden' name='chd' value='t:40,20,50,20,100'/>
</form>
<iframe name="output_frame" width="500" height="290" onload="loadGraph()">
</iframe>
</body>
</html>
Stand Alone Execution Result:
In our Application we have to show an External Application through HTTP POST and it would be in IFRAME. Is there a way to achieve this?
For POC Puspose, we used this below code. It doesn't bring anything in Pega; but in Stand Alone execution (save the code into .html file and open it in Browser) it populates result.
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='application/javascript'>
function loadGraph() {
var frm = document.getElementById("post_form");
if (frm) {
frm.submit();
//document.forms[0].submit();
}
}
</script>
<body >
<form action='https://chart.googleapis.com/chart' method='POST' id='post_form' target="output_frame">
<input type='hidden' name='cht' value='lc'/>
<input type='hidden' name='chtt' value='This is | my chart'/>
<input type='hidden' name='chs' value='300x200'/>
<input type='hidden' name='chxt' value='x'/>
<input type='hidden' name='chd' value='t:40,20,50,20,100'/>
</form>
<iframe name="output_frame" width="500" height="290" onload="loadGraph()">
</iframe>
</body>
</html>
Stand Alone Execution Result:
Pega Embeded Result:
In the Images Tab, we have used a Section with the HTML Code and onclick of that Tab, Code needs to be executed and the Result will be Populated as Chart.
Any advise please.
Accepted Solution
Synechron Inc.
US
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='application/javascript'>
var loadGraphCounterCheck = false;
/***Create a element which would be type of Form****/
var POSTURL= "Set the URL" ;
var Form1 = document.createElement("form");
Form1.setAttribute("method", "post");
Form1.setAttribute("action",POSTURL);
Form1.setAttribute("target", "profile_frame");
var i=0;
var hiddenField = [];
<pega:forEach name="SamplePage.pxResults">
/***set elements to Hidden Field from Sample Page List****/
var a="<pega:reference name='$THIS.Key' mode='javascript'/>";
var b="<pega:reference name='$THIS.pyValue' mode='javascript'/>";
hiddenField[i] = document.createElement("input");
hiddenField[i].setAttribute("name", a);
hiddenField[i].setAttribute("value",b.trim());
hiddenField[i].setAttribute("type", "hidden");
Form1.appendChild(hiddenField[i]);
document.body.appendChild(Form1);
i++;
</pega:forEach>
/***Call this function OnClick of any Tab****/
function
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='application/javascript'>
var loadGraphCounterCheck = false;
/***Create a element which would be type of Form****/
var POSTURL= "Set the URL" ;
var Form1 = document.createElement("form");
Form1.setAttribute("method", "post");
Form1.setAttribute("action",POSTURL);
Form1.setAttribute("target", "profile_frame");
var i=0;
var hiddenField = [];
<pega:forEach name="SamplePage.pxResults">
/***set elements to Hidden Field from Sample Page List****/
var a="<pega:reference name='$THIS.Key' mode='javascript'/>";
var b="<pega:reference name='$THIS.pyValue' mode='javascript'/>";
hiddenField[i] = document.createElement("input");
hiddenField[i].setAttribute("name", a);
hiddenField[i].setAttribute("value",b.trim());
hiddenField[i].setAttribute("type", "hidden");
Form1.appendChild(hiddenField[i]);
document.body.appendChild(Form1);
i++;
</pega:forEach>
/***Call this function OnClick of any Tab****/
function loadProfile() {
if (!loadGraphCounterCheck) {
Form1.submit();
/**alert("Here");**/
/***set the flag to true so that it won't submit again****/
loadGraphCounterCheck = true;
}
}
</pega:when>
</script>
</head>
<body >
<pega:choose>
<pega:when test='Test This for HTTP-Get Method'>
<iframe name="profile_frame" src= "Set the URL for Get" id="profile_frame" width="100" height="750" onload="">
</iframe>
</pega:when>
<pega:otherwise>
/***This is for Post Method****/
<iframe name="profile_frame" src="" id="profile_frame" width="100" height="750" onload="">
</iframe>
</pega:otherwise>
</pega:choose>
</body>
</html>
Well, the above code resolves the issue. Please refer to the Attached doc as well for Fucntion Calling.
Pegasystems Inc.
US
As a good practice, always check the 'related posts', e.g., this one might be helpful: https://collaborate.pega.com/question/how-can-we-launch-url-pass-parameters-using-http-post-instead-query-params-pega-prpc-62
Synechron Inc.
US
I have already tried this and then created this Post. Thanks.
Pegasystems Inc.
IN
1. Try creating a HTML file within PEGA and use the same code and create a HTML fragment later to refer this HTML.
2. Post that, include the fragment inside a section by using a code like this :
<pega:include name=fragment name " type="Rule-HTML-Fragment"/>
Try it and share your result
JPMorgan Chase
US
Hi
Looks like the src attribute is missing for iframe tag. It should be as shown below.
<iframe src = "https://chart.googleapis.com/chart" name="output_frame" width="500" height="290" onload="loadGraph()">
</iframe>
Looks like your code is not yet complete. If you use the above URL , you need to whitelist your application url on the provider end. Check on this. Putting code in a section as html should work. It will not be an issue. Use developer tools when you test the iframe you will see exact issue in console.
Regards
Sam
Synechron Inc.
US
SRC attribute is not required here. Since we gave name for this IFrame, it will refer the Form's URL details. Please save as the HTML code into one .html file and load it in browser. It will load the data. if the code is not a complete one it would not have. Thanks.
JPMorgan Chase
US
Give it a try by mentioning src attribute in same code this will work also remove target attribute in form. I am not sure why this the behavior. Also with your code, the form value is coming as null .
Accepted Solution
Synechron Inc.
US
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='application/javascript'>
var loadGraphCounterCheck = false;
/***Create a element which would be type of Form****/
var POSTURL= "Set the URL" ;
var Form1 = document.createElement("form");
Form1.setAttribute("method", "post");
Form1.setAttribute("action",POSTURL);
Form1.setAttribute("target", "profile_frame");
var i=0;
var hiddenField = [];
<pega:forEach name="SamplePage.pxResults">
/***set elements to Hidden Field from Sample Page List****/
var a="<pega:reference name='$THIS.Key' mode='javascript'/>";
var b="<pega:reference name='$THIS.pyValue' mode='javascript'/>";
hiddenField[i] = document.createElement("input");
hiddenField[i].setAttribute("name", a);
hiddenField[i].setAttribute("value",b.trim());
hiddenField[i].setAttribute("type", "hidden");
Form1.appendChild(hiddenField[i]);
document.body.appendChild(Form1);
i++;
</pega:forEach>
/***Call this function OnClick of any Tab****/
function
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='application/javascript'>
var loadGraphCounterCheck = false;
/***Create a element which would be type of Form****/
var POSTURL= "Set the URL" ;
var Form1 = document.createElement("form");
Form1.setAttribute("method", "post");
Form1.setAttribute("action",POSTURL);
Form1.setAttribute("target", "profile_frame");
var i=0;
var hiddenField = [];
<pega:forEach name="SamplePage.pxResults">
/***set elements to Hidden Field from Sample Page List****/
var a="<pega:reference name='$THIS.Key' mode='javascript'/>";
var b="<pega:reference name='$THIS.pyValue' mode='javascript'/>";
hiddenField[i] = document.createElement("input");
hiddenField[i].setAttribute("name", a);
hiddenField[i].setAttribute("value",b.trim());
hiddenField[i].setAttribute("type", "hidden");
Form1.appendChild(hiddenField[i]);
document.body.appendChild(Form1);
i++;
</pega:forEach>
/***Call this function OnClick of any Tab****/
function loadProfile() {
if (!loadGraphCounterCheck) {
Form1.submit();
/**alert("Here");**/
/***set the flag to true so that it won't submit again****/
loadGraphCounterCheck = true;
}
}
</pega:when>
</script>
</head>
<body >
<pega:choose>
<pega:when test='Test This for HTTP-Get Method'>
<iframe name="profile_frame" src= "Set the URL for Get" id="profile_frame" width="100" height="750" onload="">
</iframe>
</pega:when>
<pega:otherwise>
/***This is for Post Method****/
<iframe name="profile_frame" src="" id="profile_frame" width="100" height="750" onload="">
</iframe>
</pega:otherwise>
</pega:choose>
</body>
</html>
Well, the above code resolves the issue. Please refer to the Attached doc as well for Fucntion Calling.