SFDC VF ヘルプテキストとapex:columnの幅指定

カスタマイズのVisualforce pageを開発して

ヘルプテキストを出したい時に

あるでしょう

または、PageBlockTableのcolumnの幅を列ごとに

設定したい時もあるでしょう

今回、共有したいと思います

目次

ヘルプテキストのサンプルソース

クラスは別にいいですが、重要なので

下記の２つパターンのVF VF１：オブジェクトの項目で設定したヘルプテキストを取得し 表示する VF２：自由にVFに書き込んむ

取引先項目：SLASerialNumber__c

サンプルクラス

public with sharing class  EXCtrl {
    public Account acc{get;set;}
    
    public EXCtrl(){
        acc = [select Id, Name, SLASerialNumber__c  From Account limit 1];
    }
}

サンプルVF-1

<apex:page controller="EXCtrl">
    <apex:form >
        <apex:pageBlock>
            <apex:pageBlockSection>
                <apex:pageBlockSectionItem helpText="{!$ObjectType.Account.Fields.SLASerialNumber__c.inlineHelpText}">
                    <apex:outputLabel>{!$ObjectType.Account.Fields.SLASerialNumber__c.Label}</apex:outputLabel>
                    <apex:inputText value="{!acc.SLASerialNumber__c}"/>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

サンプルVF-1の表示結果

サンプルVF-2

<apex:page controller="EXCtrl">
    <apex:form >
        <apex:pageBlock>
            <apex:pageBlockSection>
                <apex:pageBlockSectionItem helpText="自由設定ヘルプテキストをここに入力}">
                    <apex:outputLabel>{!$ObjectType.Account.Fields.SLASerialNumber__c.Label}</apex:outputLabel>
                    <apex:inputText value="{!acc.SLASerialNumber__c}"/>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

サンプルVF-2の表示結果

pageBlockTableの列の幅のサンプルソース

pageBlockTableを使うと、Columnを使うでしょう

そして、Columnの幅を列ごとに設定したいだろう

サンプルクラス

public with sharing class  EXCtrl {
    public List<Account> accList{get;set;}
    
    public EXCtrl(){
        accList = [select Id, Name, SLASerialNumber__c  From Account limit 10];
    }
}

サンプルVF−１

<apex:page controller="EXCtrl">
    <apex:form >
        <apex:pageBlock>
            <apex:pageBlockSection>
                <apex:pageBlockTable value="{!accList}" var="acc">
                    <apex:column value="{!acc.Id}"/>
                    <apex:column value="{!acc.Name}"/>
                    <apex:column value="{!acc.SLASerialNumber__c}"/>
                </apex:pageBlockTable>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

表示結果VF−１：幅設定しない場合

注意： pageBlockTableタグがpageblocSetionタグの中にある場合にPageBlockTableのwidth属性が働かないぞ。

だから、注意点の問題を潰したら、下記のようになる

サンプルVF−２：（改善版）幅設定しない場合

<apex:page controller="EXCtrl">
    <apex:form >
        <apex:pageBlock >
                <apex:pageBlockTable value="{!accList}" var="acc" width="100%" >
                    <apex:column value="{!acc.Id}"/>
                    <apex:column value="{!acc.Name}"/>
                    <apex:column value="{!acc.SLASerialNumber__c}"/>
                </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>

表示結果VF−２：改善版の表示結果

各列の幅を設定しないと均等に自動設定になる

サンプルVF−３：幅設定の場合

columnsWidth属性で各列ごとに幅を指定し、設定可能

<apex:page controller="EXCtrl">
    <apex:form >
        <apex:pageBlock >
                <apex:pageBlockTable value="{!accList}" var="acc" width="100%"  columnsWidth ="10%,60%,30%">
                    <apex:column value="{!acc.Id}"/>
                    <apex:column value="{!acc.Name}"/>
                    <apex:column value="{!acc.SLASerialNumber__c}"/>
                </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>

表示結果VF−３：幅設定の場合