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

リリースバージョン: Australia

更新日 2026年03月12日

所要時間：3分

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

始める前に

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

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

表 : 1. この手順で使用されるコンポーネント
コンポーネント	ドキュメントリンク
カルーセル	使用上のガイドライン UIB セットアップ

手順

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

カルーセルのタイトルには、バッジ数とそれに続くカルーセルアイテムの数が必要です。

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

始める前に

手順

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