Thursday, October 30, 2014

Finally after a really long dormant period, I have made quite a few changes in Visualstrap. Along with some minor changes, Visualstrap now works with PDF.

Main Site

How to use ?

Just set theme as "pdf"  from importvisualstrap component and you are all set.

 <c:importvisualstrap theme="pdf" />

Updated Packages

I have pushed the latest source code to git and unmanaged package will follow soon.
However I am still waiting for a fix of  to push update for the managed package

Tuesday, October 21, 2014

I have got this question several times from emails, to tweets and from lots of comments in blogs that "How can show more than 1000 records in table show that I can do more with PBE". PBE does add a lot of client side features like sorting, export, pagination etc but totally rely on data on the page to make it work, it cannot bring data from controller. So we need to bring as much as data we can to the page but to do this we need to overcome the 1K limit of list on VF.

If you haven't read about PBE (Pageblock table enhancer) you can read it here

So how can we overcome the 1K limit of list in VF pages ? 

There are basically two ways

  • JSRemoting : Use remoting and templating library like JSRender to create a table and initialize PBE on the same. I did a small blog on something very similar where you can display records using Remote objects, but for this we need to replace the data source from remoteobjects to remoting because 100records query limit
  • Using List<List<T>> : This is complete VF approach where we try to replicate the structure of pageblock table using apex:repeats.

JS Remoting

  • Very fast and lightweight
  • Can bring upto 15mb data
  • No overhead of viewstate
  • Ideal for showing long list of data

There is no better way to explain then jumping into the code.

How it works ?

  1. The page loads and brings data using Remoting method "getContacts"
  2. Once data is available the data is converted into HTML using JSrender and HTML template that is defined
  3. After load we call the initPageBlockTableEnhancerADV method to init PageblockEnahncer which reinitializes  the PBE



Sunday, August 17, 2014

For quite sometime I have been playing with JS libraries and Visuaforce to build some useful UI components, Textscanner is one of the component that has emerged from the same experiment.

What is Textscanner ?

Textscanner is Visualforce implementation of Knwl.js natural language reading library. You can read about the same here . What Texscanner does is wrap this nice little library with the help of visualforce components.

What it can do ?

Textscanner with the help of Knwl.js can scan through the passed text and can extract important information and spit them out in a nice little interface

  • Phone Numbers 
  • Links 
  • Emotion 
  • Date 
  • Time 
  • Email 
  • Places 
  • Hastags

How to use it ?

The syntax is very simple, 


Support Center / Call center executive has to interact with many customers daily and they really need to have the key information handy from a lengthy description. So solve this we can create an inline VF page CaseScanner in our case using TextScanner and include the same in Case Detail page layout.

Where can you use it ?

  • Extracting notes from lengthy text
  • Telephone transcripts
  • Case comments
  • Product Descriptions
  • Descriptions

Friday, June 13, 2014

Modals are part of the Visualstrap from very beginning but I never talked much about them. Modals can be really help to enhance the user experience. They can let you do many things without going to and fro between pages.

In Salesforce, we are used to this type of arrangement. For example have a look at the "New" / "Edit" buttons, they will take you to a another page to accomplish the task. It feels a bit clunky.
To make the experience  fluid and fast these pages can be replaced with modals.


Lets say we want a page where
  • See all the cases
  • Create new cases
The page can be extended to close and update the cases as well


The Page & Controller 

The page and controller are pretty simple.

The Catch

  •  Opening Modal : Modal can be opened using JS or html attribute. In this demo we are using JS
    <a class="btn btn-success btn-md" onclick="$('#newCase').modal('show');return false;">New Case</a> 
Closing the Modal Only when insert is success : We cannot just close the Modal when the user presses the Save button because there can be validation errors/required fields missing etc. To control this we are using a controller variable "isSuccess". We are setting it to true only if the transaction was success and based on the variable value we are calling the modal hide on the page.

Controller : This method sets the isSuccess flag to true only when the records is saved successfully.
    public void saveCase(){
            insert caseObj;
            isSuccess = true;
        catch(Exception ex){
            isSuccess = false;

Page : The below section only renders when isSuccess is true ( and lets the page to close only when the save was success )

<apex:outputPanel rendered="{!isSuccess}">

VSModal in action

Below is the live demo of the page, you are welcome to try creating some cases for me :)

Saturday, June 7, 2014

Salesforce has just released RemoteObjects and its really promising. You can now do lot more by just writing a page and without any need of a controller.

RemoteObjects now lets you do DML, Query etc just using the Javascript and to add they are not even counted against the limit. Lets see how can we use the same to create a stateless Pageblock table.


  • Jquery : For DOM Manipulation
  • JSRender : For templating
  • Some styling


Jquery is a very popular DOM manipulation library and if you are into JS you probably don't need any introduction of the same. Jquery in this DEMO does the job of DOM manipulation like picking up templates, changing DOM etc.


JSRender is not so popular templating engine which is successor of JQuery Templates. Lot of things have changed from JQuery Templates and they are now much more easier to use than ever. I have been preferring JSRender because they need very less code and are easier to use and understand.


To give our table a familiar look of PageBlockTable we will have to borrow some styling for Salesforce.

Styling from Salesforce

The Page

The end result

Whats Advantage ?

  • Almost zero viewstate
  • Pretty fast loading time and refresh
  • Suitable for mobiles and large pages

Monday, May 19, 2014

Well this weekend something surprising happened, Visualstrap crossed 1000 install limit (inlcuding appexchange & from my blog). I am really excited and happy that people are finding this small little package useful. Thanks for all the support !

So to make this package more delightful and easy to learn, I have redesigned the Visualstrap site to include all the documents and instruction at one place.

This site itself is an example of how you can create a good custom ui inside salesforce. I am still working on making the site better and putting all the documentation at one place. Thanks for all the support and love!

Saturday, May 17, 2014

This is quick little post on how to create a site/page to access Salesforce even if you don't have the access codes and to some extent to create your own custom login screen. Generally helpful when same login is shared by multiple user.

There are already apps like Trapdoor for mac that lets you do the same, but this one just an cloud version of the same and of course you can build one for yourself!

What you need to make this work ?

  • Username and Password
  • The security token

How this works ?

  • The username  & password entered are used to make a SOAP call to Salesforce using the partner Endpoint
  • The response is parsed to retrieve the SessionId and Salesforce Server URL
  • Using the ServerURL and SessionId the user is redirected to "frontdoor.jsp" page of Salesforce which lets user log into Salesforce using session Id.

This page can be hosted in any org and not necessarily in the org you are trying to log in



The Page uses Visualstrap to create a custom login screen. Same can be installed from here . And you can always copy the page code to create your own custom login screen for salesforce :)

<apex:page controller="SalesforceLogin_Con" showHeader="false" docType="html-5.0">
         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  
         background: #344A5F;
         margin: auto;
         background-color: #2A94D6;
         color:#1abc9c !important;
         margin-bottom:0px !important;
     .messageText h4{display:none}
    <vs:importvisualstrap />
    <apex:form >
        <vs:visualstrapblock >
            <c:navbar brand="Blogforce9" logo="" inverse="true" type="fixed-top">
            <a href="" target="_blank" class="btn btn-primary btn-danger"><vs:glyph icon="home"/> Home</a>
           <div class="container">
                <apex:outputPanel layout="block" styleClass="row">
                    <div class="col-md-6 col-md-offset-3">
                        <div class="jumbotron spcl">
                           <vs:panel >
                               <div style="margin-bottom:10px">
                                   <div class="logo">S</div>
                                   <div class="logoTxt">
                                       <div style="font-size:150%;">Salesforce Login</div>
                                       <small style="font-weight:normal">Login to Salesforce using Security token to avoid Access Code emails</small>
                            <vs:panel >
                                <apex:pageMessages ></apex:pageMessages>
                                <vs:formblock alignment="horizontal" style="margin-top:5px;padding:10px">
                                    <vs:formgroup >
                                        <apex:outputLabel >Username</apex:outputLabel>
                                        <apex:inputText value="{!Username}" styleClass="form-control" required="true"/>
                                    <vs:formgroup >
                                        <apex:outputLabel >Password + Security Token</apex:outputLabel>
                                        <apex:inputSecret value="{!Password}" styleClass="form-control" required="true"/>
                                    <vs:formgroup >
                                        <apex:outputLabel >Domain</apex:outputLabel>
                                        <apex:selectList value="{!domain}" styleClass="form-control" size="1">
                                            <apex:selectOption itemValue="login" itemLabel="login"></apex:selectOption>
                                            <apex:selectOption itemValue="test" itemLabel="test"></apex:selectOption>
                                    <vs:formgroup >
                                        <apex:commandButton value="Login" action="{!doLogin}" styleClass="btn btn-success btn-md pull-right" style="width:200px"/>
                                    <small class="text-info">*Passwords are not saved by this page</small>
            <c:navbar brand="Blogforce9" inverse="true" type="fixed-bottom" layout="none" >              
                <div class="text-muted" style="margin:10px;font-size:130%;text-align:Center" layout="block">  
                    Site built with  <a href="" target="_blank" class="btn btn-sm btn-danger"><vs:glyph icon="heart"/> VisualStrap</a> 


public class SalesforceLogin_Con {
    public String username{get;set;}
    public String password{get;set;}
    public String domain{get;set;}

    public Pagereference doLogin(){
        Pagereference loginReference;
            String loginRes = sendLoginRequest(username,password,domain);
            if(!String.isBlank(loginRes) && !loginRes.containsIgnoreCase('INVALID_LOGIN')){
                Dom.Document loginDoc = new Dom.Document();
                Dom.XmlNode resultElmt = loginDoc.getRootElement()
                /*Extract the session Id and Server url*/
                String serverurl = resultElmt.getChildElement('serverUrl','').getText().split('/services')[0];
                String sessionId = resultElmt.getChildElement('sessionId','').getText();
                /*Use frontdoor.jsp to login to salesforce*/
                loginReference =  new Pagereference(serverurl+'/secur/frontdoor.jsp?sid='+sessionId);
                Apexpages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR,'Please check your Username and Password.'));
       catch(Exception ex){
        return loginReference;
    /*Method to send login request using using SOAP*/
    private static String sendLoginRequest(String un,String pw,String domain){
        HttpRequest request = new HttpRequest();
        request.setEndpoint('https://' + domain + '');
        request.setHeader('Content-Type', 'text/xml;charset=UTF-8');
        request.setHeader('SOAPAction', '""');
        request.setBody('<Envelope xmlns=""><Header/><Body><login xmlns=""><username>' + un + '</username><password>' + pw + '</password></login></Body></Envelope>');
        Http h = new Http();
        HttpResponse res = h.send(request);
        return res.getBody();
This Code can further be Reused for
  • Generate SessionId to Call Salesforce REST Endpoints
  • Salesforce to Salesforce custom Integration
  • This page can be hosted in site as a Custom/Branded Salesforce Login