function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
irlrobinsirlrobins 

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

 

Best Answer chosen by Admin (Salesforce Developers) 
Andy BoettcherAndy Boettcher

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

Andy BoettcherAndy Boettcher

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.

 

public void doNothing() { }

 

-Andy
irlrobinsirlrobins

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.

I understand this part

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.

 

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?

On your commandLink, make a empty "doNothing" method in your controller and call that in your action attribute - and rerender the apex:outputPanel.

I understand this

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.

I think this makes sense too...
Andy BoettcherAndy Boettcher

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

This was selected as the best answer
irlrobinsirlrobins

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
irlrobinsirlrobins

Andy, this worked exactly as you suggested . Many thanks for your help.