In my CAF portlet I have a Frame Control that is being used to display external web pages. Currently I have a series of Icon Controls that when one is selected causes an external web page to be displayed in the Frame Control and each Icon Control references a different external web page. Instead of using the series of Icon Controls to make these selections I would like to use a Drop Down Control to make the selections.

Is this possible to do?

If so how?

Any ideas will be appreciated.

Sure,

You should be able to use some javascript code in the ‘Client-Side Events > Change’ property of the dropdown control to change the current page being displayed in the frame to match the current selection.

I am new at this, only a few weeks, so I have couple of couple of followup questions:

1 - How do I know what item in the drop down was selected (i.e. what do I test for)?

2 - How do I reference the frame? Using the Icon Control as a selector I put the desired URL in the Target parameter. How is this done from a Javascript?

Thanks.

In your ‘change’ event handler code, you would basically be using regular html/javascript techniques. There isn’t much different while using CAF at this point.

For example, something like this as the value of the ‘Client-Side Events > Change’ property of the dropdown control:

// the 'this' variable would be the dropdown element that changed, you can get the current value from that.
var value = this.value;

//get the iframe by the id, and change the src property of the iframe to the new value
var frameId = '#{caf:cid("myframe")}';
var iframe = document.getElementById(frameId); 
iframe.src = value;

It was the this.value and the ‘#{caf:cid(“myframe”)}’ lines that I was trying to figure out.

A tremendous help.
Thanks!