tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Winter '14 Prerelease Code Sample for HTML5 Features 試してみました

Prerelease環境でSalesforce.com Winter'14 Release Notesに記載のあったCode Sample for HTML5 Featuresを試してみました。Winter'14ではHTML 5に対応した新機能が追加されているみたいです。

Code Sample for HTML5 Features

記載ミスがなければRelease Notesのサンプルとほぼ同じ内容です。
これで次の画面が表示されました。
※統一感がでたのでユーザの言語をEnglishにして表示してあります。

f:id:tyoshikawa1106:20130824131423p:plain

<apex:inputField>に属性が追加されたのと<apexinput>が追加されて更に便利になっています。

html-placeholder

テキストフィールドに補助メッセージ的なものを表示できるようになっています。
f:id:tyoshikawa1106:20130824132202p:plain

例)

<apex:inputField value="{!Contact.MobilePhone}" type="tel"
    html-placeholder="999-999-9999"
    html-autofocus="true"
/>

html-patternとhtml-title

正規表現による判定とエラー時のメッセージを表示できるようです。
f:id:tyoshikawa1106:20130824133000p:plain

例)

<apex:inputField value="{!Contact.Email}" type="email"
    html-placeholder="you@example.com$"
    html-pattern="^[a-zA-Z0-9._-]+@example.com$"
    html-title="Please enter an example.com email address"
/>

type="date"

inputFieldとtype="date"を組み合わせると標準の日付項目とは違った形式で表示できるようです。また、showDatePicker="false"と宣言することよって項目の右側に表示される日付リンクを非表示にできました。
f:id:tyoshikawa1106:20130824133639p:plain

上下ボタンで年月日をプラス・マイナスできました。
f:id:tyoshikawa1106:20130824133808p:plain

一番右側のアイコンをクリックするといつものが表示されます。
f:id:tyoshikawa1106:20130824133910p:plain

例)

<apex:inputField value="{!Contact.Birthdate}" type="date"
    showDatePicker="false"
    style="width:200px;"
/>

type="auto"

数値型項目で使用できました。クリックひとつで値の加算、減算が可能です。

下記の属性で使用できる範囲等を指定しています。

html-min="0" html-max="100" html-step="5"
html-title="Must be between 0 and 100"

f:id:tyoshikawa1106:20130824134120p:plain

例)

<apex:inputField value="{!Contact.Pick_A_Number__c}" type="auto"
    html-min="0" html-max="100" html-step="5"
    html-title="Must be between 0 and 100"
/>

type="text"とlist属性

通常のテキスト入力に加え特定の値を選択することができるようになります。
個人的にはこれが一番好きです。
f:id:tyoshikawa1106:20130824134947p:plain
例)

<apex:inputField value="{!Contact.Favorite_Shape__c}" type="text"
    list="circle,square,rectangle,triangle,hexagon,cube,sphere"
/>

selectRadioとlegendText

ラジオボタン表示時の見た目が綺麗になりました。
f:id:tyoshikawa1106:20130824135244p:plain

legendTextでタイトル的なラベルを表示できます。
borderVisibleで枠線の表示が可能です。

例)

<apex:selectRadio value="{! Contact.LeadSource}" layout="pageDirection"
    legendText="Select a source for this contact" borderVisible="true">
    <apex:selectOptions value="{! sourcesList }"/>
</apex:selectRadio>

apex:input

上記で紹介したinputFieldの追加機能は、新しく追加されるapex:inputタグでも対応可能なようです。inputFieldはオブジェクトの項目でないと使用できませんが、apex:inputはクラス内で宣言した変数に対して使用できるのが特徴かなと思いました。
f:id:tyoshikawa1106:20130824135631p:plain

例)

<apex:input label="Car Color" value="{! fText }" list="{! colorsList }"/>
<apex:input label="Steps Today" value="{! fNumber }" type="number"
    html-min="0" html-max="50000"
/>
<apex:input label="Favorite Date in History" value="{! fDate }"
    type="auto"
/>


Code Sample for HTML5 Featuresで確認できたのは大体こんな感じです。
Winter'14 新機能満載でなかなか楽しそうです。

補足

このサンプルコードを検証するために取引先責任者に以下のカスタム項目を作成しました。
f:id:tyoshikawa1106:20130824141034p:plain