apex:pageBlockSection close 閉じる ページブロックセクションを初期で畳みにする

こんにちは、管理人の@Salesforce.Zです。

VF画面の作りで、ページブロックセクションが便利で素晴らしい標準APEX タグです。

属性もたくさんあります。表示非表示制御属性とか、唯一ないのがセクションを初期時に閉じる属性がない、いずれ進化し、属性が出てくるだろう、少なくても今現在、ない、では、どう実現するかについて、公開します。

jsで対応するなんです。

読んだら得ること

★　apex:pageBlockSectionを初期表示時に閉じる策

目次

pageBlockSection

普段の使用例

<!-- For this example to render properly, you must associate the Visualforce page
with a valid account record in the URL.
For example, if 001D000000IRt53 is the account ID, the resulting URL should be:
https://Salesforce_instance/apex/myPage?id=001D000000IRt53
See the Visualforce Developer's Guide Quick Start Tutorial for more information. -->


<!-- Page: -->
<apex:page standardController="Account">
    <apex:form>
        <apex:pageBlock title="My Content" mode="edit">
            <apex:pageBlockButtons>
                <apex:commandButton action="{!save}" value="Save"/>
            </apex:pageBlockButtons>
            <apex:pageBlockSection title="My Content Section" columns="2">
                <apex:inputField value="{!account.name}"/>
                <apex:inputField value="{!account.site}"/>
                <apex:inputField value="{!account.type}"/>
                <apex:inputField value="{!account.accountNumber}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

　デフォルトでセクションを閉じるサンプル

<apex:page tabstyle="Account" standardController="Account" extensions="extensionsCtrl">

    <script>
    function PageBlockSectionCollapse(el){

        if(typeof twistSection === 'function'){ 
            var theTwist = document.getElementById(el);
            if(theTwist){
                twistSection(theTwist.childNodes[0].childNodes[0]);
            }
        }
    }
    </script>
    <apex:form >
        <apex:pageBlock >

        <apex:pageblockSection columns="1" showHeader="true" title="ページブロックセクション" id="your_section_id">
            <script>PageBlockSectionCollapse('{!$Component.your_section_id}');</script>
        </apex:pageblockSection>

        <apex:commandLink value="123" oncomplete="PageBlockSectionCollapse('{!$Component.CIRel}');"/>
        </apex:pageBlock>

    </apex:form>
</apex:page>

よく使う属性

少し、だけ、自分がよく使う属性を書きます。

collapsible

pageBlockSection image

ユーザがページブロックセクションを展開したり折りたたんだりできるかどうかを指定する boolean 値。true の場合、ユーザはセクションの展開および折りたたみを実行できます。指定されていない場合、この値はデフォルトの true に設定されます。

rendered

これはすごい大事で、よく使う属性の１つです。

セクションを画面に表示するか、表示しないかの指定できる属性であり、true or falseに指定できる

最後に

ほか、まだいろいろあるので、

例えは、セクション内の列数や、各列のラベルと値の設定なども楽しくて、また今度、その制限を書きます。