クライアントステータスパラメーターを使用したコンポーネントのステータスの更新

UI ビルダー でクライアントステータスパラメーター値を作成して、コンポーネントにバインドします。コンポーネントにカスタム値を追加することで、これらのコンポーネントをスクリプトによって自動的に更新できます。

始める前に

必要なロール：ui_builder_admin

このタスクについて

2 つのコンポーネントをページに追加し、クライアントステータスパラメーターとスクリプトを使用して接続することができます。まず、クライアントステータスパラメーターを作成し、次にクライアントステータスパラメーターをラベルなどのコンポーネントの 1 つにバインドします。次に、クライアントスクリプトを作成し、それをイベントハンドラーを使用してボタンなどの 2 番目のコンポーネントにバインドします。イベントハンドラーを作成するときは、それにクライアントステータスパラメーターの値をバインドして、2 つのコンポーネントを接続します。1 つのコンポーネントをクリックすると、他のコンポーネントのステータスが変更されます。クライアントステータスは、スクリプトによって自動的に更新されるカスタム値をコンポーネントに追加できるので便利です。クライアントステータスは、ページに固有の情報を格納するバケットと考えてください。

たとえば、ボタンとラベルコンポーネントをページに追加できます。ボタンは、テキストの色を変更するなど、ラベルの値を変更します。

手順

1. 次のように移動する。 All (すべて) > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、選択してエクスペリエンスを作成します 作成/挿入 > エクスペリエンス.
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. ページを作成するか、開きます。
   詳細については、「UI ビルダー ページとページのバリアントを管理」を参照してください。
4. 2 つのコンポーネントをページに追加します。
   詳細については、「コンポーネントの追加と構成」を参照してください。
5. 関連付けられている値があるクライアントステータスパラメーターを定義するには、左下のパネルで [クライアントステータスパラメーター] を選択します。
   
6. [+ 追加] を選択します。
   
7. クライアントステータスの名前、タイプ、および初期値を入力します。

   クライアントステータスは、文字列、数値、ブール、および JSON をサポートします。たとえば、名前を「dynamic_label_value」、タイプを「String」、初期値を「Initial Value」として入力できます。

   
8. クライアントステータスパラメーターの値をコンポーネントにバインドします。
   1. クライアントステータスパラメーターのバインド先にするコンポーネントを選択します。
   2. 構成パネルを開き、[構成] タブを選択します。
   3. データをバインドするフィールドをポイントし、[動的なデータバインディング] アイコン () を選択します。
      
      データバインディングモーダルが表示されます。

      

   4. [データタイプ] タブで [クライアントステータス] を選択します。
   5. コンポーネントにバインドするクライアントスクリプトをダブルクリックします。
      
   6. [適用] を選択します。
      
9. [保存] を選択します。
10. クライアント状況値を 1 つのコンポーネントにバインドし、2 番目のコンポーネントを最初のコンポーネントに接続するスクリプトを作成します。
    1. 左ペインで、[クライアントスクリプト] の横にある [+] アイコンを選択します。
       
    2. タスクを説明するスクリプト名を入力します。
       たとえば、スクリプトで実行する内容を示す「Update Label Value」と入力します。
    3. Now コードエディターで、スクリプトを追加します。

       呼び出す API と、ステータスや値などの API のパラメーターを選択するとします。たとえば、api.setState を呼び出して、最初のパラメーターとして dynamic_label_value を、2 番目のパラメーターとして NEW VALUE を含めることができます。

       
11. 作成した新しいクライアントスクリプトを呼び出すイベントハンドラーを、2 番目のコンポーネントに追加します。
    1. スクリプトのバインド先にする、ページ上のコンポーネントを選択します。
    2. [イベント] タブを選択します。
    3. [+ 新しいイベントハンドラーを追加] を選択します。
    4. イベントハンドラーの [スクリプト] セクションで、作成したスクリプトを選択し、[+] を選択して、コンポーネントのイベントハンドラーとして追加します。
       
12. [保存] を選択します。
13. ページをプレビューし、コンポーネントが接続されていることをテストするには、[プレビュー] を選択します。
    1 つのコンポーネントを選択すると、2 番目のコンポーネントのステータスが変更されるはずです。たとえば、[ボタン] コンポーネントを選択すると、[ラベル値] コンポーネントのテキストが「初期値」から「新規の値」に変化します。

タスクの結果

この手順で実行した事柄：

• ページに 2 つのコンポーネントを追加しました。
• 初期値を持つクライアントステータスパラメーターを定義しました。
• クライアントステータスパラメーターを最初のコンポーネントにバインドしました。
• クライアントステータスパラメーターによって定義された値を更新するクライアントスクリプトを作成しました。
• 2 番目のコンポーネントに、作成した新しいクライアントスクリプトを呼び出すイベントハンドラーを作成しました。
• 2 番目のコンポーネントを選択し、最初のコンポーネントのステータスが変更されるようにしました。