I am seeking your suggestions on the best way to implement the following scenario. I have tried a few options and they are mentioned here as well.
We have a Portlet with 6 views which are Tabs and are accessed by clicking on an item in a table and rendered on the same iframe as the table is located. We have done this by using Portlet URL script Block (PUSB) with extended portlet url (XPU). The parameters to the Tabs are configured in the parameters settings of the PUSB and the XPU just has the Base Page URL and the the first Tab view specified in the Target view and render type as “render”. This works as desired.
Now, we have the same requirement as above but with the following subtle difference.
We cannot use the PUSB and XPU as above because this page will have all the rows in the table displayed on the same page without pagination(unlike the previous case where only 10 rows are displayed in a page). And why is that a problem? Because the PUSB + XPU creates about 20 lines of HTML content(javascript), and if we have around 500 rows, the browser takes an unbearably long time to load the page with the additional 10000 lines apart from the others.
I have tried Portlet Simple Link with Portlet URL and opened the Target in new windows with Target = _blank, but with this, when one Item is opened and another item is opened later in a new window and you go back to the first item window, it gets the data of the second item. (Hope that made sense!!).
So, we want to display the Portlet now on a modal dialog with specified size and accessed from the rows of the table.
Can someone please suggest the best way to achieve this?
(Async Command Link? Portlet Simple Link? API? Javascript?)
And BTW, forgot to mention that every new item opened must always open in the first tab and not the tab that was viewed in the previous instance.
Thank you for your response in advance, much appreciated.
Best regards,
Raj
I’m going to restate what i think you’re trying to accomplish and then describe a possible implementation pattern.
Goal: each row in a table should have a link that displays a modal dialog. The modal dialog should display a portlet that has had parameters passed to it.
Possible Solution: The clickable text in the table should have an Async Command Link. The Link should have params of what you’ll need to pass to the portlet (see below). The Link should trigger a modal dialog.
The Modal Dialog should be lazy loaded (refresh on load). The Modal Dialog should have a portlet include that passes the params it received from the Async Command Link. (Note, you’ll need to capture the params from the async link and bind them to a variable on your page bean. This will allow them to be passed to the portlet include)
Thank you for your response. Your suggestion works in the sense that the Modal Dialog is displayed with the Portlet rendered and the first Tab displayed.
There are two problems with this.
When you click on any other Tab, the parent page that was hosting the table refreshes and becomes empty, (perhaps because the Tab URL goes to the parent page?).
When you open the next Item, the Tab of the previous instance is displayed by default and not the first Tab.
BTW, the Tabs portlet use the following controls.
Portlet with 6 views.
Each view contains “Tabs” with Simple Portlet Link and XPU
Each view invokes a webservice to fetch its data.
Will this change the proposed implementation pattern?
Thanks again for your response in advance,
Best regards,
Raj
I couldn’t agree more that Picture speaks a thousand words. I will mock up some screens and upload later on.
Meanwhile, I have reverted to Javascript to use window.open by constructing the Portlet URL and setting its parameters.
I am getting a handle on this window and setting window.focus to this each time a different Item is clicked so that the same window is reused, yet different items are shown each time.
Yes, I had to hard code the wmp_rs=true while generating the URL so that the portlet always shows the latest information requested.
I did not want to take this path, but it does what the use case expects, although the business wanted it in a modal dialog.
And why I did not use window.showModalDialog instead of new window? Because clicking on Tabs in a Modal Dialog displays the Tab in the parent of the Modal. I saw the same behaviour even in CAF Modal.
Is this a standard when it comes to URLs in a Browser Modals?