Sunday, 1 November 2015

Using Jquery with SLDS for validation and Error Display

Recently I have been playing around with SLDS  design system and for sure this has better component set for building mordern applications with excellent look and feel for Mobile or desktop .

One of the key challenges using this library in visualforce (Not in lightning components) is there is no javascript support for CSS unlike bootstrap  and hence it makes really difficult .This is initial stage and I am sure as more developers dig into this ,they will come up with Javascript for various components .

One reason why SFDC would have left this as an exercise to community is since there are wide variety of frameworks now and each Javascript framework is evolving on its own .Angular is moving towards Angular 2 and React is still in its intial phases (Although this framework is widely adapted now and has its own advantages and flexibility).

Lightning components on the other hand is also fairly new but event driven patterns makes it easier to communicate with server .Lightning components will definitely work well with SLDS and there are already some attempts made to build some components .

Check the below project in Trailhead and its a good starting point to get started with using SLDS in lightning components


I tried playing with SLDS with jquery and feel using simple jquery with SLDS can be really cool architecture to build simple applications .Again i dont say it may scale well and you will see for larger applications it will be better to go with  frameworks .

Aim of this blogpost is to demonstrate a simple plugin that i have built that can handle client side validations and also you can display error or success in SLDS style .

The source code for the plugin is available at below gist 


Lets walk through a simple use case on how to use this .

For demonstration purpose we will building a simple form with SLDS design system and a small apex class that calls a Javascript remoting function to insert Account.

We will need three libraries installed to see a working demo

The apex code for ease of our eyes is below

Plugin set up Instructions

All the visualforce coder needs to handle  in HTML of input tag is to add two extra  attributes declaratively

  1. data-required (Make this to true if you want the field to be required)
  2. data-fieldName (Field label that will be displayed as error )
In Javascript remoting you will just wrap your remoting call with below

if (!validatorSLDSplugin.validate()) {

}


Sample screenshot of how this looks




To display success or error messages or any messages on the screen invoke the validator function display alert as below with message and message class .Note message class has to be from the SLDS library .

From SLDS library the classes are as below
  • success--slds-notify slds-notify--alert slds-theme--success slds-theme--alert-texture
  • failure ---slds-notify slds-notify--alert slds-theme--error slds-theme--alert-texture
  • info ---slds-notify slds-notify--alert slds-theme--inverse-text slds-theme--alert-texture
A sample example of how to invoke the validator is as below for success message

validatorSLDSplugin.displayalert('Record created with Id..'+result.Id ,'slds-notify slds-notify--alert slds-theme--success slds-theme--alert-texture'); Sample screenshot of how this looks
Handling SVG images

One of the pain points of the new SLDS has been how we handle SVG .I ran into an issue where using jquery append function did not work with SVG .To overcome this we have refresh the HTML section again .

The refresh can be done as below in Jquery

j$("#messagewrapper").html(j$("#messagewrapper").html());


I also think same solution can be applied to action:function when re rendering SVG tags .A jquery call needs to be made again with outputPanel surrounded and in oncomplete function refreshing the HTML using jquery .I have not tried this but would love to try and see .(If any of you got leisure time try this and let me know how this goes)

Also observe the image variable that i have used in my page to pass the dynamic URL as a global window object to the plugin .

var imageURL = "{!URLFOR($Resource.SLDS102, 'assets/icons/action-sprite/svg/symbols.svg#close')}";

I hope you enjoyed this post .

This is start and i guess it would be great if all SLDS components can be wrapped with jquery or probably angular directives or react components .Visualforce is amazing tool and for building simple mobile friendly pages ,using Javascript remoting with SLDS and VF would work well with rapid development time .



11 comments:

  1. I like your post very much. It is very useful for my research. I hope you can share more info about this. Keep posting mule 4 certification
    servicenow developer Certification
    Workday training
    Workday financial training
    Workday HCM Online training

    ReplyDelete
  2. I am very much pleased with the contents you have mentioned. I wanted to thank you for this great article.
    defer parsing of js wordpress

    ReplyDelete
  3. You have done a great job. I will definitely dig it and personally recommend to my friends. I am confident they will be benefited from this site.
    Tropic Diva

    ReplyDelete
  4. Hey, great blog, but I don’t understand how to add your site in my reader. Can you Help me please?
    bandar slot terpercaya

    ReplyDelete
  5. Thanks, this is generally helpful.
    Still, I followed step-by-step your method in this
    salesforce training
    salesforce online training India
    salesforce online training

    ReplyDelete
  6. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    blockchain online training

    ReplyDelete
  7. Great article! It is really helpful for my research. Do post and share more such wonderful content and keep updating.
    Informatica Cloud Training
    SAP Hybris Training
    AWS‌ ‌Data‌ ‌Engineering‌ Training

    ReplyDelete
  8. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website Workday HCM Online Training
    best Workday HCM Online Training
    top Workday HCM Online Training

    ReplyDelete
  9. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website Workday HCM Online Training
    best Workday HCM Online Training
    top Workday HCM Online Training

    ReplyDelete
  10. I enjoyed your blog Thanks for sharing such an informative post. We are providing the best services click on below links to visit our website.
    Oracle Fusion HCM Training
    Workday Training
    Okta Training
    Palo Alto Training
    Adobe Analytics Training

    ReplyDelete

Introducing Lightning Base Components

Lightning Base Components are great addition to the platform and in fact revolutionary .One of the concerns around lightning component ...