11 ユーザー支援の使用
oj-checkboxset、oj-color*、oj-combobox*、oj-input*、oj-radioset、oj-select*、oj-slider、oj-switchおよびoj-text-areaが含まれます。ノート:
前述のoj-input*は、特にoj-input-date-time、oj-input-text、oj-input-passwordなどの入力コンポーネントのファミリを指します。oj-color*、oj-combobox*およびoj-select*は、それぞれ2つのコンポーネントを表します。
ヒント:
プレーン・テキストまたは他の編集不可コンポーネントにツールチップを追加するには、oj-popupを使用します。Oracle JETクックブックのツールチップの例(ポップアップ)を参照してください。
編集可能コンポーネントでのOracle JETのメッセージAPIの理解
Oracle JETには、Oracle JET編集可能コンポーネントでメッセージをサポートするためにメッセージAPIが用意されています。
次に、編集可能コンポーネントを示します。
-
oj-checkboxset -
oj-color-palette -
oj-color-spectrum -
oj-combobox-many -
oj-combobox-one -
oj-input-date -
oj-input-date-time -
oj-input-number -
oj-input-password -
oj-input-text -
oj-input-time -
oj-radioset -
oj-select-many -
oj-select-one -
oj-slider -
oj-switch -
oj-text-area
Oracle JETクックブックのフォーム・コントロールには、各コンポーネントの説明および使用例もあります。
Oracle JET編集可能コンポーネントのメッセージ属性について
次の属性は、編集可能要素でメッセージに影響を与えます。
| 要素の属性 | 説明 |
|---|---|
|
|
placeholder属性がまだ設定されていない場合に、プレースホルダ・テキストとして表示される |
|
|
要素で補助コンテンツ( |
|
|
ユーザーがヘルプ・アイコンにカーソルを重ねたときに カーソルを重ねたり、タブでヘルプ・アイコンに移動したり、デバイス上でマウスを押したままにすると、
|
|
|
ユーザーが入力フィールドにフォーカスを設定したときに表示されるノート・ウィンドウに、テキストを表示します。テキスト文字列は、標準のHTML書式設定タグを使用して書式設定できます。 |
|
|
ビジネス検証エラーまたはその他の重大度タイプのメッセージが発生した場合にアプリケーションが提供するメッセージのリスト。 |
|
|
要素に設定されるプレースホルダ・テキスト。 |
|
|
コンポーネントに関連するすべての翻訳済リソース、およびそのすべてのスーパークラスを含むオブジェクト。コンポーネントの翻訳済リソースを変更するにはサブプロパティを使用します。 |
|
|
検証の実行時に要素で使用されるバリデータのリスト。デフォルトでは、バリデータ・ヒントはノート・ウィンドウに表示されます。 |
メッセージ・プロパティの詳細は、『Oracle® JavaScript Extension Toolkit (Oracle JET) APIリファレンス』で、要素のAPIドキュメントのAttributesの項を参照してください。APIリストから表示するコンポーネントを選択してください。
Oracle JETコンポーネントのメッセージ・メソッドについて
編集可能値コンポーネントは、メッセージ目的で次のメソッドをサポートしています。
| コンポーネント・イベント | 説明 |
|---|---|
|
|
すべての遅延メッセージを取得し、それらを表示します。遅延メッセージがない場合、このメソッドは単に復帰します。ユーザーがコンポーネントにフォーカスを設定すると、遅延メッセージはインライン表示されます。 |
メソッドのコール方法、パラメータおよび戻り値の詳細は、『Oracle® JavaScript Extension Toolkit (Oracle JET) APIリファレンス』で、コンポーネントのAPIドキュメントのMethodsの項を参照してください。リストから表示するコンポーネントを選択してください。
Oracle JET編集可能コンポーネントでの検証およびメッセージ機能の理解
Oracle JETコンポーネントに対して実行されるアクション、設定されるプロパティ、およびコールされるメソッドによって、値の検証方法、およびメッセージとして表示する内容がコンポーネントに指示されます。
ある状況では、編集可能コンポーネントは標準検証または遅延検証のいずれかを常に実行します。それ以外の状況では、編集可能コンポーネントは、コンポーネントの状態に基づいて標準検証か遅延検証のどちらを実行するかを決定します。標準および遅延検証プロセスを理解することは、コンポーネントに設定するメッセージ・プロパティの決定に役立ちます。
-
標準検証: 標準検証中に、コンポーネントではすべての
messagesプロパティ(messages-custom)をクリアし、UI値を解析して検証を実行します。検証エラーはユーザーにすぐに報告されます。検証エラーが発生しなかった場合は、value属性が更新され、値が書式設定されて表示にプッシュされます。編集可能コンポーネントでは、次の場合に常に標準検証が実行されます。
-
ユーザーが編集可能コンポーネントと対話して、UIの値を変更する場合。
-
アプリケーションでコンポーネントに対して
validate()がコールされる場合。
ノート:
アプリケーションで特定のプロパティが変更されると、コンポーネントは現在の状態に基づいて標準検証の実行を決定します。詳細は、後続の「混合検証」を参照してください。
-
-
遅延検証:
requiredバリデータを使用して、コンポーネントのvalueを検証します。requiredバリデータは、遅延検証で使用する唯一のバリデータです。特に指定がないかぎり、遅延検証中にすべてのmessagesプロパティがクリアされます。valueによる遅延検証が失敗した場合、検証エラーはユーザーにすぐには表示されません。編集可能コンポーネントでは、次の場合に常に遅延検証が実行されます。
-
コンポーネントが作成された場合。
messagesプロパティはクリアされません。 -
アプリケーションでコンポーネントに対して
reset()メソッドがコールされる場合。 -
アプリケーションでコンポーネントの
valueプロパティがプログラムによって変更される場合。
ノート:
アプリケーションで特定のプロパティがプログラムによって変更されると、コンポーネントは現在の状態に基づいて遅延検証の実行を決定します。詳細は、後続の「混合検証」を参照してください。
-
-
混合検証: 次のプロパティが変更されるか、またはアプリケーションによってメソッドがコールされると実行されます。コンポーネントの現在の状態に基づいて遅延検証または標準検証のいずれかが実行され、検証エラーはユーザーに表示または非表示にされます。混合検証は次の場合に実行されます。
-
converterプロパティが変更される場合 -
disabledプロパティが変更される場合 -
readOnlyプロパティが変更される場合 -
requiredプロパティが変更される場合 -
validatorsプロパティが変更される場合 -
refresh()メソッドがコールされる場合
-
Oracle JETクックブックのバリデータ(コンポーネント)には、標準および遅延検証を示す追加の例があります。Oracle JETに付属するバリデータおよびコンバータの詳細は、「入力の検証および変換」を参照してください。
Oracle JET編集可能コンポーネントによる標準検証の実行方法の理解
Oracle JET編集可能コンポーネントでは、ユーザーがUIの値を変更した場合、またはアプリケーションでコンポーネントのvalidate()メソッドがコールされた場合に標準検証が実行されます。いずれの場合も、エラー・メッセージはすぐに表示されます。
ユーザーが編集可能コンポーネントの値を変更した場合の標準検証プロセスについて
ユーザーが編集可能値を変更した場合は、次のようになります。
-
すべての
messages-customメッセージがクリアされます。値の変更が明確な場合は、onMessagesCustomChangedイベントがトリガーされます(適用可能な場合)。 -
コンポーネントにコンバータが設定されている場合は、UI値が解析されます。解析エラーが発生した場合、処理はステップ5にジャンプします。
-
コンポーネントに1つ以上のバリデータが設定されている場合は、次のようになります。
-
指定されたバリデータを使用して解析済(変換済)の値が順に検証されます(暗黙的な必須バリデータが存在する場合は最初に実行されます)。暗黙的な必須バリデータに渡される値は、空白が削除されます。
-
バリデータがエラーをスローした場合、そのエラーは記憶され、次のバリデータ(存在する場合)が実行されます。
すべてのバリデータが完了した後、1つ以上のエラーがある場合、処理はステップ5にジャンプします。
-
-
すべての検証をパスした場合は、次のようになります。
-
解析された値はコンポーネントの
value属性に書き込まれ、onValueChangedイベントがvalue属性に対してトリガーされます。 -
再度コンバータを使用して新しい値が表示用に書式設定され、コンポーネントに表示されます。
ノート:
コンポーネントのvalueプロパティがKnockoutのobservableにバインドされた場合、値はobservableにも書き込まれます。
-
-
前のステップで1つ以上のエラーが発生した場合は、次のようになります。
-
コンポーネントの
valueプロパティは変更されません。 -
エラーは、デフォルトではコンポーネントにインラインで表示されます。ユーザーは、コンポーネントにフォーカスを設定して、エラーの詳細を表示することもできます。
-
-
ユーザーがエラーを修正すると、検証プロセスが再開されます。
編集可能コンポーネントでValidate()がコールされた場合の標準検証プロセスについて
validate()メソッドでは、コンポーネントに登録されているコンバータおよびすべてのバリデータを使用して、コンポーネントの現在の表示値を検証し、検証をパスするとvalue属性を更新します。
このメソッドは、編集可能コンポーネントでのみ使用可能です(妥当な場合、oj-input-numberなど)。validate()メソッドの詳細は、validate()を参照してください。
Oracle JET編集可能コンポーネントによる遅延検証の実行方法の理解
Oracle JET編集可能コンポーネントでは、コンポーネントが作成された場合、valueまたはrequiredプロパティがプログラムによって変更された場合、またはコンポーネントのreset()メソッドがコールされた場合に、遅延検証が実行されます。この項では、Oracle JET編集可能コンポーネントが作成された場合、およびvalueプロパティがプログラムによって変更された場合の遅延検証プロセスの詳細を説明します。
『Oracle® JavaScript Extension Toolkit (Oracle JET) APIリファレンス』でも詳細が説明されています。ナビゲーション・リストから対象のコンポーネントを選択してください。
Oracle JET編集可能コンポーネントが作成された場合の遅延検証プロセスについて
最終ステップの1つとして、編集可能要素が作成されると、コンポーネントの初期化された値に対して遅延検証が実行されます。
-
必須バリデータが実行され、値が空またはnullの場合は検証エラーが発生します。
-
検証エラーが発生すると、コンポーネントでメッセージ・フレームワークが更新されます。コンポーネントにメッセージ・テーマは適用されず、ノート・ウィンドウにエラー・メッセージは表示されません(検証エラー・メッセージは遅延されるため)。
ノート:
ページ作成者はいつでもshowMessages()をコールして、遅延メッセージを表示できます。
valueプロパティがプログラムによって変更された場合の遅延検証プロセスについて
Oracle JET編集可能要素のvalueプロパティは、次の場合にプログラムによって変更できます。
-
ページに要素のvalue属性を変更するコードが含まれている場合。
-
ページ作成者が新しいサーバー値でViewModelのobservableをリフレッシュする場合。
いずれの場合も、次のように、要素は新しい値を表示するように更新されます。
-
編集可能要素のすべてのメッセージ・プロパティはクリアされ、
onMessagesCustomChangedイベントがトリガーされます(該当する場合)。 -
onValueChangedイベントがvalue属性に対してトリガーされます(該当する場合)。 -
要素にコンバータが設定されている場合は、
value属性が取得され、表示される前に書式設定されます。書式エラーが発生すると、処理はステップ5にジャンプします。そうでない場合は、書式設定された値が要素に表示されます。 -
新しい値に対して遅延バリデータが実行されます。発生したすべての検証エラーはメッセージ・フレームワークに通知されますが、エラー自体はユーザーに表示されません。
-
書式設定エラーが発生した場合は、検証エラー・メッセージが処理されて、コンポーネントの
messages-custom属性が更新されます。書式設定エラーはすぐに表示されます。
ノート:
ページ作成者は、設定された値がコンポーネントのAPIで定義された適切なタイプであること、および値がエラーなしで表示用に書式設定できることを確認する必要があります。
Oracle JETメッセージの使用
Oracle JETメッセージ・フレームワークを使用して、Oracle JETアプリケーションにコンポーネントのメッセージと有効性を通知し、Oracle JETコンポーネントにビジネス検証失敗を通知します。
Oracle JET編集可能コンポーネントへのビジネス検証エラーの通知
messages-custom属性とshowMessages()メソッドを使用して、Oracle JET編集可能要素にビジネス検証エラーを通知できます。
messages-custom属性の使用
アプリケーションでこの属性を使用すると、新規または更新されたカスタム・メッセージを表示するようにOracle JETコンポーネントに通知できます。これらは、viewModelレイヤー内またはサーバー上で発生するビジネス検証の結果である場合があります。このプロパティを設定すると、ただちにメッセージがユーザーに対して表示されます。messages-custom属性では、Messageをダック・タイピングするオブジェクトが詳細、サマリーおよび重大度フィールドとともに取得されます。
この例では、重大度タイプ・ボタンが切り替えられ、選択したタイプのメッセージがmessages-custom配列にプッシュされます。この例では、messages-custom属性がすべてのフォーム・コントロールで設定されています。messages-custom属性を変更すると、ただちに表示されます。この例では、ユーザーはError重大度タイプを選択しており、様々なテキスト入力および選択コンポーネントについて関連するメッセージが表示されています。
この例では、observable (appMessages)が宣言され、各要素のmessages-custom属性にバインドされています。次のコードは、このobservableをoj-switch要素のmessages-custom属性に関連付ける方法を示しています。
<oj-switch id="switch" value="{{switchValue}}"
messages-custom="{{appMessages}}">
</oj-switch>対応するJavaScriptファイルで、重大度タイプを設定し、それを識別可能なappMessagesに渡して関連付けられているメッセージを表示します。
if (summary && detail)
{
msgs.push({summary: summary, detail: detail, severity: type});
}
self.appMessages(msgs);次の例では、フィールド間カスタム・バリデータのインスタンスがemailAddress observableに関連付けられ、ユーザーが連絡方法のプリファレンスとして「Email」を選択したときにその値が空でないことを確認します。
対応するJavaScriptファイルで、messages-custom属性をemailAddressMessagesとして設定する必要があります。
<oj-input-text id="emailId" type="email" name="emailId"
placeholder="john_doe@example.com" value="{{emailAddress}}"
messages-custom="{{emailAddressMessages}}"
disabled="[[contactPref() !== 'email']]">
</oj-input-text>
カスタム・バリデータの作成に使用する完全な例とコードは、フィールド間検証を参照してください。デモでは、カスタム・バリデータを使用して、observable値を別の値に対して検証します。検証に失敗した場合は、カスタム・バリデータでmessages-custom属性が更新されます。
編集可能コンポーネントでのshowMessages()メソッドの使用
このメソッドは、コンポーネントに遅延メッセージを表示するように指示するために使用します。このメソッドがコールされると、Oracle JET編集可能コンポーネントはすべての遅延メッセージを自動的に取得して表示します。これによって、コンポーネントでは、ユーザーに対して遅延メッセージが表示されます。
例は、遅延メッセージの表示に関する項を参照してください。
oj-validation-groupコンポーネントの理解
oj-validation-groupコンポーネントは、コンポーネントのグループの有効性を追跡するOracle JET要素であり、ページ作成者がOracle JETアプリケーションで検証のベスト・プラクティスを強制することを可能にします。
アプリケーションは、このコンポーネントを使用して次のことができます:
-
validプロパティのinvalidShown値を使用して、現在メッセージを表示している無効なコンポーネントがグループ内にあるかどうかを判断します。 -
validプロパティのinvalidHidden値を使用して、遅延メッセージ(現在非表示のメッセージなど)がある無効なコンポーネントがグループ内にあるかどうかを判断します。 -
focusOn()メソッドを使用して、グループ内の最初の有効なコンポーネントにフォーカスを設定します。focusOn("@firstInvalidShown")を使用して、無効なメッセージを表示している最初の有効なコンポーネントにフォーカスを設定することもできます。 -
showMessages()メソッドを使用して、すべての追跡対象コンポーネントに遅延メッセージを表示します。
oj-validation-groupコンポーネントの属性とメソッドの詳細は、oj-validation-groupを参照してください。
oj-validation-groupによる編集可能コンポーネントのグループの有効性の追跡
oj-validation-groupコンポーネントで編集可能コンポーネントのグループをラップすることにより、それらの有効性を追跡できます。
oj-validation-groupは、validプロパティのすべての子孫を検索して、追跡しているコンポーネントのリストに追加します。コンポーネントを追加する際、コンポーネントのvalid状態はその子のvalid状態に基づいている必要があるため、追跡対象のコンポーネントの子はチェックしません(該当する場合)。
そのようなコンポーネントをすべて検出すると、追跡しているすべての有効な(非表示を含む)コンポーネントに基づいて、それ自身のvalidプロパティ値を決定します。valid状態の判断では、無効または読取り専用のコンポーネントはすべて無視されます。
ほとんどの無効なコンポーネントのvalidプロパティ値は、oj-validation-group要素のvalidプロパティ値になります。追跡対象のコンポーネントのvalid値のいずれかが変更されると、oj-validation-groupに通知され、変更されていればそれ自身のvalid値が更新されます。
次のコード・サンプルは、oj-validation-groupを使用して、どのように一般的なフォームの全体的な有効性を追跡できるかを示しています。
<div id="validation-usecase"> <oj-validation-group id="tracker" valid="{{groupValid}}"> <oj-form-layout label-edge="inside" id="fl1"> <oj-input-text id="firstname" required autocomplete="off" label-hint="First Name" name="firstname" > </oj-input-text> <oj-input-text id="lastname" required value="{{lastName}}" autocomplete="off" label-hint="Last Name"> </oj-input-text> <oj-input-text id="email" on-value-changed="[[firstEmailValueChanged]]" autocomplete="off" label-hint="Email" value="{{email}}" > </oj-input-text> <oj-input-text id="email2" autocomplete="off" label-hint="Confirm Email" validators="[[emailMatchValidator]]" value="{{email2}}"> </oj-input-text> <oj-checkboxset id="colors" label-hint="Favorite Colors"> <oj-option id="blueopt" value="blue">Blue</oj-option> <oj-option id="greenopt" value="green">Green</oj-option> <oj-option id="pinkopt" value="pink">Pink</oj-option> </oj-checkboxset> </oj-form-layout> </oj-validation-group> <hr/> <div class="oj-flex"> <div class="oj-flex-item"> </div> <div class="oj-flex-item"> <oj-button id="submitBtn" on-oj-action="[[submit]]">Submit</oj-button> </div> </div> <hr/> <span>oj-validation-group valid property: </span> <span id="namevalid"> <oj-bind-text value="[[groupValid]]"></oj-bind-text> </span> </div>
この例のビュー・モデルを作成するためのスクリプトの一部を次に示します。この部分は、上で使用されているoj-validation-groupに関連しています。完全なスクリプトは次のリンク先のクックブック・サンプルに含まれています。
require([ 'knockout', 'ojs/ojbootstrap', 'ojs/ojknockout', 'ojs/ojbutton', 'ojs/ojcheckboxset', 'ojs/ojformlayout', 'ojs/ojinputtext', 'ojs/ojvalidationgroup'],
function (ko, Bootstrap)
// this callback gets executed when all required modules
// for validation are loaded
{
function DemoViewModel() {
var self = this;
self.tracker = ko.observable();
...
// to show the oj-validation-group's valid property value
self.groupValid = ko.observable();
// User presses the submit button
self.submit = function () {
var tracker = document.getElementById("tracker");
if (tracker.valid === "valid") {
// submit the form would go here
alert("everything is valid; submit the form");
}
else {
// show messages on all the components that have messages hidden.
tracker.showMessages();
tracker.focusOn("@firstInvalidShown");
}
};
};
Bootstrap.whenDocumentReady().then(
function ()
{
ko.applyBindings(new DemoViewModel(), document.getElementById('validation-usecase'));
}
);
});次の図は、サンプル・コードの出力を示しています。各インスタンスの下部にあるステータス・テキストはoj-validation-groupのvalid状態を示し、延長線によってフォームを示しています。
Oracle JETクックブックには、この項で使用されている完全な例があります。フォーム・フィールドに関する項を参照してください。
フィールド間検証に使用されるoj-validation-groupを示した例は、フィールド間検証に関する項を参照してください。
ページ・レベルおよびセクション・レベルのメッセージの作成
Oracle JETには、メッセージ・バナー(oj-message-banner)要素が含まれます。これは、関連性のある有益な情報をアプリケーション・ユーザーに伝える、適度に破壊的で半永久的な短いメッセージをアプリケーションのページやページ内のセクションに表示するために使用します。
Cookbookにoj-message-banner要素の使用方法を示す様々な例が記載され、APIドキュメントにその属性およびメソッドに関する詳細が示されています。Oracle JET Cookbookのメッセージ・バナーのデモ、および『Oracle® JavaScript Extension Toolkit (JET) Oracle JET APIリファレンス』のメッセージ・バナーの説明を参照してください。
編集可能コンポーネントのoj-label help属性の構成
oj-label要素のhelp属性を構成して、ヘルプ・アイコンを追加します。ユーザーがカーソルを重ねると、説明テキストが表示されるか、追加情報のURLへのクリック可能なリンクが表示されます。あるいは、ヘルプ・テキストとクリック可能なリンクの両方が表示されます。
help属性には、ヘルプ定義テキストおよびヘルプ・アイコンを制御する2つのサブプロパティが含まれます。
-
definition: ユーザーが次のいずれかを実行すると表示されるヘルプ定義テキストが含まれます。-
ヘルプ・アイコンにカーソルを重ねたとき
-
キーボードを使用してヘルプ・アイコンに移動したとき
-
モバイル・デバイスでヘルプ・アイコンを押し続けたとき
-
-
source: ヘルプ・アイコンのリンクで使用されるURLが含まれます。
次の図は、help属性を使用するように構成された3つのoj-labelコンポーネントを示しています。最も上にあるコンポーネントはhelpのサブプロパティのdefinitionおよびsourceを両方使用して構成され、図には、ユーザーがヘルプ・アイコンにカーソルを重ねると表示されるテキストとクリック可能ポインタが示されています。中央の図では、oj-labelコンポーネントに、ユーザーがクリックするとURLにリンクするヘルプ・アイコンが含まれています。最も下の図では、ユーザーがラベルまたはヘルプ・アイコンにカーソルを重ねると、oj-labelによってカスタム・ヘルプ・テキストが表示されます。
始める前に:
- ページにOracle JET要素を追加するプロセスについてよく理解します。「ページへのOracle JETコンポーネントの追加」を参照してください。
oj-label要素のhelpプロパティを構成するには:
ojInputTextコンポーネントにhelpプロパティを構成するための完全な例は、Oracle JETクックブックのヘルプおよびタイトルを参照してください。
編集可能コンポーネントのhelp.instruction属性の構成
help.instruction属性を使用して、編集可能コンポーネントのヘルプ・テキストを構成します。これにより、入力コンポーネントにフォーカスがあるときに、アドバイザリ・テキスト(ツールチップとも呼ばれます)を含むノート・ウィンドウが表示されます。
次の図は、ユーザーが入力フィールドにフォーカスを設定したときにテキストを表示するように構成された2つのoj-input-text要素を示しています。最初の例では、help.instruction属性が書式設定なしでoj-input-text要素に定義されています。2番目の例では、属性値に、アドバイザリ・テキストに追加されたHTML書式設定が含まれています。
始める前に:
- ページにOracle JET要素を追加するプロセスについてよく理解します。「ページへのOracle JETコンポーネントの追加」を参照してください。
編集可能要素のhelp.instruction属性を構成するには:
完全な例は、Oracle JETクックブックのヘルプおよびタイトルを参照してください。oj-input-textコンポーネントの詳細は、 ojInputText APIドキュメントを参照してください。
正規表現バリデータの詳細は、Oracle JETバリデータおよびコンバータについてを参照してください。
ヒント、ヘルプおよびメッセージの表示の制御
display-options属性を使用して、コンバータとバリデータのヒント、メッセージおよびヘルプの説明の位置と表示を制御します。
次の図は、ヘルプ、コンバータとバリデータのヒントおよびメッセージのデフォルトの位置と表示を示しています。この例では、oj-input-dateコンポーネントを使用していますが、すべての編集可能コンポーネントで動作は同じです(妥当な場合)。
-
バリデータの
hint: フォーカスされるとノート・ウィンドウに表示されます -
コンバータの
hint: 入力フィールドのプレースホルダとして使用されたり、placeholder属性が定義されている場合はノート・ウィンドウに表示されます。 -
messages: エラー発生時にインラインで表示されます -
help.instruction: フォーカスされるとノート・ウィンドウに表示されます
oj-label排他属性help.definitionは、カーソルを重ねるとノート・ウィンドウに表示されます。
次のコード・サンプルは、この例で使用するoj-input-dateコンポーネントのマークアップを示しています。この例には、help.instruction、バリデータ・ヒント、および検証失敗に関するカスタム・メッセージのデータ値に対する定義が含まれます。このサンプルは、help属性を含むoj-label要素のマークアップも示しています。
<div id="form-container" class="oj-form"> <h3 class="oj-header-border">Default Display of Messages, Hints, Help Instruction</h3> <oj-label for="date10"help.definition="custom help text"> Input Date</oj-label> <oj-input-date id="date10" size="30" name="date10" required placeholder="month day, year"help.instruction='enter a date in your preferred format and we will attempt to figure it out'converter="[[longDateConverter]]" value="{{birthdate}}" validators="[[validators]]" translations='{ "required": {"hint": "validator hint: required","messageSummary": "<html>custom summary: {label} <b>Required</b></html>","messageDetail": "<html>custom detail: A value is required for this field</html>"}}'> </oj-input-date>
次のコード・サンプルは、アプリケーションのスクリプトに設定された検証失敗に関するカスタム・メッセージを示しています。
function MemberViewModel()
{
var self = this;
self.validators = ko.computed(function()
{
return [{
type: 'datetimeRange',
options: {
min: ValidationBase.IntlConverterUtils.dateToLocalIso(new Date(1930, 00, 01)),
max: ValidationBase.IntlConverterUtils.dateToLocalIso(new Date(1995, 11,31)),
hint: {
inRange: 'Validator hint: datetimeRange: January 1, 1930 - November 30, 1995 years'},
messageSummary:{
rangeOverflow: 'Date later than max.',
rangeUnderflow: 'Date earlier than min.'},
messageDetail: {
rangeOverflow: 'The value \'{value}\' is not in the expected range; it is too high.',
rangeUnderflow: 'The value \'{value}\' is not in the expected range; it is too low.'}
}}];
});
//...Contents Omitted
}
Bootstrap.whenDocumentReady().then(
function ()
{
ko.applyBindings(new MemberViewModel(), document.getElementById('form-container'));
}
);
});display-options要素の属性をマークアップで使用すると、ページ上の単一の編集可能コンポーネントについてヒント、ヘルプおよびメッセージ・プロパティのデフォルトの動作を変更できます。すべての編集可能コンポーネントのページ上での動作を制御するには、アプリケーションのスクリプトでComponent.setDefaultOptions()メソッドを使用して、displayOptions値を設定できます。
display-optionsを使用すると、デフォルト動作を次のように変更できます。
-
helpInstruction: ヘルプの説明の表示をオフにするには、noneに設定します。 -
converterHint: 表示をオフにするにはnoneに設定し、デフォルト位置をプレースホルダ・テキストからノート・ウィンドウに変更するにはnotewindowに設定します。 -
validatorHint: 表示をオフにするにはnoneに設定します。 -
messages: 表示をオフにするにはnoneに設定し、デフォルト位置をインラインからノート・ウィンドウに変更するにはnotewindowに設定します。
始める前に:
- ページにOracle JET要素を追加するプロセスについてよく理解します。「ページへのOracle JETコンポーネントの追加」を参照してください。
デフォルトの表示タイプ(インラインまたはノート・ウィンドウ)を変更して、ヒント、ヘルプおよびメッセージのオプションを表示するには:
Oracle JETクックブックのユーザー支援には、この例の完全なコードがあります。また、ヒント、ヘルプおよびメッセージの構成を示す追加の例もあります。