Saturday, December 14, 2013

After around months of playing with Bootstrap and Visualforce here is a first version of "VisualStrap". VisualStrap is a set of components that work inside your visualforce page without affecting the standard layouts (if you directly import Bootstrap inside a VF page it will mess up the whole page).

With VisualStrap you can make your VF pages more appealing to user , more responsive and more user friendly. Currently the below set components are Bootstrap are converted into VisualStrap but I am working hard to bring them all.

What you get with this version of VisualStrap ?  

  • Panels
  • Alert
  • Well
  • Label
  • Badges
  • Jumbotron
  • Forms (Vertical and Horizontal)
  • Glyphicons
  • Thumbnails
  • Column and Rows (Grid) 
  • Tables (new 1.1)
  • Buttons (new 1.1)
  • ButtonGroup (new in v1.3)
  • ButtonToolBar (new in v1.3
  • Pageheader (new in v1.3)
  • Progressbar (new in v1.3)
  • Tooltip (new in v1.4)
  • List Group and List Group Item (new in v1.4)
  • Modal (new in v1.4)
  • Navbar (new in v1.4)
 VisualStrap is  available as a managed package so that it will be easy for users to upgrade it whenever a new release is released (Source is available @Github please check the project detail page) 

Where can you use it ?

Almost everywhere! But you can consider VisualStrap for pages that are exposed as Salesforce Sites or in Customer Portal. 

To get started and create some awesome UI  please follow the project link below

Documentation & Installation 

Please visit the Project page for documentation, Installation and Github link.

Tuesday, December 3, 2013

Well I have been working on VF pages for a long time now and I use a lot of AJAX / Rerender. Generally user has to wait for a AJAX action to complete to get results. So how to show the user something is working in background ? a wait screen ?

Yes indeed a wait screen with "Please Wait..." is required. I have already done some demos about the same here Loading/Wait Screen Using Jquery.

But that requires a bit of coding.
  • Add JS functions and ActionStatus
  • You may have to change your existing code to accommodate actionStatus
  • Add the new code and upload everything in static resource
Well to summarize if you need to show a generic message for all the AJAX calls that is talking place from the page you have to make changes to all the Action component to include a action status. So that raises a question can we built a listener that can track a AJAX call. The answer is yes we can build one. VFUIBlock does uses a generic listener to track the AJAX calls. 

Whats special about "VFUIBlock" ?

Its a generic componet that hooks up to all the AJAX calls and listens to them. You just have to install the component and drop the component in a Visualforce Page. It will automatically attaches itself to all the AJAX request originating from the page and will show a wait screen while the request is in Progress. No need to make any changes in your existing code, No need to use any actionstatus, It does it all by itself!

VFUIBlock in Action

How it works ?
In Visualforce AJAX request are sent to server using XMLHttpRequest, So what VFUIBlock does is, it overrides the default XMLHttpRequest and plugs in its own onSend method and OnReadyStateChange method while preserving the old Send and OnReadyStateChange method. Now with this override VFUIBlock adds in its on method with some extra fancy stuff to Show a block screen.

function addXMLRequestCallback($) {  
   var oldSend, i, oldonreadystatechange;  
   /*hold the old send method*/  
   oldSend = XMLHttpRequest.prototype.send;  
   /*override with a new function*/  
   XMLHttpRequest.prototype.send = function () {  
     /*call the blockui function or any other custom function to show your message*/  
     /*call the old send method*/  
     oldSend.apply(this, arguments);  
     /*cache the old onreadystate change method*/  
     oldonreadystatechange = this.onreadystatechange;  
     this.onreadystatechange = function (progress) {  
       /*call the blockui function or any other custom function to hide the message*/  

VFUIBlock uses the good old jQueryUIBlock to create the wait screen. Its a jQuery plugin which is used to create a overlay and to show a message to the user.

  • Lets you customise the HTML that is being displayed to user
  • Automatically attaches itself to AJAX events events originated from CommandButton,CommandLink etc.
  • No coding and changes in existing code required.
  • Works with CommandButton , ActionFunciton, ActionPoller, ActionSupport.
Sample Code / Syntax

Just drop the below code somewhere in your page

   <img src="/img/loading32.gif" />  
   <div style="font-size:150%;padding:5px">Please Wait....</div>  

You can always customise your message. So anything wrapped inside this VF component is displayed to User. In this example we are displaying a standard "Loading" image a long with a text "Please Wait..."