本文已参与「新人创作礼」活动，一起开启掘金创作之路。
需求背景
今天收到Admin的请求，希望能够在Campaign上实现邮件模板的查找功能，同时顺道给了我一个参考链接，大概是想让我have a picture about what they want in my mind. 她总是这么干，我不得不习惯她的那种做法。
参考源码
Practice_customLookupPageController
<apex:page controller="Practice_customLookupPageController" id="wpage">
<script type="text/javascript">
var templatenameid;
function openTemplatePopUp(field){
var anchortagid=field.id;
var rowindex=anchortagid.substring(9,10);
templatenameid='wpage:form1:pgb1:pgbks1:pgbsi1:pgbt1:'+rowindex+':Template';
//alert('--anchortagid:'+anchortagid+';--templatenameid:'+templatenameid);
if (field != null) {
field.href = "JavaScript:openLookup('/_ui/common/data/LookupPage?lkfm=editPage&lknm='+templatenameid+'&lkrf=&epf=1&lktp=00X',670,'1','&lksrch=' + escapeUTF(getElementByIdCS(templatenameid).value.substring(0, 80)))";
}
}
</script>
<apex:form id="form1">
<apex:pageBlock title="Custom lookup" id="pgb1">
<apex:pageblockSection id="pgbks1" columns="2">
<apex:pageBlockSectionItem id="pgbsi1">
<apex:pageblockTable value="{!recordsList}" var="rec" id="pgbt1">
<apex:column headerValue="Email Template">
<div>
<apex:inputhidden value="{!rec.emailTemplateId}" id="Template_lkid" />
<apex:inputhidden value="{!rec.emailTemplateName}" id="Template_lkold" />
<span class="lookupInput">
<apex:inputText value="{!rec.emailTemplateName}" onchange="getElementByIdCS('wpage:form1:pgb1:pgbks1:pgbsi1:pgbt1:{!rec.counter}:Template_lkid').value=''; " id="Template"/>
<a title="Email Template Lookup (New Window)" tabindex="4" onclick="setLastMousePosition(event),openTemplatePopUp(this)" id="Template_{!rec.counter}_lkwgt" >
<img title="Email Template Lookup (New Window)" onmouseover="this.className = 'lookupIconOn';this.className = 'lookupIconOn';" onmouseout="this.className = 'lookupIcon';this.className = 'lookupIcon';" onfocus="this.className = 'lookupIconOn';" onblur="this.className = 'lookupIcon';" class="lookupIcon" alt="Email Template Lookup (New Window)" src="/s.gif" />
</a>
</span>
</div>
</apex:column>
<apex:column headerValue="Frequency">
<apex:selectList value="{!rec.frequency}" size="1" >
<apex:selectOption itemLabel="Daily" itemValue="Daily"/>
<apex:selectOption itemLabel="Weekly" itemValue="Weekly"/>
<apex:selectOption itemLabel="Monthly" itemValue="Monthly"/>
</apex:selectList>
</apex:column>
</apex:pageblockTable>
</apex:pageBlockSectionItem>
</apex:pageblockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
Practice_customLookupPage
public class Practice_customLookupPageController {
public List<emailTemplateWrapper> recordsList{get;set;}
public Practice_customLookupPageController (){
recordsList=new List<emailTemplateWrapper>();
recordsList.add(new emailTemplateWrapper(0));
recordsList.add(new emailTemplateWrapper(1));
recordsList.add(new emailTemplateWrapper(2));
}
public class emailTemplateWrapper{
public String emailTemplateName{get;set;}
public String emailTemplateId{get;set;}
public String frequency{get;set;}
public integer counter{get;set;} //to store rowindex
public emailTemplateWrapper( integer count){
frequency='Weekly';
counter=count;
}
}
}
式样
我们会惊奇的发现这个源码多了一个频率，不过没关系，我们这回还真用不上
改进思路（思考）和方法
- 我们知道在标准页面里嵌套vf page，这个vf page的表现就像公式字段，只会出现在Detail模式，而想让它在Edit Mode下显示这个想法有点过，不过我们可以变相改进用户界面的友好性；
- 我们知道嵌套原理是iframe，这时候嵌套页面的url跳转不会作用父级，也就是说我们需要克服保存后的局部刷新，这时候我们需要在后台成功保存数据后，使用oncomplete来执行浏览器页面刷新：
Q：How to reload Main Page from within an iFrame？
A：window.parent.location / window.top.location.reload();
这样我们就大功告成了，方案细节如下：
- 新建3个字段Email Template Name / Email Template ID / Email Template Formula用来存储模板信息及展示模板详情，请参见salesforce中常用技能总结（纯粹干货，深度积累）图解第86点；
- 新建Extension Controller和VF Page，如下： EmailTemplateLookupController：
public class EmailTemplateLookupController {
private ApexPages.StandardController stdController;
public String redirectUrl {public get; private set;}
public EmailTemplateLookupController (ApexPages.StandardController stdController) {
this.stdController = stdController;
}
public PageReference saveAndRefresh() {
stdController.save();
redirectUrl = stdController.view().getUrl();
return null;
}
}
EmailTemplateLookup：
<apex:page standardController="Campaign" extensions="EmailTemplateLookupController" id="wpage">
<style type="text/css">
.hasMotif{margin:0; padding:0;}
</style>
<script type="text/javascript">
var templatenameid;
function openTemplatePopUp(field){
templatenameid='wpage:theForm:Template';
if (field != null) {
field.href = "JavaScript:openLookup('/_ui/common/data/LookupPage?lkfm=editPage&lknm='+templatenameid+'&lkrf=&epf=1&lktp=00X',670,'1','&lksrch=' + escapeUTF(getElementByIdCS(templatenameid).value.substring(0, 80)))";
}
}
function refreshWin(url) {
window.parent.location = url;
}
</script>
<apex:form id="theForm">
<apex:inputhidden value="{!Campaign.Email_Template_ID__c}" id="Template_lkid" />
<apex:inputhidden value="{!Campaign.Email_Template_Name__c}" id="Template_lkold" />
<span class="lookupInput">
<apex:inputText label="Email Template" value="{!Campaign.Email_Template_Name__c}" onchange="getElementByIdCS('wpage:theForm:Template_lkid').value=''; " id="Template" />
<a title="Email Template Lookup (New Window)" tabindex="4" onclick="setLastMousePosition(event),openTemplatePopUp(this)" id="Template_0_lkwgt" >
<img title="Email Template Lookup (New Window)" onmouseover="this.className = 'lookupIconOn';this.className = 'lookupIconOn';" onmouseout="this.className = 'lookupIcon';this.className = 'lookupIcon';" onfocus="this.className = 'lookupIconOn';" onblur="this.className = 'lookupIcon';" class="lookupIcon" alt="Email Template Lookup (New Window)" src="/s.gif" />
</a>
</span>
<apex:commandLink value="refresh to save" action="{!saveAndRefresh}" oncomplete="refreshWin('{!redirectUrl }')"/>
</apex:form>
</apex:page>
最终效果
