Visualforce page with pagination , sorting and searching

Tags

, , , , ,

As a Salesforce Developers we often get a requirements from to clients to develop a visualforce page to search a records of particular object.

e.g. Create a page which will accept a search criteria’s  and lists down records with matching criteria’s.  Since, Salesforce Reports often does not meet with the requirements of the clients, we end up creating a visualforce page.

Here I am going to show , how quickly  we can create such pages using a plugin called “Dable”. (pronounced as a ‘Dabble’)

This link will provide you good documentation, however I will demonstrate some critical parts.

 

  1. Create a Visualforce page
  2. Download a Dable javascript file from link the provided above.
  3. Refer it in your visualforce page
  4. Initialise “Dable”
  5. Thats it. Your table is now ready for sorting, searching and for paginations as well

 

How to use Dable?

Table can be built  –

  1. Using the data
  2. Using an existing HTML table

 

1. Using the data

  • Refer Dable script
  • Define <div> where you want to generate your HTML table
  • Provide Data in terms of Rows and Columns
  • Initialise the Dable with div’s “IdPicture1

Once you write above code, following table will be generated. Most important step is to define  a ‘div’ and passing its ‘Id’ to Dable script.

 

Picture3

You can also provide “Bootstrap/jQuery/Custom Styles” to your table as per your needs.

 

2. Using an existing HTML tablePicture2

 

Dable can be built on existing “HTML” table also. This is quite simple and easy to use. All you need to do is pass “div’s” id to dable script.

 

Please post comments, if you find this information useful to you. Thanks

 

 

 

Advertisements

How to build responsive HTML/VisualForce pages with bootstrap framework.

Tags

,

What is Responsive Web design?
Responsive Web design
is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.

What is BootStrap ?
Bootstrap is front-end very slick framework offered by Twitter.Inc. With simple import (as static resource) in Salesforce can change your experience of designing visual-force pages significantly and reduce development time to fairly low.
Using standard html tags you can create some beautiful and interactively rich effect, also on top of Visualforce as well.

How To Use?

1. Download Bootstrap library files:

1. Download bootstrap library file here http://getbootstrap.com/getting-started/#download and upload it as a static resource in Salesforce org.
 Or you can also directly refer files hosted on CDN via
 1." https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" (REQUIERD)
 2." https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" (optional)
 3." https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" (REQUIERD)

2. Bootstrap Require jQuery files. So you need to include this file as well.
You can refer this jQuery file via “https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js” .

Include jQuery files before Bootstrap files in you page.
So <Head> tag should contain following.
<head>
<script src=”https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js”></script&gt; //jQuey included before bootstrap files
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css”/&gt;         <!– Latest compiled and minified CSS –>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css”/&gt;         <!– Optional theme –>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js”></script&gt;         <!– Latest compiled and minified JavaScript –></head>Bootstrap comes with Predefined classes which we need to specify for our page/ page components.

3. How to Use Bootstrap classes
There are much more things available in Bootstrap, but here I will be explaining some basic things for input elements & layouts which can be included in our  Visualforce page
and make our visualforce Responsive.

1. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Bootstrap basically divides page size of any device in to 12 columns

2. Here’s how the Bootstrap grid system works:

  • Rows must be placed within a “.container “(fixed-width) ” or “.container-fluid” (full-width) for proper   alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Predefined grid classes like “.row and .col-xs-4 “are available for quickly making grid layouts.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example,” three equal columns would use three .col-xs-4. “
  • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

1

 

3. Consider following example:

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range)  before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

<apex:page applyHtmlTag="false" applyBodyTag="false" showHeader="false">
 <head>
 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"/>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
 </head>
 <body style="margin-top:50px;" class="container" >
 <div class="row">
 <div class="col-md-1" style="border:1px solid;background-color:rgba(86, 61, 124, 0.15);">col-md-1</div>
 <div class="col-md-1" style="border:1px solid;background-color:rgba(86, 61, 124, 0.15);">col-md-1</div>
 <div class="col-md-1" style="border:1px solid;background-color:rgba(86, 61, 124, 0.15);">col-md-1</div>
 <div class="col-md-1" style="border:1px solid;background-color:rgba(86, 61, 124, 0.15);">col-md-1</div>
 <div class="col-md-1" style="border:1px solid;background-color:rgba(86, 61, 124, 0.15);">col-md-1</div>
 <div class="col-md-1" style="border:1px solid;background-color:rgba(86, 61, 124, 0.15);">col-md-1</div>
 <div class="col-md-1" style="border:1px solid;background-color:rgba(86, 61, 124, 0.15);">col-md-1</div>
 <div class="col-md-1" style="border:1px solid;background-color:rgba(86, 61, 124, 0.15);">col-md-1</div>
 <div class="col-md-1" style="border:1px solid;background-color:rgba(86, 61, 124, 0.15);">col-md-1</div>
 <div class="col-md-1" style="border:1px solid;background-color:rgba(86, 61, 124, 0.15);">col-md-1</div>
 <div class="col-md-1" style="border:1px solid;background-color:rgba(86, 61, 124, 0.15);">col-md-1</div>
 <div class="col-md-1" style="border:1px solid;background-color:rgba(86, 61, 124, 0.15);">col-md-1</div>
 </div>
 </body>
 </apex:page>

Output:
On Desktops:
This grid system will divide in 12 columns for when class “ col-md-1” is specified. So  there will be 12 columns on a page.

2

On Tablets / Mobile:
Since we have not specified classes for Tables and Mobile, this div will show columns stacked horizontally on each other.

3

Similarly you can use different classes to specify columns

Similarly you can use different classes to specify columns

<div class=”row” >
<div class=”col-md-8″>.col-md-8</div>
<div class=”col-md-4″>.col-md-4</div>
</div>
<div class=”row”>
<div class=”col-md-4″>.col-md-4</div>
<div class=”col-md-4″>.col-md-4</div>
<div class=”col-md-4″>.col-md-4</div>
</div>
<div class=”row”>
<div class=”col-md-6″>.col-md-6</div>
<div class=”col-md-6″>.col-md-6</div>
</div>

Output:

4

You can also apply multiple classes to components and set its behaviour depending on how you want to show them on Desktop/Tablet/Mobile.

Consider this:

 <div class="row">
 <input type="text" id="name" class="col-md-8 col-sm-6 col-xs-12 " placeHolder="first name"/>
 <input type="text" id="surname" class="col-md-4 col-sm-6 col-xs-12 " placeHolder="Last name"/><br/>
 <input type="text" id="Street" class="col-md-4 col-sm-6 col-xs-12 " placeHolder="Street"/>
 <input type="text" id="City" class="col-md-4 col-sm-6 col-xs-12 " placeHolder="City"/>
 <input type="text" id="State" class="col-md-4 col-sm-6 col-xs-12 " placeHolder="State"/>
 </div>
 <div class="row">
 <br/>
 <button type="button" class="btn btn-default">Submit</button>
 </div>

Here Input element has 3 different classes for Desktop/ Mobile/ Tablet. One for each.
If a page is loaded on Desktop, class “col-md-*” will be applied to input elements.
If a page is loaded on Tablet, class “col-sm-*” will be applied to input elements.
If a page is loaded on Mobile Phone, class “col-xs-*” will be applied to input elements.

When viewed on Desktop, page will look like:

Here class “col-md-*” is applied for input elements.

5

When viewed on Tablet,page will look like:

Here class “col-sm-*” is applied for input elements.

6

When viewed on Mobile, columns stacked on each other horizontally.

Here class “col-sm-*” is applied for input elements.

7

Column wrapping
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line

<div class="row">
 <div class="col-xs-9">.col-xs-9</div>
 <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
 <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
 </div>

8

Since this div uses one component having  class “col-xs-9” and other component having class “col-xs-4”, it overflows on 12-column grid. (9 +4 = 13 , 13 > 12).
So this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
Note: This is applicable to all type of classes (ie. Col-md-*, col-sm-*, col-lg-*, col-xs-*)

Offsetting columns:

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

9

Bootstrap offers many more classes for Forms ,Tables, Buttons, Images etc. for page to be Responsive. Using these we can quickly make our visualforce page responsive in a very short span of time.

Bootstrap also offer many more build in “CSS” styles that can be applied to visualforce page/Components.

For more details check this link:
http://getbootstrap.com/css/

How to Use SOQL Query in Javascript

Tags

Force.com platform provides a AJAX Toolkit API which provides features to work with sObjects using JavaScript without the help of Apex codes.


It is not always necessary to write an apex class for every visualforce page we build.


First include AJAX Toolkit API Library file


<script src=”/soap/ajax/25.0/connection.js” type=”text/javascript”></script>


1. Query Data as follows:


//get Accounts using SOQL Query

var result = sforce.connection.query(“SELECT Id, Name FROM Account LIMIT 5”); .


var records = result.getArray(“records”); // This step is important, as we get records as an assosiative array.


if( records.length > 0 && records[0].Id != null ){


   var accId = records[0].Id; // Assign to variables


   var accName = records[0].Name; // Assign to variables

    

   alert(‘Account Name: ‘+accName+’ Account Id: ‘+accId);



}else{


   alert(‘No records found.’);


}


Since, we have the data assigned to different variables, now we can use the data either for displaying 

or some calculations as per use case.


2. Insert records as follows:-


var newRecords = new Array();


var accObj = new sforce.SObject(“Account”); // Creating an instance of the sObject


accObj.Name = ‘My Account’; //Assigning the Account Name.


accObj.Name = ‘myemail@test.com’; //Assigning the Account Name.


newRecords.push(accObj); //Adding records in array.


sforce.connection.create(newRecords); //Inserting data into the Account object.


3. Update records as follows:-


var newRecords = new Array();


//get Accounts using SOQL Query


var result = sforce.connection.query(“SELECT Id, Name FROM Account WHERE Name=’My Account’ LIMIT 1”);


var records = result.getArray(“records”); // The query result-set is assigned as an array.


var accObj = new sforce.SObject(“Account”); // Creating an instance of the sObject


accObj.set(“Id”, records[0].Id ); //Setting the Id to be updated


accObj.Name = ‘MyNew AccountName’; //Assigning the Account Name.


accObj.Descripton = ‘Account for Arxxus Technologies’; //Assigning the Account Description


newRecords.push(accObj); //Adding records.


sforce.connection.update(newRecords); //Updating data into the Account object.


You can also get input from user and run this script to insert,update or query any Object/sObject.

JQuery AutoComplete in Salesforce for Standard pages

Tags

In this post, I am going to explain How to Use Autocomplete feature of JQuery on Standard Pages of Salesforce like accounts etc.

Here I will be using pure javascript,Jquery and no visualforce page.

1. First of all , you  need 2 files

a. jqueryui (css file provided by Jquery)
b. AutoComplete  (My Javascript file)

You can get these files at my site: http://akshayagro-developer-edition.ap1.force.com/
There are two links. Click on those links and copy and paste the code to create two files.

Please note that jqueryui file needs to be saved as css file. (file extension should be .css). “AutoCompleteScript”  file should be saved as javascript file. (file extension should be .js)

2. Create a static resource for each file.
a. For JqueryUi file I have given  “jqueryCss”  as a resource name
b. For javacript file I have given  “AutoCompleteScript” as a resource name.

Now perform following steps:

2.1: Create a Custom Link for Home Page: and name it as “AutoComplete”. (or whatever name you want”)

a. Set its behaviour as “Execute JavaScript” b. Copy and paste following code inside it. {!REQUIRESCRIPT(“https://code.jquery.com/jquery-1.8.2.js&#8221;)}  {!REQUIRESCRIPT(“https://code.jquery.com/ui/1.9.0/jquery-ui.js&#8221;)}  {!REQUIRESCRIPT(“/resource/1412674833000/jqueryCss”)}  {!REQUIRESCRIPT(“/resource/1412674860000/AutoCompleteScript”)}

Here my URL to Static resource is /resource/1412674833000/jqueryCss” and  “/resource/1412674860000/AutoCompleteScript”  

You May need to change this to your static resource.  To check URL , Goto Static Resource -> <Select static Resource> -> View File. you should see your URL likehttps://c.ap1.visual.force.com/resource/1415169578000/AutoCompleteScript&#8221;.

2.2: Create a another custom Link for Home Page and name it as “Ajax Import”.

a. Set its behaviour as “Execute JavaScript”.

b. Copy and paste following code inside it. {!REQUIRESCRIPT(“/soap/ajax/23.0/connection.js”)} 

3: Create a Home Page Component of type Link and Name it as “AutoComplete Area”. Include links created in Step 1 & Step 2 in this component.

4: Keep “Ajax Import” Link above the  “AutoComplete” link  in Home Page Component .

As shown below:

: homepageComponent

the order is important here. Please do not ignore this or else the code will not work.

5: Add this component to Home Page Layouts.

6: You need to change setting for custom sidebar component to show on all pages Thats it ! You are good to go Now.

Just goto your Accounts page and start typing in Account Name  field. You should see suggestions coming. And if hover over any name , all address fields are autopopulated.

action region in visualforce

Tags

This blogpost describes mainly about <apex:actionRegion> tag used in visualforce Page. <apex:actionRegion> is used to optimise VF performance.

ActionRegion tag defines which components  of VF page should be processed by Force.com server.

By Components  mean, all the visualforce tags like inputField, inputText, outputPanels etc.

See this simple example Below.

1: Controller

actionRegionDemoController

2: A VF Page without Action Region

withoutActionRegion

 

in above example if you enter account Name, then suddenly an error for Industry appears saying “You Must Enter a value”.

How come this error appeared ? even if we just entered “Account Name”?.

This is beacuse, when AJAX request is generated through event such as “onClick”, or “onChange” etc. , whole <apex:form> is submitted to the Force.com server to Process setting Industry value to NULL. Hence error appeared.

How to Solve this Issue?

See this VF page code below.

withActionRegion

we used <apex:actionRegion> tag for field “myAccount.Name”.

What it does?

“ActionRegion” tells Force.com Server which components should be proccessed. Here whatever inside an ActionRegion is processed by a server when AJAX request is generated on event such as “KeyPress” or “onClick” etc.

Thus we do not get an error.

Above code is tested in my developer org. So it should work even if you copied and pasted it as is.

In case you think there is room for improvement please leave a comment.

Thanks.