UI ビルダー でカウンターを作成する

定型テキストコンポーネントと 2 つのボタンをエクスペリエンスページに追加して、シンプルなカウンターを作成します。クライアントステータスパラメーターを使用して機能を実装し、ボタンが選択されたときにカウントが増減するようにします。

始める前に

必要なロール：ui_builder_admin

手順

1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、または [作成] > [エクスペリエンス] を選択してエクスペリエンスを作成します。
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. 「UI ビルダー でのページの作成」の手順を実行するか、またはページを開きます。
4. [本文] の下のコンテンツツリーで [+ コンテンツを追加] を選択して、列レイアウトを追加します。
5. [レイアウト] タブで、[2 列] を選択します。
6. コンテンツツリーの [列 1] の下の [+ コンテンツを追加] を選択して、最初のコンポーネントを追加します。

   

   1. [検索] に sty と入力します。
   2. [定型テキスト] コンポーネントを選択します。

      

   3. 構成パネルで、[なし - コンポーネントを手動構成します (None - Configure the component manually)] を選択します。

      

7. [列 2] のコンテンツツリーで [+ コンテンツを追加] を選択して、2 番目のコンポーネントを追加します。
   1. [検索] に button と入力します。
   2. [象徴的なボタン] を選択します。

      

   3. 構成パネルで、[なし - コンポーネントを手動構成します (None - Configure the component manually)] を選択します。
   4. [アイコン] で、[四角い塗りつぶしの上向き矢印 (Square Arrow Up Fill)] を選択します。

      

8. コンテンツツリーで [象徴的なボタン 1] をポイントし、[メニュー] アイコンを選択し、[後に追加] を選択して、3 番目のコンポーネントを追加します。

   

   1. 前の手順で行ったように、[検索] に button と入力します。
   2. 前の手順で行ったように、[象徴的なボタン] を選択します。
   3. 前の手順と同じように、構成パネルで、[なし - コンポーネントを手動構成します (None - Configure the component manually)] を選択します。
   4. [アイコン] で、今度は [四角い塗りつぶしの下向き矢印 (Square Arrow Down Fill)] という名前の別のアイコンを選択します。

      

9. [保存] を選択します。
   定型テキストコンポーネントと 2 つの象徴的なボタンコンポーネントが保存され、ステージに表示されます。

   

10. クライアントステータスパラメーターを追加するには、[データおよびスクリプト (Data and scripts)] に移動し、[クライアントステータスパラメーター] をポイントし、[新しく追加 (+)] アイコンを選択します。
    1. count と入力して [名前] を変更します。
    2. [タイプ] を [数値] に変更します。
    3. 数値 0 を入力して [初期値] を設定します。
    4. [X] アイコンを選択してウィンドウを閉じます。

       

11. 定型テキストコンポーネントをクライアントステータスパラメーターにバインドします。
    1. ステージ上の定型テキストコンポーネントを選択します。
    2. 構成パネルで、[テキスト] フィールドをポイントし、[データのバインドまたはスクリプトの使用 (Bind data or use scripts)] アイコンを選択します。

       

    3. [データタイプ] タブで [クライアントステータス] を選択します。
    4. [カウント] ピルをダブルクリックします。
    5. [適用] を選択します。

       

       [テキスト] フィールドが [カウント] に変わります。

12. 次に、ボタンを構成して数を増減させます。
    1. ステージの一番上のボタンを選択します。
    2. 構成パネルで [イベント] タブを選択します。
    3. [+ イベントハンドラーを追加] を選択します。
    4. [ページレベルのイベントハンドラー] で、[クライアントステータスパラメーターを更新] を選択します。
    5. [クライアントステータスパラメーター名] で [カウント] を選択します。
    6. [新しい値] フィールドをポイントし、[データのバインドまたはスクリプトの使用 (Bind data or use scripts)] アイコンを選択します。

       

    7. [データタイプ] タブで [クライアントステータス] を選択します。
    8. [カウント] ピルをダブルクリックします。
    9. [計算式] タブを選択します。
    10. リストで [計算] を選択します。
    11. [ADD] ピルをダブルクリックします。
    12. 上部の右側のピルで、テキストを削除し、1 と入力します。

        

    13. [適用] を選択します。
    14. [追加] を選択します。
13. ここで、最初のボタンで使用したのと同じプロセスに従って 2 番目のボタンを構成しますが、ADD ピルではなく SUB ピルを選択します。
    1. ステージの一番下のボタンを選択します。
    2. 構成パネルで [イベント] タブを選択します。
    3. [+ イベントハンドラーを追加] を選択します。
    4. [ページレベルのイベントハンドラー] で、[クライアントステータスパラメーターを更新] を選択します。
    5. [クライアントステータスパラメーター名] で [カウント] を選択します。
    6. [新しい値] フィールドをポイントし、[データのバインドまたはスクリプトの使用 (Bind data or use scripts)] アイコンを選択します。
    7. [データタイプ] タブで [クライアントステータス] を選択します。
    8. [カウント] ピルをダブルクリックします。
    9. [計算式] タブを選択します。
    10. リストで [計算] を選択します。
    11. [SUB] ピルをダブルクリックします。
    12. 上部の右側のピルで、テキストを削除し、1 と入力します。
    13. [適用] を選択します。
    14. [追加] を選択します。
14. [プレビュー] を選択してカウンターをテストします。
15. [上向き矢印] ボタンを選択するとカウントが増え、[下向き矢印] ボタンを選択するとカウントが減少します。

    

タスクの結果

カウントを 1 つ増やすボタンコンポーネントと、カウントを 1 つ減らす別のボタンコンポーネントを追加しました。カウントの増減を表示する、定型テキストコンポーネントを追加しました。

ボタンコンポーネントに関する詳細な技術情報については、「ボタンの概要と API」を参照してください。

定型テキストコンポーネントに関する詳細な技術情報については、「定型テキストの概要」を参照してください。