Pega Mashup does not resize after expand
Hi all,
my embedded mashup does not resize the window height, after I expand a collapsable layout.
It creates a second vertical scrollbar. I have already read some solutions about to set the overflow style=hidden, but in opinion it isn't a clean solution. In the mashup configuration the data-pega-resizetype is set to "stretch", but it doesn't resize after I click on the expand icon. In the UserWorkForm I have added following script, but it hasn't any effect.
pega.u.d.attachOnload(function(){
pega.u.d.mashupResizeHandler();
},true);
}
Have you got any ideas? Thank you.
Pegasystems Inc.
US
The Pega Mashup script (included in the snippet using https://hostname/prweb?pyActivity=pzIncludeMashupScripts) inserts the iframe element into the DOM but also handles the resizing the iframe automatically. Every time a change in the Pega UI is made (though a refresh section, client side visible when, expand/collapse…), a message is sent from the Mashup iframe to the top level document using postMessage (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) which allows to communicate between iframe and top document running on different domains. In the top level document, the code from the script pzIncludeMashup will automatically adjust the height of the iframe to fit the inner content.
To test if this is correctly setup, find the Mashup iframe - you will see an inline style with the height property- change the value of height - if mashup is correctly configured, whatever value you enter in height will immediately be resized to the correct height value of the iframe - if the height value is not updating, then it is because you have not configured the url of the top level document into your application rule
The Pega Mashup script (included in the snippet using https://hostname/prweb?pyActivity=pzIncludeMashupScripts) inserts the iframe element into the DOM but also handles the resizing the iframe automatically. Every time a change in the Pega UI is made (though a refresh section, client side visible when, expand/collapse…), a message is sent from the Mashup iframe to the top level document using postMessage (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) which allows to communicate between iframe and top document running on different domains. In the top level document, the code from the script pzIncludeMashup will automatically adjust the height of the iframe to fit the inner content.
To test if this is correctly setup, find the Mashup iframe - you will see an inline style with the height property- change the value of height - if mashup is correctly configured, whatever value you enter in height will immediately be resized to the correct height value of the iframe - if the height value is not updating, then it is because you have not configured the url of the top level document into your application rule
Open the application rule that is used when running the Mashup and go to 'integration and security' - at the bottom, the list of host should be set for the Mashup to resize
this url will be passed as 2nd parameter of the postMessage api to allow the Mashup iframe to communicate with the top level document.
To troubleshoot that the list of trusted origin is correctly set, use your developer tools and select the Mashup iframe - evaluate the value of the variable 'strDomainsWhiteList' from inside the iframe - it should contain a comma separated list of the trusted origin
Pegasystems Inc.
US
for more details - there is a lot of documentation on this topic on Community
https://community.pega.com/knowledgebase/capabilities/mobility/mashup-sdk/web-mashup