Pega Mashup Data Passing
I'm trying to get constant communication between a host page and a Pega mashup. My problem is that there doesn't seem to be much information out there for how to do this. While there are some articles on here, some are lacking particular details, and others simply don't work. If I can do data-pega-event-onpagedata during the life of the mashup to go both directions that would be great, but it seems that method won't work. There is another method using the JavaScript doAction() but not all of these are working for me. Then there is an ability to make action objects, which while that too is somewhat unclear based on the available materials, it doesn't seem that I can pass data back and fourth.
I've been mostly trying to use the JavaScript method of doAction because this seems the most promising to me, but the documentation is outdated. Here are some articles on it.
JS Actions – https://pdn.pega.com/pega-web-mashup-page-javascript-actions/pega-web-mashup-page-javascript-actions - last updated 07/2016
Talking about it being Outdated – https://pdn.pega.com/community/product-support/question/doaction-returns-null-using-getgadgetinfo-and-getgadgetdata-pega
I'm trying to get constant communication between a host page and a Pega mashup. My problem is that there doesn't seem to be much information out there for how to do this. While there are some articles on here, some are lacking particular details, and others simply don't work. If I can do data-pega-event-onpagedata during the life of the mashup to go both directions that would be great, but it seems that method won't work. There is another method using the JavaScript doAction() but not all of these are working for me. Then there is an ability to make action objects, which while that too is somewhat unclear based on the available materials, it doesn't seem that I can pass data back and fourth.
I've been mostly trying to use the JavaScript method of doAction because this seems the most promising to me, but the documentation is outdated. Here are some articles on it.
JS Actions – https://pdn.pega.com/pega-web-mashup-page-javascript-actions/pega-web-mashup-page-javascript-actions - last updated 07/2016
Talking about it being Outdated – https://pdn.pega.com/community/product-support/question/doaction-returns-null-using-getgadgetinfo-and-getgadgetdata-pega
Talking about it being Outdated and a proposed solution (not working)- https://pdn.pega.com/support-articles/getgadgetdata-always-returns-undefined-when-using-mashup
Here for example is some code that I have been using to test but it won't work. Some functions do, such as the log off method, but the main methods that I would like to have are the getGadgetData and setGadgetData and getGadgetInfo - ultimately being able to pull up a particular case when the mashup loads and then continuously exchange data between the mashup and the left nav.
$(document).ready(function(){
$("table").hide();
$("table").slideDown(1000);
$("#testJavascriptAreaButton").click(function(){proofOfConcept();});
$("#logoutButton").click(function(){logout();});
$("#refreshButton").click(function(){refresh();});
$("#reloadButton").click(function(){reload();});
$("#gadgetInfoButton").click(function(){alert(getMashupInfo());});
$("#printButton").click(function(){printMashup();});
$("#runTests").click(function(){runTests();});
//--------------------------------\/ Basic Setup \/------------------------------------
function proofOfConcept(){
alert("This code will go through the proof of conecpt of JS data transfer");
var originalName = getMashupName()
alert("Getting original mashup name: "+ originalName);
var newMashEx = prompt("Please enter your new desired mashup name.","Enter a Mashup Name");
setMashupName(newMashEx);
var secondMashupName = getMashupName();
var resultText = "";
if(secondMashupName == newMashEx){
resultText = "Getting and Setting appears to have worked correctly!\n";
}
else{
resultText = "FAILED - It seems that either the setting or getting did not work correctly.\n";
}
resultText += "\nOriginal: " + originalName + "\nYour New Name: " + newMashEx + "\nCurrent Set Name: " + secondMashupName;
alert("Getting mashup name: " + getMashupName() + "\n\n" + resultText);
var finalMash = getMashupName();
}
//--------------------------------\/ Pega API Utilities \/------------------------------------
//------------------------------\/ Pega API Access methods \/------------------------------------
//working
function logout(){
pega.web.api.doAction("PegaGadget", "logoff");
}
//working
function refresh(){
pega.web.api.doAction("PegaGadget","refresh");
}
//not working
function reload(){
pega.web.api.doAction("PegaGadget","reload");
}
//not working
function setMashupName(newMashupName){
pega.web.api.doAction("PegaGadget","setGadgetData", "MashupName", newMashupName);
getMashupName();
}
//not working
function printMashup(){
var result = pega.web.api.doAction("PegaGadget","print");
alert("Print Result: " + result);
}
//not working
function getMashupName(){
//var mashName = pega.web.api.doAction("PegaGadget","getGadgetData", "[gadget/PegaGadget/MashupName]");
mashName = "defaultMashValue";
mashName = pega.web.api.doAction("PegaGadget","getGadgetData", "pyWorkPage.MashupName", {callback: testCallback});
return mashName;
}
function getMashupInfo(){
var returnInfo = "Getting case info...\nReturned Data: ";
returnInfo += pega.web.api.doAction("PegaGadget","getGadgetInfo");
return returnInfo;
}
//not working
function testCallback(){
var thisInfo = pega.web.api.doAction("PegaGadget", "getGadgetInfo");
}
function getRealName(rtnValue){
alert("Current Operator First Name: " + rtnValue);
}
/*
This function is used to show different ways in which I have tried to use JS to access data in a pega gadget.
*/
function testGetGadgetInfo(){
var testResult1 = "default";
var testResult2 = "default";
var testResult3 = "default";
var testResult4 = "default";
var testResult5 = "default";
var testResult6 = "default";
var testResult7 = "default";
var testResult8 = "default";
var testResult9 = "default";
var testResult21 = "default";
var testResult22 = "default";
var testResult23 = "default";
var testResult24 = "default";
var testResult25 = "default";
var testResult26 = "default";
var testResult27 = "default";
var testResult28 = "default";
var testResult29 = "default";
testResult1 = pega.web.api.doAction("PegaGadget","getGadgetData", "[gadget/PegaGadget/.pyID]");// Copied from example
testResult2 = pega.web.api.doAction("PegaGadget","getGadgetData", "[gadget/PegaGadget/pyWorkPage]");
testResult3 = pega.web.api.doAction("PegaGadget","getGadgetData", "[gadget/PegaGadget/.pyWorkPage]");
testResult4 = pega.web.api.doAction("PegaGadget","getGadgetData", "MashupName");
testResult5 = pega.web.api.doAction("PegaGadget","getGadgetData", ".MashupName");
testResult6 = pega.web.api.doAction("PegaGadget","getGadgetData", "[gadget/PegaGadget/MashupName]");
testResult7 = pega.web.api.doAction("PegaGadget","getGadgetData", "[gadget/PegaGadget/.MashupName]");
testResult8 = pega.web.api.doAction("PegaGadget","getGadgetData", "[gadget/PegaGadget/.pyWorkPage.MashupName]");
testResult9 = pega.web.api.doAction("PegaGadget","getGadgetData", "[gadget/PegaGadget/pyWorkPage.MashupName]");
testResult21 = pega.web.api.doAction("PegaGadget","getGadgetData", "[gadget/PegaGadget/.pyID]", {callback: testCallback});// Copied from example
testResult22 = pega.web.api.doAction("PegaGadget","getGadgetData", "[gadget/PegaGadget/pyWorkPage]", {callback: testCallback});
testResult23 = pega.web.api.doAction("PegaGadget","getGadgetData", "[gadget/PegaGadget/.pyWorkPage]", {callback: testCallback});
testResult24 = pega.web.api.doAction("PegaGadget","getGadgetData", "MashupName", {callback: testCallback});
testResult25 = pega.web.api.doAction("PegaGadget","getGadgetData", ".MashupName", {callback: testCallback});
testResult26 = pega.web.api.doAction("PegaGadget","getGadgetData", "[gadget/PegaGadget/MashupName]", {callback: testCallback});
testResult27 = pega.web.api.doAction("PegaGadget","getGadgetData", "[gadget/PegaGadget/.MashupName]", {callback: testCallback});
testResult28 = pega.web.api.doAction("PegaGadget","getGadgetData", "[gadget/PegaGadget/.pyWorkPage.MashupName]", {callback: testCallback});
testResult29 = pega.web.api.doAction("PegaGadget","getGadgetData", "[gadget/PegaGadget/pyWorkPage.MashupName]", {callback: testCallback});
var outputText = "Getting mahup values\nResults for getGadgetData testing...\n\n";
outputText += "Test 1: " + testResult1 + "\n";
outputText += "Test 2: " + testResult2 + "\n";
outputText += "Test 3: " + testResult3 + "\n";
outputText += "Test 4: " + testResult4 + "\n";
outputText += "Test 5: " + testResult5 + "\n";
outputText += "Test 6: " + testResult6 + "\n";
outputText += "Test 7: " + testResult7 + "\n";
outputText += "Test 8: " + testResult8 + "\n";
outputText += "Test 9: " + testResult9 + "\n";
outputText += "Test 21: " + testResult21 + "\n";
outputText += "Test 22: " + testResult22 + "\n";
outputText += "Test 23: " + testResult23 + "\n";
outputText += "Test 24: " + testResult24 + "\n";
outputText += "Test 25: " + testResult25 + "\n";
outputText += "Test 26: " + testResult26 + "\n";
outputText += "Test 27: " + testResult27 + "\n";
outputText += "Test 28: " + testResult28 + "\n";
outputText += "Test 29: " + testResult29 + "\n";
alert(outputText);
}
/*
This function is used to show different ways in which I have tried to use JS to access data in a pega gadget.
*/
function testSetGadgetInfo(){
var testResult1 = "default";
var testResult2 = "default";
var testResult3 = "default";
var testResult4 = "default";
var testResult5 = "default";
var testResult6 = "default";
var testResult7 = "default";
var testResult8 = "default";
var testResult9 = "default";
testResult1 = pega.web.api.doAction("PegaGadget","setGadgetData", "[gadget/PegaGadget/.pyID]", "NEWVALUE");// Copied from example
testResult2 = pega.web.api.doAction("PegaGadget","setGadgetData", "[gadget/PegaGadget/pyWorkPage]", "NEWVALUE");
testResult3 = pega.web.api.doAction("PegaGadget","setGadgetData", "[gadget/PegaGadget/.pyWorkPage]", "NEWVALUE");
testResult4 = pega.web.api.doAction("PegaGadget","setGadgetData", "MashupName", "NEWVALUE");
testResult5 = pega.web.api.doAction("PegaGadget","setGadgetData", ".MashupName", "NEWVALUE");
testResult6 = pega.web.api.doAction("PegaGadget","setGadgetData", "[gadget/PegaGadget/MashupName]", "NEWVALUE");
testResult7 = pega.web.api.doAction("PegaGadget","setGadgetData", "[gadget/PegaGadget/.MashupName]", "NEWVALUE");
testResult8 = pega.web.api.doAction("PegaGadget","setGadgetData", "[gadget/PegaGadget/.pyWorkPage.MashupName]", "NEWVALUE");
testResult9 = pega.web.api.doAction("PegaGadget","setGadgetData", "[gadget/PegaGadget/pyWorkPage.MashupName]", "NEWVALUE");
var outputText = "Setting Mashup Values\nReturn values from functions for setGadgetData testing...\n\n";
outputText += "Test 1: " + testResult1 + "\n";
outputText += "Test 2: " + testResult2 + "\n";
outputText += "Test 3: " + testResult3 + "\n";
outputText += "Test 4: " + testResult4 + "\n";
outputText += "Test 5: " + testResult5 + "\n";
outputText += "Test 6: " + testResult6 + "\n";
outputText += "Test 7: " + testResult7 + "\n";
outputText += "Test 8: " + testResult8 + "\n";
outputText += "Test 9: " + testResult9 + "\n";
alert(outputText);
}
function runTests(){
testSetGadgetInfo();
testGetGadgetInfo();
alert(getMashupInfo());
}
});
Notice how I attempted to use many methods here but all result in a return on the getters with 'undefined'
For reference, keep in mind that when attempting to access these, I have the case opened in the mashup pane, and have a value populated in .pyWorkPage.MashupName
Pegasystems Inc.
IN
The pega.web.api.doAction API execution is asynchronously, as mashup internally uses HTML5 postMessage for cross-window communication.
The proofOfConcept should be as follows
function proofOfConcept() {
alert("This code will go through the proof of conecpt of JS data transfer");
var originalName = "";
getMashupName(function(mashupName) {
originalName = mashupName;
alert("Getting original mashup name: " + originalName);
var newMashEx = prompt("Please enter your new desired mashup name.", "Enter a Mashup Name");
setMashupName(newMashEx, function() {
getMashupName(function(nmashupName) {
var secondMashupName = nmashupName;
var resultText = "";
if (secondMashupName == newMashEx) {
resultText = "Getting and Setting appears to have worked correctly!\n";
} else {
resultText = "FAILED - It seems that either the setting or getting did not work correctly.\n";
}
resultText += "\nOriginal: " + originalName + "\nYour New Name: " + newMashEx + "\nCurrent Set Name: " + secondMashupName;
alert("Getting mashup name: " + getMashupName() + "\n\n" + resultText);
var finalMash = getMashupName();
});
});
});
}
Similarly the set and get methods should as as follows. (I've used LastName for my testing as I've that property in my case)
The pega.web.api.doAction API execution is asynchronously, as mashup internally uses HTML5 postMessage for cross-window communication.
The proofOfConcept should be as follows
function proofOfConcept() {
alert("This code will go through the proof of conecpt of JS data transfer");
var originalName = "";
getMashupName(function(mashupName) {
originalName = mashupName;
alert("Getting original mashup name: " + originalName);
var newMashEx = prompt("Please enter your new desired mashup name.", "Enter a Mashup Name");
setMashupName(newMashEx, function() {
getMashupName(function(nmashupName) {
var secondMashupName = nmashupName;
var resultText = "";
if (secondMashupName == newMashEx) {
resultText = "Getting and Setting appears to have worked correctly!\n";
} else {
resultText = "FAILED - It seems that either the setting or getting did not work correctly.\n";
}
resultText += "\nOriginal: " + originalName + "\nYour New Name: " + newMashEx + "\nCurrent Set Name: " + secondMashupName;
alert("Getting mashup name: " + getMashupName() + "\n\n" + resultText);
var finalMash = getMashupName();
});
});
});
}
Similarly the set and get methods should as as follows. (I've used LastName for my testing as I've that property in my case)
function setMashupName(newMashupName, myCallback) {
pega.web.api.doAction("PegaGadget", "setGadgetData", "pyWorkPage.LastName", newMashupName, {
callback: myCallback
});
}
function getMashupName(myCallback) {
//var mashName = pega.web.api.doAction("PegaGadget","getGadgetData", "[gadget/PegaGadget/MashupName]");
mashName = "defaultMashValue";
mashName = pega.web.api.doAction("PegaGadget", "getGadgetData", "pyWorkPage.LastName", {
callback: function() {
myCallback && myCallback.apply(null, arguments);
}
});
}
OneAmerica
US
Thank you for your reply. I copied what you have and made necessary changes. It isn't executing past the first alert, but also not throwing any errors in the JS console. Were you able to get this working just as you showed? Otherwise, do you see any issues with mine (see below new code snippet). Thanks!
Thank you for your reply. I copied what you have and made necessary changes. It isn't executing past the first alert, but also not throwing any errors in the JS console. Were you able to get this working just as you showed? Otherwise, do you see any issues with mine (see below new code snippet). Thanks!
function setMashupNamePDNAnswer(newMashupName, myCallback) {
pega.web.api.doAction("PegaGadget", "setGadgetData", "pyWorkPage.MashupName", newMashupName, {
callback: myCallback
});
}
function getMashupNamePDNAnswer(myCallback) {
//var mashName = pega.web.api.doAction("PegaGadget","getGadgetData", "[gadget/PegaGadget/MashupName]");
mashName = "defaultMashValue";
mashName = pega.web.api.doAction("PegaGadget", "getGadgetData", "pyWorkPage.MashupName", {
callback: function() {
}
});
}
function proofOfConceptPDNAnswer() {
alert("This code will go through the proof of conecpt of JS data transfer via the PDN Answer");
var originalName = "";
var mashupName = "";
getMashupNamePDNAnswer(function(mashupName) {
originalName = mashupName;
alert("Getting original mashup name: " + originalName);
var nmashupName = prompt("Please enter your new desired mashup name.", "Enter a Mashup Name");
setMashupNamePDNAnswer(newMashEx, function() {
getMashupNamePDNAnswer(function(nmashupName) {
var secondMashupName = nmashupName;
var resultText = "";
if (secondMashupName == newMashEx) {
resultText = "Getting and Setting appears to have worked correctly!\n";
} else {
resultText = "FAILED - It seems that either the setting or getting did not work correctly.\n";
}
resultText += "\nOriginal: " + originalName + "\nYour New Name: " + newMashEx + "\nCurrent Set Name: " + secondMashupName;
alert("Getting mashup name: " + getMashupNamePDNAnswer() + "\n\n" + resultText);
var finalMash = getMashupNamePDNAnswer();
});
});
});
}
Pegasystems Inc.
IN
yes, i did get the "Getting and Setting appears to have worked correctly!" message when i ran through the code.
can we have a quick call (7-8)PM IST ?
OneAmerica
US
I have not yet found a clean solution to passing data back and fourth using the Pega JavaScript API. I've attempted some else's proposed solution and it isn't working for me. We also have Pega developers on-sight who were also struggling to get this to work. We have since stopped looking into it and will pick it back up later. Will update if I eventually find a solution.