4

I have radio button on vf page and added this vf page to the page layout , in which i have a onclick javascript custom button.

when i select radio button , and click on custom button then it should give an alert of radio button name and redirect it to the external system

here my prob is , how to integrate radio button on vf page to custom button on pagelayout ... any answers pls suggest.

  • 3
    Is the VF page added as an inline vf page in pagelayout? If yes, then the script from your VF page will not be able to talk to the button on the page layout because of the same origin policy restriction. There are ways to do it: postMessage, but it is not all browser compatible.. – Sam Dec 6 '13 at 13:36
  • 1
    Screenshots or code examples would help us understand what you're trying to do. I can't tell exactly what you want from your question. – Akrikos Dec 6 '13 at 14:53
  • 1
    I would consider postMessage an acceptable solution, since support for this function is at 92% ... and the browsers not supported are all IE, which versions less than 9 won't be supported within a year anyways, so total support will be effectively 100%. – sfdcfox Dec 9 '13 at 17:04
6

Visualforce page:

<script>
addEventListener('message', function(event) {
    // retrieve selected value somehow
    if(event.data.requestStatus) {
        top.postMessage({ selected: value }, '*');
    }
}, !1);
</script>

Button:

eventAdded = eventAdded || false;
if(!eventAdded) {
addEventListener('message', function(event) {
    // event.data.selected contains the value to use
    if(event.origin.match(/\.force\.com/)) {
        // only process data from a visualforce page!
        // Do something here
    }
}, !1);
eventAdded = true;
}
var e = document.querySelectorAll('iframe'), x;
for(x = 0; x < e.length; x++) {
    e[x].contentWindow.postMessage({ requestStatus: true }, '*');
}

NOTE: I didn't actually test this, I expect it needs a good tweak to work properly, but this is the basic fundamentals. Note that you need at least IE9, which is all of the modern world.

Update

I tweaked the code slightly to make it a little more robust.

As requested, here's an explanation of the code:

The first block of code executes when the Visualforce page loads. It instructs the browser to listen for an HTML5 cross-domain message event. Its only purpose is to listen for an event requesting the currently selected radio option from an outside source (in this case, the containing window).

The second block of code is a JavaScript event that occurs on the button itself. It first adds an event listener to get the message back from the visualforce page, and then then proceeds to dispatch a message request to any iframes on the page. Since there could be multiple iframes hanging out on the page, we simply iterate through all of them and pass a message to them. Pages without a message handler will simply ignore the event, while the Visualforce page that contains our event handler from the first block will respond with a message giving the current value of the select option.

Basically, the event outline looks like this:

  Standard Page          Visualforce Page
----------------------+--------------------------
                         Prepare for Request
                         Wait for Request
User Requests Status
Prepare for Response
↓
Request Status ——————→ Receive Request for Status
                       ↓
Receive Response ←———— Send Response
  • Could you please explain a bit more about how this magic works? – Sergej Utko Dec 9 '13 at 18:15
  • @mast0r Added a little explanation and diagram for you. – sfdcfox Dec 9 '13 at 18:39
  • Wow! Great info, many thanks and of course +1! – Sergej Utko Dec 9 '13 at 20:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.