【Visualforce】初期表示でapex:pageBlockSectionを折りたたんで表示する
ナタリーapex:pageBlockSectionタグでセクションを切っている場合、初期表示時にそのセクションを折りたたんで表示したいときがありますよね。公式の開発者ガイドを見てもそれらしい属性が用意されていないようだったのですが、ググってみると意外とたくさん情報がありました。
ページ内すべてのセクションを折りたたんで表示したい場合
こちらのブログで紹介されていました。
SFDC：PageBlockSectionの折りたたみ
試しにやってみると初期表示ですべてのセクションが折りたたんで表示されることが確認できます。
|
1 2 3 4 5 6 7 8 9 |
/** Apexコントローラ */ public class PageCBlockSectionSampleController { public Sample__c sample{get; set;} public PageCBlockSectionSampleController() { sample = new Sample__c(); } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!-- VFページ --> <apex:page id="pg" controller="PageCBlockSectionSampleController"> <apex:form id="frm"> <apex:pageBlock id="pb"> <apex:pageBlockSection title="セクション1" id="pbs1"> <apex:inputField value="{!sample.Text__c}" /> </apex:pageBlockSection> <apex:pageBlockSection title="セクション2" id="pbs2"> <apex:inputField value="{!sample.Gender__c}" /> </apex:pageBlockSection> </apex:pageBlock> </apex:form> <script> function defaultCollapseAll() { this.previousHandler = window.onload; this.execute = function() { if(this.previousHandler!=null) this.previousHandler(); var imgs = window.top.document.getElementsByTagName('img'); for(var x in imgs) if(imgs[x].className=='hideListButton') { twistSection(imgs[x]); } } } window.onload = new defaultCollapseAll().execute; </script> </apex:page> |
下が、上記コードで初期表示した画面です。
特定のセクションのみ折りたたんで表示したい場合
全部は折りたたまなくてもいいので、特定のタブのみを折りたたんで初期表示したい場合、こちらも情報がありましたね。
[Visualforce]最初からページブロックセクションを閉じておく
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- VFページ --> <apex:page id="pg" controller="PageCBlockSectionSampleController"> <apex:form id="frm"> <apex:pageBlock id="pb"> <apex:pageBlockSection title="セクション1" id="pbs1"> <apex:inputField value="{!sample.Text__c}" /> </apex:pageBlockSection> <script> (function() { var twisty = document.getElementById('img_{!$Component.pbs1}'); twistSection(twisty); })(); </script> <apex:pageBlockSection title="セクション2" id="pbs2"> <apex:inputField value="{!sample.Gender__c}" /> </apex:pageBlockSection> </apex:pageBlock> </apex:form> </apex:page> |
1つ注意点としては、上記例だと同じapex:pageBlockタグ内にスクリプトを埋め込んでやらないとダメということですね。下記例だと上手くいきません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- VFページ NGな例 --> <apex:page id="pg" controller="PageCBlockSectionSampleController"> <apex:form id="frm"> <apex:pageBlock id="pb"> <apex:pageBlockSection title="セクション1" id="pbs1"> <apex:inputField value="{!sample.Text__c}" /> </apex:pageBlockSection> <apex:pageBlockSection title="セクション2" id="pbs2"> <apex:inputField value="{!sample.Gender__c}" /> </apex:pageBlockSection> </apex:pageBlock> <script> (function() { var twisty = document.getElementById('img_{!$Component.pbs1}'); twistSection(twisty); })(); </script> </apex:form> </apex:page> |
もしスクリプトを外出ししたいなら、階層を追って指定してあげる必要があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- VFページ OKな例 --> <apex:page id="pg" controller="PageCBlockSectionSampleController"> <apex:form id="frm"> <apex:pageBlock id="pb"> <apex:pageBlockSection title="セクション1" id="pbs1"> <apex:inputField value="{!sample.Text__c}" /> </apex:pageBlockSection> <apex:pageBlockSection title="セクション2" id="pbs2"> <apex:inputField value="{!sample.Gender__c}" /> </apex:pageBlockSection> </apex:pageBlock> <script> (function() { var twisty = document.getElementById('img_pg:frm:pb:pbs1'); twistSection(twisty); })(); </script> </apex:form> </apex:page> |
階層を追って書く場合の参考（過去記事）はこちら。
【Visualforce】JavascriptからgetElementByIdで値を参照する方法
