Skip to main content

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.

Popular posts from this blog

TLS 1.0 has been disabled For Sandbox - Salesforce

Salesforce has finally disabled TLS 1.0 in sandboxes .This is in preparation for disablement later in 2017 for PRODUCTION instances .

Now this would have not impacted your integrations in PRODUCTION org but if your integration is broken in your sandbox ,this means you have only few months to sort this and fix before this affects your integration for PROD live users .
Before we deep drive on how to possibly fix this and work with your external systems to figure solution ,lets first understand what is TLS and why did SFDC moved to 1.x and had to disable TLS 1.0
TLS 1.0 Explained























TLS 1.1 Improvements 
Added protection against cipher-block chaining (CBC) attacks. Support for IANA registration of parameters.

Clearly TLS 1.1 is more secure(Compared to 1.0) and protects salesforce resources against CBC attacks .
Identify if this change broke anything .The things that can be affected in your instances are as below Web requests to Salesforce URLs that require authenticationWeb requests to the login pag…

Opening Modal Using Lightning Component Framework of SFDC

One of my friend from India threw a challenge .The challenge was to open a modal by using latest and greatest lightning components framework and modals design from SLDS .For the love of community I thought of sharing the entire code base that I did .

So here we start ..

Business Use Case - Need a handy SalesLeader board component that can be used to display the Sales revenue generated by each sales rep for current year in the order of decreasing total revenue .On click of the tile ,we will show detail opportunity list aggregating the revenue .

The component can be dragged in lightning design experience or in App builder lightning Page .

Video Demonstration-



SalesLeaderBoard from Mohith Kumar Shrivastava on Vimeo.








Frameworks Used -
Lightning Design Systems (SLDS) for CSSLightning Component Framework for client side logicApex aura enabled class for backend logicApproach
The component hierarchy is very important to imagine or mindmap before we dig deeper- SalesLeaderMain
    -SalesLeaderBoard
    …

Customizing Napili Template Of SFDC For Communities - Community Cloud

Recently I have been busy working with salesforce community cloud platform and I am impressed by the new added features of Spring 16 .

You can watch the Release Readiness webinar for more details on what are added features for community cloud 

Lets talk about something which most of client (Either SI or ISV ) would love to have with the Napili template .The first question that clients ask with Napili is its flexibility to customize and tailor to their specific needs .

The very straight forward questions that people familiar with Napili template ask are as follows 

Can I change the CSS and look and feel ?  

Well yes and No ....The new branding editor you can sparingly use CSS and change look and   feel   and community editor can also help you to some extent to change labels and the color and you can really get closer to what you want .Just note that efforts will be high if we want to change the entire template design.

Will i be able to populate data from custom objects and standard objects a…