IBM BPM バージョン 8570 累積フィックス 2017.06単一選択コントロール

このコントロールを使用して、ドロップダウン・リストから項目を選択することができます。項目のリストを静的に設定することも、ビジネス・オブジェクトを使用することも、サービスを使用してリストを取得することもできます。

データ・バインディング

「一般」プロパティー・タブでコントロールのデータ・バインディングの設定や変更を行います。このコントロールは ANY タイプにバインドできます。

構成プロパティー

「構成」プロパティー・タブで、コントロールの構成プロパティー (外観プロパティーや動作プロパティーなど) の設定や変更を行います。

画面サイズ
プロパティー名の横に「画面サイズ」アイコン 「画面サイズ」アイコン がある構成プロパティーには、画面サイズごとに異なる値を指定できます。値を設定しない場合、画面サイズはそのデフォルト値として次に大きい画面サイズの値を継承します。Process Designer デスクトップ・エディターを使用している場合は、大きい画面サイズにその値を設定していることになります。その他の画面サイズはこの値を継承します。
テーマ定義
テーマ定義は、コントロールの色およびスタイルを指定し、コントロールの外観を決定します。コントロールのルック・アンド・フィールをテーマ・エディターでプレビューできます。テーマを参照してください。
以下の表に、単一選択コントロールの外観構成プロパティーを示します。
表 1. 単一選択コントロールの外観構成プロパティー
外観構成プロパティー 説明 データ型
画面サイズ・アイコン コントロールの幅。幅の単位は px (ピクセル)、% (パーセント)、または em で指定できます。例えば、50px、20%、または 0.4em のようにします。単位タイプが指定されていない場合は、px と見なされます。 ストリング
サイズ 画面サイズ・アイコン コントロール内のテキストのサイズ、ラベル・テキストのサイズ、およびテキストの周囲の埋め込みの量。例えば、スマートフォン上でテキストおよびラベルをより読みやすくするには、小さい画面サイズに対応するために、この構成オプションを「大」に設定できます。 ストリング
ラベルの配置 画面サイズ・アイコン ラベルの位置。 ストリング
以下の表に、単一選択コントロールの動作構成プロパティーを示します。
表 2. 単一選択コントロールの動作構成プロパティー
動作構成プロパティー 説明 データ型
タブ・インデックス フォーム・コントロールのタブ・シーケンスのインデックス。 タブのインデックスは 1 から始まり、スパースに設定することができます。例えば、1、5、10 などと指定できます。 整数
プレースホルダー 選択が行われる前に表示されるテキスト。 String

以下の表に、単一選択コントロールの項目構成プロパティーを示します。

表 3. 単一選択コントロールの項目構成プロパティー
項目構成プロパティー 説明 データ型
項目ルックアップ・モード ユーザーが選択できる項目のリストにデータを設定する方法。注: 必ず正しいオプションを選択してください。そうしないと、リストに正しくデータが取り込まれません。
空で開始
appendItem(value, displayText) メソッドを使用して、プログラムで選択リストにデータを取り込みます。
サービスからの項目
選択リストには、「リスト項目サービス」オプションで指定されたサービスからデータが取り込まれます。
静的リストからの項目
選択リストには、「静的リスト」オプションに入力されたプロパティーによりデータが取り込まれます。
構成オプションからの項目
選択リストには、「項目入力データ」オプションで指定されたビジネス・オブジェクト・リストからデータが取り込まれます。
ストリング
リスト項目サービス 選択リストに表示される項目のリストにデータを取り込むために使用されるサービス。このサービスは、項目ルックアップ・モードが「サービスからの項目」の場合に使用されます。このサービスは、「サービスの入力データ」ビジネス・オブジェクトによって提供されたデータに基づいて選択リストを提供する、適切な Ajax アクセスを伴うサービス・フローです。このオプションは、コントロールをリスト・オブジェクトにバインドする代わりの方法として使用できます。 サービス・フロー
サービスの入力データ 選択リストへのデータ取り込みに使用するサービス・フローに渡される、入力データを提供するビジネス・オブジェクト。このオプションは、項目ルックアップ・モードが「サービスからの項目」の場合に使用されます。 ANY
項目入力データ 選択リストへのデータ取り込みに使用するビジネス・オブジェクト・リスト。このプロパティーは、項目ルックアップ・モードが「構成オプションからの項目」の場合にのみ使用されます。 ANY[]
項目選択データ optionDisplayProperty フィールドで、選択リストに表示されるビジネス・オブジェクトのプロパティーを設定します。データ・マッピング・プロパティーに対して値を指定しなかった場合、デフォルト値は、optionValueProperty プロパティーの場合は name で、optionDisplayProperty プロパティーの場合は value です。 SelectDataMapping
ビジネス・データの出力 コントロールが複合型にバインドされている場合は、ユーザーが選択するプロパティーが、optionDisplayProperty で指定されたプロパティーおよびコントロールにバインドされているプロパティーに渡されます。 SelectDataMapping
静的リスト 選択リストにデータを設定するための項目の静的リスト。このオプションは静的リストに対してのみ使用します。このオプションに変数を指定しないでください。変数リストの場合は、「構成オプションからの項目」ルックアップ・モードを使用します。 NameValuePair[]

選択状態が入力ビジネス・オブジェクト・リストの listSelected プロパティーにコピーされます。選択状態を取得するには、このプロパティーにコントロールをバインドします。例: リスト・ビジネス・オブジェクトを使用した項目の設定を参照してください。

例: 静的リストからの項目の設定

この例で使用される単一選択コントロールは、食料雑貨店リストというラベルが付けられ、「項目ルックアップ・モード」「静的リストからの項目」に設定されています。

「静的リスト」には、以下の名前と値のペアがあります。
表 4. 静的リスト
名前
項目 1 パン
項目 2 牛乳
項目 3 バナナ
項目 4
以下は、Coach を実行したときの結果です。
このイメージは、食料雑貨店リストというタイトルのリストを示しています。このリストには、牛乳、パン、バナナ、米の項目が含まれています。強調表示されているのは、バナナです。

例: 静的リストの項目を使用した合計の計算

この例では、静的リストの「名前」フィールドの値を使用して、別のフィールドの値を計算しています。

Coach には、単一選択コントロール、整数コントロール、および 10 進数コントロールを含む水平レイアウトがあります。Coach には、ボタン・コントロールもあります。

単一選択コントロールには、以下のプロパティーがあります。
  • 「一般」>「ラベル」は「項目」です
  • 「一般」>「コントロール ID」は「項目」です
  • 「構成」>「動作」>「プレースホルダー」は「項目の選択... (Select Item...)」です
  • 「構成」>「項目」>「項目ルックアップ・モード」は「静的リストからの項目」です
  • 「構成」>「項目」>「静的リスト」には、以下の項目があります。
    • 「名前」:.50、「値」:リンゴ
    • 「名前」:.75、「値」:オレンジ
    • 「名前」:.25、「値」:バナナ
整数コントロールには、以下のプロパティーがあります。
  • 「一般」>「ラベル」は「数量 (Quantity)」です
  • 「一般」>「コントロール ID」は「数量 (Quantity)」です
10 進数コントロールには、以下のプロパティーがあります。
  • 「一般」>「ラベル」は「合計」です
  • 「動作」>「小数点以下の桁数」は 2 です
  • 「イベント」>「値の数式」には、以下の項目があります
    @{Item}*@{Quantity}
    ここで、Item は単一選択コントロールのコントロール ID、Quantity は整数コントロールのコントロール ID です。

ボタン・コントロールには、「OK」というラベルが付いています。

Coach を実行すると、以下の画面が表示されます。

項目を選択して数量を入力し、「OK」をクリックします。結果を以下に示します。

単一選択コントロールの「名前」フィールドには、数値が含まれています。そのため、数量と選択した項目により合計を求めることができます。「合計」フィールドの値は、単価 (単一選択コントロールのコントロール ID) に数量 (整数コントロールのコントロール ID) を乗算したものです。

例: サービス・フローからの項目の設定

この例では、Ajax アクセスを伴うサービス・フローを使用して、選択リストとして使用されるリストを初期化します。

注意: デフォルトでは、Ajax アクセスは、信頼できる呼び出し元に対してのみ許可されます。Process Designer 内の Coach を実行するには、サービス・フローの「概要」タブに移動し、「Ajax アクセス」を「すべての呼び出し元からの呼び出しを許可する (Allow calls from all callers)」に変更します。

Coach には、以下の構成プロパティーを含む単一選択コントロールがあります。
  • 「構成」>「動作」>「ラベル」は「食料雑貨店リスト (Grocery List)」です
  • 「構成」>「動作」>「プレースホルダー」は「項目の選択... (Select Item...)」です
  • 「構成」>「項目」>「項目ルックアップ・モード」は「サービスからの項目」です
  • 「構成」>「項目」>「リスト項目サービス」は「項目の取得サービス (Retrieve Items Service)」です

    注意: サービス・フローを作成するには、「リスト項目サービス」オプションの隣にある「新規...」をクリックしてください。

  • 「構成」>「項目」>「項目選択データ」
    • optionValueProperty は name です
    • optionDisplayProperty は value です
このサービス・フローは、「項目の取得サービス (Retrieve Items Service)」という名前で、開始イベント、サーバー・スクリプト、および終了イベントが互いにワイヤリングされています。サーバー・スクリプトには、変数を初期化する以下のコードが含まれています。
tw.local.results = new tw.object.listOf.NameValuePair();

tw.local.results[0] = new tw.object.NameValuePair();
tw.local.results[0].name = "Item 0";
tw.local.results[0].value = "Milk";

tw.local.results[1] = new tw.object.NameValuePair();
tw.local.results[1].name = "Item 1";
tw.local.results[1].value = "Bread";

tw.local.results[2] = new tw.object.NameValuePair();
tw.local.results[2].name = "Item 2";
tw.local.results[2].value = "Bananas";

tw.local.results[3] = new tw.object.NameValuePair();
tw.local.results[3].name = "Item 3";
tw.local.results[3].value = "Rice";

Coach を実行したときに得られる結果を以下に示します。

長方形の囲みの中にある選択可能リストを示しているイメージ。

選択可能項目のリストを以下に示します。

長方形の囲みの中にある選択可能リストを示しているイメージ。
項目のリストは、サービス・フローから取得されます。リストに表示されるプロパティーは、「項目選択データ」の下の「optionDisplayProperty」オプションで決定されます。「optionDisplayProperty」として name を入力すると、選択リストに「Item 0」、「Item 1」などが表示されます。

項目を選択すると、その項目が「項目」フィールドに表示されます。

長方形の囲みの中にある選択可能なリストを示しているイメージ。
「項目」フィールドの値は、「ビジネス・データ・マッピング」の下の「optionDisplayProperty」オプションで決定されます。これは、単一選択コントロールの出力として使用されるプロパティーでもあります。

例: リスト・ビジネス・オブジェクトを使用した項目の設定

この例では、Customer 型の cust[] リスト・オブジェクトを使用して、選択リストの名のリストを設定します。ユーザーが名前を選択すると、選択した名前がテキスト・ボックスに表示されます。クライアント・サイド・ヒューマン・サービスには、custoutput のプライベート変数があります。これらはいずれも Customer 型です。

Customer ビジネス・オブジェクトの構造を以下に示します。
  • ストリング型の ID パラメーター。
  • ストリング型の firstname パラメーター。
  • ストリング型の lastname パラメーター。
cust[] リスト・オブジェクトには、以下のデフォルト値があります。
var autoObject = [];
autoObject[0] = {};
autoObject[0].ID = "000";
autoObject[0].firstName = "Pierre";
autoObject[0].lastName = "de Fermat";
autoObject[1] = {};
autoObject[1].ID = "001";
autoObject[1].firstName = "Isaac";
autoObject[1].lastName = "Newton";
autoObject[2] = {};
autoObject[2].ID = "002";
autoObject[2].firstName = "John";
autoObject[2].lastName = "Venn";
autoObject
Coach の単一選択コントロールには、以下のプロパティーがあります。
  • 「一般」>「ラベル」は「名前」です
  • 「一般」>「バインディング」は output.firstName です
  • 「構成」>「動作」>「プレースホルダー」は「名前の選択... (Select a name...)」です
  • 「構成」>「項目」>「項目ルックアップ・モード」は「構成オプションからの項目」です
  • 「構成」>「項目」>「項目入力データ」は Customer[] です
  • 「構成」>「項目」>「項目選択データ」
    • optionValueProperty は ID です
    • optionDisplayProperty は firstName です
  • 「構成」>「項目」>「ビジネス・データの出力」
    • optionValueProperty は ID です
    • optionDisplayProperty は firstName です
テキスト・コントロールには、以下のプロパティーがあります。
  • 「一般」>「ラベル」は「テキスト」です
  • 「一般」>「バインディング」は cust.listSelected.firstName です

Coach を実行したときに得られる結果を以下に示します。

選択可能リストを示しているイメージ。
選択を行うと、選択した名前がテキスト・コントロールに取り込まれます。
選択可能リストを示しているイメージ。

イベント

「イベント」タブでコントロールのイベント・ハンドラーの設定や変更を行います。イベントをプログラムでトリガーするかユーザーがコントロールと対話したときにトリガーするように設定できます。イベントの定義方法およびコーディング方法については、ユーザー定義イベントを参照してください。 単一選択コントロールには以下のタイプのイベント・ハンドラーがあります。

  • ロード時: ページのロード時にアクティブ化されます。例:

    console.log(me.getItemCount());

  • 変更時: バインド済みデータの変更時にアクティブ化されます。例:

    ${SingleSelect2}.reloadServiceItems(me.getSelectedIndices());

  • サービス項目時: 呼び出されるサービスが項目リストを返すときにアクティブ化されます。「項目ルックアップ・モード」「サービスからの項目」に設定されている場合にのみアクティブ化されます。

    console.log("SingleSelect1 item service retrieved items successfully");

  • サービス・エラー時: 呼び出されるサービスがサービス・エラーを返したときにアクティブ化されます。「項目ルックアップ・モード」「サービスからの項目」に設定されている場合にのみアクティブ化されます。

    me.clearItems();

メソッド

単一選択コントロールに使用できるメソッドの詳細情報については、JavaScript の資料を参照してください。

追加のリソース

Coach の作成方法については、Coach のビルドを参照してください。
標準プロパティー (「一般」「構成」「位置決め」「可視性」、および「HTML 属性」) については、Coach ビューのプロパティーを参照してください。