Apex Code Development You need to sign in to do that
Don't have an account?
Yan レコードデータのポップアップ表示
はじめまして。
現在、オブジェクトに紐付いたデータの一覧表示をしたいと Visualforce を触っているのですが、
フィールドの数が多く、一覧表示の仕方を変えたいと考えています。
そこで、デフォルトのインターフェースによく見受けられるレコードのIDのリンク上にマウスをもっていくと
そのレコードのフィールド内容がポップアップで表示される仕組みを実装したいと考えました。
実装されているHTMLをみると、Ajax にて実装しているようなのですが、これだけ汎用的に利用がされて
いるところをみるとライブラリ化されていてもおかしくないのかなと思いました。
デザインや、位置などの調整で既存のものと相違があると違和感がでるので、できる限り Salesforce内で
実装されているものに近い状態で実装したいと考えています。
Visualforce、Ajax のライブラリをみても、それらしきタグ、function がみつからなかったので、もし、
ポップアップの実装方法をご存知でしたら教えていただけないでしょうか。
よろしくお願いします！
by Yan.
デフォルトのものを使う形で実装できます。
<apex:page standardController="Account" recordSetVar="acclist"> <apex:form > <apex:pageBlock title="Accounts" mode="edit"> <apex:pageMessages /> <apex:pageblocktable value="{!acclist}" var="acc" > <apex:column > <a href="/{!acc.Id}" id="{!acc.Id}" onblur="LookupHoverDetail.getHover('{!acc.Id}').hide();" onfocus="LookupHoverDetail.getHover('{!acc.Id}', '/{!acc.Id}/m?retURL=%2F{!acc.Id}&isAjaxRequest=1').show();" onmouseout="LookupHoverDetail.getHover('{!acc.Id}').hide();" onmouseover="LookupHoverDetail.getHover('{!acc.Id}', '/{!acc.Id}/m?retURL=%2F{!acc.Id}&isAjaxRequest=1').show();"> <apex:outputField value="{!acc.name}" /> </a> </apex:column> </apex:pageblocktable> </apex:pageBlock> </apex:form> </apex:page>All Answers
デフォルトのものを使う形で実装できます。
<apex:page standardController="Account" recordSetVar="acclist"> <apex:form > <apex:pageBlock title="Accounts" mode="edit"> <apex:pageMessages /> <apex:pageblocktable value="{!acclist}" var="acc" > <apex:column > <a href="/{!acc.Id}" id="{!acc.Id}" onblur="LookupHoverDetail.getHover('{!acc.Id}').hide();" onfocus="LookupHoverDetail.getHover('{!acc.Id}', '/{!acc.Id}/m?retURL=%2F{!acc.Id}&isAjaxRequest=1').show();" onmouseout="LookupHoverDetail.getHover('{!acc.Id}').hide();" onmouseover="LookupHoverDetail.getHover('{!acc.Id}', '/{!acc.Id}/m?retURL=%2F{!acc.Id}&isAjaxRequest=1').show();"> <apex:outputField value="{!acc.name}" /> </a> </apex:column> </apex:pageblocktable> </apex:pageBlock> </apex:form> </apex:page>ご返信、ありがとうございます。
該当のコードを埋め込んで実装できました。