Visualforce component basic examples

Visualforce component basic examples 

This is a collection of different basic visualforce components for getting started with developing in salesforce. Also a few examples of components that are similar to someone coming from a .NET background into salesforce developing. Hopefully eliminating wasted time searching all over for samples of these different controls.

istbox control

?

1 2 3 4 5 6

<apex:selectlist value="{!}">    <apex:selectoption itemlabel="Item A" itemvalue="{!}"></apex:selectoption>    <apex:selectoption itemlabel="Item B" itemvalue="{!}"></apex:selectoption> </apex:selectlist>

Select List(Dropdown List)

?

1 2 3 4 5 6

<apex:selectlist value="{!}">    <apex:selectoptions value="{!}">    </apex:selectoptions> </apex:selectlist>

HTML CheckBox

?

1	<input checked="true" type="checkbox" value="{!}">

Input check boxes

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<apex:datatable cellpadding="5" columns="4" id="dtDemo" rows="5" value="{!}" var="dt">                       <apex:column>       <apex:inputcheckbox id="cf" value="{!}">       </apex:inputcheckbox>    </apex:column>       <apex:column value="{!dt.label}">    </apex:column>           <apex:column>       <apex:inputcheckbox id="cf2" value="{!}">       </apex:inputcheckbox>    </apex:column>       <apex:column value="{!dt.label}">    </apex:column>        </apex:datatable>

Radio Buttons

?

1 2 3 4 5 6 7 8 9

<apex:selectradio value="{!}">    <apex:selectoption itemlabel="Option A" itemvalue="{!}">    </apex:selectoption>    <apex:selectoption itemlabel="Option B" itemvalue="{!}">    </apex:selectoption> </apex:selectradio>

panelGrid/panelGroup (allows for more control of layout, rendered as html table)

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<apex:panelgrid columns="2" id="theGrid">       <apex:panelgroup id="theGroup3" style="padding: 0 15px 0 0;">       <apex:commandbutton style="color: green;" value="Button Text">       </apex:commandbutton>    </apex:panelgroup>       <apex:panelgroup id="t">       <apex:commandbutton value="Button Text">       </apex:commandbutton>          <apex:commandbutton disabled="true" value="Button Text">       </apex:commandbutton>    </apex:panelgroup> </apex:panelgrid>