HTML ページのコンポーネントへのアクセス

ここでは、HTML キャンバスで HTML ページを作成する際に使用可能なタブおよびパネルについて説明します。

HTML ページへのコンポーネントの挿入 - コンポーネントタブの使用

[コンポーネント] タブのコマンドグループから、さまざまなコンポーネントを HTML ページに追加することができます。たとえば、ユーザがデータをリフレッシュするためにクリックするプッシュボタンを HTML ページに追加します。プッシュボタンはコンポーネントの 1 つです。[コンポーネント] タブの [一般要素] コマンドグループから [プッシュボタン] を選択し、ページの任意の位置にプッシュボタンを追加します。

下図のように、[コンポーネント] タブには [レポート]、[一般要素]、[コンテナ]、[オブジェクト] グループがあります。

リボン上でコマンドのいずれかをクリックすると、マウスポインタが十字カーソルに変わり、HTML キャンバスでのオブジェクトの描画が可能になります。コマンドを誤ってクリックした場合は、Esc キーを押して十字カーソルをマウスポインタに戻します。

HTML ページへのレポートまたはグラフの挿入 - レポートグループの使用

[レポート] グループから、HTML ページにレポートまたはグラフを追加することができます。下図は、[レポート] グループを示しています。

[レポート] グループには、次のコマンドがあります。

HTML ページに新しいレポートまたはグラフを追加するには

手順
1. 次の操作のいずれかを実行し、レポートまたはグラフオブジェクトを挿入します。
   • [コンポーネント] タブの [レポート] グループで、[レポート] または [グラフ] をクリックします。
   • レイアウト内で右クリックし、コンテキストメニューから [新規レポート] または [新規グラフ] を選択します。

   マウスポインタが十字カーソルに変わります。

2. 十字カーソルをドラッグして、レポートオブジェクトまたはグラフオブジェクトを作成し、必要なサイズに調整します。

   レイアウト内にレポートまたはグラフオブジェクトが作成され、それぞれに「reportn」または「chartn」という名前が付けられます。ここで、末尾の n には番号が割り当てられます。オブジェクトは灰色と白で表示され、そのオブジェクトのプレースホルダにレポートまたはグラフが関連付けられていないことを示します。レポートまたはグラフがオブジェクトに関連付けられると、[WebFOCUS App Studio オプション] ダイアログボックスの [HTML ページ] タブの設定に応じて、ライブデータまたはサンプルデータがオンに設定されている場合は (デフォルト値はライブデータ)、そのオブジェクトにレポートまたはグラフのコンテンツが表示され、プレビューがオフに設定されている場合は、色付きのプレースホルダが表示されます。

3. 次の操作のいずれかを実行して、レポートまたはグラフを作成します。
   • プレースホルダをダブルクリックします。

     または

   • プレースホルダを右クリックし、レポートを開く場合は [新規レポート]、グラフを開く場合は [新規グラフ] をそれぞれ選択します。

   [データソースの選択] ダイアログボックスが表示されます。

4. 使用するマスターファイルを選択し、[OK] をクリックします。

   レポートの場合はレポートキャンバス、グラフの場合はグラフキャンバスが開きます。

5. レポートまたはグラフを作成後、必要に応じて [プロパティ] パネルに表示されたプロパティを変更することができます。

レイアウトに既存のレポートまたはグラフを追加するには

手順
1. 次の操作のいずれかを実行し、レポートまたはグラフオブジェクトを挿入します。
   • [コンポーネント] タブの [レポート] グループで、[レポート] または [グラフ] をクリックします。
   • レイアウト内で右クリックし、コンテキストメニューから [新規レポート] または [新規グラフ] を選択します。

   マウスポインタが十字カーソルに変わります。十字カーソルをドラッグして、レポートオブジェクトまたはグラフオブジェクトを作成し、必要なサイズに調整します。

   レイアウト内にレポートまたはグラフオブジェクトが作成され、それぞれに「reportn」または「chartn」という名前が付けられます。ここで、末尾の n には番号が割り当てられます。オブジェクトは灰色と白で表示され、そのオブジェクトのプレースホルダにレポートまたはグラフが関連付けられていないことを示します。レポートまたはグラフがオブジェクトに関連付けられると、[WebFOCUS App Studio オプション] ダイアログボックスの [HTML ページ] タブの設定に応じて、ライブデータまたはサンプルデータがオンに設定されている場合は (デフォルト値はライブデータ)、そのオブジェクトにレポートまたはグラフのコンテンツが表示され、プレビューがオフに設定されている場合は、色付きのプレースホルダが表示されます。

2. レポートまたはグラフを右クリックします。
   • [既存プロシジャの参照] を選択します。
   • レポートの場合、レポートオブジェクトを右クリックして [既存レポートのインポート] を選択します。
   • グラフの場合、グラフオブジェクトを右クリックして [既存グラフのインポート] を選択します。

   [ファイルを開く] ダイアログボックスが表示されます。

3. レイアウトに追加するプロシジャの名前を入力します。
4. [OK] をクリックします。

   HTML キャンバスに、レポートオブジェクトまたはグラフオブジェクトが表示されます。

HTML ページへの基本要素の追加 - 一般要素グループの使用

さまざまな基本要素を追加することができます。下図は、[一般要素] グループを示しています。

[一般要素] グループには、次のコマンドがあります。

ハンバーガーコントロールを使用してフォームの表示を切り替えるには

手順
1. HTML ページを作成します。
2. ページにグラフコンポーネントまたはレポートコンポーネントを追加し、少なくとも 1 つのパラメータを含むプロシジャを参照します。

   [新規パラメータ] ダイアログボックスが表示されます。

3. [OK] をクリックして、デフォルトオプションを使用したページにフォームを作成します。
4. [コンポーネント] タブの [一般要素] グループで [ハンバーガー] をクリックし、ページ上にハンバーガーコントロールを描画します。

   注意：ハンバーガーコントロールをクリックすると、このアイコンの右下にフォームが表示されます。フォーム全体を表示するためには、ハンバーガーコントロールとページの右端との間に十分な領域を確保する必要があります。

5. ハンバーガーコントロールを選択し、[プロパティ] パネルを開きます。
6. ハンバーガーコントロールをフォームにリンクさせます。[プロパティ] パネルの [特殊ハンバーガー] セクションで、[ナビゲーションとコントロールパネル] プロパティのドロップダウンリストをクリックし、ハンバーガーコントロールを使用してアクセスするフォームを選択します。

   ハンバーガーコントロールは、コントロールパネルにリンクすることもできます。コントロールパネルを作成するには、[コンポーネント] タブの [コンテナ] グループで [パネル] をクリックし、ページ上にパネルを描画します。このパネルを選択し、[プロパティ] パネルで [コントロールパネル] プロパティを [はい] に設定します。

7. 必要に応じて、[アニメーション] および [パネルの自動非表示] のプロパティを設定します。

   [アニメーション] プロパティでは、フォームの表示で起動するアニメーションを設定することができます。

   [パネルの自動非表示] プロパティを有効にした場合、フォームの [送信] ボタンをクリックするとパネルが非表示になります。[パネルの自動非表示] が有効でない場合は、ハンバーガーコントロールをクリックするとフォームを再度非表示にすることができます。

8. HTML ページを実行します。デフォルト設定でフォームが非表示となり、ハンバーガーコントロールをクリックすると表示されます。

HTML ページのテキストに書式を設定するには

手順
1. [コンポーネント] タブの [一般要素] グループで、[テキスト] をクリックします。

   マウスポインタが十字カーソルに変わります。

2. キャンバス上でマウスポインタをドラッグして、テキストオブジェクトを作成します。

   テキストオブジェクトが作成され、デフォルトのテキストとして「テキストを入力してください」が表示されます。

3. 次の方法で、書式を設定するテキストを選択します。
   • テキスト要素全体に書式を設定するには、レイアウトのテキストオブジェクトを 1 回クリックします。
   • テキスト内の特定の語句または文字に書式を設定するには、テキストオブジェクト内でテキストの一部を選択します。
4. テキストを右クリックし、[スタイル]、[フォント] を順に選択します。

   [スタイル] ダイアログボックスが開き、[フォント] ウィンドウが自動的に表示されます。

   注意：フォントの書式設定オプションには、[プロパティ] パネルからアクセスすることもできます。

5. 書式設定オプションを選択します。フォント名、スタイル、色、サイズ、文字飾りを変更することができます。

   注意：[指定] テキストボックスにフォントサイズを入力すると、デフォルト設定で単位は px (ピクセル) になります。

6. [OK] をクリックして [スタイル] ダイアログボックスを閉じます。

テキスト要素に箇条書きリストまたは番号付きリストを挿入するには

手順
1. [コンポーネント] タブの [一般要素] グループで、[テキスト] をクリックします。

   マウスポインタが十字カーソルに変わります。

2. キャンバス上でマウスポインタをドラッグして、テキストオブジェクトを作成します。

   テキストオブジェクトが作成され、デフォルトのテキストとして「テキストを入力してください」が表示されます。

3. テキストオブジェクトに複数行のテキストを追加します。
4. リストに含めるテキストを反転表示して右クリックします。
5. コンテキストメニューから、次のリストオプションのいずれかを選択します。
   • 箇条書き
     • 黒丸
     • 丸
     • 四角
     • なし
   • 番号付け
     • 番号
     • 小文字
     • 大文字
     • ローマ数字 (小文字)
     • ローマ数字 (大文字)
     • なし
   • 注意：別の方法として、最初に箇条書きタイプを選択してからリストのテキストを入力することもできます。Enter キーを押すと、リストの次の項目が別の行から開始されます。
   • 既存リストの箇条書きまたは番号付きリストタイプを変更するには、変更するリストレベルにカーソルを置き、箇条書きまたは番号付きリストタイプを再度選択します。[なし] を選択すると、そのレベルでの箇条書きまたは番号が削除され、ネストされていたリストが 1 つ上のレベルに移動します。

テキスト要素にネスト化リストを挿入するには

手順
1. [コンポーネント] タブの [一般要素] グループで、[テキスト] をクリックします。

   マウスポインタが十字カーソルに変わります。

2. キャンバス上でマウスポインタをドラッグして、テキストオブジェクトを作成します。

   テキストオブジェクトが作成され、デフォルトのテキストとして「テキストを入力してください」が表示されます。

3. テキストオブジェクトにリストを追加します。詳細は、HTML ページのコンポーネントへのアクセスを参照してください。
4. リスト項目の後ろにカーソルを置きます。
5. 右クリックして [ネスト化リスト] を選択し、箇条書きまたは番号付きリストオプションを選択します。

   現在のリスト内で新しい行が開始され、そのリストレベルでテキスト入力が可能になります。

   注意：リスト項目の行にカーソルを置いた状態で Tab キーを押すと、その項目が 1 つ下のレベルに移動し、ネストされたリストになります。選択される箇条書きまたは番号のタイプは、右クリックのコンテキストメニューに表示された並び順で次のタイプになります。たとえば、箇条書きリストで黒丸タイプを使用している場合、Tab キーを押して項目を 1 つ下のレベルに移動すると、ネストされたリストは箇条書きの丸タイプになります。

   他のリストでも、上記と同様の方法でリストをネストすることができます。

   注意：リストレベルをスキップすることはできません。たとえば、下位のいずれかのレベルに箇条書きリストまたは番号付きリストをネストする場合、そのリストの 1 つ上のレベルにリストが存在している必要があります。

HTML ページへのコンテナの追加 - コンテナグループの使用

HTML ページ上の複数のオブジェクトをグループ化するためのコンテナを追加することができます。下図は、[コンテナ] グループを示しています。

[コンテナ] グループには、次のコマンドがあります。

フォームオブジェクトを使用してポップアップダイアログボックスを作成するには

手順
1. フォームオブジェクトを作成します。
2. ボタンを作成します。
3. フォームを選択します。
4. [プロパティ] パネルで [コンテナの表示] プロパティを [ポップアップダイアログ表示] に変更します。
5. [タスクとアニメーション] パネルの [タスク] セクションで、新しいタスクを作成します。
6. [トリガタイプ] を [クリック時] に設定して、作成したボタンをトリガとして使用します。
7. [リクエスト/アクション] リストから [表示の切り替え] を選択して、このボタンオブジェクトをクリックしたときに、作成したフォームが表示されるよう設定します。
8. ページを実行した後、このボタンをクリックして、フォームをダイアログボックスとして表示します。

フォームコントロールからポップアップダイアログボックスまたはポップアップウィンドウを作成するには

手順
1. HTML ページにボタンオブジェクトを追加します。
2. HTML ページにフォームコントロールを追加します。
3. フォームコントロールとともに作成された実行ボタンおよび戻るボタンを削除します。
4. フォームコントロールを選択し、[プロパティ] パネルで [コンテナの表示] プロパティを [ポップアップダイアログ表示] または [ポップアップウィンドウ表示] に変更します。

   [ポップアップダイアログ表示] に設定すると、フォームがポップアップダイアログボックスとして表示されます。ダイアログボックスが表示された後、HTML ページに戻るには、[閉じる] をクリックする必要があります。

   [ポップアップウィンドウ表示] に設定すると、フォームがポップアップウィンドウとして表示されます。ウィンドウが表示された後、ウィンドウのサイズを変更したり、画面上でウィンドウを移動したりできます。

5. [タスクとアニメーション] パネルの [タスク] セクションで新しいタスクを作成し、ボタンオブジェクトをクリックしたときに、作成したフォームが表示されるよう設定します。
6. HTML ページを実行します。
   HTML ページに追加したボタンをクリックすると、上記の手順で選択したオプションに応じて、フォームがポップアップダイアログボックスまたはポップアップウィンドウとして表示されます。

タブ、アコーディオン、ウィンドウの順序変更

タブ、アコーディオン、ウィンドウの順序を変更するには、先頭に表示するページをドラッグし、割り込み先のページ上にドロップします。たとえば、Tab1、Tab2、Tab3 という 3 つのタブが表示されている場合、Tab3 を Tab1 上にドラッグすると、Tab1 の前に Tab3 が表示されます。その結果、これらのタブは Tab3、Tab1、Tab2 の順序になります。複数のウィンドウが並べて表示されている場合にも、同様の方法でウィンドウの順序を変更することができます。

モバイルコンテナでページ間を移動するには

手順
1. 新しい HTML ページを作成します。
2. [プロパティ] パネルを開き、選択した [DOCUMENT] オブジェクトで、[レスポンシブデザイン] セクションの [レスポンシブ有効] プロパティを [はい] に設定します。

   レスポンシブデザインを使用すると、ページ上のコンテンツがモバイルデバイスで使用しやすくなります。

3. [コンポーネント] タブの [コンテナ] グループで [モバイルコンテナ] をクリックし、ページ上にモバイルコンテナを描画します。

   モバイルコンテナには、デフォルト設定で 1 ページが格納されています。

4. モバイルコンテナの最初のページで出力ウィジェットをクリックし、[プロパティ] パネルを開きます。[ウィジェットタイトル] プロパティを使用して、ページの新しいタイトルを入力します。

   [ページへ移動] アクションは、ウィジェットタイトルでページを識別するため、ページごとに異なるタイトルを使用することで、移動先のページを正しく選択することができます。

5. 出力ウィジェット内の最初のページにコンテンツを追加します。
6. 2 ページ目に移動するためのボタンを含むコントロールパネルを作成します。コントロールパネルには、ページ上のコンテンツをインタラクティブ操作するためのフィルタコントロールを追加することもできます。
   1. [コンポーネント] タブの [コンテナ] グループで [パネル] をクリックし、ページ上にパネルを作成します。
   2. [コンポーネント] タブの [一般要素] グループで [プッシュボタン] をクリックし、パネル内にボタンを描画します。

      必要に応じて、このボタンをダブルクリックし、テキストを変更します。

   3. ボタンを含むパネルを選択し、[プロパティ] パネルを開きます。[コントロールパネル] プロパティを [はい] に設定します。

      これによりパネルがコントロールパネルに変わり、モバイルコンテナ出力ウィジェットのハンバーガーコントロールを使用してアクセスすることができます。

7. モバイルコンテナ出力ウィジェットを選択し、[プロパティ] パネルを開きます。[ナビゲーションとコントロールパネル] プロパティ横のメニューから、作成したコントロールパネルを選択します。
8. 出力ウィジェットの外側でモバイルコンテナを右クリックし、[ページの追加] をクリックします。

   出力ウィジェットを含む 2 ページ目が、モバイルコンテナ内に作成されます。

9. 手順 4 から 7 を繰り返して、2 ページ目を作成します。ページをさらに追加する場合は、上記の手順を再度実行します。
10. [ページへ移動] アクションを使用して、新しい 2 つのタスクを作成し、1 ページ目と 2 ページ目の間を移動します。
    1. [タスクとアニメーション] パネルを開きます。
    2. [新規作成] ボタンをクリックし、新しいタスクを作成します。
    3. [トリガタイプ] は [クリック時] のままにします。
    4. [トリガ ID] として、作成した 1 つ目のボタンを選択します。このボタンは、モバイルコンテナの最初のページの折りたたみ可能なパネル内にあります。
    5. [リクエストの選択] ボタン横の矢印をクリックして [ページへ移動] を選択します。モバイルコンテナの名前をクリックし、モバイルコンテナの 2 ページ目の名前を選択します。

       これにより、1 ページ目からアクセス可能なボタンで 2 ページ目にアクセスすることができます。

    6. [新規作成] ボタンをクリックし、2 つ目のタスクを作成します。
    7. [トリガタイプ] は [クリック時] のままにします。
    8. 2 つ目のタスクの [トリガ ID] として、モバイルコンテナの 2 ページ目からアクセス可能なボタンを選択します。
    9. [リクエストの選択] ボタン横の矢印をクリックして [ページへ移動] を選択します。モバイルコンテナの名前をクリックし、モバイルコンテナの 1 ページ目の名前を選択します。

       これにより、2 ページ目からアクセス可能なボタンを使用して 1 ページ目に戻ることができます。

11. HTML ページを保存し、モバイルデバイスからアクセスします。

    ハンバーガーコントロールをタップすると、ボタンを備えたパネルが開きます。ボタンをタップすると、モバイルコンテナを使用して作成した他のページにアクセスできます。

HTML ページへのオブジェクトの追加 - オブジェクトグループの使用

レポート、グラフ、一般要素、コンテナ以外のオブジェクトを追加して、HTML ページをカスタマイズすることができます。下図は、[オブジェクト] グループを示しています。

[オブジェクト] グループには、次のコマンドがあります。

HTML オブジェクト操作によるロード順序の変更

HTML ページの各オブジェクトは、これらのオブジェクトがキャンバスに追加された順序でロードされます。HTML コードを直接操作する開発者は、ソースコードを編集することでロード順序を変更することができます。この編集方法では、HTML および XML ドキュメント向けのドキュメントオブジェクトモデル (DOM) を活用することができます。

ただし、WebFOCUS App Studio でそのソースコードを編集することはできません。そのため、必要に応じてロード順序を変更できるように [HTML オブジェクトの操作] メニューが用意されています。

ロード順序を変更するには、HTML キャンバスで複数のオブジェクトまたはコンポーネントを選択し、右クリックして [HTML オブジェクトの操作] を選択します。次のメニューオプションが表示されます。

• 選択項目を新規コンテナに追加   選択した複数オブジェクトの周囲にコンテナを配置します。コンテナ内の複数オブジェクトは同時にロードされます。
• 選択項目の追加   複数オブジェクトの選択時に最後に選択したオブジェクトがコンテナの場合にのみ使用できます。このオプションは、選択した 1 つまたは複数のオブジェクトをコンテナ内に移動する場合に使用します。
• 選択項目を前に挿入   複数オブジェクトの選択時に最後に選択したオブジェクトをその他のオブジェクトの前にロードします。
• 選択項目を後に挿入   複数オブジェクトの選択時に最後に選択したオブジェクトをその他のオブジェクトの後にロードします。
• 選択項目の入れ替え   選択した 2 つのオブジェクトの位置を入れ替えます。
• コンテナのみ削除   コンテナのみ削除します。
• コンテナの統合   コンテナを統合します。

複数オブジェクトの DOM 表示順序のアクセシビリティサポート

複数の要素やオブジェクトを画面読み込み順序と無関係に追加し、その後のデザイン作業時に、これらの要素やオブジェクトの順序を変更することができます。

DOCUMENT レベルの [プロパティ] パネルに表示される [アクセス] プロパティを使用して、ページ上の複数のオブジェクトを左から右、上から下の順序でドキュメントオブジェクトモデル (DOM) を書き換えるよう指定することができます。また、すべてのタブインデックス値は -1 に設定されます。

複数のオブジェクトを DOM 順序で表示するには

手順
1. 新しい HTML ページを作成し、ページ上に複数のコントロールを配置します。
2. 下図のように、DOCUMENT レベルの [プロパティ] パネルで、[アクセス] プロパティのドロップダウンリストから [はい] を選択します。

   

   下図のように、タブオーダーの警告メッセージが表示されます。

   

   注意：この警告メッセージは、[アクセス] プロパティを [はい] に設定した際に一度だけ表示されます。

   [はい] を選択すると、ページ上の複数オブジェクトのタブオーダーが、左から右、上から下の順序に書き換えられます。[いいえ] を選択すると、ページのタブオーダーが保持されます。

HTML ページへのコントロールの挿入 - コントロールタブの使用

[コントロール] タブの [コントロール] グループを使用して、HTML ページまたはガイド付きレポートページにコントロールを挿入することができます。コントロールを使用すると、ユーザにパラメータ値の入力を要求することができます。レポートまたはグラフの一部としてパラメータを作成すると、HTML キャンバスがそのパラメータに対応するコントロール、[実行] ボタン、[リセット] ボタンを自動的にレイアウトに追加します。また、そのパラメータが [パラメータ] タブに表示されます。入力コントロールを追加し、パラメータにバインドすることもできます。

コントロールを使用すると、テキストボックスの場合を除いて、値の動的リストまたは静的リストでユーザに値を提供することができます。

• 動的リストには、リクエストの実行時に特定のデータソースから値が取得されます。
• 静的リストには、事前に指定した値が表示されます。静的リストの値は、手動で変更しない限り変更されません。

ActiveAnalytic Document コントロールには、ActiveAnalytic Document メニュー項目と同一の Active ReportAnalytic Document 値が表示されます。ActiveAnalytic Document コントロールは、レイアウト内のどのパラメータとも関連付けることはできません。このタイプのコントロールは、レイアウト内の Active ReportAnalytic Document にのみ関連付けることができます。

下図は、[コントロール] タブを示しています。

次のコントロールがあります。

コントロールへのページ/検索機能の追加

リストボックス、ドロップダウンリスト、またはダブルリストの左側コントロールには、ページ機能および検索機能を追加することができます。これらの機能は、多数の有効値が表示されるコントロールを対象にした追加機能で、次のことが可能になります。

• 値を選択する前に広範囲の値リストをページ単位で移動する。
• コントロール内の値を検索する。

ページ上でフィルタを適用する値 (または値の一部) が分かっている場合は、これらのオプションを使用することで、選択する値を簡単に特定することができます。

HTML キャンバスでこの機能を使用するには、リストボックス、ドロップダウンリスト、またはダブルリストの左側コントロールを右クリックし、コンテキストメニューから [ページ/検索コントロールの追加] を選択します。

これらの機能は、特定のコントロールの機能を個別に強化する場合に使用します。ページ上の複数のコントロールに適用される [ページ/検索] オプションを作成する場合は、HTML ページのコンポーネントへのアクセスを参照してください。

ページ/検索コントロールの検索機能のみを備えた検索コントロールを作成することもできます。

コントロールにページ/検索機能を追加するには

手順
1. HTML キャンバスで、リストボックス、ドロップダウンリスト、またはダブルリストの左側コントロールを右クリックし、コンテキストメニューから [ページ/検索コントロールの追加] を選択します。

   ページ/検索コントロールがキャンバスに追加され、選択した入力コントロールの下側に配置されます。下図では、[製品 (詳細区分)] フィールドのドロップダウンリストの下側にページ/検索コントロールが追加されています。

   

   ここでは、青色の左矢印および右矢印の各ボタンはページの移動用です。灰色の拡大鏡ボタンと矢印ボタンは検索用です。

   実行時には、ページ/検索コントロールに、各ページの値の範囲が表示されます。デフォルト範囲は 1-50 です。つまり、入力コントロールには、1 件目の値から 50 件目の値まで、1 ページあたり 50 件の範囲で値が表示されます。

   デフォルト範囲を変更するには、ページ/検索コントロールをクリックして、[プロパティ] パネルに [数または範囲] 属性を表示します。必要に応じて値を変更します。

2. 必要に応じて、[プロパティ] パネルの [検索/ページコントロール] セクションの選択したナビゲータオブジェクトで、ページ/検索コントロールの次のデフォルト検索オプションを選択することもできます。
   • 接頭語の一致   各値の先頭文字列に一致する値が検索されます。このオプションが有効でない場合、任意の位置の検索文字列が一致します。
   • 大文字と小文字の区別   大文字と小文字を区別して検索します。
   • 単語単位で検索   検索文字列に単語全体が一致する項目のみが返されます。
   • インスタント検索   入力コントロールに文字を入力すると同時に、その入力文字列に一致する値が自動的に検索されます。
   • 選択値を保持   このオプションを選択すると、各ページで選択した値または検索した値は、他のページに移動しても保持され、元のページに戻った際に再度表示されます。リクエストを実行する場合は、選択値の全履歴が使用されます。
   • 設定の表示   検索オプションが、デフォルト設定で、ページ/検索コントロールに表示されます。検索矢印ボタンをクリックすると、コントロール内の検索オプションの表示と非表示が切り替わります。
   • 数または範囲   コントロールに表示する値の最初の数値または値の範囲を指定します。
3. HTML ページを実行します。

   ページ/検索コントロールに、指定した範囲が表示されます。たとえば、「1-50」と表示されます。

4. 矢印ボタンを使用して、入力コントロールに表示される値をページ単位で閲覧します。[最初]、[戻る]、[次へ]、[最後] を選択することができます。

   検索機能を使用するには、ページ/検索コントロールに検索文字列を入力し、Enter キーを押すか、検索 (拡大鏡) ボタンをクリックします。

   検索条件を表示するには、右端の検索矢印ボタンをクリックします。検索条件リストが表示されます。次のオプションのいずれかを選択します。

   • 接頭語の一致   入力コントロールの値の接頭語と一致する値が検索されます。
   • 大文字と小文字の区別   入力コントロールの値と完全に一致する値が検索されます。
   • 単語単位で検索   検索する単語が含まれる文字列が検索されます。
   • インスタント検索   入力コントロールに文字を入力すると同時に、その入力文字列に一致する値が自動的に検索されます。
   • 選択値を保持   このオプションを選択すると、各ページで選択した値または検索した値は、他のページに移動しても保持され、元のページに戻った際に再度表示されます。リクエストを実行する場合は、選択値の全履歴が使用されます。

   検索条件リストの表示と非表示を切り替えるには、検索矢印ボタンをクリックします。

5. [実行] ボタンをクリックすると、レポートが更新され、入力コントロールで選択した値が表示されます。

HTML ページへのページ/検索コントロールの追加

グローバルページ/検索コントロールを使用して、複数のコントロール (リストボックス、ドロップダウンリスト、またはダブルリストの左側コントロール) が配置された HTML ページにさらに機能を追加することができます。これらの機能は、多数の有効値が表示されるコントロールを対象にした追加機能で、次のことが可能になります。

• 値を選択する前に広範囲の値リストをページ単位で移動する。
• 複数のコントロールを対象に値を検索する。

グローバルページ/検索コントロールプロパティは、DOCUMENT レベルのプロパティです。

グローバルページ/検索コントロールは、[プロパティ] パネルの [検索/ページ] セクションに DOCUMENT レベルのプロパティとして追加されます。

このオプションは、HTML ページの機能を強化する場合に使用します。特定のコントロールの機能を個別に強化する場合は、HTML ページのコンポーネントへのアクセスを参照してください。

HTML ページにページ/検索コントロールを追加するには

手順
1. DOCUMENT オブジェクトの [プロパティ] パネルで、[検索/ページコントロール] セクションの [有効] ドロップダウンリストから [はい] を選択します。
2. DOCUMENT オブジェクトの [プロパティ] パネルの [検索/ページコントロール] セクションで、[有効] プロパティをクリックし、ドロップダウンリストから [はい] を選択します。
3. 必要に応じて、[プロパティ] パネルの [検索/ページコントロール] セクションで、ページ/検索コントロールの次のデフォルト検索オプションを選択することもできます。
   • 接頭語の一致   各値の先頭文字列に一致する値が検索されます。このオプションが有効でない場合、任意の位置の検索文字列が一致します。
   • 大文字と小文字の区別   大文字と小文字を区別して検索します。
   • 単語単位で検索   検索文字列に単語全体が一致する項目のみが返されます。
   • インスタント検索   入力コントロールに文字を入力すると同時に、その入力文字列に一致する値が自動的に検索されます。
   • オートリンク   このオプションを有効にした場合、ページの入力コントロールを選択すると、グローバルページ/検索コントロールに自動的に接続されます。このオプションを無効にした場合、入力コントロールを選択後、グローバルページ/検索コントロールをクリックすることでグローバルページ/検索コントロールに接続されます。
   • 選択値を保持   このオプションを選択すると、各ページで選択した値または検索した値は、他のページに移動しても保持され、元のページに戻った際に再度表示されます。リクエストを実行する場合は、選択値の全履歴が使用されます。
   • 設定の表示   検索オプションが、デフォルト設定で、グローバルページ/検索コントロールに表示されます。検索矢印ボタンをクリックすると、コントロール内の検索オプションの表示と非表示が切り替わります。
   • 数または範囲   コントロールに表示する値の最初の数値または値の範囲を指定します。
4. HTML ページを実行します。

   グローバルページ/検索コントロールがウィンドウの右上に表示されます ([ホーム] の位置)。

5. 入力コントロールをクリックします。

   グローバルページ/検索コントロールが、選択した入力コントロールの下側に表示されます。

   入力コントロールには、その入力コントロールとのリンクが設定されていることを示すラベルが表示されます。入力コントロールにラベルが関連付けられていない場合は、「combobox1」など入力コントロールの一意の ID が表示されます。

   複数のページを指定する場合は、[検索/ページ] テキストボックスに「1-2 / 4」などの範囲を入力し、Enter キーを押します。

6. [検索/ページ] ウィンドウの [設定の表示] ボタンをクリックしてウィンドウを拡張し、検索とページのオプションを表示します。

   [検索/ページ] には、次のオプションがあります。

   • 接頭語の一致   入力コントロールの値の接頭語と一致する値が検索されます。
   • 大文字と小文字の区別   入力コントロールの値と完全に一致する値が検索されます。
   • 単語単位で検索   検索する単語が含まれる文字列が検索されます。
   • インスタント検索   入力コントロールに文字を入力すると同時に、その入力文字列に一致する値が自動的に検索されます。
   • 選択したコントロールとのリンクを自動設定   検索/ページコントロールと選択したコントロール間のリンクを設定します (デフォルト)。
   • 選択値を保持   このオプションは、ダブルリストコントロールのみに反映されます。このオプションのチェックをオンにすると、検索した値が右側のウィンドウに累加されます。別の値を検索した場合でも、検索済みの値は削除されません。このオプションを選択すると、各ページで選択した値または検索した値は、他のページに移動しても保持され、元のページに戻った際に再度表示されます。リクエストを実行する場合は、選択値の全履歴が使用されます。

   上向き矢印ボタンをクリックして、[検索/ページ] ウィンドウのオプションの表示と非表示を切り替えます。[検索/ページ] ウィンドウの [ホーム] アイコンをクリックして、[ホーム] ウィンドウに戻ります。

テキストボックスにマスクデータを入力するには

手順
1. テキストボックスオブジェクトを選択し、[プロパティ] パネルで、関連するプロパティを表示します。
2. [テキストを隠す] プロパティのドロップダウンリストから [はい] を選択します。
3. レポートを実行し、テキストボックスに値を入力します。

ラジオボタンおよびチェックボックスコントロールでの選択済みおよび未選択プッシュボタンのフォーマットを設定するには

手順
1. HTML キャンバスで、リボンの [コントロール] タブの [ラジオボタン] または [チェックボックス] をクリックし、ラジオボタンコントロールまたはチェックボックスコントロールを作成します。コントロールに複数の値を追加します。
2. コントロールを選択し、[プロパティ] パネルを開きます。
3. [プロパティ] パネルの [タイプ] ドロップダウンリストから [プッシュボタン] を選択します。

   [選択済みプッシュボタンの背景色] および [未選択プッシュボタンの背景色] プロパティが表示されます。

4. [選択済みプッシュボタンの背景色] プロパティのドロップダウンリストから背景色を選択します。
5. [未選択プッシュボタンの背景色] プロパティのドロップダウンリストから背景色を選択します。
6. HTML ファイルを保存して実行します。

   指定した背景色が選択済みの値と未選択の値に適用されます。

静的コンテンツのラジオボタンにイメージを追加するには

手順
1. HTML キャンバスで、[コントロール] タブの [ラジオボタン] をクリックし、コントロールボックスを描画してラジオボタンコントロールを作成します。
2. [設定] パネルで、[表示イメージを追加する] のチェックをオンにします。
   1. [新規作成] ボタンをクリックし、コントロールボックスに複数の値を入力します。

      注意：デフォルト設定で、最初の値は [選択済み] に設定されていますが、このチェックはオフにすることができます。

   2. 値の [画面] 列で右クリックし、この値を追加するイメージを選択します。[ファイルを開く] ダイアログボックスが表示されます。
   3. イメージに移動して選択します。下図のように、イメージのパスが [画面] 列に追加されます。

      

      注意：[画面] 列の括弧 (<>) の外側のテキストは、ページの実行時に表示されます。テキストが含まれない場合は、イメージのみが表示されます。表示テキストを括弧の前に移動すると、イメージはラジオボタンコントロールのテキストの右側に表示されます。

   4. [画面] 列のテキストを変更または削除するには、これをダブルクリックし必要な変更を慎重に加えます。
   5. HTML ページを実行します。[設定] パネルで [カメラ] ラジオボタンの [選択済み] のチェックがオンに設定されているため、下図のように、ページの実行時にこのイメージがデフォルトとして表示されます。

      

カレンダーのプロパティを設定するには

手順
1. [コントロール] タブの [カレンダー] コマンドをクリックして、HTML ページにカレンダーを追加します。

   マウスポインタを HTML キャンバス上に移動します。マウスポインタが十字カーソルに変わります。

2. 十字カーソルをドラッグしてカレンダーオブジェクトを作成し、必要なサイズに調整します。

   レイアウト内にカレンダーのプレースホルダが作成され、「calendarn」という名前が付けられます。ここで、末尾の n には番号が割り当てられます。

3. 必要に応じて、[プロパティ] パネルに表示された各プロパティを調整することで、カレンダーのプロパティを変更します。

   [プロパティ] パネルには、次のカレンダーコントロールのプロパティが表示されます。

   • 月数   カレンダーコントロールに同時に表示する月数を指定することができます。単一行で月数を表示するには、単一の整数値を入力します。指定した行数および列数で月数を表示するには、2 つの整数をカンマ区切りで入力します。デフォルト設定では、1 つの月が表示されます。
   • 移動月数   カレンダーコントロールで右矢印または左矢印をクリックした際に、スキップする月数を指定します。これは、一度に複数の月を表示し、コントロールのナビゲート時にクリック回数を省略したい場合に便利です。デフォルト設定では、一度に 1 か月ずつ移動します。
   • 表示オン   カレンダーコントロールの展開方法を指定します。デフォルト設定は [ボタンクリック時] です。この設定では、カレンダーアイコンをクリックするとカレンダーが表示されます。[フォーカス時] に設定するとカレンダーアイコンは表示されませんが、カレンダーテキストボックスをクリックするとカレンダーコントロールが表示されます。[両方] を選択すると、テキストボックスかアイコンのいずれかをクリックしてカレンダーコントロールを表示することができます。
   • 週の表示   [はい] を選択すると、カレンダーコントロールに各年の週番号が表示されます。デフォルト値は [いいえ] です。
   • [ボタン] ウィンドウの表示   [はい] を選択すると、カレンダーコントロール下部に [ボタン] ウィンドウが追加されます。[ボタン] ウィンドウには、コントロールで現在の日付を選択するための [今日] ボタン、およびコントロールを閉じるための [完了] ボタンが表示されます。デフォルト値は [いいえ] です。
   • 週の開始日   カレンダーコントロールで週の開始日となる曜日を指定します。
   • カレンダーのイメージ   デフォルト設定のカレンダーアイコンを、ユーザ環境で使用可能なイメージに変更することができます。イメージはカレンダーアイコンのサイズにトリミングされます。
   • アニメーション   カレンダーアイコンの表示に使用するアニメーションを指定します。デフォルト値は [表示] です。
4. 既存のパラメータをカレンダーにバインドします。

   パラメータをカレンダーコントロールにバインドすると、入力パラメータが作成されます。入力パラメータ値は、WebFOCUS 日付フォーマットで指定します。カレンダーのプロパティでサポートされるデータタイプのいずれかと完全に一致する日付フォーマットを指定する必要があります。入力パラメータ値により、カレンダーに日付値が入力されます。

   • [パラメータ] 表示タブをクリックします。
   • パラメータ名オブジェクトの中央を選択し、そのパラメータをカレンダーオブジェクトの中央にドラッグします。マウスボタンを離して、バインドを完成させます。
   • カレンダーからパラメータのバインドを解除するには、矢じり部分を選択して右クリックし、[バインディングの解除] を選択します。右クリックして [バインディングの解除] を選択します。
5. カレンダーをパラメータにバインドします。

   カレンダーをパラメータにバインドすると、パラメータに日付値が入力されます。

   • [パラメータ] 表示タブをクリックします。

     [設定] パネルが開き、[カレンダーの設定] セクションにカレンダーの設定オプションが表示されます。カレンダーの設定オプションにより、実行時にユーザが選択可能な日付範囲を設定することができます。選択可能な日付は、アクティブなハイパーリンク (下線付きの青色) として表示されます。選択不可の日付は、下線の付いていない黒色で表示されます。

     注意：カレンダーの [設定] パネルに表示されるオプションは、選択したデータタイプにより異なります。

   • カレンダーの値を作成します。静的な値または動的な値を作成することができます。

     [現在/開始日] のチェックをオンにすると、実行時のカレンダーコントロールで現在の日付が使用されます。

     カレンダーの設定で選択可能な日付範囲オプションには、次のものがあります。

     • 静的   このオプションを選択して、静的な日付範囲を設定します。開発者は、ポップアップカレンダーアイコンを使用するか、コントロールから月、日、年をクリックして開始日と終了日を選択します。

       ポップアップカレンダーアイコンは、[日付範囲] で [静的] を選択した場合に [開始日] および [終了日] セクションに表示されます。ポップアップカレンダーアイコンをクリックすると、デフォルト設定で現在の日付が選択され、赤で囲まれたポップアップカレンダーが表示されます。横方向の矢印を使用してカレンダーをスクロールする場合、表示する月を変更しても、現在の日付と同一の日付が選択された状態になります。日付をクリックすると、その日付がコントロールに追加されます。日付を選択するには、カレンダーを左右にスクロール、月、日、年をテキストとして入力、または、ドロップダウンリストおよびスピンボックスから月、日、年を選択します。

     • 相対的   このオプションを選択すると、現在の日付を基準として相対的な日数、月数、年数を設定することができます。実行時においての現在の日付が常に基準日 (開始日) となり、カレンダーには現在の日付を基準とした日数、月数、年数が表示されます。日付範囲をすべて過去の日付 (例、5 年前から現在の日付) にしたり、すべて未来の日付 (例、現在の日付から 5 年先) にしたりすることも可能です。これは、デフォルトの日付範囲として選択されています。
     • 動的   このオプションを選択すると、日付範囲を返すリクエストを指定することができます。[カスタムリクエストの選択] ドロップダウンリストから、既存のリクエストを選択することができます。このリクエストは、XML フォーマットの同一のデータ行に、2 つの日付値を返す必要があります。日付値を返す場合は、月および日を 2 桁、年を 4 桁で表すフォーマット (例、MM/DD/YYYY) を使用する必要があります。
     • データで制限   このオプションを選択すると、利用可能な日付がコントロールのデータソースに表示される日付に制限されます。たとえば、[設定] パネルで [データタイプ] を [動的] に設定し、コントロールに使用するデータソースと日付フィールドを選択した場合、このフィールドに表示される日付のみを選択することができます。
   • カレンダーの中央を選択し、パラメータオブジェクトの中央にドラッグします。マウスボタンを離して、バインドを完成させます。

スライダコントロールの使用

スライダコントロールは、数値を選択する際に使用されます。スライダコントロールを使用して、使用可能な値の範囲から単一の数値を選択することができます。スライダ内の点をクリックして選択することも、スライダの両端にある矢印ボタンを使用してスライダを 1 増分値ずつ移動することもできます。静的パラメータでスライダを作成する場合、[設定] パネルを使用して最小値と最大値、およびスライダ上の値間の増分を指定することができます。動的パラメータでスライダを作成する場合、選択したデータソースおよびフィールドのすべての値がスライダ上で使用できます。

また、ダブルヘッドスライダを作成することもできます。スライダコントロールの一種であるダブルヘッドスライダコントロールを使用すると、ユーザが値の範囲を選択して、レポートまたはグラフに表示するデータを制御することができます。操作するスライダヘッドは 1 つではなく、2 つあります。ダブルヘッドスライダコントロールを使用するには、レポートまたはグラフに 2 つの変数が含まれている必要があります。これらの変数を、ダブルヘッドスライダコントロールで制御します。ダブルヘッドスライダコントロールの一方のヘッドで 1 つ目の変数を制御し、他方のヘッドで 2 つ目の変数を制御します。これらの変数は、プロシジャ内で FROM および TO として指定する必要があります。

注意：レポートキャンバスで値の範囲を受容するパラメータを作成するには、[式ビルダ] ダイアログボックスを使用します。グラフキャンバスでは、値の範囲を受容するパラメータを手動で作成する必要があります。

スライダコントロールを使用する HTML ページを作成するには

手順
1. 新しい HTML ページを作成します。
2. HTML キャンバスにレポートオブジェクトを追加します。
3. 数値を受容する変数が含まれたレポートを作成、インポート、または参照参照します。

   [新規パラメータ] ダイアログボックスが表示されます。

4. [新規パラメータ] ダイアログボックスの [コントロールタイプ] 列で、1 つ目のパラメータを右クリックし、[スライダ] から [横] または [縦] を選択します。
5. [OK] をクリックして [新規パラメータ] ダイアログボックスを閉じ、スライダコントロールを HTML ページに追加します。

   HTML キャンバス下部の [パラメータ] 表示タブをクリックすると、スライダコントロールがレポートのパラメータに連鎖されていることが分かります。また、スライダコントロールを選択して [設定] パネルを開くと、選択した値をレポートのパラメータに追加するために値の動的リストが使用されていることが分かります。

6. 必要に応じて、スライダコントロールを選択し、[プロパティ] パネルを開きます。次のプロパティは、スライダコントロール固有のプロパティです。
   • 入力の表示   [はい] を選択すると (デフォルト設定)、スライダにテキストボックスが追加され、選択した値が表示されます。また、テキストボックスに値を入力してスライダの選択値を変更することもできます。[いいえ] を選択すると、テキストボックスが非表示になり、選択した値がスライダに表示されません。[読み取り専用] を選択すると、テキストボックスは非表示になりますが、選択した値はスライダに表示されます。
   • 矢印の表示/非表示   [はい] を選択すると (デフォルト設定)、矢印ボタンが追加され、スライダ上を 1 増分値ずつ移動することができます。[いいえ] を選択すると、矢印ボタンが非表示になります。スライダ上の点をクリックして、スライダヘッドを動かすことができます。
   • 範囲   シングルヘッドスライダコントロールの場合は [いいえ] を選択し、ダブルヘッドスライダコントロールを作成する場合は [はい] を選択します。ダブルヘッドスライダを使用した HTML ページの作成についての詳細は、HTML ページのコンポーネントへのアクセスを参照してください。
7. HTML ページを保存して実行します。

   スライダコントロールは、値の選択を可能にすることで、レポートまたはグラフの表示を制御します。

ダブルヘッドスライダコントロールで制御可能なレポートを作成するには

手順
1. 新しいレポートを作成します。
2. レポートに表示するフィールドを追加します。
3. [フィールド] タブの [フィルタ] グループで、[フィルタ] をクリックし、[選択条件 (WHERE)] を選択します。

   [式ビルダ] ダイアログボックスが開きます。

4. ダブルヘッドスライダコントロールで使用するフィールドをダブルクリックします。
5. [論理関係] ドロップダウンリストから [範囲 (FROM TO)] を選択します。

   これにより、値の範囲を指定するパラメータが作成されます。

6. [比較値] 列をダブルクリックして [範囲の作成] ダイアログボックスを開きます。

   [範囲の作成] ダイアログボックスで、ダブルヘッドスライダコントロールで使用するパラメータの名前を指定するか、値の範囲の始点として使用するフィールドを選択します。

7. [始点] テキストボックスに変数名を入力します。たとえば、「&Value1」と入力します。

   これが FROM 値になります。

8. [終点] テキストボックスに変数名を入力します。たとえば、「&Value2」と入力します。

   これが TO 値になります。

   これらが、ダブルヘッドスライダコントロールで制御される 2 つのパラメータ名です。

9. レポートを保存して閉じます。

   このレポートを HTML ページに配置すると、ダブルヘッドスライダコントロールで制御可能なレポートになります。

リボンからダブルヘッドスライダコントロールを作成するには

手順
1. HTML キャンバスを開き、[コントロール] タブの [コントロール] グループで [スライダ] コマンドをクリックし、[横] または [縦] を選択します。

   マウスポインタが十字カーソルに変わります。

2. 十字カーソルをドラッグして、シングルヘッドスライダコントロールを作成します。
3. シングルヘッドスライダコントロールを選択し、[プロパティ] パネルで [範囲] プロパティを [いいえ] から [はい] に変更します。

   [範囲] プロパティを [はい] に変更すると、シングルヘッドスライダコントロールがダブルヘッドスライダコントロールに変更されます。このコントロールを使用して、表示する値の範囲を選択することができます。

新規パラメータダイアログボックスでダブルヘッドスライダコントロールを作成するには

手順
1. HTML キャンバスでレポートオブジェクトまたはグラフオブジェクトを作成します。

   マウスポインタが十字カーソルに変わります。

2. 十字カーソルをドラッグして、レポートまたはグラフを作成します。
3. FROM - TO 関係で使用される 2 つの変数が含まれたレポートまたはグラフを作成、インポート、または参照参照します。

   [新規パラメータ] ダイアログボックスが表示されます。

4. [新規パラメータ] ダイアログボックスの [コントロールタイプ] 列で、1 つ目のパラメータを右クリックし、[スライダ] から [ダブルヘッド横] または [ダブルヘッド縦] を選択します。

   2 つ目の [コントロールタイプ] 列は [上に追加] に変更されます。この場合、2 つ目のパラメータは範囲の一部であると認識され、1 つ目のパラメータで指定されたダブルヘッドスライダコントロールで制御されます。

ダブルヘッドスライダコントロールを使用する HTML ページを作成するには

手順
1. 新しい HTML ページを作成します。
2. HTML キャンバスにレポートオブジェクトを追加します。
3. 値の範囲を受容する変数が含まれたレポートを作成、インポート、または参照参照します。

   [新規パラメータ] ダイアログボックスが表示されます。

4. [新規パラメータ] ダイアログボックスの [コントロールタイプ] 列で、1 つ目のパラメータを右クリックし、[スライダ] から [ダブルヘッド横] または [ダブルヘッド縦] を選択します。

   2 つ目の [コントロールタイプ] 列は [上に追加] に変更されます。この場合、2 つ目のパラメータは範囲の一部であると認識され、1 つ目のパラメータで指定されたダブルヘッドスライダコントロールで制御されます。

5. [OK] をクリックして [新規パラメータ] ダイアログボックスを閉じ、ダブルヘッドスライダコントロールを HTML ページに追加します。
6. HTML キャンバス下部の [パラメータ] 表示タブをクリックします。
7. 未バインドパラメータを [未バインドのパラメータ] ボックスの外側へドラッグします。
8. スライダコントロールの後半部分を未バインドパラメータにドラッグします。
9. スライダコントロールを選択し、[設定] パネルをクリックします。
10. [コントロールの設定] セクションで、[データタイプ] を [動的] に変更します。
11. [データソース] ドロップダウンリストから、使用するデータソースを選択します。
12. [値フィールド] テキストボックスの [...] (参照) ボタンをクリックし、ダブルヘッドスライダコントロールで制御するフィールドを選択します。
13. HTML ページを保存して実行します。

    ダブルヘッドスライダコントロールを使用して、特定の値やすべての値を選択する代わりに、値の範囲を選択することで、レポートやグラフに表示するデータを制御することができます。1 つ目のヘッドで FROM 値を更新し、2 つ目のヘッドで TO 値を更新します。

複数選択リストの使用

レポートに使用可能な複数選択リストには、標準リストボックスとドロップダウンリストの 2 タイプがあります。いずれかのタイプの複数選択入力コントロールを使用してパラメータ値を提供する場合、実行時に値リストから複数値の選択を可能にするかどうかを指定するには、[複数値の選択] プロパティ値を使用します。

複数選択値のリストボックスを作成するには

手順
1. HTML キャンバスで、複数値を受容するパラメータを使用したレポートを挿入します。

   たとえば、パラメータの [変数タイプ] として [複数選択 OR] を選択し、マスターファイルから値の動的リストを受容するよう定義されたパラメータを使用してレポートを作成します。

2. [新規パラメータ] ダイアログボックスで、デフォルトのコントロールタイプである [リストボックス] をそのまま使用し、[OK] をクリックします。

   レイアウト内にリストボックスが作成され、「listboxn」という名前が付けられます。ここで、末尾の n には番号が割り当てられます。

3. [プロパティ] パネルで、[複数値の選択] ドロップダウンリストから [複数値の選択] を選択します。

   これにより、ドロップダウンリストで複数の項目を選択することができます。

4. HTML ページを保存して実行します。
5. リストボックスから値を選択する際に、Ctrl キーを押しながら複数の値を選択します。
6. [実行] ボタンをクリックし、選択した値のパラメータを使用してレポートを実行します。

複数選択値のドロップダウンチェックボックスリストを作成するには

手順
1. HTML キャンバスで、複数値を受容するパラメータを使用したレポートを挿入します。

   たとえば、パラメータの [変数タイプ] として [複数選択 OR] を選択し、マスターファイルから値の動的リストを受容するよう定義されたパラメータを使用してレポートを作成します。

2. [新規パラメータ] ダイアログボックスで、デフォルトのコントロールタイプである [リストボックス] をそのまま使用し、[OK] をクリックします。

   レイアウト内にリストボックスが作成され、「listboxn」という名前が付けられます。ここで、末尾の n には番号が割り当てられます。

3. コントロールを右クリックし、[コントロールタイプの設定]、[ドロップダウンリスト] を順に選択してコントロールを変更します。

   注意：[プロパティ] パネルでは、コントロールの [複数値の選択] プロパティが自動的に [複数値の選択] に設定されます。

4. HTML ページを保存して実行します。
5. 下向き矢印をクリックした際に表示されるチェックボックスを使用して、複数の値を選択します。
6. コントロールの外側をクリックし、ドロップダウンリストを閉じます。
7. [実行] ボタンをクリックし、選択した値のパラメータを使用してレポートを実行します。

ブラウザセッションでのコントロール選択値の保存

HTML ページ上の複数のコントロールをリンクさせることで、同一ブラウザセッション中に複数のページを切り替えた場合でも、同一の選択値が自動的にデフォルト値になるよう設定することができます。複数のコントロールをリンクさせるには、リンクを設定する各コントロールの [グローバル名] プロパティに共通の値を割り当てます。

たとえば、2 つの HTML ページに地域別の売上情報に関するコントロールが含まれている場合を想定します。リンクを設定する各コントロールの [グローバル名] プロパティに値を割り当てます (例、Region)。同一ブラウザセッションでこれらのページを実行し、リンクが設定された 1 つ目のコントロールで値を選択すると (例、Southeast)、別のページのコントロールがリフレッシュされ、最初に選択した値 (例、Southeast) に関する情報が表示されます。

注意：選択した値がデフォルト値として保持されるのは、単一のブラウザセッション中のみです。ブラウザを閉じると、値はクリアされます。

ブラウザセッションでコントロール選択値を保存するには

手順
1. コントロールが含まれた HTML ページを作成するか、既存の HTML ページを開きます。
2. コントロールを選択します。
3. [プロパティ] パネルの [その他] セクションで、[グローバル名] プロパティに値を入力します。この値は、任意の文字にすることができます (例、GlobalRegion1)。
4. HTML ページを保存します。
5. リンクを設定するコントロールごとに手順 1 から 4 を繰り返します。リンクを設定する各コントロールの [グローバル名] プロパティには、同一の値を割り当てる必要があります。

ツリーコントロールの使用

HTML ページにシングルソースツリーコントロールまたはマルチソースツリーコントロールを挿入することができます。

デフォルトプロシジャを使用して HTML ページにツリーコントロールを追加するには

手順
1. HTML キャンバスで、[コントロール] タブからツリーコントロールを挿入します。

   ヒント：シングルソースツリーコントロールまたはマルチソースツリーコントロールのいずれかを選択することができます。いずれのタイプも選択しない場合は、デフォルトのシングルソースツリーコントロールが使用されます。シングルソースツリーコントロールには、マルチディメンションデータソース (例、SAP BW、SSAS、Essbase) から値が挿入される必要があります。

   マウスポインタが十字カーソルに変わります。

2. 十字カーソルをドラッグしてツリーコントロールを作成し、必要なサイズに調整します。

   レイアウト内にツリーコントロールが作成され、「treecontroln」という名前が付けられます。ここで、末尾の n には番号が割り当てられます。

3. 必要に応じて、[プロパティ] パネルで [展開] プロパティを有効にし、実行時にツリーコントロールを展開された状態で表示することができます。
4. 必要に応じて、[プロパティ] パネルで [ハイパーリンク] プロパティを有効にし、実行時にツリーノードをラジオボタンではなく、ハイパーリンクとして表示することができます。
5. 必要に応じて、[プロパティ] パネルで [すべての子を選択] プロパティを有効にし、親ノードを選択するとその子がすべて自動的に選択されるようにすることができます。また、任意の親についてすべての子を選択すると、その親ノードも自動的に選択されます。
6. [設定] パネルの [データタイプ] セクションで、[動的] を選択します。
7. [デフォルト] を選択したまま、[データソース] テキストボックス横の [...] (参照) ボタンをクリックします。

   [データソースの選択] ダイアログボックスが表示されます。

8. マルチディメンションデータソースを選択し、[OK] をクリックします。

   マルチディメンションデータソースが、デフォルトプロシジャとして追加されます。

9. [値フィールド] 横の [...] (参照) ボタンをクリックし、階層からフィールドを選択します。

   この [値フィールド] は、値の取得元となるデータソースのフィールドです。

10. [表示フィールド] 横の [...] (参照) ボタンをクリックし、階層からフィールドを選択します。

    この [表示フィールド] は、ツリーコントロールのパラメータ値を表すテキストです。

11. ページを保存して実行し、ツリーコントロールにマルチディメンションデータソースを表示します。

既存のプロシジャを使用して HTML ページにツリーコントロールを追加するには

TABLE FILE file 
SUM FST.dispfield 
BY ParentUniqueField 
BY UniqueField 
BY datafield 
ON TABLE PCHOLD FORMAT XML 
END

手順
1. [コントロール] タブからツリーコントロールを挿入します。

   ヒント：シングルソースツリーコントロールまたはマルチソースツリーコントロールのいずれかを選択することができます。いずれのタイプも選択しない場合は、デフォルトのシングルソースツリーコントロールが使用されます。シングルソースツリーコントロールには、マルチディメンションデータソース (例、SAP BW、SSAS、Essbase) から値が挿入される必要があります。

   マウスポインタが十字カーソルに変わります。

2. 十字カーソルをドラッグしてツリーコントロールを作成し、必要なサイズに調整します。

   レイアウト内にツリーコントロールが作成され、「treecontroln」という名前が付けられます。ここで、末尾の n には番号が割り当てられます。

3. 必要に応じて、[プロパティ] パネルの [展開] プロパティで [展開] を選択することで、実行時にツリーコントロールを展開された状態で表示することができます。
4. 必要に応じて、[プロパティ] パネルの [ハイパーリンク] プロパティで [ハイパーリンク] を選択することで、実行時にツリーノードをラジオボタンではなく、ハイパーリンクとして表示することができます。
5. [設定] パネルの [データタイプ] セクションで、[動的] を選択します。
6. [外部プロシジャ (リクエストパネル)] を選択し、[リクエスト] ドロップダウンリストからプロシジャを選択します。

   選択したプロシジャ名が明示的プロシジャとして追加されます。

7. [値フィールド] 横の [...] (参照) ボタンをクリックして階層からフィールドを選択するか、フィールド名を直接入力します。

   この [値フィールド] は、値の取得元となるデータソースのフィールドです。

8. [表示フィールド] 横の [...] (参照) ボタンをクリックして階層からフィールドを選択するか、フィールド名を直接入力します。

   この [表示フィールド] は、ツリーコントロールのパラメータ値を表すテキストです。

9. ページを保存して実行し、ツリーコントロールにマルチディメンションデータソースを表示します。

マルチソースツリーコントロールにデータを入力するには

手順
1. HTML キャンバスで、マルチソースツリーコントロールを挿入します。
   • [コントロール] タブの [ツリーコントロール] ドロップダウンリストから、[マルチソースツリーコントロール] を選択します。

   マウスポインタが十字カーソルに変わります。

2. 十字カーソルをドラッグしてツリーコントロールを作成し、必要なサイズに調整します。

   レイアウト内にツリーコントロールが作成され、「treecontroln」という名前が付けられます。ここで、末尾の n には番号が割り当てられます。

3. [プロパティ] パネルで、ツリーコントロールのレベル数を入力し、Enter キーを押します。

   これにより、データが入力されるレベル数が設定されます。

4. 必要に応じて、[プロパティ] パネルの [展開] プロパティで [展開] を選択することで、実行時にツリーコントロールを展開された状態で表示することができます。
5. ツリーコントロールを選択し、[パラメータ] タブをクリックします。

   ツリーコントロールオブジェクトに、設定した数のレベルが表示されます。

6. ツリーコントロールの各レベルを選択し、データ入力の設定を作成します。

   マルチソースツリーコントロールを作成する場合、静的データタイプは使用できません。ツリーコントロールで静的値を作成するには、シングルソースツリーコントロールを作成する必要があります。

7. ツリーコントロールにレベルを追加する場合は、[パラメータ] タブのツリーコントロールオブジェクトを右クリックし、[レベルの追加] を選択します。

   注意：[レベルの追加] は、マルチソースツリーコントロールオブジェクトにのみ表示されます。

8. 追加したレベルをクリックし、そのレベルの [設定] パネルを表示します。
    
9. HTML キャンバスの [デザイン] タブに切り替え、データが入力されたツリーコントロールのプレビューを表示します。
10. ページを保存して実行します。

    注意：ユーザが 1 つ目のレベルで下位ノードを選択し、2 つ目のレベルで上位ノードを選択した場合、そのプロシジャを実行すると、下位で選択された値のみが反映されます。たとえば、COUNTRY、CAR、MODEL という 3 つのレベルが存在する場合を想定します。[ENGLAND] ノード下の [TRIUMPH] レベルで [TR7] を選択します。[FRANCE] ノード下で [PEUGEOT] を選択します。実行時には、TR7 のレコードのみが取得されます。これは、[FRANCE] ノード下で下位の MODEL 値が選択されていないためです。

    ツリーコントロールの各レベルに、値が入力されます。

    注意：[選択項目を保存] ボタンをクリックする前に、各レベルの値を選択する必要があります。

    レベル 1 に存在しないフィールドの表示値を指定した場合は、そのレベルに先行するレベルに対しても表示値を指定する必要があります。

    1 つ目および 2 つ目のレベルのみが実行時にロードされます。レベル 1 に存在するフィールドの表示値を指定した場合は、最初の 2 つのレベルの値のみが選択されます。

静的な値を使用して HTML ページにツリーコントロールを追加するには

手順
1. HTML キャンバスで、ツリーコントロールを挿入します。
2. [設定] パネルで、[データタイプ] として [静的] を選択します。

   [静的] がデフォルト設定で選択されています。項目を選択して、その項目を削除したり、サブ項目を追加したりできます。

3. コントロールのパラメータ値を作成します。
   • [新規作成] ボタンをクリックして、一連の値を追加します。これらの値は、連続番号の付いた階層構造に追加されます。追加した最後の値が、[値] および [表示値] テキストボックスに表示されます。
   • 値を変更するには、[値] および [表示値] テキストボックスに新しい値を直接入力します。
   • [静的な値] ドロップダウンリストから [子項目の追加] をして、現在選択しているレベルに値を追加し、選択した値の子として新しい値を作成します。
   • 選択した値の前に値を挿入するには、[静的な値] ドロップダウンリストから [前に挿入] を選択します。ここで、値の番号に注目してください。
   • 選択した値の後に値を挿入するには、[静的な値] ドロップダウンリストから [後に挿入] を選択します。ここで、値の番号に注目してください。

     この手順を繰り返して、必要な値をすべてリストに追加します。

   • 必要に応じて、[削除] ボタンをクリックして、値を削除します。
4. [値] テキストボックスに入力した値をデフォルト値として表示するには、[選択済み] のチェックをオンにします。
5. 実データの代わりに表示値をパラメータに送信するには、[表示値を送信する] のチェックをオンにします。
6. このページを保存して実行すると、ツリーコントロールに静的な値が挿入されます。

新規パラメータダイアログボックスで新規ツリーコントロールを作成するには

手順
1. パラメータを含むレポートをインポートまたは作成参照します。

   パラメータを含むレポートをインポート参照する際に、[新規パラメータ] ダイアログボックスが表示され、コントロールタイプを作成するよう要求されます。

2. [コントロールタイプ] 列の値を右クリックし、[新規パラメータ] ダイアログボックスからツリーコントロールを選択します。[新規パラメータ] ダイアログボックスからツリーコントロールを選択します。

   [コントロールタイプ] 列が更新されて、選択したコントロールが表示されます。

3. [OK] をクリックし、[新規パラメータ] ダイアログボックスを閉じます。

   レポートが追加され、関連するパラメータがツリーコントロールにバインドされます。

ツリーコントロールの連鎖使用上の注意

HTML ページでのオブジェクトの配置 - 配置タブの使用

[配置] タブの各オプションを使用して、選択した複数のオブジェクトを、特定のオブジェクトの位置を基準に位置揃えすることができます。下図のように、[配置] タブには、[配置]、[関係]、[テキスト配列]、[レスポンシブデザイン] グループがあります。

HTML ページでのオブジェクトの位置揃え - 配置グループの使用

[配置] グループには、[左揃え]、[右揃え]、[上揃え]、[下揃え]、[左右中央揃え]、[上下中央揃え]、[均等幅]、[均等な高さ]、[均等なサイズ]、[グリッドの切り替え]、[ドラッグアンドドロップ] コマンドがあります。

ドラッグアンドドロップ操作で親子関係を指定するには

手順
1. 2 つのオブジェクトが配置されている HTML ファイルを開きます。
2. [配置] タブをクリックします。
3. [ドラッグアンドドロップ] コマンドをクリックして、このコマンドをオンにします。

   別の方法として、HTML キャンバスのコンテキストメニューから [ドラッグアンドドロップの切り替え] を選択することもできます。

   [配置] タブの [ドラッグアンドドロップ] コマンドがハイライト表示 (選択済み) になります。

4. 子オブジェクトをクリックし、親オブジェクトの方向にドラッグします。

   マウスポインタの下側に小さい四角形が表示されますが、子オブジェクト自体は移動しません。

5. マウスポインタを親オブジェクトに移動してドロップします。

   これで、親子関係が作成されます。

6. デフォルトのドラッグアンドドロップ操作に戻すには、[ドラッグアンドドロップ] コマンドをクリックして、このコマンドをオフにします。

   注意：[ドラッグアンドドロップ] コマンドがオンの場合、[タブ]、[アコーディオン]、[ウィンドウ] コンポーネントを使用する際に、タブやページコンテナの順序変更ができなくなります。

HTML ページでのオブジェクト間の関係設定 - 関係グループの使用

[関係] グループには、[左上合わせ]、[右上合わせ]、[右下合わせ]、[左下合わせ]、[関係の解除]、[関係の表示] コマンドがあります。[左上合わせ]、[右上合わせ]、[右下合わせ] コマンドは、HTML ページおよびガイド付きレポートページでのみ使用できます。

HTML ページでのテキストの位置揃え - テキスト配列グループ

[テキスト配列] グループには、[左揃え]、[中央揃え]、[右揃え]、[両端揃え] コマンドがあります。これらのコマンドは、HTML ページ内のテキストの位置を揃えます。

HTML ページのレスポンシブデザインの有効化 - レスポンシブデザイングループの使用

[レスポンシブデザイン] グループには、[選択の切り替え]、[レイアウトの更新] コマンドがあります。これらのコマンドは、[レスポンシブデザイン] プロパティを [はい] に設定した場合に有効になります。

HTML ページプロパティの変更 - ユーティリティタブの使用

[ユーティリティ] タブを使用して、HTML ページのプロパティを変更することができます。たとえば、作成した HTML ページを特定のブラウザでテストしたい場合があります。デフォルトのブラウザ指定は、HTML ページのプロパティと見なされます。別のブラウザでページを実行するには、[ユーティリティ] タブを開き、[プレビュー] コマンドグループから特定のブラウザを選択します。

下図は、[ユーティリティ] タブを示しています。

HTML ページでのオブジェクト間の連鎖設定 - 連鎖グループの使用

[連鎖] グループを使用して、連鎖オプションを追加または削除することができます。下図は、[連鎖] グループを示しています。

次のコマンドがあります。

HTML ページでの Active テクノロジレポートAnalytic Document の同期 - Active ReportAnalytig Document グループの使用

Active ReportAnalytic Document は、[Active Report][Analytic Document] グループを使用して同期することができます。このグループは、HTML ページおよびガイド付きレポートページでのみ使用できます。下図は、[Active Report][Analytic Document] グループを示しています。

次のコマンドがあります。

HTML ページのテンプレートのロック解除 - テンプレートグループの使用

テンプレートのロックを解除し、コントロール、テキスト、ボタンの追加を可能にします。このグループは、HTML ページおよびガイド付きレポートページでのみ使用できます。下図は、[テンプレート] グループを示しています。

次のコマンドがあります。

HTML キャンバスでのその他グループの使用

[その他] グループには、[表示の切り替え]、[タブオーダー]、[コンテナの削除]、[すべてリフレッシュ] コマンドがあります。このグループは、HTML ページおよびガイド付きレポートページでのみ使用できます。下図は、[その他] グループを示しています。

次のコマンドがあります。

非表示オブジェクトの表示と非表示を切り替えるには

手順
1. HTML キャンバスにオブジェクトを挿入します。
2. 作成したオブジェクトを選択します (選択されていない場合)。
3. [プロパティ] パネルで [表示] プロパティを [非表示] に変更します。

   キャンバス上でオブジェクトが非表示になります。

4. [ユーティリティ] タブの [その他] グループで、[表示の切り替え] コマンドをクリックします。

   非表示オブジェクトがキャンバス上で表示されます。オブジェクトを再び非表示にするには、[表示の切り替え] コマンドをクリックします。このオブジェクトは実行時に非表示になります。

HTML 出力のプレビュー表示 - プレビューグループの使用

下図の [プレビュー] グループを使用して、HTML 出力を Chrome、Firefox、Edge ブラウザでプレビュー表示し、作成したコンテンツが正しく表示されることを確認することができます。

[ランタイムプレビュー] オプションは、レスポンシブ HTML ページでのみ使用できます。このオプションではデフォルトブラウザが使用され、サンプルデータを使用して実行時の HTML レイアウトがプレビュー表示されます。ページに大規模なデータが表示される場合は、ページを実行するより高速になります。

注意：別の方法として、HTML キャンバスを右クリックして [プレビュー] を選択し、ブラウザのいずれかを選択するか、[ランタイムプレビュー] を選択することもできます。

次のブラウザでプレビュー表示することができます。

HTML ページでの各種パネルの表示 - 表示グループの使用

[表示] グループでは、HTML ページまたはガイド付きレポートページに関連するパネルの表示と非表示を切り替えることができます。このグループは、HTML キャンバスの [ユーティリティ] タブに表示されるほか、[埋め込み JavaScript] および [埋め込み CSS] 表示タブをクリックした際の [テキストエディタ] タブにも表示されます。下図は、[表示] グループを示しています。

次のコマンドがあります。