機械翻訳について

プロパティ・ペインでのフラグメント変数の表示方法のカスタマイズ

「プロパティ」ペインでフラグメント入力パラメータ用に表示されるUIコンポーネントをカスタマイズします。これにより、ページ・デザイナでこれらのパラメータを編集するタスクが容易になります。

ページ・デザイナでフラグメントを操作する場合、フラグメントの「プロパティ」ペインには、入力パラメータとして有効になっているフラグメント変数の値を編集するためのテキスト・フィールド・コンポーネントがデフォルトで表示されます。 一部の入力パラメータでは、別のUIコンポーネントを使用して、パラメータの編集を簡単または直感的に行うことができます。 たとえば、日付を指定するためにパラメータを使用する場合、日付ピッカー・コンポーネントはテキスト・フィールドよりも簡単に使用できます。 これを行うには、ページ・デザイナでフラグメントの入力パラメータを編集するときに、テキスト・フィールドのかわりに日付ピッカーが表示されるようにフラグメント変数をカスタマイズします:

図fragment-variable-pi.pngの説明

「プロパティ」ペインでフラグメント変数に対して表示されるUIコンポーネントをカスタマイズするには、変数エディタの「デザインタイム」タブを使用します。 フラグメントのJSONは、JSONエディタで直接編集することもできます。

ノート:

一部のUIカスタマイズ・オプションは、「デザインタイム」タブでは使用できません。 これらの拡張オプションを構成するには、JSONを直接編集する必要があります。 オプションのリストは、「メタデータを使用したフラグメントJSONのカスタマイズ」を参照してください。

変数エディタでの変数のカスタマイズ

ページ・デザイナでフラグメントの入力パラメータを編集するために使用するUIを構成するには:

1. フラグメントの変数エディタを開きます。
2. カスタマイズする変数または定数を選択します。
3. 「プロパティ」ペインで、変数または定数の「デザインタイム」タブを開きます。
4. プロパティを選択して、変数を編集するためのコンポーネントがページ・デザイナでどのように表示されるかをカスタマイズします。
   「デザインタイム」タブに表示されるプロパティは、変数のタイプ、およびタブで選択したサブタイプ・プロパティによって異なります。 たとえば、文字列型変数のサブタイプとして「日付」を選択した場合、日付の最小制限と最大制限を設定するためのフィールドが表示されます。
   

   
   「図fragment-variable-custompi.pngの説明」

   
   

   ノート:

   一部のサブタイプはバインディング・タイプの設定に使用され、「プロパティ」ペインでの変数の表示方法に直接影響しません。 動的フィールド、動的フィールド配列、動的コンテナおよび動的レイアウト・コンテキストの使用の詳細は、動的コンポーネントでの変数のバインディング・タイプの設定を参照してください。 ビジネス・オブジェクト値およびビジネス・オブジェクト値参照の使用の詳細は、フラグメント・データに基づくページ・プロパティの式の解決を参照してください。
   文字列型、オブジェクト型、数値型の変数および定数の共通カスタマイズ・オプションのステップを次に示します:

   ヒント:

   文字列変数および定数を操作するときに、翻訳をサポートするために特定の変数(または定数)が「ページ・デザイナのプロパティ」ペインに翻訳アイコンを表示するようにする場合は、翻訳メタデータを追加するオプションがあります。

   カスタマイズ・オプション	「設計時間」タブのステップ	ページ・デザイナの結果
   カラー・ピッカーを表示するには:	文字列型変数または定数の場合: 「デザインタイム」タブで、「色」として「サブタイプ」を選択します。 オプショナル: 「プレースホルダー」フィールドで、変数のヒント・テキスト(Choose a colorなど)を指定します。 オプショナル: 「一般」タブに切り替えて、次の追加プロパティを設定します: 「ラベル」フィールドに、変数のわかりやすい名前を入力します。 「デフォルト値」プロパティで、カラー・ピッカーを使用してデフォルトの色を設定します。	「 図fragment-variable-custompropertiespane.pngの説明」
   日付ピッカーまたは日時ピッカーを表示するには:	文字列型変数または定数の場合: 「デザインタイム」タブで、「サブタイプ」を「日付」または「日時」として選択します。 オプショナル: 「プレースホルダー」フィールドで、変数のヒント・テキスト(Select a dateなど)を指定します。 オプショナル: 「最小」フィールドで、「プロパティ」ペインで、日付または日時範囲の下限(包含)を設定します。 オプショナル: 「最大」フィールドで、「プロパティ」ペインで、値の日付または日時範囲の上位(包含)制限を設定します。 オプショナル: 「一般」タブに切り替えてから、「ラベル」フィールドに変数のわかりやすい名前を入力します。	「 図fragment-variable-date.pngの説明」
   使用可能な値の配列を含むドロップダウン・メニューを表示するには:	文字列型変数または定数の場合: 「デザインタイム」タブで、「列挙値」として「サブタイプ」を選択します。 オプショナル: 「プレースホルダー」フィールドで、変数のヒント・テキスト(Select the default browserなど)を指定します。 「列挙値」の横にあるをクリックし、最初の値として「ラベル」、「値」および「説明」を入力します。 たとえば、ラベルとしてChrome、値としてch、説明としてGoogle Browserを入力できます。 「作成」をクリックします。 変更する場合は、をクリックし、値を更新して、「保存」をクリックします。 toをクリックして値を削除します。 リストを並べ替えるには、値の横にあるをドラッグし、必要な場所にドロップします。 ステップcを繰り返して、値リスト全体を作成します。 オプショナル: 「一般」タブに切り替えてから、「ラベル」フィールドに変数のわかりやすい名前を入力します。	「図fragment-variable-enumvaluepng.pngの説明」
   RESTエンドポイントなど、サービスから取得された値のドロップダウン・リストを表示するには:	文字列型変数または定数の場合: 「デザインタイム」タブで、「サブタイプ」をLOVとして選択します。 オプショナル: 「プレースホルダー」フィールドで、変数のヒント・テキスト(Select an option from the listなど)を指定します。 「エンドポイントの選択」をクリックし、レスポンスを使用して値リストを指定したエンドポイントを選択します。 RESTエンドポイントは、applicationですでに設定され、使用可能である必要があります。 エンドポイント・レスポンスもJSON形式である必要があります。 RESTコールで入力パラメータとURIパラメータが必要な場合、関連する「割当」または「マップされていません」リンクをクリックし、パラメータを置換する値にマップします。 値はVB Studio定数です。 パスおよびURIパラメータが他の定数に依存している場合(たとえば、RESTサービスでは、以前の選択の結果を独自のリクエストの一部として使用する場合)、パラメータ値の式表記を使用して、使用する定数値を指定します。 これをソースJSONで行う必要があります。 たとえば、次の式を使用して、パス・パラメータ"department"の値として"dept"定数の現在の値を使用するようにサービス・リクエストに指示します: "pathParameters": { "department": "[[ $constants.dept ]]" } 式を記述する場合: 単純な直接参照を使用します。 "[[ $constants.dept + "_" ]]"などの計算式は、想定どおりに機能しません。 定数を使用します。変数は使用できません。 LOVサービス・コールを行うapplicationから参照される定数にアクセスできることを確認します。 エンドポイント・レスポンスが配列でない場合は、「アイテム・パス」で、レスポンス・オブジェクトのルートから値リストを含む配列へのドット区切りのパスを指定します。 レスポンスが配列の場合は、このフィールドを空のままにできます。 たとえば、次に示すように、レスポンスが配列でない場合、resultsと入力します: { "now": { "type": "string", "description": "wow", "defaultValue": "505642", "input": "none", "@dt": { "label": "Films Now Playing", "subtype": "lov", "valueOptions": { "service": { "request": { "endpoint": "movies/getNowPlaying", "uriParameters": { "api_key": "4174b7d9a7b4bf87342c98e2289c6ee6" } }, "response": { "itemsPath": "results", "mapping": { "value": "id", "label": "title", "description": "overview" } } } } } } } エンドポイントが、定義したビジネス・オブジェクトからのものである場合、itemsと入力します。 「値」フィールドで、変数または定数の実際の値として使用するレスポンス・オブジェクトのフィールド(idなど)を指定します。 オプショナル: 「ラベル」フィールドに、アイテムのプライマリ表示名として使用するレスポンス・オブジェクトのフィールド(titleなど)を入力します。 また、["firstName", "lastName"]などのフィールド名の配列にすることもできます。 オプショナル: 「説明」フィールドに、アイテムの説明として使用するレスポンス・オブジェクトのフィールド(overviewなど)を入力します。	「図constants-lov-picker.pngの説明」
   時間ピッカーを表示するには:	文字列型変数または定数の場合: 「デザインタイム」タブで、「時間」として「サブタイプ」を選択します。 オプショナル: 「プレースホルダー」フィールドで、変数のヒント・テキスト(Select a timeなど)を指定します。 オプショナル: 「最小」プロパティで、「プロパティ」ペインの値の時間範囲の下限(包含)を設定します。 オプショナル: 「最大」プロパティで、「プロパティ」ペインで、値の時間範囲の上限(包含)を設定します。 オプショナル: 「一般」タブに切り替えてから、「ラベル」フィールドに変数のわかりやすい名前を入力します。	「 図fragment-variable-time.pngの説明」
   タイムゾーンのリストを含むドロップダウン・メニューを表示するには:	文字列型変数または定数の場合: 「デザインタイム」タブで、「タイムゾーン」として「サブタイプ」を選択します。 オプショナル: 「プレースホルダー」フィールドで、変数のヒント・テキスト(Select a time zoneなど)を指定します。 オプショナル: 「一般」タブに切り替えてから、「ラベル」フィールドに変数のわかりやすい名前を入力します。	「 図fragment-variable-timezone.pngの説明」
   入力値を範囲内の数値に制限するには:	数値型変数または定数の場合: 「デザインタイム」タブで、「プレースホルダー」フィールドに、変数のヒント・テキスト(Enter Quantityなど)を指定します。 オプショナル: 「最小」および「最大」プロパティで、「プロパティ」ペインの値の範囲の下限および上限を設定します。たとえば、入力値を0の範囲の数値に制限 - 99. オプショナル: 「一般」タブに切り替えてから、「ラベル」フィールドに変数のわかりやすい名前を入力します。	「 図fragment-variable-number.pngの説明」
   エンドポイント・ピッカーを表示して、ユーザーがエンドポイント、入力パラメータ、問合せ、ソートおよびその他のコールREST処理オプションを選択できるようにするには:	オブジェクト型変数または定数の場合: 「デザインタイム」タブで、「エンドポイント」として「サブタイプ」を選択します。 オプション: エンドポイント・ピッカーで使用可能なエンドポイントをRESTアクション・タイプでフィルタするには、「エンドポイント・アクション・ヒント」で1つ以上の事前定義済フィルタを選択します。 たとえば、Get One RESTコールのみをリストするには、「取得」を選択します。 オプション: エンドポイント・ピッカーで使用可能なエンドポイントをサービス接続タイプでフィルタするには、「サービス・タイプ」で1つ以上の事前定義済フィルタを選択します。 たとえば、ADF記述を使用したサービス接続のみをリストするには、「ADF記述」を選択します。 オプショナル: 「一般」タブに切り替えてから、「ラベル」フィールドに変数のわかりやすい名前を入力します。 ノート: 「エンドポイント」サブタイプを使用する場合、「プレースホルダー」フィールドは「プロパティ」ペインでは有効になりません。	「 図fragment-variable-endpoint.pngの説明」 「選択」をクリックすると、フラグメント・ユーザーが適切なエンドポイントを選択し、そのURIパラメータを選択できるエンドポイントの構成ウィザードが起動します。 ヒント: 必要なエンドポイントが見つからない場合や、手動でエンドポイントを設定する場合は、ウィザードで「エンドポイントの手動設定」アイコン()をクリックし、使用可能なエンドポイントから選択して、そのURIパラメータを構成します。

「デザインタイム」タブでプロパティを設定すると、フラグメントのJSONのメタデータが自動的に更新されます。 JSONエディタを開いてメタデータを表示できます。 たとえば、日付ピッカー・コンポーネントを使用するようにカスタマイズされている変数について、次のように表示されます:

"variables": {
    "hireDate": {
      "type": "string",
      "input": "fromCaller",
   "@dt": {
        "label": "Date of Hire"
        "subtype": "date",
        "valueOptions": {
          "placeholder": "Select a date"
     }
   }   
},

Metadataを使用したフラグメントJSONのカスタマイズ

フラグメント変数の「デザインタイム」タブは単純なUIカスタマイズに使用できますが、拡張オプションについてはJSONを直接編集する必要があります。 これを行うには:

1. フラグメントのJSONエディタを開きます。
2. @dt要素を設定して変数または定数の定義を更新し、次にsubtypeプロパティを使用してページ・デザイナに表示するコンポーネントを指定します。 JSONエディタには、subtypeプロパティの値の選択に役立つヒントが表示されます:
   
   
   「図fragment-variable-json.pngの説明」
   
   
   たとえば、subtypeプロパティをbusinessObjectに設定して、ビジネス・オブジェクトを選択するためのコンポーネントを表示する方法を次に示します:

   "myObject": {
      "type": "string",
      "input": "fromCaller",   
      "@dt": {
            "subtype": "businessObject",
            "label": "Related Object"
       }
    },

   labelプロパティを使用して、「プロパティ」ペインで変数の表示名を変更することもできます。

   ページ・デザイナの「プロパティ」ペインに、ビジネス・オブジェクトを選択するためのコンポーネントと、フラグメントが使用されている変数の新しい表示名が表示されます。
   「
   図fragment-variable-bo.pngの説明」
   

JETコンポーネントおよびプロパティの詳細は、Oracle JavaScript Extension Toolkitドキュメントの「JETメタデータ」を参照してください。

変数Metadataのプロパティ・オプション

次の表では、「プロパティ」ペインでのフラグメント変数の表示方法をカスタマイズするためにJSONで使用できるメタデータ・プロパティについて説明します:

プロパティ	タイプ	説明
label	文字列	このプロパティを使用して、変数のわかりやすい名前を指定します。
subtype	利用可能なサブタイプ: businessObject color date date-time endpoint enum lov time timezone その他のサブタイプも使用できますが、これらのサブタイプはバインディング・タイプの設定に使用され、「プロパティ」ペインでの変数の表示方法には影響しません。 dynamicContainer、dynamicField、dynamicField[]およびdynamicLayoutContextの使用の詳細は、動的コンポーネントでの変数のバインディング・タイプの設定を参照してください。 businessObjectValueおよびbusinessObjectValueReferenceの使用方法の詳細は、「フラグメント・データに基づくページ・プロパティの式の解決」を参照してください。	このプロパティを使用して、単純なタイプに対してより具体的なタイプのカスタマイザを作成します。 たとえば、dateを選択して、文字列型に日付ピッカー・コンポーネントを使用できます: 図constants-rich-picker.pngの説明 ほとんどの単純なカスタマイズは、「デザインタイム」タブで構成できます(「変数エディタでの変数のカスタマイズ」を参照)。
valueOptions	オブジェクト	使用可能なvalueOptionsは、選択したサブタイプによって異なります。 サブタイプが選択されていない場合、valueOptionsはplaceholderのみです。 valueOptionsプロパティのリストは、次の表を参照してください。

フラグメントMetadataのプロパティ・オプション

使用できる有効なsubtypeおよびvalueOptionsプロパティは、変数の型によって異なります。 たとえば、colorサブタイプは、文字列である変数にのみ適用できます。 この項では、タイプごとに有効なsubtypeおよびvalueOptionsプロパティについて説明します。

サブタイプおよびオブジェクトのvalueOptions

変数型がオブジェクトの場合、次の表で、使用できるsubtypeおよびvalueOptionsについて説明します:

サブタイプ	valueOptions	使用方法
dynamicContainer	section	dynamicContainerサブタイプのvalueOptionは、sectionのみです: "@dt": { "subtype": "dynamicContainer", "valueOptions": { "section": { "preferredContent":["SpFoldoutPanelElement","SpFoldoutPanelSummarizingElement"] } } } 親コンテナに動的コンテナ・セクションのメタデータを作成します。 preferredContentを使用して、セクション・テンプレートのルート内のコンポーネントで実装する必要があるインタフェースをリストします。
empty	fields	サブタイプが選択されていない場合は、fields valueOptionを使用して、オブジェクト値の表示/編集をカスタマイズできます。 値全体に対して単純な単一のテキスト領域を表示するかわりに、プロパティ・ペインにオブジェクトの様々なフィールドの個別のカスタマイザが表示されます。 ノート: このプロパティは、オブジェクト・フィールドの最初のレベルの表示でのみサポートされています。 オブジェクトの値の編集時にプロパティ・ペインにインラインで表示する、関連付けられた変数または定数のフィールドの配列を指定できます。 label, description, subtypeおよびvalueOptionsを使用して、各フィールドの表示方法をカスタマイズできます。 fieldsプロパティを使用する場合、各フィールドには、マップ先のオブジェクト・フィールドのIDが必要です。 配列内のフィールドの順序は、プロパティ・ペインに表示される順序です。 次のフィールド・プロパティを使用できます: id (Required). DTフィールド定義をオブジェクト・タイプのIDと一致させる文字列。 label (Optional). フィールドのユーザー表示可能値の文字列。 description (Optional). フィールドの「?」ヘルプ・ポップアップに表示される文字列。 subtype (Optional). フィールド値のタイプをさらに定義するために使用します。 前述の表を参照してください。 valueOptions (Optional). これらの値を使用して、編集エクスペリエンスをさらにカスタマイズします。 次のメタデータで説明されている変数: "variables": { "employee": { "type": "person", "input": "fromCaller", "defaultValue": { "active": false, "date-of-birth": "2001-01-01", "name": "Norman" } } } デフォルトのテキスト領域とともに表示される場合、「プロパティ」ペインでは次のようになります: 図designer-constants-pi-object.pngの説明 fieldsプロパティを使用して、オブジェクトの表示方法をカスタマイズできます: "variables": { "employee": { "type": "person", "input": "fromCaller", "defaultValue": { "active": false, "date-of-birth": "2001-01-01", "name": "Norman" }, "@dt": { "valueOptions": { "fields": [ { "id": "name", "description": "The first (given) name" "label": "First Name" }, { "id": "date-of-birth", "label": "Date of Birth" "subType": "date" }, { "id": "active", "description": "Is the employee active?" "label": "Active" } ] } } } } カスタマイズされたオブジェクトは、「プロパティ」ペインでは次のようになります: 図designer-constants-pi-fields.pngの説明

配列のサブタイプおよびvalueOptions

変数の型が配列の場合、次の表に、使用できるsubtypeおよびvalueOptionsを示します:

サブタイプ	valueOptions	使用方法
enum	values placeholder	enumを使用して、配列内の各項目のすべての値を示すドロップダウン・メニューを表示します。 enumサブタイプのvalueOptionsプロパティは、valuesのみです。 配列内の各項目には、valueに加えて、オプションのlabelおよびdescriptionを指定できます。 "selectBrowser": { "type": "object[]", "input": "fromCaller", "@dt": { "subtype": "enum", "valueOptions": { "values": [ { "value": "ch", "label": "Chrome", "description": "Google browser" }, { "value": "fx", "label": "Firefox", "description": "Mozilla browser" }, { "value": "sf", "label": "Safari", "description": "iOS browser" } ], "placeholder": "Select the default browser" }, "label": "Choose a browser" } }, 「プロパティ」ペインには、説明付きの項目を含むドロップダウン・メニューが表示されます: 図fragment-variable-enumvaluepng.pngの説明 プリミティブの配列(string[])など)を使用している場合は、enumを使用して、配列内の各項目のすべての値を示すドロップダウン・メニューを表示できます: "selectBrowser": { "type": "string[]", "input": "fromCaller", "@dt": { "subtype": "enum", "valueOptions": { "values": [ { "value": "ch", "label": "Chrome", "description": "Google Browser" }, { "value": "fx", "label": "Firefox", "description": "Mozilla Browser" }, { "value": "sf", "label": "Safari", "description": "Apple Browser" } ], "placeholder": "Select the default browser" }, "label": "Choose a browser" } }, 「プロパティ」ペインには、配列内の各項目の3つの値を含むドロップダウン・メニューが表示されます: 図fragment-variable-enumvalue-array.pngの説明
empty	placeholder	サブタイプが選択されていない場合、valueOptionsはplaceholderのみです。

サブタイプとブール値のvalueOptions

変数型がブールの場合、subtypeまたはvalueOptionsはありません。 ブール型を持つ変数は、プロパティ・ペインにスイッチ・コンポーネントとして表示されます。

サブタイプと数値のvalueOptions

変数タイプが数値の場合、「デザインタイム」タブを使用して、subtypeおよびvalueOptionsを構成できます。 「変数エディタでの変数のカスタマイズ」を参照してください。

サブタイプおよび文字列の場合はvalueOptions

変数タイプが文字列の場合は、「デザインタイム」タブを使用して、単純なカスタマイズ・オプション用にsubtypeおよびvalueOptionsを構成できます。 「変数エディタでの変数のカスタマイズ」を参照してください。

次の表では、文字列型変数の拡張オプションを構成するためにJSONで使用できるsubtypeおよびvalueOptionsについて説明します:

サブタイプ	valueOptions	使用方法
empty	placeholder translatable	placeholderを使用して、変数のヒント・テキストを指定します。 これは、サブタイプがない場合、すべての変数に使用できます。 フラグメント変数によってデフォルト値が指定されている場合、そのデフォルト値がデフォルトのプレースホルダーとして使用されます。 プレースホルダー値の両方が使用され、デフォルト値が指定されている場合は、プレースホルダーが使用されます。 placeholderおよびtranslatableプロパティの値の例: } "placeholder": "Search", "translatable": true }
businessObject	placeholder	プロパティ・ペインにビジネス・オブジェクト・ピッカーを表示するには、businessObjectサブタイプを使用します。 "type": "string", "input": "fromCaller", "@dt": { "subtype": "businessObject", "label": "Related Object" } 「プロパティ」ペインには、ビジネス・オブジェクトを選択するためのコンポーネントが表示されます: 図fragment-variable-bo-cropped.pngの説明 ノート: businessObjectサブタイプを使用する場合、placeholder valueOptionは「プロパティ」ペインには表示されません。