codeBLOG

I have worked on a couple of projects where the client wants to have the tab order in visualforce go from the top-down for each column. Javascript does allow us to set the tabIndex. But who wants to hard-code all of those ID’s?

I have a page with a bunch of form elements:

<apex:pageBlock mode="edit" id="pb1">
   <apex:pageBlockSection columns="2" collapsible="false" id="pbs1">
      <apex:inputField value="{!Contact.FirstName}" />
      <apex:inputField value="{!student.Email}" />
      <apex:inputField value="{!student.LastName}" />
      <apex:inputField value="{!student.Phone__c}" />
   </apex:pageBlockSection>
</apex:pageBlock>

I propose doing it with a Javascript loop:

for (var i=1;i<document.getElementById('FORM_ID').elements.length-1;i++) {
			var e = document.getElementById('FORM_ID').elements[i];
				if (e.type=='text' || e.type == 'select-one') {
					if (i%2 == 1) {
						e.tabIndex = i;
					} else {
						e.tabIndex = document.getElementById('FORM_ID').elements.length + i - 1;
					}
			}
		}

This JavaScript will loop over all form elements looking for text fields and dropdown. Then it will assign the tab order. Now your form should tab through in each column.

Just initiate the JavaScript on page load.

Today I came across a problem when using The application that I am building is on sites using https. I need to include some flash. It is very easy to do with apex:flash, add the src, a height and width and it is done. The problem occurred when I tested in IE. What happens is that apex:flash includes the adobe cab from macromedia over http. The documentation does not providea method to force https.

A quick trip to the community site found a number of posts with similar problems. I found my inspiration on the blog post titled ‘Integrating Flex into Visualforce Pages‘ by Ryan Marples. This was posted no more than three weeks ago. There are some similarities but also differences.

I wrote a custom component which allows for switching between http/https as needed. The component is as follows:

<apex:component >
<apex:attribute name="flashvars" required="false" type="string" description="The flashvars attribute can be used to import root level variables to the movie. All variables are created before the first frame of the SWF is played. The value should consist of a list of
ampersand-separated name-value pairs." />
<apex:attribute name="height" required="true" type="integer" description="The height at which this movie is displayed, expressed either as a relative percentage of the total available vertical space (for example, 50%) or as a number of pixels (for example, 100)." />
<apex:attribute name="id" required="false" type="string" description="An identifier that allows the component to be referenced by other String components in the page." />
<apex:attribute name="loop" required="false" type="boolean" description="A Boolean value that specifies whether the flash movie plays repeatedly or just once. If set to true, the flash movie plays repeatedly. If not specified, this value defaults to false." />
<apex:attribute name="play" required="false" type="boolean" description="A Boolean value that specifies whether the flash movie automatically begins playing when displayed. If set to true, the flash movie automatically begins playing. If not specified, the value defaults to false." />
<apex:attribute name="rendered" required="false" type="boolean" description="A Boolean value that specifies whether the component is rendered on the page. If not specified, this value defaults to true." />
<apex:attribute name="src" required="true" type="string" description="The path to the movie displayed, expressed as a URL. Note that a flash movie can be stored as a static resource in Salesforce." />
<apex:attribute name="width" required="true" type="integer" description="  	The width at which this movie is displayed, expressed either as a relative percentage of the total available horizontal space (for example, 50%) or as a number of pixels (for example, 100)." />
<apex:attribute name="https" required="false" type="boolean" description="use SSL codebase" />

<apex:outputPanel layout="none" rendered="{!if(rendered != false,true,false)}">
<apex:outputPanel layout="none" rendered="{!if(https != true,true,false)}" layout="none">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab" height="{!height}" width="{!width}" id="{!id}">
</apex:outputPanel>
<apex:outputPanel layout="none" rendered="{!if(https != true,false,true)}" layout="none">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="https://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab" height="{!height}" width="{!width}" id="{!id}">
</apex:outputPanel>
<param name="movie" value="{!src}" />
<param name="FlashVars" value="{!flashvars}" />
<param name="quality" value="high" />
<param name="bgcolor" value="#869ca7" />
<param name="allowScriptAccess" value="sameDomain" />
<embed align="middle" allowScriptAccess="sameDomain" bgcolor="#869ca7" {!if(loop=true,'loop=true','loop=false')} {!if(play=true,'play=true','play=false')} pluginspage="http://www.adobe.com/go/getflashplayer" quality="high" src="{!src}" type="application/x-shockwave-flash" width="{!width}" height="{!height}">
</embed>
</object>
</apex:outputPanel>
</apex:component>

I implemented all of the original attributes, including their required status, from the documentation.

Usage:

<c:flash src="PATH/TO/SWF.swf" width="400" height="400" https="true" play="true" loop="true" />

notice that ‘https’ is not required but will use the https codebase if set to true.

I have a couple of forms where I am using apex:outputLabel. This is due to the need to have required picklists that are custom fields. One that that I wanted to do was use the native field label rather than a hard-coded label.

Wrong way:

<apex:pageBlockSectionItem>
     <apex:outputLabel value="Other Account Name" />
     <apex:inputField value="{!Account.Other_Account_Name__c}" />
</apex:pageBlockSectionItem>

Right way:

<apex:pageBlockSectionItem>
     <apex:outputLabel value="{!$ObjectType.Account.fields.Other_Account_Name__c.label}" />
     <apex:inputField value="{!Account.Other_Account_Name__c}" />
</apex:pageBlockSectionItem>

Now when I change the field label my visualforce pages will be updated. Also my client will not have to worry about updating any visualforce.

If you don’t know, I LOVE taking a standard HTML page and convert it to Visualforce. It has now come up twice where I need to have a custom picklist to be required.  However I want it to appear visually the same way as the rest of the required fields. The field below ‘Home State’ is custom and therefore does not appear to be required out of the box. Enter some CSS.

The ‘red bar’ is created by using a background color on DIV. We are not able to replicate that functionality without sacrificing either the label or the field itself.

Visualforce:

<apex:pageBlockSectionItem >
     <apex:outputLabel value="Home State" />
     <apex:inputField value="{!Account.Home_State__c}" />
</apex:pageBlockSectionItem>

To implement this we will need to create an image of the red bar: (download it here)
Now some CSS:

td.requiredpicklist {
 background-image : url(PATH_TO/required_red_bar_wide.png) !important;
 background-repeat : no-repeat !important;
 background-position : 1px 0px;
}
 td.requiredpicklist select {
 margin-left : 0px;
}

Now update the pageBlockSectionItem

<apex:pageBlockSectionItem dataStyleClass="requiredpicklist">
     <apex:outputLabel value="Home State" />
     <apex:inputField value="{!Account.Home_State__c}" />
</apex:pageBlockSectionItem>

Now add some JS validation and you’re end result will appear to be required.

I needed to compliment my previous post – Javascript : form validation – only 1 checkbox can be checked by using checkboxes like radio buttons. This code will uncheck all the boxes except for the one that you check. Thus providing radio button functionality

function toggleRadio(checkbox) {
		for (var i=0;i<document.getElementById('wizardPage:wizardForm').elements.length;i++) {
			var e = document.getElementById('wizardPage:wizardForm').elements[i];
			if (e.type=='checkbox' && e.name != checkbox.name) {
				e.checked = false;
			}
		}
	}

It is implemented on the checkbox like this:

onclick="toggleRadio(this);"

I have a series of checkboxes which require that only a single checkbox be selected. I used the below javascript to ensure that only 1 box was checked when the form is submitted:

function checkBoxes() {
		var checks = 0;
		for (var i=0;i<document.getElementById('wizardPage:wizardForm').elements.length;i++) {
			var e = document.getElementById('wizardPage:wizardForm').elements[i];
			if (e.type=='checkbox') {
				if (e.checked) {
					checks++;
				}
			}
		}
		if(checks == 0){
			alert('You must select at least one estimate');
			return false;
		}else if(checks > 1) {
			alert('Please select only one estimate');
			return false;
		}
	}
	function toggleRadio(checkbox) {
		for (var i=0;i<document.getElementById('wizardPage:wizardForm').elements.length;i++) {
			var e = document.getElementById('wizardPage:wizardForm').elements[i];
			if (e.type=='checkbox' && e.name != checkbox.name) {
				e.checked = false;
			}
		}
	}

It is implemented on the form submit button like this:

onclick="return checkBoxes();"