You need to sign in to do that
Don't have an account?
Best approach to create an overlay
Hey all,
Looking for some ideas on the best approach to meet a customer requirement. The requirement is to have a table of available products s and an overlay (or lightbox) that shows more details on a product when a button/link is clicked.
The scenario is that there is a VF page that displays all available products (i.e. product image, product name, product price). The data is queried from a custom object that represents the product. The custom object also holds product details/specs. These details will be displayed in the overlay/lghtbox when a link is clicked. By overlay I mean something similiar to this demo: http://flowplayer.org/tools/demos/overlay/index.htm
If I was to follow this example, essientially I'd have to create a table to display all the products (this is straight forward, using apex:repeat, and then for each product create a div that holds the product details that is hidden and only shown in the overlay when the appropriate link is clicked. The table and div contents have to generated on page load of course, to allow for an ever changing product set.
My concern is that having to generate the table and all the associate divs is quite an overhead and will cause the page to load/refresh slowly.
So is there anyway of creating the detail overlay on the fly, using JScript,JQuery, CSS or other method? Or has anyone got a better approach to developing a solution to the requirement?
Thanks
R
Aaack - my bad, mixed up the tags.
So let's say that you're using a commandLink. To pass the Id of your parent record through to populate the children within your overlay, you'd use an apex:param.
<apex:commandLink id="cmdLink" action="{!doNothing}" value="Click Me" rerender="opOverlayDiv">
<apex:param assignTo="{!controllerVariable}" value="{!yourParentVariableFromTheList}" name="controllerVariable" />
</apex:commandLink>
When you write the DIV - you'll build it up with lists / tables / variables / whatever that you'll have each defined as GETers in your controller. Rerendering the apex:outputPanel that your DIV is contained within will fire off those GETers again, but now with passing your parent record Id into the controller via the apex:param tag - the right information will be in the DIV.
Did I explain that better? I realize my earlier post was kinda frazzled. =)
-Andy
All Answers
I've done that before - jQueryUI is your friend. Use the model popup from jQueryUI and create the div that will popup in your VF page, but wrap it in an apex:outputPanel.
Your DIV will be laid out with the information you need to pop up. On your commandLink, you'll use an Attribute to pass the Id through to the controller which will be used in your GETers that you reference in the DIV.
On your commandLink, make a empty "doNothing" method in your controller and call that in your action attribute - and rerender the apex:outputPanel. Create a Javascript function in your page to bring up the lightbox / model, then using the "oncomplete" javascript attribute, refer to that function to make the magic happen.
-Andy
I understand this part
Not quite getting what you mean here. id is a reference to the product and this is passed to a getter referenced in the div. This getter creates the content?
I understand this
I think this makes sense too...
Aaack - my bad, mixed up the tags.
So let's say that you're using a commandLink. To pass the Id of your parent record through to populate the children within your overlay, you'd use an apex:param.
<apex:commandLink id="cmdLink" action="{!doNothing}" value="Click Me" rerender="opOverlayDiv">
<apex:param assignTo="{!controllerVariable}" value="{!yourParentVariableFromTheList}" name="controllerVariable" />
</apex:commandLink>
When you write the DIV - you'll build it up with lists / tables / variables / whatever that you'll have each defined as GETers in your controller. Rerendering the apex:outputPanel that your DIV is contained within will fire off those GETers again, but now with passing your parent record Id into the controller via the apex:param tag - the right information will be in the DIV.
Did I explain that better? I realize my earlier post was kinda frazzled. =)
-Andy
Andy,
Sorry for delay on replying. Yep, I think that makes sense to me. I'll be building said page over the next few weeks so I'll return to let you know how it went etc.
Thanks for your help
R
Andy, this worked exactly as you suggested . Many thanks for your help.