Overlay Screen on Visualforce Page without any CSS or Plugin

Hi All,

My todays post is related to the standard solution for Overlay Screen, I have suffered a lot whenever I got some implementation for the Overlay screen because I did that with CSS and so many things to remember and apply in this. Recently I have found a standard solution for the Overlay screen , which is not required to apply any CSS and no headache to apply the validation and Error message from Apex; we could do that through simple javascript functions.

Take an Example: Here I have a button, which will trigger a javascript function to display the popup screen.

Onclick of the button, we will get a overlay screen like the given snapshot.

We could bind the inputtext or inputfields as well in case we need to accept some picklist or lookup values etc.  Onchange of the textboxes we could validate the value and assign in a javascript variable. Onclick of Ok button it will call a javascript function which will validate the values and call actionfunction to perform the logic in apex controller. Onclick of cancel it will simply close the overlay screen. The performance is better and faster in comparison to custom overlay screen.

When you will press ok, you could see a message for success of the logic like in the image given below.

Check the code below:

Visualforce Page:

Apex Controller:

Hope this will be helpful for you.  Happy Coding J

Feel free to contact if you have anything in which I could help you.

Thanks,

Amit Goyal

Email: amitgoyal09@gmail.com

Skype: amitgoyal09

ActionFunction is not calling the actionmethod on Visualforce Page: Issue, Approach and Solution

Hi All,

Recently I faced an issue at the time of developing a dynamic and advanced visualforce page with a custom template and standardstylesheets=”false”. By the way these parameters were not related to the issue but I am just mentioning my implementation in consideration.

The Scenario is, I am having a command button or html button, onclick of that I am calling a js function and from that js function I am doing something on the visualforce page like setting value of some DOM Component and styling etc… After that I am calling my actionfunction to call an Action Method which is connected to a function in my Apex Controller.

Code Example:

actionstatus id="status1" startText="Processing..." 

actionFunction name="saveRecord" status="status1" action="{!SaveRecord}" reRender="errMsg" 

HTML Button tag with type="button" and onclick="saveRecord (); return false;"
OR commandButton onclick=" saveRecord (); return false;

The Issues is, onclick of the button my js function is getting called, from that js function my actionfunction is getting called instead of that reloading the page. I solved the reloading by putting return false on my button at the time of calling the javascript function. I could see the status in my UI but that actionfunction still not calling the actionmethod. I am able to see the console logs before calling the actionfunction and after calling the actionfunction with no js error. I am able to see the actionstatus but there is no entry in the debug log for my save method call. I tried by replacing the apex function by thinking may be some error in apex function which is doing something wrong but nothing worked.

Strange was I haven’t found specific solution for this issue in my search anywhere so I applied the following approach to find the cause of issue.

Approach to find the cause: I removed all my visualforce code and placed one section by another and found that in a Selectlist I directly reference a lookup field in value parameter, when I was placing that portion, my button is not working.

Solution: I removed that direct reference and used a string parameter instead. Onchange of that selectlist I populated the value of the string to the lookup field and my button starts working, means the actionfunction is calling the action method now.

Suggestion: Directly referencing the lookup field or Id on the visualforce page could cause unexpected behavior in your functionality sometime not all the time so try avoiding that.

Thanks,

Amit Goyal

Email: amitgoyal09@gmail.com

Skype: amitgoyal09

Adding Picklist values conditionally on the Visualforce page

Hi All,

Thanks for appreciating my previous blog posts and sorry for the delay for in my new blogpost.

Today I am sharing with you, how can we add some picklist value on the visualforce page conditionally.

Scenario, Like if you have some requirement in which you don’t want to accept new record with some status or picklist value but you want to display that for existing records. You can’t consider inputField in that case as well. So the simple, easier and solution with less effort is:

Create a list in your Apex Controller and display on your Visualforce page with apex:selectlist and apex:selectoptions, so that all required field will be there and add the additional value by using apex:SelectOption with itemDisabled property by define the condition.

One more thing, I wanna share and ask, we have a rendered attribute for the apex:SelectionOption but I were not getting that property functional in my practice, so if anyone knows something about the reason, please share with me.

I will get back to you with my next post soon. Happy Coding J

Feel free to contact if you have anything in which I could help you.

Thanks,

Amit Goyal

Email: amitgoyal09@gmail.com

Skype: amitgoyal09