カルーセルバッジを追加アイテム数

カルーセル内のアイテムがデータリソースからデータをプルするリピーターによって制御される、動的カルーセルアイテム数 (バッジに表示される) を作成する方法。

始める前に

必要なロール：workspace_admin または ui_builder_admin

この手順では、 UI ビルダー コンポーネントを使用して、動的でインタラクティブなレイアウトを作成します。コンポーネントの構成方法の詳細については、以下を参照してください。

• コンポーネントの追加と構成
• UI ビルダーのクイックビット:コンポーネント構成のナビゲーション

表 : 1. この手順で使用されるコンポーネント

コンポーネント	ドキュメントリンク
カルーセル	使用上のガイドライン UIB セットアップ

手順

1. データリソースからデータをプルするリピーターを使用するようにカルーセルを設定します。
2. バッジのプロパティを決定するオブジェクトを作成するには、ページの [クライアントステータスパラメーター] ダイアログを開きます。
   
   1. [名前] を badgeConfigState に置き換え、[タイプ] ドロップダウンから [JSON] を選択します。
      
   2. [ 初期値 ] フィールド ボックスにカーソルを合わせ、[ 編集] を選択します。
   3. ドロップダウンから JSON タイプの オブジェクト を選択します。
   4. [ プロパティを追加 ] を選択し、バッジの 色、 ラベル、 バリアント のプロパティを追加します。
      
   5. [ 適用] を選択して、[ クライアントステータスパラメーターの編集] ダイアログに戻ります。
      
   6. ダイアログを閉じます。
      後で、データリソースのロード後にスクリプトを使用してこのオブジェクトのプロパティを更新します。
3. 作成したオブジェクトにバッジ構成を設定するには、 コンテンツ ツリーでカル ーセル コンポーネントを選択します。
   1. カルーセルコンポーネントの [構成 ] タブで、[ バッジ構成 ] プロパティにカーソルを合わせ、[ データをバインドするかスクリプトを使用 ] アイコンを選択します。
      
   2. [ バッジ構成にデータをバインド ] ダイアログで、データタイプ [クライアントステータス] を選択します。
   3. [badgeConfigState] (3) を選択し、それをデータ出力領域に追加するには、上矢印アイコンを選択します。
      
   4. [Apply (適用)] を選択します。
      カルーセルバッジ構成に badgeConfigState パラメーターを追加する必要があります。
   
4. [新しいクライアントスクリプトの編集を追加] を選択して、[クライアントスクリプトの編集] ダイアログを開きます。
   
5. badgeClientState の「label」パラメーター値をカルーセル内のアイテム数に更新するクライアントスクリプトを作成するには、 api.setState('badgeConfigState', {...api.state.badgeConfigState, "label": 'count: ${api.data.look_up_multiple_records_1.results.length}'});
   
6. データリソースが更新されるたびにクライアントスクリプトがトリガーされるように、データリソースにイベントを追加します。
   1. 左下で、データリソースを選択します 複数のレコード 1 を検索 > [Events (イベント)] タブ.
      
   2. [ イベントマッピングを追加] を選択し、[ データのフェッチに成功] を選択して、[ 続行] を選択します。
   3. [ ハンドラーの追加] を選択し、下にスクロールして、作成した新しいクライアントスクリプトを選択して、[ 続行] を選択します。
      
   4. [トリガーのタイミング] は [常時] に設定する必要があります。
   5. [Continue (続行)] を選択します。
   6. [ 追加 ] を選択し、[ 編集] ダイアログを閉じます。
7. 右上隅にある 保存 > [プレビュー] ドロップダウン矢印を選択します > URL パスを開く.
   
   カルーセルの タイトル には、バッジ 数 とそれに続くカルーセルアイテムの数が必要です。