ポスト
2016年12月18日にV6.0にバージョンアップしたSkyVisualEditorですが、Studio/Runtimeアプリケーションのバージョンアップに加え、SkyVisualEditor標準AppComponentもバージョンアップしています。
その中で今回は『入力文字チェック』というAppComponentを使って、正規表現で入力チェックを行う方法をご紹介します。
AppComponent『入力文字チェック』とは
AppComponent『入力文字チェック』は、画面上で入力した値をカーソルアウト時にチェックし、エラー時にメッセージを吹き出しで出す機能です。
Salesforceの入力規則って、保存ボタンを押したタイミングじゃないと動きませんよね？このAppComponentを使うと入力してすぐエラーに気づくことができます。
プロパティで簡単に設定できるバリデーションルールの他、正規表現を記述してカスタムルールの設定が可能です。
今回はSiteに組み込んだ会員登録画面にカスタムルールを設定する、というシナリオで正規表現によるカスタムルールのサンプルをご紹介します。
AppComponent『入力文字チェック』の設定
想定シナリオ：
- SiteにSkyVisualEditorで作成した会員登録ページ（取引先責任者登録画面）をSite上で公開している
- 登録者がボタンクリックすることなく、入力ミスにすぐ気付けるようにしたい
- 設定したい箇所は「必須項目」「郵便番号（7桁の数字）」「姓、名（文字数制限）」
手順：
AppComponent『入力文字チェック』の実装
手順1： SkyVisualEditor標準AppComponentのインストール
SkyVisualEditor標準AppComponentのV2.15以上がSalesforceにインストールされていることを確認し、V2.15より前のバージョンだった場合はインストールします。
AppComponentの詳細はヘルプドキュメントでご確認ください。
手順2： 画面にAppComponent『入力文字チェック』を設定
Studioでデザインデータを開き、AppComponentを画面に配置してルールを設定します。
1個のAppComponentにつき1種類のバリデーションルールと10個の対象項目を設定できますので、「必須項目」「郵便番号（7桁の数字）」「姓、名（文字数制限）」用に3つのAppComponentを設定していきます。
このうち、正規表現によるカスタムルールを使用するのは「郵便番号（7桁の数字）」「姓、名（文字数制限）」の2つです。
a. 必須項目を設定する
AppComponentを画面に配置します。
配置したAppComponentをクリックし、右側のプロパティの [バリデーションルール] 選択リストから "必須項目" を選択します。
対象項目の [...] ボタンをクリック→画面上の項目をクリックの手順で、必須チェックする項目を指定します。
b. 郵便番号（7桁の数字）を設定する
AppComponentを画面に配置します。
配置したAppComponentをクリックし、右側のプロパティの [バリデーションルール] 選択リストから "カスタムルール" を選択します。
カスタムルールを以下の通り設定します。
カスタムルール(正規表現)： ^\d{7}$
カスタムルールメッセージ： ハイフン抜きの7桁半角数字で入力してください
対象項目の [...] ボタンをクリック→画面上の項目をクリックの手順で、必須設定する項目を指定します。
c. 姓、名（文字数制限）を設定する
AppComponentを画面に配置します。
配置したAppComponentをクリックし、右側のプロパティの [バリデーションルール] 選択リストから "カスタムルール" を選択します。
カスタムルールを以下の通り設定します。
カスタムルール(正規表現)： ^.{0,10}$
カスタムルールメッセージ： 10文字以内で入力してください
対象項目の [...] ボタンをクリック→画面上の項目をクリックの手順で、必須設定する項目を指定します。
手順3： デプロイ
以上で設定が完了したので、デプロイして動作確認します。
期待どおりの動作が確認できました。
正規表現サンプル
正規表現はJavaScriptで利用される一般的なものが利用可能です。文法等はウェブサイト等でお調べいただければと思いますが、以下に何個かサンプルを掲載します。
| 項目タイプ | ルール | 正規表現 |
|---|---|---|
| テキストエリア | 改行を禁止する | [\n\r]/g |
| テキスト（ふりがな） | 全角かなのみ入力可能 ※全角カナと半角カナは標準で対応しています。 |
^[ぁ-ん]+$ |
| 日付 | yyyy/mm/dd形式のみ入力可能 | ^(\d{4})/(0[1-9]|1[0-2])/(0[1-9]|[12][0-9]|3[01])$ |
おわりに
いかがでしたでしょうか？
正規表現を使うとAppComponent『入力文字チェック』でできることの幅が広がりますので是非お試しください。
「これ読んだだけじゃちょっとむずかしいよ～」という方は、アドミンカフェに参加してテラスカイエンジニアのアドバイスを受けながら設定してみましょう！
開催レポートはこちら。
SkyVisualEditorアドミンカフェ
～自分のペースで好きなタイミングでアドバイスをもらえる。～
テラスカイのエンジニアに直接アドバイスを受けながら画面作成しませんか？
SkyVisualEditor/SuPICEトライアル中及びご導入済みのお客様にご参加いただける無料のイベントです。
↓↓↓ 参加申込みはこちらをクリック！ ↓↓↓
