Monday, April 6, 2015


Salesforce trailhead is here for a while, but I somehow avoided it , but finally decided into jumping into the same. There is whole big list of modules in there but the one that certainly draw me to itself was Visualforce Mobile !




Trailhead really a fun way to learn stuff about platform, and really presents the concepts well.


About the Visualforce Mobile Module


This module takes you from Basic to advanced custom css to suite the look and feel of Salesforce1. It covers all of them !

  • A quick getting started
  • A quick small tour to using Salesforce RemoteObjects in visualforce pages.
  • Using global Actions
  • Talks a lot of bot Salesforce1 design and StyleGuide. Mainly focused about how to make your pages mobile 
  • Also the one-starter library
  • And finally a bit about different JS libraries like AngularJS , Ionic and Bootstrap

Why its important ?


Well trailhead is really well compiled module, and I wish I had covered this a bit before ! I have already covered similar topics in my past but it still looks fresh. At the end of the day on mobile UX does matters. A mobile user definately wants the information to be presented in a well organized manner. Something like




Trailhead was a really fun experience and awesome way to learn the Mobile Visualforce pages ! And hey there are lot many modules in there. Here are the few from my todo list






You can read them all here 

https://developer.salesforce.com/trailhead/modules




Friday, April 3, 2015


Finally back after long long time!

I have been working with AngularJs for a while now and I find Angular to be really helpful to create stateless interactive pages and best part is you hardly need any Apex Controller for the same. Pages are fast, fluid and Mobile friendly (Salesforce 1).

With time I have found the best ingredient to prepare your AngularJS page are

  • AngularJS ( of course )
  • SObject-Remote (thanks to Jason Venable)
  • Bootstrap (not required)

Lets start with a simple example.

Bringing data to the page


This would be a pretty easy example where we will be using SObject-Remote to bring query data from Salesforce Accounts



The Catch

  • The area ng-controller marks the area which can access the $scope variable of that particular controller.
  • You can access variable inside $scope by using {{}}. If you have a variable $scope.accounts you can directly access that in page by doing {{accounts}}, just like regular merge field but a bit different syntax.
  • We have used $scope.$apply() , which generally tells angular to redraw the UI  / View. Since remoting works async we need to notify the angular to redraw once we have the data by calling this method.

End Result

Finally a stateless fluid page without any controllers.


Sunday, January 25, 2015


You might faced a challenged, atleast once while developing pages, where you need to rerender the page which contains a <apex:inputFile/> or an Rich Text area field <apex:textarea richtext="true"/> . There is no out of the box solution for this but there is alternative solution where you can implement a CKEditor to do so.

How can I solve this ?


I have been using ckeditor for quite sometime and eventually developed a vf component for myself called "customrtf". Customrtf is based on salesforce's rich text implementation and borrows code from it. This is the very fist version of the component, and many other features will come eventually.

What it does ?


  • Lets you convert a textarea into a richtext area
  • Allows re-rendering of the page

How to use it ?



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 https://success.salesforce.com/apex/issues_view?id=a1p30000000Sp4YAAS  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


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

Screenshot



Demo



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 https://github.com/loadfive/Knwl.js . 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, 


Example

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.

Scenario 

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

Prerequisite 

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(){
        try{
            insert caseObj;
            init();
            isSuccess = true;
        }
        catch(Exception ex){
            Apexpages.addMessages(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}">
     <script>
         $('#newCase').modal('hide');
     </script>
</apex:outputPanel>

VSModal in action



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