{Webresource Development Part – I} Using new HTML5 features in HTML webresources in Dynamics CRM

How many times have you heard about HTML5. It’s one of the most talked about stuffs in the industry. HTML5 and jQuery – the killer combination. And again there is this topic which discusses about HTML5. So let me explain here why I choose to pen down this blog post.

HTML5 have been doing the rounds for quite sometime now. However strangely enough when I go to any majority of the CRM projects and do the code review for CRM webresources, I find the HTML webresources not using the latest features of HTML5. I can find lines and lines of code written to get stuffs work which can be achieved by a single attribute in HTML5. And it’s purely understandable that being a CRM consultant and being involved in CRM stuffs day in and day out, we sometimes tend to loose touch of what’s happening outside our CRM domain. So I would be writing a series of blog posts on webresource development using latest HTML5 and jQuery features so that it can be of help to others. Even if a single CRM developer gets benefitted by this, I would be extremely satisfied.

In this blog post, I would just go through the various new input elements that has been come with HTML5. I would discuss the important ones here.

• Input Type: Number

• No more complex validations required for fields of type numeric. All you need is to put up a HTML element like the one below. You would be automatically presented with the textbox where you can enter numbers and increment the numbers using the spin that renders with the textbox. The browser does all the validation for you.
• <input type="number" name="numerictextbox" min="1" max="50">

• Input Type: date

• The datepicker is shown depending on the browser. No requirement for separate datepicker controls. Isn’t it great. Similarly you have the datetime control also which lets you select the time  part of it. Also you can try out the input type=’week’ and input type=’month’

• <input type="date" name=”lastenteredon" max="2012-12-31">

• 

• Input Type: color
• When you embed this element in the your webresource, a color picker would popup. Isn’t it great? Imagine you would be required to ask the user for their favourite color and then when you insert this new HTML5 control, your are done.
• <input type="color" name="favcolor">

• Input type:url
• If you set this element, and enter any invalid url, you would get a message like this. And the best part is, all of it without writing a single line of code. The browser does the job for you.
• <input type="url" name="website">

• Input type:email.
• this one is interesting. How many times have we used email in our web-resources. Ok setting this up would delegate the responsibility of validation of email address to the browser.
• <input type="email" name="email">
• 

Apart from this you can try out the below ones also.

• Input type:tel – for telephone numbers
• Input type:range – this would render as a slider.

 

To learn more about this, you can search in w3schools.com which is an excellent place for learning all the new cool features of HTML5. CRM developers, who still didn’t not get a chance to taste HTML5 stuffs, I am sure would love to get your hands on this.

In my next post, I would discuss how field and form validations can be done using the new HTML5 features.

 

Hope this helps!