tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:VisualforceとAngularJSで登録ページをつくってみました

VisualforceとAngularJSで入力ページをつくってみました。CSS部分はLightning Design Systemを利用していています。

f:id:tyoshikawa1106:20160130143604p:plain


apexタグに頼らないJavaScript Remoting中心の作りになっています。
f:id:tyoshikawa1106:20160130171348p:plain

ページ構成

ページ構成は以下のとおりです。

  • AngularValidation.page
    • 利用時に呼び出すメインのページ
  • AngularValidationInput.page
    • 最初に表示される入力ページ
  • AngularValidationResult.page
    • 保存後に表示される詳細ページ
  • AngularValidationAppJs.page
    • Angularのルーティング情報を記載したJS
  • AngularValidationControllerJs.page
    • 保存や値セットなどの処理を記載したJS

※サンプルなのでServiceやdirective関係の処理はControllerJsにまとめて記載してします。

画面の動き

最初の入力ページで値をセットします。
f:id:tyoshikawa1106:20160130173209p:plain


正しく登録情報を入力して保存ボタンをクリックすると、RemoteActionでApex処理を呼び出し取引先責任者を登録します。保存処理後、メッセージが表示され詳細ページに移動します。(確認メッセージはSweetAlertを利用して表示しました。SFDC標準スタイルの影響でボタン部分のデザインが正しく表示されませんでしたが、デモ用なのでそのままにしました。)
f:id:tyoshikawa1106:20160130173415p:plain


詳細ページはこんな感じになっています。
f:id:tyoshikawa1106:20160130173615p:plain


詳細ボタンをクリックすると登録レコードの詳細ページが表示されます。
f:id:tyoshikawa1106:20160130173714p:plain


画面の動きはこんな感じです。日付の登録だけちょっと雑につくってあるので9時間ずれて保存されています。

入力チェック

今回やりたかったことのメインです。必須チェックや文字数チェックなどをリアルタイムで判定する必要があったため、Anuglarを利用してみました。

AngularJSでは『ng-message』を利用するとエラー発生時にメッセージを表示することができます。(その他、ng-showなどでも表示の有無を切り替えたりできます。)
f:id:tyoshikawa1106:20160130174309p:plain

必須チェック

inputタグに『required』を宣言すると『ng-message』で必須チェックができるようになります。
f:id:tyoshikawa1106:20160130174425p:plain

文字数上限チェック

inputタグにng-maxlengthを宣言すると最大文字数のチェックができます。(最小文字数を判定する属性も用意されています。)
f:id:tyoshikawa1106:20160130174604p:plain

入力形式のチェック

例えばinput type="email"を宣言して、不正な形式で入力した際にng-message="email"でエラーメッセージを表示できます。
f:id:tyoshikawa1106:20160130174910p:plain


input type="date"など他の形式でも同様です。
f:id:tyoshikawa1106:20160130175041p:plain

別の入力値との一致判定

別の入力値との一致判定をチェックしたい場合は、自作のdirective処理を用意します。
f:id:tyoshikawa1106:20160130175251p:plain


directiveで用意したmatch処理は次のように呼び出して使用できます。
f:id:tyoshikawa1106:20160130175626p:plain


これでよくある再入力確認を実装できます。
f:id:tyoshikawa1106:20160130175717p:plain

正規表現チェック

独自の入力規則通りに入力されているかチェックしたい場合、ng-patternをつかって正規表現チェックが可能です。
f:id:tyoshikawa1106:20160130180024p:plain


電話番号の入力などで利用できます。
f:id:tyoshikawa1106:20160130180103p:plain


エラーメッセージの表示に使用したng-messageですが、利用したい場合、『angular-messages.js』を読み込む必要があります。
f:id:tyoshikawa1106:20160130180546p:plain


また、AppJsの処理で"ngMessages"の宣言を忘れずに行う必要があります。
f:id:tyoshikawa1106:20160130180648p:plain

ボタンの活性/非活性

AngularJsでは入力フォームのエラーを判定して活性/非活性を簡単に切り替えることができます。

活性

f:id:tyoshikawa1106:20160130181244p:plain

非活性

f:id:tyoshikawa1106:20160130181447p:plain


これを利用するにはformタグとname属性を宣言する必要があります。novalidateを宣言するとブラウザ側の入力チェックを無効にできるみたいです。
f:id:tyoshikawa1106:20160130181718p:plain


あとは、切り替えたいタグに『ng-disabled="inputForm.$invalid"』という感じで宣言してあげると反映されます。
f:id:tyoshikawa1106:20160130181837p:plain


自分がうっかりハマってしまったミスとして、エラーチェックはmg-messageの有無に関わらず実行されます。メッセージが表示されていないからといってエラーになっていないというわけでありませんでした。(裏でエラーになっていることに気づかずなんで切り替わらないんだろう・・と悩んでました。)


$invalidなどの詳細はこちらです

https://docs.angularjs.org/api/ng/type/form.FormController

入力チェックのタイミング

AngularJsにはフォーカスが外れたタイミングや値が変更されたタイミングを判定することもできます($dirtyなど)。ng-classと組み合わせて、値変更後にエラーチェックを行い、エラーの場合、CSSを追加というような使い方ができます。
f:id:tyoshikawa1106:20160130183044p:plain


デモ動画とサンプルコード

今回つくったサンプルページのデモ動画です。


サンプルコードはこちらです。

さいごに

今回、CSS部分はLightning Design Systemを利用しました。これにより自分でCSSを用意することなく実装することができました。Lightning Design Systemは本当に便利なCSSフレームワークだと思います。


またLighting Design Systemを利用することでLightning Experienceでもそのまま利用できるデザインを実現できます。
f:id:tyoshikawa1106:20160130185039p:plain


参照ページ(Read Only)もこの通りです。
f:id:tyoshikawa1106:20160130185153p:plain


S1ページでももちろん利用できます。
f:id:tyoshikawa1106:20160130185805j:plain:w200


ただ...Lightning Design Systemとは関係ないところの話ですが、PCで動いた画面をS1アプリで利用しようとした際に、実装方法が悪いのか入力時に画面が表示されなくなったりしました。(directiveで用意した別項目との値一致判定の処理を使用すると発生。)
f:id:tyoshikawa1106:20160130191112j:plain:w200


VFページをS1アプリとして利用する場合は思わぬ落とし穴があるみたいなので注意が必要そうです。


とりあえず、Lightning Design Systemは最高だと思いました。

Lightning Design System