複数のソースからデータをフェッチする

1 つのコンポーネントで使用するさまざまなソースからデータをフェッチする方法について説明します。

始める前に

必要なロール：ui_builder_admin

このタスクについて

カードベースコンテナコンポーネントをリピーターに配置し、複数テーブルデータ構成を使用して、過去 2 年間に作成されたすべてのアクティブなインシデントと問題を表示します。

手順

1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、または [作成] > [エクスペリエンス] を選択してエクスペリエンスを作成します。
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. ページを最初から作成します。
   ページを作成する方法の詳細については、「UI ビルダーでのページの作成」を参照してください。
4. 複数テーブルのデータリソースを追加します。
   1. データシェルフで、[+ データリソースを追加 (Add data resource)] を選択します。
      
   2. [検索] に multi-table と入力します。
   3. [複数テーブルデータ] を選択します。
      
   4. [追加] を選択します。
5. 最初のデータソースを構成します。
   1. [データソース] で、[+ 追加] を選択します。
      
   2. [テーブル] に incident と入力し、[インシデント] テーブルを選択します。
   3. [ソートフィールド] に number と入力し、[番号] を選択します。
   4. [名前] に incident と入力します。
   5. [リターンフィールド] で、[番号]、[ステータス]、[説明]、および [アクティブ] を追加します。
      
   6. [条件を編集 (Edit conditions)] を選択します。
   7. 条件 [Active] [is] [true] を作成します。
   8. [and] を選択します。
   9. 条件 [Created] [on] [Last 2 years] を作成します。
      
   10. [適用] を選択します。
   11. [適用] を選択します。
6. 2 番目のデータソースを構成します。
   1. [データソース] で、[+ 追加] を選択します。
   2. [テーブル] に problem と入力し、[問題] テーブルを選択します。
   3. [ソートフィールド] に number と入力し、[番号] を選択します。
   4. [名前] に Problem と入力します。
   5. [リターンフィールド] で、[番号]、[ステータス]、[説明]、および [アクティブ] を追加します。
      複数テーブルのデータリソースを作成する場合、各データソースには同じリターンフィールドを同じ順序で指定する必要があります。これにより、ページに表示されるデータの一貫性と正確性を確保できます。

      

   6. [条件を編集 (Edit conditions)] を選択します。
   7. 条件 [Active] [is] [true] を作成します。
   8. [and] を選択します。
   9. 条件 [Created] [on] [Last 2 years] を作成します。
   10. [適用] を選択します。
   11. [適用] を選択します。
   12. [X] を選択して [複数テーブルデータを編集 (Edit Multi-table data)] ポップアップを閉じます。
7. [保存] を選択します。
8. 見出しコンポーネントを追加します。
   1. コンテンツツリーで [本文] の下にある [+ コンテンツを追加] を選択します。
   2. [検索] に heading と入力します。
   3. [見出し] コンポーネントを選択します。
   4. 構成パネルの [構成] タブで、[なし - コンポーネントを手動構成します (None - Configure the component manually)] を選択します。
   5. [ラベル] で、デフォルトのテキストを削除し、Active incidents and problems created in last two years と入力します。
      
   6. [保存] を選択します。
9. コンテナを追加します。
   1. コンテンツツリーで [見出し 1] の下にある [+ コンテンツを追加] を選択します。
   2. [レイアウト] タブの [詳細] セクションで、[Flexbox] を選択します。
      
   3. 構成パネルの [構成] タブで、[なし - コンポーネントを手動構成します (None - Configure the component manually)] を選択します。
   4. [サイジング] に 300 と入力して [幅] を設定します。
      
   5. [保存] を選択します。
10. リピーターコンポーネントを追加します。
    1. コンテンツツリーで、[コンテナ 1] の下の [+ コンテンツを追加] を選択します。
    2. [検索] に repeater と入力します。
    3. [リピーター] コンポーネントを選択します。
    4. 構成パネルの [構成] タブで、[なし - コンポーネントを手動構成します (None - Configure the component manually)] を選択します。
    5. [保存] を選択します。
    6. 構成パネルの [構成] タブで、[データアレイ] フィールドにカーソルを合わせ、[データをバインド] アイコンを選択します。
       
    7. [データタイプ] で、[データリソース] を選択します。
    8. [複数テーブルデータ 1] を選択します。
    9. 選択 出力 > データ > GlideMultiDatasource_Query > getMultiDatasourceData.
    10. [アイテム] ピルをダブルクリック (またはキーボードショートカットを使用) します。
        
        上部セクションが正確であることを確認してください。

        

    11. [適用] を選択します。
    12. [保存] を選択します。
11. リピーター内にカードベースコンテナコンポーネントを追加します。
    1. コンテンツツリーで、[リピーター 1] の下の [+ コンテンツを追加] を選択します。
    2. [カードベースコンテナ] コンポーネントを見つけて選択します。
    3. 構成パネルの [構成] タブで、[なし - コンポーネントを手動構成します (None - Configure the component manually)] を選択します。
    4. [スタイル] タブを選択します。
    5. カードの周囲に少しスペースを追加するには、[間隔] に移動し、[余白] を選択してから、[M] (中) を選択します。
       
    6. [保存] を選択します。
12. カードベースコンテナ内に見出しコンポーネントを追加します。
    1. コンテンツツリーで、[カードベースコンテナ 1] の下の [+ コンテンツを追加] を選択します。
    2. [見出し] コンポーネントを見つけて選択します。
    3. 構成パネルの [構成] タブで、[なし - コンポーネントを手動構成します (None - Configure the component manually)] を選択します。
    4. 構成パネルの [構成] タブで、[ラベル] のデフォルトのテキストを削除します。
    5. [ラベル] フィールドをポイントし、[データをバインド] アイコンを選択します。
    6. [データタイプ] で [リピーター] を選択します。
    7. 選択 値 > フィールド.
    8. 一番上のピルを選択し、最後の列でインシデントまたは問題番号の [displayValue] を確認します。
    9. インシデントまたは問題番号が表示されている [displayValue] ピルをダブルクリック (またはキーボードショートカットを使用) します。
       
       上部セクションが正確であることを確認してください。

       

    10. [適用] を選択します。
    11. [構成] タブで、[下のマージンを非表示] オプションを選択します。
        
    12. [保存] を選択します。
13. インシデントまたは問題の説明を表示する最初の定型テキストコンポーネントを追加します。
    1. コンテンツツリーで、[見出し 2] をポイントし、メニュー (縦に並んだ 3 つのドット) アイコンを選択して、[後に追加] を選択します。
       
    2. [定型テキスト] コンポーネントを見つけて選択します。
    3. 構成パネルの [構成] タブで、[なし - コンポーネントを手動構成します (None - Configure the component manually)] を選択します。
    4. 構成パネルの [構成] タブで、[テキスト] のデフォルトのテキストを削除します。
    5. [テキスト] フィールドをポイントし、[データをバインド] アイコンを選択します。
    6. [データタイプ] で [リピーター] を選択します。
    7. 選択 値 > フィールド.
    8. リストの 3 番目のピルを選択し、最後の列で [displayValue] に情報が含まれていないことを確認します。
    9. 値のない [displayValue] ピルをダブルクリック (またはキーボードショートカットを使用) します。
       
       上部セクションが正確であることを確認してください。

       

    10. [適用] を選択します。
    11. テキストサイズを小さくするには、[構成]タブに移動し、[HTML タグ]を [パラグラフ] に変更します。
    12. [保存] を選択します。
14. インシデントまたは問題のステータスを表示する 2 番目の定型テキストコンポーネントを追加します。
    1. コンテンツツリーで、[定型テキスト 1] をポイントし、メニュー (縦 3 つのドット) アイコンを選択して、[後に追加] を選択します。
    2. [定型テキスト] コンポーネントを見つけて選択します。
    3. 構成パネルの [構成] タブで、[なし - コンポーネントを手動構成します (None - Configure the component manually)] を選択します。
    4. 構成パネルの [構成] タブで、[テキスト] のデフォルトのテキストを削除します。
    5. [テキスト] フィールドをポイントし、[データをバインド] アイコンを選択します。
    6. [データタイプ] で [リピーター] を選択します。
    7. 選択 値 > フィールド.
    8. リストの 2 番目のピルを選択し、最後の列で、[displayValue] に [解決済み] や [対応中] などのステータスが含まれていることを確認します。
    9. ステータス値のある [displayValue] ピルをダブルクリック (またはキーボードショートカットを使用) します。
       
       上部セクションが正確であることを確認してください。

       

    10. [適用] を選択します。
    11. テキストサイズを小さくするには、[構成]タブに移動し、[HTML タグ]を [パラグラフ] に変更します。
    12. [保存] を選択します。
15. [プレビュー] を選択します。
    ページ見出しが上部に表示されます。各カードには、インシデントまたは問題番号が記載された見出しが含まれます。カードには、インシデントまたは問題の説明 (ある場合) とステータスも表示されます。インシデントテーブルと問題テーブルの 2 つのソースからデータが正常にプルされています。

    

16. [X] を選択してプレビューオーバーレイを閉じます。