Hi,

This is a sample application that integrates Pega 7 UI with AngularJS using one iframe (easier to style and control scrolling). To use it please unzip the attached zip file into your Tomcat webapp directory. To configure Pega events please include the following code in a section and include that section in your confirm harness.

<div style="background-color:#FFFFDB;">

<h1>Pega Confirm Harness...</h1>

<script>
parent.postMessage("setHeight|150px", "*");
function closePegaSection() { 
  parent.postMessage("close|", "*");
}

</script>

<ahref="#" onclick="javascript:closePegaSection(); return false;">Close Pega section and return to main page...</a>

<br/><br/>

</div>

Notice the two way communication between AngularJS and Pega  (Angular button shows Pega and Pega Confirm harness resize its height). You can use this application as is if both the Pega and AngularJS application run in the same application server. If that is not the case you need to configure your Pega application server to enable CORS. Here ishow to do it in Tomcat: http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html. I have also attached my web.xml as an example for CORS configuration.

Here is the end result: