In Salesforce , we know well about look up field. At any standard record detail page, we can input look-up field value after clicking look-up icon and choosing correct data. Or at any Visualforce page also, if there is any look-up field of object bonded in page, then using <apex:input> tag automatically provide us facility to choose record from look-up window.
In look-up window, we can see list of records at bottom section and at top section, 'Search' among those records. Now, say, we have a situation where we need such a window which is totally our custom. I mean from our Visualforce page clicking some icon/link/button we have reached to a custom window where list of records are displayed in a table and there we need a 'Search' facility among those records . Following is detail of code how I did it.
My objective was to search records from list of Students record in below image:
2- when you type, based on your string input below list is filtered.
I am posting modified code from my original code, because that includes lots more features.
Visualforce Page:
In look-up window, we can see list of records at bottom section and at top section, 'Search' among those records. Now, say, we have a situation where we need such a window which is totally our custom. I mean from our Visualforce page clicking some icon/link/button we have reached to a custom window where list of records are displayed in a table and there we need a 'Search' facility among those records . Following is detail of code how I did it.
My objective was to search records from list of Students record in below image:
How search works:
1- Type your search key in top section input box2- when you type, based on your string input below list is filtered.
I am posting modified code from my original code, because that includes lots more features.
Visualforce Page:
<apex:page controller="StudentBrowsingcontroller" showheader="false">
<html>
<head>
</head>
<body>
<div style="height: 500px; overflow-y: scroll">
<apex:form >
<!-- search feature -->
<div style="margin: 10px;">
<fieldset class="ui-corner-all">
<legend class="Browsing">Browsing</legend>
<Table caption="Browsing">
<tr>
<td> Student name </td>
<td>
<apex:inputText value="{!word}">
<apex:actionSupport event="onkeyup" action="{!reload}" reRender="studList" status="status" />
</Apex:inputText>
</td>
</tr>
</table>
</fieldset>
<div style="text-align: center">
<apex:actionStatus id="status">
<apex:facet name="start">
<apex:outputPanel >Loading.....
<apex:image value="/img/loading32.gif" style="height: 15px;"/>
</apex:outputPanel>
</apex:facet>
</apex:actionStatus>
</Div>
</Div>
<!-- students list -->
<apex:pageBlock Title="Students">
<apex:pageBlockSection columns="1">
<apex:pageBlockTable value="{!students}" var="stud" id="studList">
<apex:column HeaderValue="Name">
<apex:outputText value="{!stud.Name}"></apex:outputText>
</apex:column>
</apex:pageBlockTable>
</apex:pageBlockSection>
</Apex:pageBlock>
</Apex:form>
</Div>
</Body>
</html>
Apex code:
public class StudentBrowsingcontroller{
public List students { get; set; }
public String word{set;get;}
//COnstructor
public StudentBrowsingcontroller(){
// fetching the Students from Contact object
students = [SELECT Id, Name FROM Contact WHERE RecordType.Name = 'Student'];
}
/*
Purpose: Action called on key press of search box. A list of related records based on search word will be fetched
Parameters: None
Return type: Page Reference
*/
public PageReference reload() {
try{
// based on typed word fetching the Students from Contact object
if( word != null && word != ''){
word = '%' + word + '%';
students = [SELECT Id, Name FROM Contact WHERE
Name like :word ORDER BY LastModifiedDate];
}
return null;
}
catch(QueryException qe){
ApexPages.addMessage( new ApexPages.Message(ApexPages.Severity.ERROR, qe.getMessage()));
return NULL;
}
catch(Exception e){
ApexPages.addMessage( new ApexPages.Message(ApexPages.Severity.ERROR, e.getMessage()));
return NULL;
}
}
}
No comments:
Post a Comment