Apex Code Development You need to sign in to do that
Don't have an account?
p999_dfs How to use the Lightbox Visualforce component provided by force.com labs to call a visualforce page
Has anyone used the Lightbox Visualforce component provided by force.com labs to call a visualforce page
The link for the App on Appexchage is
http://sites.force.com/appexchange/apex/listingDetail?listingId=a0N30000001g3u0EAA
This is a free app which has a visual force component <c:lightbox>
I want to show some visuaforce code in it.
thanks
This is nice component if you want to show a popup with some alert message. It says
"Lightbox components are a standard part of the Salesforce UI, but they're not easily available (until now!) for your own code.
Salesforce lightboxes have the following properties:
* They "grey out" the rest of the page behind the component, making the page unclickable until the lightbox is dismissed
* They can be dragged around the screen by dragging on the title bar
* They can contain any content you like, including a Visualforce page (use an iframe inside the lightbox)
"
I want to how I can call a Visualforce page in this component.
Thanks
Hey
It seems you can only use text or HTML in the component. Lightbox doesn't belong to Salesforce though, it's an opensource jQuery tool. You can quite easily customise it if you grab it off the interwebz.
Wes
I wanted to check if there is a way to call using iFrame, since it is stated in the description on AppExchange
" They can contain any content you like, including a Visualforce page (use an iframe inside the lightbox) "
Do you see any possibility to call an iFrame with this component
I found these examples in a blog
but they are not working in my page
<c:lightbox function="lbconfirm" width="500" title="{!appname}" content="Changes saved successfully." duration="1500" /><c:lightbox function="lbfail" width="500" title="{!appname}" content="Invalid username/password, or Twitter is down." duration="0" />
<c:lightbox function="initSetup" width="500" title="{!appname}" content="<iframe src='/apex/twitterforceInitialSetup' style='border: 0; width:460px; min-height: 470px' ></iframe>" duration="0" />
<c:lightbox function="newAcct" width="500" title="{!appname}" content="<iframe src='/apex/twitterforceInitialSetup?newAcct=1' style='border: 0; width:460px; min-height: 170px' ></iframe>" duration="0" />
Hmm.. if they say it's possible then it probably is. Attributes usually don't like have '<' or '>' in their value components, what if you try this:
public String getIframeString(){
return '<iframe src='/apex/twitterforceInitialSetup' style='border: 0; width:460px; min-height: 470px'/>';
}
<c:lightbox function="initSetup" width="500" title="{!appname}" content="{!iframeString}" duration="0" />First, I found that the lightbox would not pop up if you are running with Development Mode turned on. I had to turn Development Mode off in my user record in order for the lightbox to appear.
Second, SalesForce Support helped me put together this simple example of a lightbox with an iframe. You should be able to adjust the "src" parameter of the iframe to point to a VisualForce page in your organization. Just save this as a new VisualForce page. It shows an iframe launched from a command link, command button and javascript.
<apex:page showHeader="true" >
<!-- Begin Default Content REMOVE THIS -->
<h1>Congratulations</h1>
This is your new Page
<c:lightbox function="lbconfirm" width="500" title="Test Page"
content="<iframe src='/apex/addAttachments' style='border:0; width:460px; min-height: 170px' ></iframe>" duration="0" />
<apex:form >
<apex:commandLink oncomplete="lbconfirm();" value="Save" />
<apex:commandbutton oncomplete="lbconfirm();" value="Save" action="{!doSave}" />
</apex:form>
<a href="javascript:lbconfirm();">TEST</a>
<!-- End Default Content REMOVE THIS -->
</apex:page>
Here's another useful tidbit:
In the page that displays in the iframe of the lightbox, you can self-close the lightbox with this javascript:
parent.box.hide();
"box" is defined in the lightbox component downloaded from the AppExchange. I'm using this to create a "Save and Close" button in the VisualForce page of the lightbox so that my users can save changes to the record in the lightbox and close the lightbox in a single step.
Hi,
I am using parent.box.hide() in Button onClick action but the LightBox popup is not closing. Can you help how it worked for you.
In my case, I was using parent.box.hide in a javascript function, so the window was the parent object. In your case, the window is not the direct parent of the button, so in the onclick event try using:
window.parent.box.hide();
It's probably best practice to fully qualify the reference to the window regardless of where you use it.
Anyone else having problems where the lightbox opens and immediately closes? I have set the duration to "0" but still no progress :smileysad:
I have not experienced that behavior. I would wonder if the calling page is executing any logic that might be closing the lightbox prematurely.
In my case, I called my lightbox function from the "oncomplete" event of a command button. The lightbox function was the only command being executed from the button. So if my lightbox function were called "LauchLightbox", my command button would be:
If you're calling the lightbox function through the "onclick" event, you might want to try using "oncomplete" instead to see if it makes a difference.
That worked beautifully! Thanks for the suggestion :-)
Cool!
Perhaps it is because the "oncomplete" event occurs after an AJAX request completes. The "onclick" event is probably before the AJAX request, so it might have been the result from the AJAX request that was causing the lightbox to close prematurely.
Good to know.
What is the easiest way to use HTML as the content of your lightbox?
The "content" parameter of the lightbox function is where it would go, but it sometimes has issues with HTML tags inside the parameter. Sometimes you have to use escape clauses for less than and greater than characters, which would make complex HTML cumbersome.
In my case I placed an "iframe" in the "content" parameter and used a Visualforce page as the source for the "iframe".
Here's my sample lightbox function:
<c:lightbox function="LightboxFunc" width="650" title="Lightbox Window" content="<iframe src='/apex/VisualforcePage' style='border:0; width:610px; min-height: 510px' ></iframe>" duration="0" />You might be able to point the "src" parameter to an HTML file as long as the file is accessible by your target audience.
The first "width" parameter controls the size of the lightbox itself. The "style" paramter controls the size and appearance of the "iframe" within the lightbox. You can adjust those to fit your needs. Notice the escape clauses at the end of the "iframe". Those were necessary to pass the syntax check.
Yes - it's probably just easier to create the VF pages. Less clutter in the code that way also.
The page I have the lightbox on is accessed by guest users on VF Sites. I created a VF page for the content (ehbox), added the iframe reference to the lightbox attribute, and enabled ehbox for the site.
I am getting an authorization required page when launching the lightbox and I can't seem to figure out why. Am I not able to access the VF page this way?
I'm not sure. I haven't worked with Sites, so I'm not familiar with the intricacies of their authentication.
@wchristny, Can i put a Pageblock inside this Component / content=" " ,
Is it right practise to put a "ID" of the Pageblock which will renders after an AJAX request, And displays a Record Editing Details as shown below
And i am extreemly sorr, for Disturbing this closed Post,