Memos About SalesForce

Salesforceにハマってたこと!

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

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

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

あるでしょう

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

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

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

目次

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

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

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

取引先項目:SLASerialNumber__c

f:id:jude2016:20180806210327p:plain

サンプルクラス
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の表示結果

f:id:jude2016:20180806210449p:plain



サンプル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の表示結果

f:id:jude2016:20180806210709p:plain

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−1
<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−1:幅設定しない場合

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

f:id:jude2016:20180806211630p:plain

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

サンプルVF−2:(改善版)幅設定しない場合
<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−2:改善版の表示結果

各列の幅を設定しないと均等に自動設定になる f:id:jude2016:20180806212332p:plain

サンプルVF−3:幅設定の場合

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−3:幅設定の場合

f:id:jude2016:20180806213015p:plain