Memos About SalesForce

Salesforceにハマってたこと!

salesforce 必須項目 赤 Visualforceの必須の赤線を表示する

ONE-NETBOOK OneMix 3 ミニパソコン 超薄型 ( Windows10 / 8.4インチ 2560*1600 IPSタッチパネル / Intel Core m3-8100Y / 8GB RAM + 256GB PCIe SSD / 360度YOGAモード / 4096段階の筆圧に対応 / バックライト付きキーボード ) シルバー

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

読んだら得ること

★ VFでの必須項目を見せるCSS

目次

必須項目

f:id:jude2016:20190704154311p:plain
必須項目

必須のマークをつけたい場合、required="true"とすればできるのですが、画面にいろいろボタンを用意して、たとえば削除とか、戻るみたいな機能があると、自動で必須チェックが入る場合があり、Apexとやり取りで不便なときがあります。こんな時に見た目だけで良い場合、CSSで満たせる

標準機能での必須項目

<apex:inputField value="{!Account.Field}" id="thisid" required="true"/>

上記を使う場合、キャンセルボタンや戻るボタンなどで、ボタンのImmediate=trueにして必須項目を無効にする必要がある、そんなことを指定すると、画面のフォームに入力したデータはサーバーに送信せずにAPEXとのやり取りがしなくなる欠点もある

見た目のみでの必須項目

DIVタグの場合

<div class="requiredInput">
    <div class="requiredBlock"></div>
    <apex:inputText value="{!Account.Phone}"/>
</div>

Apexタグの場合

<apex:outputPanel styleClass="requiredInput" layout="block">
    <apex:outputPanel styleClass="requiredBlock" layout="block"/>
    <apex:inputText value="{!Account.Phone}"/>
</apex:outputPanel>

Apexタグのやや複雑の場合

<apex:pageBlock>
<apex:pageBlockSection>
<apex:pageBlockSectionItem>
    <apex:outputLabel value="Phone" />
    <apex:outputPanel styleClass="requiredInput" layout="block">
        <apex:outputPanel styleClass="requiredBlock" layout="block"/>
        <apex:inputText value="{!Account.Phone}"/>
    </apex:outputPanel>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>

以上でした。

関連記事

Salesforce Immediate=true not work commandButton