Pagination in apex with StandardSetController

When record count get increased, typical solution for most common problems like page size getting large, render time getting increased is applying pagination. Salesforce has a powerful mechanism to introduce pagination into your data set easily, with StandardSetController.

Here how you'll do it.

Your controller

public with sharing class ControllerPagination {
    Public Integer noOfRecords{get; set;}
    Public Integer size{get;set;}
    public ApexPages.StandardSetController standardSetCtrl {
        get{
            if(standardSetCtrl == null){
                size = 10;
                string queryString = 'Select Name, Type, BillingCity, BillingState, BillingCountry from Account order by Name';
standardSetCtrl = new ApexPages.StandardSetController(Database.getQueryLocator(queryString));
standardSetCtrl.setPageSize(size);
                noOfRecords = standardSetCtrl.getResultSize();
            }
            return standardSetCtrl;
        }set;
    }
     
    Public List<Account> getAccounts(){
        List<Account> accList = new List<Account>();
        for(Account a : (List<Account>)standardSetCtrl.getRecords())
            accList.add(a);
        return accList;
    }
     
    public pageReference refresh() {
        standardSetCtrl = null;
        getAccounts();
        standardSetCtrl.setPageNumber(1);
        return null;
    }
}

Your VF Page

<apex:page controller="ControllerPagination">
    <apex:form >
        <apex:pageBlock id="pb">
            <apex:pageBlockTable value="{!Accounts}" var="a">
                <apex:column value="{!a.Name}"/>
                <apex:column value="{!a.Type}"/>
                <apex:column value="{!a.BillingCity}"/>
                <apex:column value="{!a.BillingState}"/>
                <apex:column value="{!a.BillingCountry}"/>
            </apex:pageBlockTable>
            <apex:panelGrid columns="7">
                <apex:commandButton status="fetchStatus" reRender="pb" value="|<" action="{!standardSetCtrl.first}" disabled="{!!standardSetCtrl.hasPrevious}" title="First Page"/>
                <apex:commandButton status="fetchStatus" reRender="pb" value="<" action="{!standardSetCtrl.previous}" disabled="{!!standardSetCtrl.hasPrevious}" title="Previous Page"/>
                <apex:commandButton status="fetchStatus" reRender="pb" value=">" action="{!standardSetCtrl.next}" disabled="{!!standardSetCtrl.hasNext}" title="Next Page"/>
                <apex:commandButton status="fetchStatus" reRender="pb" value=">|" action="{!standardSetCtrl.last}" disabled="{!!standardSetCtrl.hasNext}" title="Last Page"/>
                <apex:outputText >{!(standardSetCtrl.pageNumber * size)+1-size}-{!IF((standardSetCtrl.pageNumber * size)>noOfRecords, noOfRecords,(standardSetCtrl.pageNumber * size))} of {!noOfRecords}</apex:outputText>
                <apex:commandButton status="fetchStatus" reRender="pb" value="Refresh" action="{!refresh}" title="Refresh Page"/>
                <apex:outputPanel style="color:#4AA02C;font-weight:bold">
                    <apex:actionStatus id="fetchStatus" startText="Fetching..." stopText=""/>
                </apex:outputPanel>
            </apex:panelGrid>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Editable HTML Grid View with JQuery

Most of the times we need to have editable grid views in html pages where the user can view the existing records in non-editable mode and if they need to edit data, with a simple click event they can convert the same row of the grid to the editable mode. For example following is a record of the grid view which already exists. 

 Now the user needs to edit the same row without prompting into another section or popup. Which means the user needs the inline edit option. Then it would be appear as follows.

You may note that the ‘edit’ icon has been changed to ‘save’ in the Action column. Also the idea of having ‘Add Row’ button is to add a new row to the grid as the name saying itself. Below is a view with an existing record and newly added row by clicking the ‘Add Row’ button.

In each row, at the end I’m having a ‘delete’ icon so that any row can be deleted independently. Tired with explaining the functionalities, also I know that you are tired with reading :D. It’s time to move to the implementation.

Table

<table id="editablegrid" style="width:100%">
  <thead>
      <th>Action</th>
      <th>Date</th>
      <th>Link</th>
      <th>Currency Type</th>
      <th>Value</th>
      <th>Verified</th>
  </thead>
  <tbody></tbody>
 </table>    

 <input id="btnAddrow" type="button" value="Add Row" onclick="Add(null)" />

Dynamic Functionalities with JQuery
First, lets's have a global variable to hold the number of rows deleted. Later you may get why doing this.

var deletedRows = 0;    //hold the number of rows deleted.

Add : Here I'm assuming there can be some existing records as well. So the Add function will be called from two different places; for each existing record(probably from the $(document).ready), from the Add button click event. To handle both, I'm using the parameter that is passed to the function as follows. Also note that my

instance

object is having some fields as it's using the dot(.) notation.

function Add(instance){
  var rowCount = $('#editablegrid tr').length;
  var delRows = window.deletedRows;
            
  if(instance == null)
  {
     $("#editablegrid tbody").append(
     "<tr id='sdr"+rowCount+"_"+delRows+"'>"+
     "<td><img id='btnSave"+rowCount+"_"+delRows+"' src='images/save.png' /></td>"+
     "<td><input id='date"+rowCount+"_"+delRows+"' type='text' /></td>"+
     "<td><input type='text' /></td>"+
     "<td><select id='currency"+rowCount+"_"+delRows+"'></select></td>"+
     "<td ><input type='text' /></td>"+
     "<td><input type='checkbox'/></td>"+
     "<td><img id='btnDelete"+rowCount+"_"+delRows+"' src='images/delete.png' /></td>"+             
     "</tr>");
                                        
     for(var i=0;i<currencyTypes.length;i++)
     {
       $('#currency'+rowCount+'_'+delRows).append($("<option></option>")
       .attr("value",currencyTypes[i])
       .text(currencyTypes[i]));
     }
                    
     $("#btnSave"+rowCount+"_"+delRows).bind("click", Save);
   }
   else
   {
     var verifiedVal = (instance.Verified == true)?1:0;
     var verifiedChecked = (instance.Verified == true)?'checked="checked"':'';

     $("#editablegrid tbody").append(
     "<tr id='sdr"+rowCount+"_"+delRows+"'>"+
     "<td><img id='btnEdit"+rowCount+"_"+delRows+"' src='images/edit.png' /></td>"+
     "<td>"+instance.date+"</td>"+
     "<td title='"+instance.link+"'>"+instance.link+"</td>"+
     "<td>"+instance.currency+"</td>"+
     "<td >"+instance.number+"</td>"+
     "<td><input type='checkbox' value='"+verifiedVal+"' "+verifiedChecked+"/></td>"+
     "<td><img id='btnDelete"+rowCount+"_"+delRows+"' src='images/delete.png' /></td>"+     
     "</tr>");
                    
     $("#btnEdit"+rowCount+"_"+delRows).bind("click", Edit);
   }                                  
   $("#btnDelete"+rowCount+"_"+delRows).bind("click", Delete);
 };

Save:

function Save(){    
 var par = $(this).parent().parent(); //tr
 var rowIndex = par.attr('id').substring(3);
 var delRows = window.deletedRows;
 var sowDetailRecord = [];
            
 var tdAction = par.children("td:nth-child(1)");
 var tdDate = par.children("td:nth-child(2)");
 var tdLink = par.children("td:nth-child(3)");
 var tdCurrency = par.children("td:nth-child(4)");
 var tdValue = par.children("td:nth-child(5)");
 var tdVerified = par.children("td:nth-child(6)");
 var tdHidden = par.children("td:nth-child(8)");
            
 tdAction.html("<img id='btnEdit"+rowIndex+"_"+delRows+"' src='images/edit.png' class='btnEdit'/>");
 tdDate.html(tdDate.children("input[type=text]").val());
 tdLink.html(tdLink.children("input[type=text]").val());
 tdCurrency.html(tdCurrency.children("select").find(":selected").text());
 tdValue.html(formatCurrency(tdValue.children("input[type=text]").val()));            
        
 $("#btnEdit"+rowIndex+"_"+delRows).bind("click", Edit);

};

EDIT: here for the dropdown I'm trying to show currency types. Please note that the

currencyType

array need to be declared first. Since I'm showing the main functionalities of the grid view thought to remove that. Make sure you initialize that if you are going to have a dropdown.

function Edit(){            
 var par = $(this).parent().parent(); //tr
 var rowIndex = par.attr('id').substring(3);
 var delRows = window.deletedRows;
            
 var tdAction = par.children("td:nth-child(1)");
 var tdDate = par.children("td:nth-child(2)");
 var tdLink = par.children("td:nth-child(3)");
 var tdCurrency = par.children("td:nth-child(4)");
 var tdValue = par.children("td:nth-child(5)");
            
 var existingCurrencyType = tdCurrency.html();
                    
 tdAction.html("<img id='btnSave"+rowIndex+"_"+delRows+"' src='images/save.png' />");
 tdDate.html("<input type='text' id='txtDate"+rowIndex+"_"+delRows+"' value='"+tdDate.html()+"'/>");
 tdLink.html("<input type='text' id='txtLink' value='"+tdLink.html()+"'/>");
 tdCurrency.html("<select id='currency"+rowIndex+"_"+delRows+"' style='width:100%'></select>");
 tdValue.html("<input type='text' id='txtValue' value='"+tdValue.html()+"' />");
        
 for(var i=0;i<currencyTypes.length;i++)
 {
   $('#currency'+rowIndex+'_'+delRows).append($("<option></option>")
     .attr("value",currencyTypes[i])
     .text(currencyTypes[i]));
 }
        
 $('#currency'+rowIndex+'_'+delRows).find('option').each( function() {
  var $this = $(this);
  if($this.text() == existingCurrencyType) {
    $this.attr('selected','selected');
    return false;
  }
 });

 $("#btnSave"+rowIndex+"_"+delRows).bind("click", Save);
};

DELETE:

function Delete(){
            var par = $(this).parent().parent(); //tr
            window.deletedRows++;
            par.remove();
        };

Hope you can guess that deletedRowsvariable is maintaining here to bind the id of each element correctly when a deletion is happen. Cheers!

Simple Date Picker application with Java

Most of the time when developing desktop applications, it may need calendar components(or Date Picker in the term :)). This is a very simple Date Picker example to those who are little bit familiar with java swing.

• Go into your favourite java editor and create a file TestDatePicker.java
• Copy following code and paste at there and save it.

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

class DatePicker {
    int month = java.util.Calendar.getInstance().get(java.util.Calendar.MONTH);
    int year = java.util.Calendar.getInstance().get(java.util.Calendar.YEAR);;
    JLabel l = new JLabel("", JLabel.CENTER);
    String day = "";
    JDialog d;
    JButton[] button = new JButton[49];

    public DatePicker(JFrame parent) {
            d = new JDialog();
            d.setModal(true);
            String[] header = { "Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat" };
            JPanel p1 = new JPanel(new GridLayout(7, 7));
            p1.setPreferredSize(new Dimension(430, 120));

            for (int x = 0; x < button.length; x++) {
                    final int selection = x;
                    button[x] = new JButton();
                    button[x].setFocusPainted(false);
                    button[x].setBackground(Color.white);
                    if (x > 6)
                            button[x].addActionListener(new ActionListener() {
                                    public void actionPerformed(ActionEvent ae) {
                                            day = button[selection].getActionCommand();
                                            d.dispose();
                                    }
                            });
                    if (x < 7) {
                            button[x].setText(header[x]);
                            button[x].setForeground(Color.red);
                    }
                    p1.add(button[x]);
            }
            JPanel p2 = new JPanel(new GridLayout(1, 3));
            JButton previous = new JButton("<< Previous");
            previous.addActionListener(new ActionListener() {
                    public void actionPerformed(ActionEvent ae) {
                            month--;
                            displayDate();
                    }
            });
            p2.add(previous);
            p2.add(l);
            JButton next = new JButton("Next >>");
            next.addActionListener(new ActionListener() {
                    public void actionPerformed(ActionEvent ae) {
                            month++;
                            displayDate();
                    }
            });
            p2.add(next);
            d.add(p1, BorderLayout.CENTER);
            d.add(p2, BorderLayout.SOUTH);
            d.pack();
            d.setLocationRelativeTo(parent);
            displayDate();
            d.setVisible(true);
    }

    public void displayDate() {
            for (int x = 7; x < button.length; x++)
                    button[x].setText("");
            java.text.SimpleDateFormat sdf = new java.text.SimpleDateFormat(
                            "MMMM yyyy");
            java.util.Calendar cal = java.util.Calendar.getInstance();
            cal.set(year, month, 1);
            int dayOfWeek = cal.get(java.util.Calendar.DAY_OF_WEEK);
            int daysInMonth = cal.getActualMaximum(java.util.Calendar.DAY_OF_MONTH);
            for (int x = 6 + dayOfWeek, day = 1; day <= daysInMonth; x++, day++)
                    button[x].setText("" + day);
            l.setText(sdf.format(cal.getTime()));
            d.setTitle("Date Picker");
    }

    public String setPickedDate() {
            if (day.equals(""))
                    return day;
            java.text.SimpleDateFormat sdf = new java.text.SimpleDateFormat(
                            "dd-MM-yyyy");
            java.util.Calendar cal = java.util.Calendar.getInstance();
            cal.set(year, month, Integer.parseInt(day));
            return sdf.format(cal.getTime());
    }
}

public class TestDatePicker {
 
 public static void main(String[] args) {  
   /////////////Picker/////////////////////////
  JLabel selectDate = new JLabel("Select Date Here ->");
  JLabel selectedDate= new JLabel("Selected Date ->");
        final JTextField text = new JTextField(20);       
        JButton b = new JButton("Select"); //button for calendar popup
        JButton close = new JButton("Close"); //button for close the application
        JPanel pPic = new JPanel();
        pPic.setLayout(new GridLayout(3,2));
        pPic.add(selectDate);       
        pPic.add(b);
        pPic.add(selectedDate);
        pPic.add(text);
        pPic.add(close);
        final JFrame f = new JFrame("Simple Date Picker");
        f.getContentPane().add(pPic);
        f.pack();
        f.setVisible(true);
        b.addActionListener(new ActionListener() {
                public void actionPerformed(ActionEvent ae) {
                 text.setText(new DatePicker(f).setPickedDate());
                }
        });
        ////////////////////////Picker////////////////////////////
      
        close.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent ae) {
             f.dispose();
            }
        });                
 }  
}

When you run the program, firstly you will see the main frame of the application which looks like,

Then when you hit on 'Select' button, the calendar will be popup as follows

Select what ever the date you like(you can even navigate for other months as well with 'Previous' and 'Next' buttons). The selected date will be included in the text field below the 'Select' button, as follows.

It's done :)

Cheers!!!

සරවණ සිරි සුරණි

සුමුදු සුසිනිඳු සිනිඳු සුදු මුදු සෞම්‍ය සඳවත සුකොමලී
රන් රුවැති රූ රුවැති රතඳර රම්‍ය රසඳුන් රම්බරී
වෙහෙස වෙහෙසන විජිනිපත වන් වසන්තයේ වට වනමලී
නිමක් නැති නිල නුබයි නුඹ නොසැපතෙත් නොවෙනස් නන්දනී

තුන්වැනි සීනුව

අපි කවුරුත් කරන්නෙ කාගෙවත් උවමනාවකට කාගෙවත් හිත පිනවන්න වැඩ කරන එක මිසක් අපිට උවමනා දේ නෙමෙයි. පේරාදෙණිය ඉංජිනේරු පීඨ කලා කවයෙන් අපි කරපු "තුන්වැනි සීනුව" නාට්‍යය කතා කරන්නෙ මේ මාතෘකාව ගැන.

ගොඩ දෙනෙක්ගෙ දින සති මාස ගානක මහන්සියෙ ප්‍රථිඵලයක් විදියට නාට්‍යය ගොඩක් සාර්ථකව සරච්චන්ද්‍ර එළිමහන් රන්ග පීඨයෙ එළි දක්වන්න පුලුවන් වුණා. විශ්ව විද්‍යාල ජීවිතයෙ ලබපු හොඳම අත්දැකීමක්.
මේ නාට්‍යයෙ විශේෂත්වය මේකෙ සම්පූර්ණ නිර්මාණ අයිතිය කලා කවය සතු වීම.පිටපත, රංගනය, අධ්‍යක්ෂණය, සංගීතය, ගායනය, වේදිකා සැරසිලි සියල්ලක්ම කලාකවයෙ සහෝදරත්වය අතින් නිර්මාණය වුණු දේවල්. නාට්‍යයෙ තිබුණ අන්තිම සින්දුවත් එහෙමයි. මේ තියෙන්නෙ ඒ සින්දුව.



video sounds නම් ටිකක් විතර upset වුණාට drama එකේදි සින්දුව පෙන්නුවෙ මෙන්න මේ විදියට