Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

動的選択ボックスの各エントリーは、作業リストのエントリーもしくはこのウェブレットのプロパティでハードコーディングされた一連の項目によって定義されます。

作業リストを使用する場合

ドロップダウン・オプションの定義に作業リストを使用する場合、Webroutineを作成して選択された値を格納するフィールドと選択オプションを含む作業リストをWEB_MAPに定義する必要があります。作業リストは*JSONリストとして定義されていなければなりません。作業リストには通常、次のような2つまたは3つのカラムがあります。

  • キャプションのカラムには、リストに表示する値が含まれます。
  • コードのカラムには、各キャプションに関連付けられたコードが格納されます。このコードがユーザー選択の値として送り返されます。
  • オプションでセレクターのカラムもあります。これはselectorValueFieldと共に使用され、ユーザーに表示するリストのフィルター処理を行います。


  1.  [ウェブレット テンプレート]タブをクリックし、上にあるドロップダウン・リストから[標準ウェブレット]を選択、[動的選択ボックス]ウェブレットを探します。
  2. 動的選択ボックス ウェブレットを、値を格納するフィールド上にドラッグし、マウスの左ボタンを離してください。
  3. ウェブレットをクリックして、[詳細] タブを確認します。[vf_wamevent] プロパティと [value] プロパティにウェブレットをドラッグしたフィールドを示す値が設定されていることを確認してください。Webページ表示の際、valueプロパティのフィールドに現在入っている値を使用して選択されたエントリーが設定されます。このウェブレットの値が変更されると、適切な値がnameプロパティに指定されたフィールド(この場合、同じフィールド)に入れられます。
  4. listnameプロパティをWEB_MAPに送られる作業リストに変更します。
  5. codefieldプロパティとcaptionfieldプロパティに作業リストの適切なフィールドをセットします。
  6. sizeプロパティにリストボックスの希望の高さを行数で設定します。(1を設定するとドロップダウンとして表示されます。)

itemsプロパティを使用する場合

このウェブレットのプロパティでハードコーディングされた一連の項目を使用するには、WEB_MAPで選択された値のフィールドを指定するWebroutineを作成する必要があります。LANSAエディターでWebroutine用に生成されたXSLを開き、以下の手順に従ってください。

  1. [ウェブレット テンプレート]タブをクリックし、上にあるドロップダウン・リストから[標準ウェブレット]を選択、[動的選択ボックス]ウェブレットを探します。
  2. 動的選択ボックス ウェブレットを、値を格納するフィールド上にドラッグし、マウスの左ボタンを離してください。
  3. ウェブレットをクリックして、[詳細]タブを確認します。[vf_wamevent] プロパティと [value] プロパティにウェブレットをドラッグしたフィールドを示す値が設定されていることを確認してください。Webページ表示の際、valueプロパティのフィールドに現在入っている値を使用して選択されたエントリーが設定されます。このウェブレットの値が変更されると、適切な値がnameプロパティに指定されたフィールド(この場合、同じフィールド)に入れられます。
  4. itemsプロパティの省略記号(...)のボタンを選択して、ドロップダウン・オプションとして使用する項目のリストを設定します。そしてドロップダウンに必要なエントリーの定義に進みます。

自動更新

動的選択ボックスは別のフィールドをモニターし、そのフィールドが更新される度に自身も自動的に更新することができます。ウェブレットが作業リストを使って埋められた場合、新しい作業リストのコピーを出力するJSON Webroutineを作成する必要があります。ウェブレットは更新が必要な場合に毎回このWebroutineを呼び出します。

  1. updateOnFieldChange にモニターしたいフィールドのIDを設定します。通常はフィールド名ですが、Changeイベントを生成できるHTMLフォーム・エレメントのIDにすることもできます。このフィールドは新しいリストを提供するWebroutineに送られます。
  2. updateWamName と updateWrName プロパティに新しいリストを提供するWAM/Webroutineの名前を指定します。このWebroutineではlistnameプロパティで定義されたリストの新しいコピーを出力しなければなりません。
  3. updateFieldsToSubmitプロパティを設定して、更新Webroutineに送信する入力値が識別できるようにします。

リスト更新には、更新Webroutineを必ず使用しなければならない訳ではありません。多くの単純なケースでは、メインのWebroutineの最初のリスト出力で可能な全ての値をウェブレットに提供して、selectorField を使ってリストをフィルターすることも可能です。サーバーに要求を送信してその応答を待つのを避けるため、ウェブレットには最初のリストが記憶されており、更新が行われる時にselectorFieldフィルターを再度適用できます。

例えば、updateOnFieldChange と selectorValueField プロパティの両方で同じフィールドが指定されている場合、ユーザーがこのフィールドを変更する度に再びフィルターされます。

いずれのアプローチを取るかはバランスを考えて決定します。selectorFieldを使用することにより、より速くリスト更新ができますが、より多くのデータをブラウザに送信しないといけないため、最初のページのロードに時間がかかる可能性があります。一方で更新Webroutineの使用により、最初のロード時間は短くなり、リアルタイムの最新データ取得が可能になったり、リスト構造により複雑なロジックを含めることが可能になりますが、リストがサーバーから取り出される間に遅延が生じる場合があります。


以下も参照してください。

プロパティ - 動的選択ボックス

Each entry in a Dynamic Select Box is defined by an entry in a working list or a set of items hardcoded in the weblet properties.

If you use a working list:

To use a working list to define the dropdown options, you need to create a webroutine that specifies a field to store the selected value and the working list of options in the WEB_MAP. The working list must be defined as a *JSON list. The working list will usually contain 2 or 3 columns:

A caption column containing the values to display in the list

A code column containing the code associated with each caption. The code is the value that will be sent back to indicate the user's choice.

An optional selector column. This will be used in conjunction with the selectorValueField property to filter the list displayed to the user

  1. Click on the Weblets tab, select Standard Weblets from the drop-down list near the top, and locate the Dynamic Select Box weblet.
  2. Drag the Dynamic Select Box weblet onto the field to store the value and release the left-mouse button.
  3. Click on the weblet to review the Details tab. Notice that the vf_wamevent and value properties have been set to indicate the field you dragged the weblet on to. The value property indicates that on presentation of the web page any value currently in this field will be used to set the selected entry. When the weblet value is changed the appropriate value will be placed in the field nominated on the name property – in this case, the same field.
  4. Change the listname property to the working list passed on the WEB_MAP.
  5. Set the codefield and captionfield properties to the appropriate fields from the working list.
  6. Set the size property to indicate the desired height of the list box in rows (a value of 1 will cause it to render as a dropdown).

If you use the items property:

To use a set of items hardcoded in the weblet properties, you would need to create a webroutine that specifies a field for the selected value in its WEB_MAP. When you open the XSL generated for the webroutine in the LANSA Editor:

  1.  Click on the Weblets tab, select Standard Weblets from the drop-down list near the top and locate the Dynamic Select Box weblet.
  2. Drag the Dynamic Select Box weblet onto the field to store the value and release the left-mouse button.
  3. Click on the weblet to review the Details tab. Notice that the vf_wamevent and value properties have been set to indicate the field you dragged the weblet on to. The value property indicates that on presentation of the web page any value currently in this field will be used to set the selected entry. When the weblet value is changed the appropriate value will be place in the field nominated in the name property – in this case the same field.
  4. Set up the list of items to be used as drop down options by selecting the ellipses button on the items property. Proceed to define the require entries for the select box.

Automatic Updating

The dynamic select box can monitor another field and automatically refresh itself whenever that field is updated. If the weblet has been filled using a working list then you will need to create a JSON webroutine that will output a fresh copy of the working list. The weblet will call this Webroutine each time it needs to refresh.

...

Also see

...