function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Amit_Amit_ 

Dispaly Alpha bar navigation on Visualforce page for easy jump to pages

Hi

I have simple requirement, I need to disaplay  a document list in alpha order and have an alpha bar navigation to easily jump to pages on Visualforce page(Similar to apex class/ visualforce list page which displays the list of class and on click of specific character like "C" or "D" or any other char it display result based on the charecter clicked) I need a soultion something like that any suggestion is highly appricated.

 

Thanks in Advance.

Vee_RVee_R

Hi,

 

Please find below suggestion. It may help you

 

create a map<string, string>(mapAlpha) and populate values from A to Z in the constructor
Use the same map on the page using repeat tag and commandlink.

<apex:repeat value="{!mapAlpha}" var="alpha">
    <apex:commandLink value="{!alpha}" action="{!refresh}">
            <apex:param name="alpha" value="{!alpha}" assignTo="{!passingString}"/>
        </apex:commandLink>
</apex:repeat>

Pass value using param attribute to the controller method, where you query

public PageReference refresh(){

....Select fieldName_1, fieldName_2 ... from some_Object where Field_Name.left(1).equalsIgnoreCase(passingString)


}

Advanz Knowledge SystemsAdvanz Knowledge Systems

Hi,

 

Please go through this sample code. Hope that is very useful for you

 

Visual Force:

 

<apex:page controller="alphatoobarCon" showHeader="false">
<apex:form >
<center><apex:toolbar id="toolbar" height="40" styleClass="rich-toolbar" width="1000px;" style="background-color:blue;background-image:none;" >
    <font color="white" >
                <apex:toolbarGroup itemSeparator="line">                   
                    <apex:commandLink value="A" style="color:white;" Action="{!aaa}"/>
                    <apex:commandLink value="B" style="color:white;" action="{!bbb}"/>
                    <apex:commandLink value="C" style="color:white;" action="{!ccc}"/>
                    <apex:commandLink value="D" style="color:white;" action="{!ddd}"/>
                    <apex:commandLink value="E" style="color:white;" action="{!eee}"/>
                    <apex:commandLink value="F" style="color:white;" action="{!fff}"/>
                    <apex:commandLink value="G" style="color:white;" action="{!ggg}"/>
                    <apex:commandLink value="H" style="color:white;"/>
                    <apex:commandLink value="I" style="color:white;"/>
                    <apex:commandLink value="J" style="color:white;"/>
                    <apex:commandLink value="K" style="color:white;"/>
                    <apex:commandLink value="L" style="color:white;"/>
                    <apex:commandLink value="M" style="color:white;" action="{!mmm}"/>
                    <apex:commandLink value="N" style="color:white;"/>
                    <apex:commandLink value="O" style="color:white;" action="{!ooo}"/>
                    <apex:commandLink value="P" style="color:white;"/>
                    <apex:commandLink value="Q" style="color:white;"/>
                    <apex:commandLink value="R" style="color:white;" action="{!rrr}"/>
                    <apex:commandLink value="S" style="color:white;"/>
                    <apex:commandLink value="T" style="color:white;"/>
                    <apex:commandLink value="U" style="color:white;"/>
                    <apex:commandLink value="V" style="color:white;"/>
                    <apex:commandLink value="W" style="color:white;"/>
                    <apex:commandLink value="X" style="color:white;"/>
                    <apex:commandLink value="Y" style="color:white;"/>
                    <apex:commandLink value="Z" style="color:white;"/>
                    <apex:commandLink value="All" style="color:white;" action="{!all}"/>
                </apex:toolbarGroup>                
     </font>               
</apex:toolbar>
<apex:outputPanel >  
   <apex:dataTable value="{!acc}" var="a">
      <!--<apex:column value="{!a.id}"/>-->
      <apex:column value="{!a.name}"/>
   </apex:dataTable>
</apex:outputPanel>
</center>
</apex:form>
</apex:page>

Apex Controller:

public with sharing class alphatoobarCon {

    public PageReference ggg() {
        return null;
    }


    public PageReference eee() {
        return null;
    }


    public PageReference ddd() {
        return null;
    }


    public PageReference ccc() {
        return null;
    }


    public PageReference bbb() {
        return null;
    }


string x;
    public PageReference fff() {
    x = 'f';
    acc.clear();
    String qry = 'select  name from document ' + 'where name LIKE \''+x+'%\' order by name';
    acc= Database.query(qry);
        return null;
    }
    
    string xx;
    public PageReference rrr() {
    xx = 'R';
    acc.clear();
    String qry = 'select  name from document ' + 'where name LIKE \''+xx+'%\' order by name';
    acc= Database.query(qry);
        return null;
    }
    
    string z;
    public PageReference mmm() {
    z = 'm';
    acc.clear();
    String qry = 'select  name from document ' + 'where name LIKE \''+z+'%\' order by name';
    acc= Database.query(qry);
        return null;
    }
    
    string y;    
    public PageReference ooo() {
    y = 'o';
    acc.clear();
    String qry = 'select  name from document ' + 'where name LIKE \''+y+'%\' order by name';
    acc= Database.query(qry);
        return null;
    }


  public alphatoobarCon()
  {
   all();
  }

    public void all() {
    acc = [select name from document];
    }


     public list<document> acc{set;get;}
 
    public void aaa() 
    {
     acc.clear();
     acc = [select name from document];   
    }

}
Amit_Amit_
Hi Pradeep,

your solution worked perfectly for me, though I have to write tons of lines of code.
Amit_Amit_

Hi Dim,
When I am trying with your method, every thing is fine but in my passingString I am getting value as 'A &#124' , this &#124 is getting populated with every other Character or alpha word I am clicking I have tried to remove it using replace method that but even tough this character(' &#124') is not getting removed. here is what I am trying to do. please help me out where I am doing mistake:

<apex:repeat value="{!mapAlpha}" var="alpha">
             <apex:commandLink value="{!alpha}" action="{!refresh}" style="font-size:10px; text-align:right;color:red;" >
                          <apex:param name="alpha" value="{!alpha}" assignTo="{!passingString}"/>
             </apex:commandLink>
</apex:repeat>

Controller :

public String[] getmapAlpha() {

return new String[]{'A |',' B |',' C |',' D |',' E |',' F |',' G |',' H |',' I |' ...................,'Z |'};

}

public PageReference refresh() {
system.debug('**PassedStg'+ passingString);
string newString = passingString;
system.debug('newValue'+newString);
string word = newString.remove('&#124');
system.debug('**reChar'+ word );
lstProd= [select Name,Category__c,id,ProductCode from product2 where Name like :'%'+word+'%'];
system.debug('listView'+lstProd);
return null;
}

I dont know why I am getting &#124 after every alphabet. Please help out.

 

Thanks and Regards,

Vee_RVee_R

Hi Amit,

 

Use getter setter for the map
public Map<String, String> mapAlpha{get; set;}

 

Populate the map as shown below( which I did in constructor):


mapAlpha= new Map<String, String>{
            'A' => 'A', 'B' => 'B', 'C' => 'C', 'D' => 'D', 'E' => 'E',
            'F' => 'F', 'G' => 'G', 'H' => 'H', 'I' => 'I', 'J' => 'J',
            'K' => 'K', 'L' => 'L', 'M' => 'M', 'N' => 'N', 'O' => 'O',
            'P' => 'P', 'Q' => 'Q', 'R' => 'R', 'S' => 'S', 'T' => 'T',
            'U' => 'U', 'V' => 'V', 'W' => 'W', 'X' => 'X', 'Y' => 'Y',
            'Z' => 'Z'
        };

 

***************************************

page:

 

<apex:repeat value="{!mapAlpha}" var="alpha">
    <apex:commandLink value="{!alpha}" action="{!refresh}">
            <apex:param name="alpha" value="{!alpha}" assignTo="{!passingString}"/>
        </apex:commandLink>
        <apex:outputText >  |  </apex:outputText>
  </apex:repeat>

Mohan Raj 33Mohan Raj 33
@Advanz Knowledge Systems Hi I also want the alpha bar navigation but I am using the standard controller with extension so can you send me any reference example for the alpha bar navigation in provide by the extension controller please.thank you ,Mohan