Resize the iView dynamically

[Former Member]

Hi Experts,

I need to resize the iview based on the size of content being displayed in it so as to avoid horizontal/vertical scrollbars.
The iview is a Portal Component (Abstract Portal Component) iview.

The portal application dynamically picks the html page that needs to be displayed in the iview (based on user country/company).

The HTML page thus displayed in the iview has multiple tabs, the first one is open by default when the page loads.

Initial resizing is done at the time of load and the scrollbars do not appear.

But when the user selects any other tab (the tabs open on mouse over, not mouse click), the content size differs and the scroll bars appear to accommodate the content.

I need to capture the "onMouseOver event" on tabs in my portal component, and resize the iframe everytime.

Could you please suggest how?

The portal version is 7.3 EHP 1.

The HTML pages displayed in the iview are hosted on a Content Management Server in the same domain as the Portal.

Points to be awarded generously to helpful/correct replies.

Thanks and regards,

Prerana

[Former Member · Accepted solution]

Hello Prerana,

is the application from yourself? So you can deliver an JavaScript-File with your application, where you add JS-Function to the MouseOver-Event, which resizes the frame. Or you add the JS-Funtion directly to the HTML or link in it on a JS-Function.

If the Application is not from yourself, you can write one, which only delivers the JS-Functionality. Then you build a page in the portal, where you join the application with your JS-Script-Application. So this functionality is only available, when a user executes the application.

Help for the right event you can find here:  HTML Event Attributes and a tutorial JavaScript Events.

Greetings,

Thomas

[Former Member · Accepted solution]

Hi Thomas,

I tried the approach you suggested - created a new jsp dynpage application with eventListener for the postMessage event raised in the html page on mouseover event on the tabs. I created the portal component iview and added to the same page as my initial abstract portal component displaying the html page. Still I am unable to capture the postMessage event.

The code snippet for raising the event -

$(".tabbox_item_headline").mouseover(function(){

                                                                                  alert(" Before Event");

                                                                                  window.parent.postMessage('adjustTheHeight', "*" );

                                                                                  alert(" After Event");

                                                                                  return false;

})

I am getting both the alerts when I mouse over the tabs in the page.

The event listener code snippet in my jsp dynpage jsp-

<script>

if (window.addEventListener){

               addEventListener("adjustTheHeight" , adjustHeight , false)

} else {

               attachEvent("onadjustTheHeight", adjustHeight)

}

function adjustHeight(event) {

               alert("Got the message");     // to be replaced with iframe resizing script once this works

}

</script>

This alert message doesn't appear anytime. Where am I going wrong? Should I integrate this in the same Abstract Portal Component app that hosts the html page?

Any reply will be appreciated.

Thanks and regards,

Prerana

[saar_dagan]

Hi Prerana,

If you are on a page you can use the pageSupport.js script provided by pagebuilder and call adjustIviewHeight(your iView ID);

BR,

Saar

[Former Member]

Hi Saar,

Thanks for the reply. What I've understood is that you're suggesting using the pageSupport.js method for resizing the iView- will definitely try.

But before that the issue I'm facing is how to capture the tab-changing event, on which I have to resize.

Like I mentioned above, it is happening in an html page hosted externally on a Content Mgmt Server. The postMessage event is getting raised from the html page on tab change, but it is not getting captured in the eventListener that I've created for it in my JSPDynpage application.

Any ideas, please?

Thanks and regards,

Prerana

[Former Member]

Hi again,

Thanks for the replies Thomas and Lawrence. And no worries reg crossposting.

It seems as though my requirement could be handled using simple js-eventing but here's the catch -

The tabs are present in the externally-hosted html page. So far I haven't been able to capture the mouse-over event on the tabs on this html page in my portal application. So I guess the event has to be raised in the html page on the Content Mgmt Server side itself, yes?  Please correct me if this can also be done in my portal component.

Also, if I get the CMS team to raise a post-message event on mouseover, will I be able to listen/subscribe to it in my portal component without any issue?

Thanks for your patience with my ignorance.

Prerana

[Former Member]

Prerana, Thomas gave you the right clue for such a case: do a JS injection through separate APC and appropriate page or framework configuration

Also, if I get the CMS team to raise a post-message event on mouseover, will I be able to listen/subscribe to it in my portal component without any issue?

Client-Side Eventing - Portal - SAP Library

cheers

[Former Member]

Prerana, as you mentioned already on your own, this can be done with plain JS eventing, jQuery is a good library for such tasks due my experience. You know already how your application logic should work, so all that you need to do is to program it. There are innumerable threads on stack overflow etc regarding this topic, if you are facing any concrete issues ask here or better do a search first.

cheers

[Former Member]

Sorry for crossposting, for some reasons I dont know Jive is having obviously a strong delay, so I wasnt able to see Thomas gave already an answer.

cheers