OutputPanel Usage In Visualforce Page

Salesforce has a provided with a very important tag ,apex:outputPanel. Recently I answered a question on stackoverflow that motivated me to write this small post.

http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_outputPanel.htm

The above link opens the documentation about this tag .This blogpost i have explored its exact use cases to use this tag

1. Conditionally render a section of block of html element in a visualforce can be achieved with this tag as this tag has render attributes .

     2. A very interesting case is if the element is not rendered initially then on Re-rendering the panel nothing rerenders .The following blog below from Bob demonstrates on how to resolve this .Again the outpanel is the rescue

http://bobbuzzard.blogspot.in/2011/02/visualforce-re-rendering-woes.html

   3.A common requirement that comes sometimes is to align the command button to the center of the screen.The apex:pageblockButton can be used but in some cases we have buttons without pageblock and we get errors saying PageblockButtons can be direct parent

There are some interesting points to note in the above code .There is a layout attribute and i have made it block.Making it block we have a div element while making inline has a span element .You can clearly observe if i make layout as inline the above code wont make the button centered as the style will be inline for the span element.

Fun With New HTML5 Tag Support in Visualforce

Winter 14 release notes are up and i am sure many of you would have glanced it .The most exciting feature is support for some html 5 components in the visualforce ,which open lot of opportunities for developers working on the platform to provide robust UI to the end customer using the platform.

Many times customers have been asking for features like auto suggest(auto complete),calendar widgets,Phone field validation or email validation on the form element.I don't say we   never gave this functionality to the customers ,we still were able to give these cool features but with help of jquery UI plugins ,some work arounds (like creating fields of input field to bring calendar on vf),or using any other open source UI or javascript library to achieve these functionality.

Now with this new winter 14 release some of our pains to use these libraries for small functionality like auto complete is easily achievable through native tag support provided in the visualforce page.

The release notes has a sample visualforce  program on all the newly introduced attributes and tags and there appropriate usage .

Lets explore some of the new tags and see how we can do some cool UI stuff,

Autocomplete:

This is commonly needed functionality and we had to use jquery UI to achieve this .This is very simple now using datalist tag .

<apex:inputText label="Account" value="{!AccountName}" list="{!Accounts}"
      html-inputText="Enter your preferred browser" html-autocomplete="on" />
  </apex:pageBlockSection>

Date Pickers:

Date pickers are very essential componet and widely used widget .Usually all mobile applications need this and most of times we used workaround to create a input field on object and use that for visualforce page for desktop application.For mobile we had to use jquery mobile and use the javascript remoting to bind with data .Now with apex:input tag this can be easily achieved

<apex:pageBlockSection >
     <apex:outputLabel ></apex:outputLabel>
     <apex:input label="datePicker" value="{! fDate }" type="auto"/>
     </apex:pageBlockSection>

Phone Validator and Email Validator :
This are widely supported now in 29.0 version and html placeholder specifes the format 

<apex:pageBlockSection >
     <apex:outputLabel ></apex:outputLabel>
     <apex:input label="Email" value="{!email }" type="email"
      html-placeholder="you@example.com"
      html-pattern="^[a-zA-Z0-9._-]+@example.com$"/>
      </apex:pageBlockSection>

 <apex:pageBlockSection >
     <apex:outputLabel ></apex:outputLabel>
     <apex:input label="Phone" value="{!phone }" type="tel"
      html-placeholder="999-999-9999"
      html-autofocus="true"/>
      </apex:pageBlockSection>

Incrementor or stepper:Usually number stepper component is generally needed and helpful in mobile apps .Visualforce now natively supports this .

<apex:pageBlockSection >
    <apex:outputLabel ></apex:outputLabel>
    <apex:input label="Increment Me!!" value="{! hello }" type="auto"
     html-min="0" html-max="100" html-step="5"/>
    </apex:pageBlockSection>

A small example to demonstrate the usage of these tags is below

A small code class to support the above page

You can take a look at the sample site url and try doing the autocomplete or inspecting picker.

http://demoprerelease-developer-edition.prerelna1.pre.force.com/

Note:Also one thing thats very important to note is these tags are not supported in all browsers .Its supported on most of modern browsers but one has to test this tags thoroughly before deciding to solution around this .Internet Explorer its not advisable to use .In mozilla also as i observed few tags dont work.Chrome these tags are best.