Advertisements

{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">

    • image

  • 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">

image

  • 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">

image

  • 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">
    • image

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!

Advertisements

About Debajit
I am a Dynamics CRM Most Valuable Professional (MVP) with 10 years of experience in Microsoft .NET Technologies and 7 years of dedicated experience in Microsoft Dynamics CRM. I have worked with companies like Microsoft, SanDisk, PwC, TMF Group and have extensive experience of implementing complex CRM solutions from both offshore and client side. Currently the face of XrmForYou.com with significant experience in delivering corporate training on Dynamics CRM and have already delivered multiple projects to client through XrmForYou.com Author of multiple tools on codeplex including the 'Role Based Views' and 'CRM-Sharepoint Metadata manager & Attachment Extractor' which are available for commercial use under XrmForYou.com For consulting/ training, drop me a note at info@xrmforyou.com or visit our website www.xrmforyou.com

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

  1. Pingback: {Knowhow–Webresource development with HTML5 features}–How to show default text in controls on your HTML webresources | Debajit's Dynamic CRM Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: