We all know well about 'look up ' field in Salesforce. When we use any look-up field of an object in our Visualforce page, that automatically takes look and feel of standard look at any standard Salesforce record detail page of that.
But say, you want to get look and feel of look-up feature in your Visualforce page for any requirement. I mean, say, you have an input field in you Visualforce page which is boned with a String at Alex class. Now you want to input in that field some value after clicking a glass icon and from a list of records in pop-up...Just same for any standard look-up feature. What I did is something I am going to share here.
Standard lookup feature:
Custom look and feel like above feature in VF page:
How it works:
1- A visualforce page where Student input field present and we click Icon there.
2- Then a new pop up window opens up with list of Students and also with search feature.
3- Click proper record and that comes as input to first page input field.
Visualforce page where Student input field resides:
<apex:page controller="RegistrationFormCreationController">
<script>
function callFunction(target, file_id, file_name){
var column = document.getElementById(target);
column.value = file_id;
var viewLink = document.getElementById(target + '_link');
viewLink.href = '/'+ file_id;
viewLink.value = file_name;
//viewLink.innerHTML = file_name;
var wrap = document.getElementById(target + '_wrap');
wrap.style.display = 'none';
}
</script>
<apex:form >
<apex:pageMessages id="msgs" />
<apex:pageblock >
<apex:pageblockButtons >
<apex:commandButton id="saveButton" value="Save" action="{!saveTheForm}"/>
</apex:pageblockButtons>
<apex:pageblockSection >
<apex:pageblockSectionItem >
<apex:outputLabel >Student</apex:outputLabel>
<apex:outputLabel >
<span id="document05_wrap">
<apex:outputLabel >{!selectedStudent}</apex:outputLabel>
</span>
<input type="text" value="{!selectedStudent}" id="document05_link" name="document05a"/>
<input type="hidden" value="{!selectedStudent}" id="document05" name="document05"/>
<apex:commandLink id="brw" onclick="window.open('StudentBrowsing?column=document05','','width=500,height=500')">
<img src="/s.gif" class="lookupIcon"/>
</apex:commandLink>
</apex:outputLabel>
</apex:pageblockSectionItem>
</apex:pageblockSection>
</apex:pageblock>
</apex:form>
</apex:page>
Its controller:
But say, you want to get look and feel of look-up feature in your Visualforce page for any requirement. I mean, say, you have an input field in you Visualforce page which is boned with a String at Alex class. Now you want to input in that field some value after clicking a glass icon and from a list of records in pop-up...Just same for any standard look-up feature. What I did is something I am going to share here.
Standard lookup feature:
Custom look and feel like above feature in VF page:
How it works:
1- A visualforce page where Student input field present and we click Icon there.
2- Then a new pop up window opens up with list of Students and also with search feature.
3- Click proper record and that comes as input to first page input field.
Visualforce page where Student input field resides:
<apex:page controller="RegistrationFormCreationController">
<script>
function callFunction(target, file_id, file_name){
var column = document.getElementById(target);
column.value = file_id;
var viewLink = document.getElementById(target + '_link');
viewLink.href = '/'+ file_id;
viewLink.value = file_name;
//viewLink.innerHTML = file_name;
var wrap = document.getElementById(target + '_wrap');
wrap.style.display = 'none';
}
</script>
<apex:form >
<apex:pageMessages id="msgs" />
<apex:pageblock >
<apex:pageblockButtons >
<apex:commandButton id="saveButton" value="Save" action="{!saveTheForm}"/>
</apex:pageblockButtons>
<apex:pageblockSection >
<apex:pageblockSectionItem >
<apex:outputLabel >Student</apex:outputLabel>
<apex:outputLabel >
<span id="document05_wrap">
<apex:outputLabel >{!selectedStudent}</apex:outputLabel>
</span>
<input type="text" value="{!selectedStudent}" id="document05_link" name="document05a"/>
<input type="hidden" value="{!selectedStudent}" id="document05" name="document05"/>
<apex:commandLink id="brw" onclick="window.open('StudentBrowsing?column=document05','','width=500,height=500')">
<img src="/s.gif" class="lookupIcon"/>
</apex:commandLink>
</apex:outputLabel>
</apex:pageblockSectionItem>
</apex:pageblockSection>
</apex:pageblock>
</apex:form>
</apex:page>
Its controller:
public class RegistrationFormCreationController{
public String selectedStudent {get;set;}
public RegistrationFormCreationController() {
}//end of constructor
/*
Purpose: Method called in button click of save the form
Parameter: None
Return type: Page reference
*/
public PageReference saveTheForm(){
//do something
}
}<apex:page controller="StudentBrowsingcontroller" showheader="false">
<html>
<head>
<script type="text/javascript">
function select (file_id, file_name)
{
if (! file_name)
file_name = document.getElementById (file_id).value;
var target = '{!JSENCODE(columnName)}';
//alert('Column'+target+'=='+file_id+'=='+file_name);
window.opener.callFunction (target, file_id, file_name);
window.close ();
}
</script>
</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;"/>
<!--<img src="/apexpages/devmode/img/saveStatus.gif" />-->
</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">
<a href="javascript:select('{!stud.Id}');" > {! stud.Name} </a>
<input type="hidden" id="{!stud.Id}" value="{!stud.Name}" />
</apex:column>
</apex:pageBlockTable>
</apex:pageBlockSection>
</Apex:pageBlock>
</Apex:form>
</Div>
</Body>
</html>
</Apex:page>
| Its controller: |
public class StudentBrowsingcontroller{
public List students { get; set; }
public String columnName{set;get;}
public String word{set;get;}
//COnstructor
public StudentBrowsingcontroller(){
// get column name value from URL parameter, it is used in placing the selected value at base window exact space
columnName = System.currentPageReference().getParameters().get('column');
// 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 RecordType.Name = 'Student' AND
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